Skip to content

Commit 19f0d04

Browse files
JonEckenrodeJonEckenrode
authored
Merge pull request #46 from android/add-grid-sample
Add Grid sample
2 parents 095c4b3 + 297f167 commit 19f0d04

40 files changed

Lines changed: 1142 additions & 0 deletions

‎Grid/.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

‎Grid/.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 Grid in Jetpack Compose"
2+
description: "A sample demonstrating how to use the Grid API in Jetpack Compose to build flexible, grid-based adaptive apps optimized for all form factors."
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.layout.Grid
16+
license: apache2

‎Grid/README.md‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# Grid layout sample
2+
3+
Create responsive grid-based user interfaces using Compose `Grid` APIs.
4+
5+
The sample demonstrates a responsive, multi-column content layout that dynamically adjusts column spans and weights based on the device's screen dimensions using Compose Grid layout APIs.
6+
7+
## Features demonstrated
8+
- **Column span adjustments:** Elements spanning multiple columns.
9+
- **Multi-column adaptation:** Adapting elements to fit different display widths dynamically.
10+
11+
## Get started
12+
To explore this sample:
13+
1. Clone this repository.
14+
2. Navigate to the `Grid` directory.
15+
3. Open the project in your preferred IDE or build it using the command line.
16+
17+
## License
18+
This project is licensed under the Apache License, Version 2.0.
19+
20+
See the [LICENSE](../LICENSE.md) file for details.

‎Grid/app/.gitignore‎

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

