Skip to content

Commit 62abdd2

Browse files
JonEckenrodeJonEckenrode
authored
Merge pull request #47 from android/add-mediaquery-sample
Add MediaQuery sample
2 parents 19f0d04 + 6c1ed69 commit 62abdd2

40 files changed

Lines changed: 1469 additions & 0 deletions

‎MediaQuery/.gitignore‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
*.iml
2+
.gradle
3+
/local.properties
4+
/.idea/caches
5+
/.idea/libraries
6+
/.idea/modules.xml
7+
/.idea/workspace.xml
8+
/.idea/navEditor.xml
9+
/.idea/assetWizardSettings.xml
10+
.DS_Store
11+
/build
12+
/captures
13+
.externalNativeBuild
14+
.cxx
15+
local.properties

‎MediaQuery/.google/packaging.yaml‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
title: "Adaptive layouts using MediaQuery in Jetpack Compose"
2+
description: "A sample demonstrating how to use the MediaQuery API in Jetpack Compose to build context-aware, adaptive apps that react to hardware features, peripherals, and physical screen posture."
3+
status: PUBLISHED
4+
technologies: [Android, JetpackCompose]
5+
categories:
6+
- JetpackComposeLayouts
7+
languages: [Kotlin]
8+
solutions:
9+
- Mobile
10+
- JetpackNavigation
11+
github: android/adaptive-apps-samples
12+
level: INTERMEDIATE
13+
apiRefs:
14+
- android:androidx.compose.Composable
15+
- android:androidx.compose.ui.UiMediaScope
16+
license: apache2

‎MediaQuery/README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# MediaQuery sample
2+
3+
Build responsive and adaptive UIs with Compose's experimental `mediaQuery` API.
4+
5+
The sample demonstrates real-time layout adaptation utilizing the experimental `mediaQuery` API in Jetpack Compose. Adapts layout elements based on screen size, device fold posture, precision of pointer devices, physical viewing distance, and active hardware sensors.
6+
7+
## Features demonstrated
8+
- **Fold posture detection:** Adapts layout when a foldable device is folded into `Tabletop` posture.
9+
- **Hardware sensor awareness:** Detects available cameras/microphones.
10+
- **Peripheral detection:** Displays warnings if no physical keyboard is connected.
11+
- **Pointer precision adaptive targets:** Scales clickable tap targets for coarse touch inputs.
12+
- **Adaptive Viewing distance:** Automatically enlarges typography for medium/far viewing ranges.
13+
14+
## Get started
15+
To explore this sample:
16+
1. Clone this repository.
17+
2. Navigate to the `MediaQuery` directory.
18+
3. Open the project in your preferred IDE or build it using the command line.
19+
20+
## License
21+
This project is licensed under the Apache License, Version 2.0.
22+
23+
See the [LICENSE](../LICENSE.md) file for details.

‎MediaQuery/app/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/build

‎MediaQuery/app/build.gradle.kts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
plugins {
2+
alias(libs.plugins.android.application)
3+
alias(libs.plugins.compose.compiler)
4+
}
5+
6+
android {
7+
namespace = "com.example.mediaquerysample"
8+
compileSdk = 37
9+
10+
defaultConfig {
11+
applicationId = "com.example.mediaquerysample"
12+
minSdk = 26
13+
targetSdk = 37
14+
versionCode = 1
15+
versionName = "1.0"
16+
17+
testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
18+
vectorDrawables {
19+
useSupportLibrary = true
20+
}
21+
}
22+
23+
buildTypes {
24+
release {
25+
isMinifyEnabled = false
26+
proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro")
27+
}
28+
}
29+
compileOptions {
30+
sourceCompatibility = JavaVersion.VERSION_17
31+
targetCompatibility = JavaVersion.VERSION_17
32+
}
33+
buildFeatures {
34+
compose = true
35+
}
36+
packaging {
37+
resources {
38+
excludes += "/META-INF/{AL2.0,LGPL2.1}"
39+
}
40+
}
41+
}
42+
43+
kotlin {
44+
jvmToolchain(17)
45+
}
46+
47+
dependencies {
48+
val composeBom = platform(libs.androidx.compose.bom)
49+
implementation(composeBom)
50+
androidTestImplementation(composeBom)
51+
52+
// Core Android dependencies
53+
implementation(libs.androidx.core.ktx)
54+
implementation(libs.androidx.lifecycle.runtime.ktx)
55+
implementation(libs.androidx.activity.compose)
56+
57+
// Compose
58+
implementation(libs.androidx.compose.ui)
59+
implementation(libs.androidx.compose.ui.tooling.preview)
60+
implementation(libs.androidx.compose.material3)
61+
implementation(libs.androidx.compose.foundation.layout)
62+
63+
// Tooling
64+
debugImplementation(libs.androidx.compose.ui.tooling)
65+
// Instrumented tests
66+
androidTestImplementation(libs.androidx.compose.ui.test.junit4)
67+
debugImplementation(libs.androidx.compose.ui.test.manifest)
68+
69+
testImplementation(libs.junit)
70+
androidTestImplementation(libs.androidx.test.ext.junit)
71+
androidTestImplementation(libs.androidx.test.espresso.core)
72+
}
73+
74+
tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile>().configureEach {
75+
compilerOptions {
76+
freeCompilerArgs.addAll(
77+
"-opt-in=androidx.compose.ui.ExperimentalComposeUiApi",
78+
"-opt-in=androidx.compose.ui.ExperimentalMediaQueryApi"
79+
)
80+
}
81+
}