‎Grid/app/build.gradle.kts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
plugins {
2+
alias(libs.plugins.android.application)
3+
alias(libs.plugins.compose.compiler)
4+
}
5+
6+
android {
7+
namespace = "com.example.gridsample"
8+
compileSdk = 37
9+
10+
defaultConfig {
11+
applicationId = "com.example.gridsample"
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+
}

‎Grid/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

‎Grid/app/src/androidTest/java/com/example/gridsample/GridSampleTest.kt‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
package com.example.gridsample
2+
3+
import androidx.activity.ComponentActivity
4+
import androidx.compose.ui.test.junit4.createAndroidComposeRule
5+
import androidx.compose.ui.test.onNodeWithText
6+
import org.junit.Before
7+
import org.junit.Rule
8+
import org.junit.Test
9+
10+
class GridSampleTest {
11+
@get:Rule val composeTestRule = createAndroidComposeRule<ComponentActivity>()
12+
13+
@Before
14+
fun setup() {
15+
composeTestRule.setContent { GridSample() }
16+
}
17+
18+
@Test
19+
fun gridSample_rendersCorrectly() {
20+
composeTestRule.onNodeWithText("Grid sample").assertExists()
21+
composeTestRule.onNodeWithText("Display Grid layout variations on this device.").assertExists()
22+
}
23+
}

‎Grid/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.GridSample"
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.GridSample" >
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>

‎Grid/app/src/main/java/com/example/gridsample/GridSample.kt‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
package com.example.gridsample
2+
3+
import androidx.compose.foundation.background
4+
import androidx.compose.foundation.layout.Box
5+
import androidx.compose.foundation.layout.Column
6+
import androidx.compose.foundation.layout.ExperimentalGridApi
7+
import androidx.compose.foundation.layout.Grid
8+
import androidx.compose.foundation.layout.fillMaxHeight
9+
import androidx.compose.foundation.layout.fillMaxSize
10+
import androidx.compose.foundation.layout.fillMaxWidth
11+
import androidx.compose.foundation.layout.height
12+
import androidx.compose.foundation.layout.padding
13+
import androidx.compose.foundation.layout.safeDrawingPadding
14+
import androidx.compose.foundation.rememberScrollState
15+
import androidx.compose.foundation.shape.RoundedCornerShape
16+
import androidx.compose.foundation.verticalScroll
17+
import androidx.compose.material3.MaterialTheme
18+
import androidx.compose.material3.Text
19+
import androidx.compose.runtime.Composable
20+
import androidx.compose.ui.Alignment
21+
import androidx.compose.ui.Modifier
22+
import androidx.compose.ui.graphics.Color
23+
import androidx.compose.ui.graphics.luminance
24+
import androidx.compose.ui.text.font.FontWeight
25+
import androidx.compose.ui.tooling.preview.Preview
26+
import androidx.compose.ui.unit.dp
27+
import androidx.compose.ui.unit.sp
28+
import com.example.gridsample.ui.theme.MyApplicationTheme
29+
30+
@OptIn(ExperimentalGridApi::class)
31+
@Composable
32+
fun GridSample() {
33+
val colors = listOf(
34+
Color(0xFF4285F4), // Google Blue
35+
Color(0xFFEA4335), // Google Red
36+
Color(0xFFFBBC05), // Google Yellow
37+
Color(0xFF34A853), // Google Green
38+
Color(0xFF000000) // Black
39+
)
40+
41+
Column(modifier = Modifier.safeDrawingPadding().padding(16.dp).fillMaxSize().verticalScroll(rememberScrollState())) {
42+
Text(
43+
text = "Grid sample",
44+
fontSize = 30.sp,
45+
fontWeight = FontWeight.Bold,
46+
color = MaterialTheme.colorScheme.onBackground,
47+
modifier = Modifier.padding(bottom = 8.dp)
48+
)
49+
50+
Text(
51+
text = "Display Grid layout variations on this device.",
52+
fontSize = 14.sp,
53+
color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.7f),
54+
modifier = Modifier.padding(bottom = 16.dp)
55+
)
56+
57+
Grid(
58+
config = {
59+
repeat(3) { column(0.333f) }
60+
row(112.dp)
61+
row(88.dp)
62+
row(100.dp)
63+
gap(8.dp)
64+
},
65+
modifier = Modifier.fillMaxWidth()
66+
) {
67+
Box(
68+
modifier = Modifier
69+
.gridItem(rowSpan = 2)
70+
.background(colors[0], shape = RoundedCornerShape(16.dp))
71+
.fillMaxSize()
72+
) {
73+
Text(
74+
text = "1",
75+
color = if (colors[0].luminance() > 0.5f) Color.Black else Color.White,
76+
modifier = Modifier.align(Alignment.Center),
77+
fontSize = 40.sp
78+
)
79+
}
80+
81+
Box(
82+
modifier = Modifier
83+
.background(colors[1], shape = RoundedCornerShape(16.dp))
84+
.fillMaxSize()
85+
) {
86+
Text(
87+
text = "2",
88+
color = if (colors[1].luminance() > 0.5f) Color.Black else Color.White,
89+
modifier = Modifier.align(Alignment.Center),
90+
fontSize = 40.sp
91+
)
92+
}
93+
94+
Box(
95+
modifier = Modifier
96+
.background(colors[2], shape = RoundedCornerShape(16.dp))
97+
.fillMaxSize()
98+
) {
99+
Text(
100+
text = "3",
101+
color = if (colors[2].luminance() > 0.5f) Color.Black else Color.White,
102+
modifier = Modifier.align(Alignment.Center),
103+
fontSize = 40.sp
104+
)
105+
}
106+
107+
Box(
108+
modifier = Modifier
109+
.gridItem(columnSpan = 2)
110+
.background(colors[3], shape = RoundedCornerShape(16.dp))
111+
.fillMaxSize()
112+
) {
113+
Text(
114+
text = "4",
115+
color = if (colors[3].luminance() > 0.5f) Color.Black else Color.White,
116+
modifier = Modifier.align(Alignment.Center),
117+
fontSize = 40.sp
118+
)
119+
}
120+
121+
Box(
122+
modifier = Modifier
123+
.gridItem(columnSpan = 3)
124+
.background(colors[4], shape = RoundedCornerShape(16.dp))
125+
.fillMaxSize()
126+
) {
127+
Text(
128+
text = "5",
129+
color = if (colors[4].luminance() > 0.5f) Color.Black else Color.White,
130+
modifier = Modifier.align(Alignment.Center),
131+
fontSize = 40.sp
132+
)
133+
}
134+
}
135+
}
136+
}
137+
138+
@Preview(showBackground = true)
139+
@Composable
140+
fun GridSamplePreview() {
141+
MyApplicationTheme {
142+
GridSample()
143+
}
144+
}

‎Grid/app/src/main/java/com/example/gridsample/MainActivity.kt‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
package com.example.gridsample
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.Modifier
11+
import com.example.gridsample.ui.theme.MyApplicationTheme
12+
13+
class MainActivity : ComponentActivity() {
14+
override fun onCreate(savedInstanceState: Bundle?) {
15+
super.onCreate(savedInstanceState)
16+
enableEdgeToEdge()
17+
setContent {
18+
MyApplicationTheme {
19+
Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
20+
GridSample()
21+
}
22+
}
23+
}
24+
}
25+
}

0 commit comments

Comments
 (0)