‎MediaQuery/app/proguard-rules.pro‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
# Add project specific ProGuard rules here.
2+
# You can control the set of applied configuration files using the
3+
# proguardFiles setting in build.gradle.
4+
#
5+
# For more details, see
6+
# http://developer.android.com/guide/developing/tools/proguard.html
7+
8+
# If your project uses WebView with JS, uncomment the following
9+
# and specify the fully qualified class name to the JavaScript interface
10+
# class:
11+
#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12+
# public *;
13+
#}
14+
15+
# Uncomment this to preserve the line number information for
16+
# debugging stack traces.
17+
#-keepattributes SourceFile,LineNumberTable
18+
19+
# If you keep the line number information, uncomment this to
20+
# hide the original source file name.
21+
#-renamesourcefileattribute SourceFile

‎MediaQuery/app/src/androidTest/java/com/example/mediaquerysample/MediaQuerySampleTest.kt‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
package com.example.mediaquerysample
2+
3+
import androidx.activity.ComponentActivity
4+
import androidx.compose.ui.ComposeUiFlags
5+
import androidx.compose.ui.ExperimentalComposeUiApi
6+
import androidx.compose.ui.test.junit4.v2.createAndroidComposeRule
7+
import androidx.compose.ui.test.onNodeWithText
8+
import androidx.compose.ui.test.performClick
9+
import org.junit.Before
10+
import org.junit.Rule
11+
import org.junit.Test
12+
13+
@OptIn(ExperimentalComposeUiApi::class)
14+
class MediaQuerySampleTest {
15+
16+
@get:Rule val composeTestRule = createAndroidComposeRule<ComponentActivity>()
17+
18+
@Before
19+
fun setup() {
20+
ComposeUiFlags.isMediaQueryIntegrationEnabled = true
21+
composeTestRule.setContent { MediaQuerySample() }
22+
}
23+
24+
@Test
25+
fun mediaQuerySample_rendersSuccessfully() {
26+
composeTestRule.onNodeWithText("MediaQuery sample").assertExists()
27+
composeTestRule.onNodeWithText("Window info and orientation").assertExists()
28+
composeTestRule.onNodeWithText("Keyboard kind").assertExists()
29+
composeTestRule.onNodeWithText("Touch target sizing").assertExists()
30+
composeTestRule.onNodeWithText("Hardware sensors").assertExists()
31+
composeTestRule.onNodeWithText("Viewing distance").assertExists()
32+
}
33+
}

‎MediaQuery/app/src/main/AndroidManifest.xml‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
3+
xmlns:tools="http://schemas.android.com/tools" >
4+
5+
<application
6+
android:allowBackup="true"
7+
android:dataExtractionRules="@xml/data_extraction_rules"
8+
android:fullBackupContent="@xml/backup_rules"
9+
android:icon="@mipmap/ic_launcher"
10+
android:label="@string/app_name"
11+
android:roundIcon="@mipmap/ic_launcher_round"
12+
android:supportsRtl="true"
13+
android:theme="@style/Theme.MediaQuerySample"
14+
tools:targetApi="31" >
15+
<activity
16+
android:name=".MainActivity"
17+
android:exported="true"
18+
android:label="@string/app_name"
19+
android:theme="@style/Theme.MediaQuerySample" >
20+
<intent-filter>
21+
<action android:name="android.intent.action.MAIN" />
22+
23+
<category android:name="android.intent.category.LAUNCHER" />
24+
</intent-filter>
25+
</activity>
26+
</application>
27+
28+
</manifest>

‎MediaQuery/app/src/main/java/com/example/mediaquerysample/MainActivity.kt‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
package com.example.mediaquerysample
2+
3+
import android.os.Bundle
4+
import androidx.activity.ComponentActivity
5+
import androidx.activity.compose.setContent
6+
import androidx.activity.enableEdgeToEdge
7+
import androidx.compose.foundation.layout.fillMaxSize
8+
import androidx.compose.material3.MaterialTheme
9+
import androidx.compose.material3.Surface
10+
import androidx.compose.ui.ExperimentalComposeUiApi
11+
import androidx.compose.ui.Modifier
12+
import androidx.compose.ui.ComposeUiFlags
13+
import com.example.mediaquerysample.ui.theme.MyApplicationTheme
14+
15+
class MainActivity : ComponentActivity() {
16+
@OptIn(ExperimentalComposeUiApi::class)
17+
override fun onCreate(savedInstanceState: Bundle?) {
18+
super.onCreate(savedInstanceState)
19+
ComposeUiFlags.isMediaQueryIntegrationEnabled = true
20+
enableEdgeToEdge()
21+
setContent {
22+
MyApplicationTheme {
23+
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
24+
MediaQuerySample()
25+
}
26+
}
27+
}
28+
}
29+
}

0 commit comments

Comments
 (0)