diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..64355cb --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.jetskicli/ diff --git a/Grid/.gitignore b/Grid/.gitignore new file mode 100644 index 0000000..aa724b7 --- /dev/null +++ b/Grid/.gitignore @@ -0,0 +1,15 @@ +*.iml +.gradle +/local.properties +/.idea/caches +/.idea/libraries +/.idea/modules.xml +/.idea/workspace.xml +/.idea/navEditor.xml +/.idea/assetWizardSettings.xml +.DS_Store +/build +/captures +.externalNativeBuild +.cxx +local.properties diff --git a/Grid/.google/packaging.yaml b/Grid/.google/packaging.yaml new file mode 100644 index 0000000..3c91aa5 --- /dev/null +++ b/Grid/.google/packaging.yaml @@ -0,0 +1,16 @@ +title: "Adaptive layouts using Grid in Jetpack Compose" +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." +status: PUBLISHED +technologies: [Android, JetpackCompose] +categories: + - JetpackComposeLayouts +languages: [Kotlin] +solutions: + - Mobile + - JetpackNavigation +github: android/adaptive-apps-samples +level: INTERMEDIATE +apiRefs: + - android:androidx.compose.Composable + - android:androidx.compose.layout.Grid +license: apache2 diff --git a/Grid/README.md b/Grid/README.md new file mode 100644 index 0000000..fc2491c --- /dev/null +++ b/Grid/README.md @@ -0,0 +1,7 @@ +# Grid layout sample + +Create responsive grid-based user interfaces using Compose `Grid` APIs. + +## Features demonstrated +- **Column span adjustments:** Elements spanning multiple columns. +- **Multi-column adaptation:** Adapting elements to fit different display widths dynamically. diff --git a/Grid/app/.gitignore b/Grid/app/.gitignore new file mode 100644 index 0000000..42afabf --- /dev/null +++ b/Grid/app/.gitignore @@ -0,0 +1 @@ +/build \ No newline at end of file diff --git a/Grid/app/build.gradle.kts b/Grid/app/build.gradle.kts new file mode 100644 index 0000000..f5db85d --- /dev/null +++ b/Grid/app/build.gradle.kts @@ -0,0 +1,72 @@ +plugins { + alias(libs.plugins.android.application) + alias(libs.plugins.compose.compiler) +} + +android { + namespace = "com.example.gridsample" + compileSdk = 37 + + defaultConfig { + applicationId = "com.example.gridsample" + minSdk = 26 + targetSdk = 37 + versionCode = 1 + versionName = "1.0" + + testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner" + vectorDrawables { + useSupportLibrary = true + } + } + + buildTypes { + release { + isMinifyEnabled = false + proguardFiles(getDefaultProguardFile("proguard-android-optimize.txt"), "proguard-rules.pro") + } + } + compileOptions { + sourceCompatibility = JavaVersion.VERSION_17 + targetCompatibility = JavaVersion.VERSION_17 + } + buildFeatures { + compose = true + } + packaging { + resources { + excludes += "/META-INF/{AL2.0,LGPL2.1}" + } + } +} + +kotlin { + jvmToolchain(17) +} + +dependencies { + val composeBom = platform(libs.androidx.compose.bom) + implementation(composeBom) + androidTestImplementation(composeBom) + + // Core Android dependencies + implementation(libs.androidx.core.ktx) + implementation(libs.androidx.lifecycle.runtime.ktx) + implementation(libs.androidx.activity.compose) + + // Compose + implementation(libs.androidx.compose.ui) + implementation(libs.androidx.compose.ui.tooling.preview) + implementation(libs.androidx.compose.material3) + implementation(libs.androidx.compose.foundation.layout) + + // Tooling + debugImplementation(libs.androidx.compose.ui.tooling) + // Instrumented tests + androidTestImplementation(libs.androidx.compose.ui.test.junit4) + debugImplementation(libs.androidx.compose.ui.test.manifest) + + testImplementation(libs.junit) + androidTestImplementation(libs.androidx.test.ext.junit) + androidTestImplementation(libs.androidx.test.espresso.core) +} \ No newline at end of file diff --git a/Grid/app/proguard-rules.pro b/Grid/app/proguard-rules.pro new file mode 100644 index 0000000..481bb43 --- /dev/null +++ b/Grid/app/proguard-rules.pro @@ -0,0 +1,21 @@ +# Add project specific ProGuard rules here. +# You can control the set of applied configuration files using the +# proguardFiles setting in build.gradle. +# +# For more details, see +# http://developer.android.com/guide/developing/tools/proguard.html + +# If your project uses WebView with JS, uncomment the following +# and specify the fully qualified class name to the JavaScript interface +# class: +#-keepclassmembers class fqcn.of.javascript.interface.for.webview { +# public *; +#} + +# Uncomment this to preserve the line number information for +# debugging stack traces. +#-keepattributes SourceFile,LineNumberTable + +# If you keep the line number information, uncomment this to +# hide the original source file name. +#-renamesourcefileattribute SourceFile \ No newline at end of file diff --git a/Grid/app/src/androidTest/java/com/example/gridsample/GridSampleTest.kt b/Grid/app/src/androidTest/java/com/example/gridsample/GridSampleTest.kt new file mode 100644 index 0000000..b780bbb --- /dev/null +++ b/Grid/app/src/androidTest/java/com/example/gridsample/GridSampleTest.kt @@ -0,0 +1,23 @@ +package com.example.gridsample + +import androidx.activity.ComponentActivity +import androidx.compose.ui.test.junit4.createAndroidComposeRule +import androidx.compose.ui.test.onNodeWithText +import org.junit.Before +import org.junit.Rule +import org.junit.Test + +class GridSampleTest { + @get:Rule val composeTestRule = createAndroidComposeRule() + + @Before + fun setup() { + composeTestRule.setContent { GridSample() } + } + + @Test + fun gridSample_rendersCorrectly() { + composeTestRule.onNodeWithText("Grid sample").assertExists() + composeTestRule.onNodeWithText("Display Grid layout variations on this device.").assertExists() + } +} diff --git a/Grid/app/src/main/AndroidManifest.xml b/Grid/app/src/main/AndroidManifest.xml new file mode 100644 index 0000000..f5d3e16 --- /dev/null +++ b/Grid/app/src/main/AndroidManifest.xml @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Grid/app/src/main/java/com/example/gridsample/GridSample.kt b/Grid/app/src/main/java/com/example/gridsample/GridSample.kt new file mode 100644 index 0000000..0f54b1c --- /dev/null +++ b/Grid/app/src/main/java/com/example/gridsample/GridSample.kt @@ -0,0 +1,108 @@ +package com.example.gridsample + +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.ExperimentalGridApi +import androidx.compose.foundation.layout.Grid +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.safeDrawingPadding +import androidx.compose.foundation.rememberScrollState +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.foundation.verticalScroll +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.luminance +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.example.gridsample.ui.theme.MyApplicationTheme + +@OptIn(ExperimentalGridApi::class) +@Composable +fun GridSample() { + val colors = listOf( + Color(0xFFF44336), // Red + Color(0xFFE91E63), // Pink + Color(0xFF9C27B0), // Purple + Color(0xFF3F51B5), // Indigo + Color(0xFF2196F3), // Blue + Color(0xFF00BCD4), // Cyan + Color(0xFF4CAF50), // Green + Color(0xFFFFEB3B), // Yellow + Color(0xFFFF9800), // Orange + Color(0xFF795548) // Brown + ) + + Column(modifier = Modifier.safeDrawingPadding().padding(16.dp).fillMaxSize().verticalScroll(rememberScrollState())) { + Text( + text = "Grid sample", + fontSize = 30.sp, + fontWeight = FontWeight.Bold, + color = MaterialTheme.colorScheme.onBackground, + modifier = Modifier.padding(bottom = 8.dp) + ) + + Text( + text = "Display Grid layout variations on this device.", + fontSize = 14.sp, + color = MaterialTheme.colorScheme.onBackground.copy(alpha = 0.7f), + modifier = Modifier.padding(bottom = 16.dp) + ) + + Grid( + config = { + repeat(3) { column(0.333f) } + gap(4.dp) + }, + ) { + for (index in 0 until 10) { + val bgColor = colors[index % colors.size] + val isLight = bgColor.luminance() > 0.5f + val textColor = if (isLight) Color.Black else Color.White + + val itemModifier = when (index) { + 0 -> Modifier.gridItem(rowSpan = 2) + 6 -> Modifier.gridItem(columnSpan = 2) + else -> Modifier + } + + val boxModifier = itemModifier + .padding(2.dp) + .fillMaxWidth() + .background(bgColor, shape = RoundedCornerShape(16.dp)) + .let { + if (index == 0) it.fillMaxHeight() else it.height(100.dp) + } + + Box( + modifier = boxModifier + ) { + Text( + text = "${index + 1}", + color = textColor, + modifier = Modifier.align(Alignment.Center), + fontSize = 40.sp + ) + } + } + } + } +} + +@Preview(showBackground = true) +@Composable +fun GridSamplePreview() { + MyApplicationTheme { + GridSample() + } +} diff --git a/Grid/app/src/main/java/com/example/gridsample/MainActivity.kt b/Grid/app/src/main/java/com/example/gridsample/MainActivity.kt new file mode 100644 index 0000000..61dc270 --- /dev/null +++ b/Grid/app/src/main/java/com/example/gridsample/MainActivity.kt @@ -0,0 +1,25 @@ +package com.example.gridsample + +import android.os.Bundle +import androidx.activity.ComponentActivity +import androidx.activity.compose.setContent +import androidx.activity.enableEdgeToEdge +import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Surface +import androidx.compose.ui.Modifier +import com.example.gridsample.ui.theme.MyApplicationTheme + +class MainActivity : ComponentActivity() { + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + enableEdgeToEdge() + setContent { + MyApplicationTheme { + Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) { + GridSample() + } + } + } + } +} \ No newline at end of file diff --git a/Grid/app/src/main/java/com/example/gridsample/ui/theme/Color.kt b/Grid/app/src/main/java/com/example/gridsample/ui/theme/Color.kt new file mode 100644 index 0000000..672ebc8 --- /dev/null +++ b/Grid/app/src/main/java/com/example/gridsample/ui/theme/Color.kt @@ -0,0 +1,11 @@ +package com.example.gridsample.ui.theme + +import androidx.compose.ui.graphics.Color + +val Purple80 = Color(0xFFD0BCFF) +val PurpleGrey80 = Color(0xFFCCC2DC) +val Pink80 = Color(0xFFEFB8C8) + +val Purple40 = Color(0xFF6650a4) +val PurpleGrey40 = Color(0xFF625b71) +val Pink40 = Color(0xFF7D5260) \ No newline at end of file diff --git a/Grid/app/src/main/java/com/example/gridsample/ui/theme/Theme.kt b/Grid/app/src/main/java/com/example/gridsample/ui/theme/Theme.kt new file mode 100644 index 0000000..7fd087e --- /dev/null +++ b/Grid/app/src/main/java/com/example/gridsample/ui/theme/Theme.kt @@ -0,0 +1,53 @@ +package com.example.gridsample.ui.theme + +import android.os.Build +import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.dynamicDarkColorScheme +import androidx.compose.material3.dynamicLightColorScheme +import androidx.compose.material3.lightColorScheme +import androidx.compose.runtime.Composable +import androidx.compose.ui.platform.LocalContext + +private val DarkColorScheme = darkColorScheme( + primary = Purple80, + secondary = PurpleGrey80, + tertiary = Pink80 +) + +private val LightColorScheme = lightColorScheme( + primary = Purple40, + secondary = PurpleGrey40, + tertiary = Pink40 + + /* Other default colors to override + background = Color(0xFFFFFBFE), + surface = Color(0xFFFFFBFE), + onPrimary = Color.White, + onSecondary = Color.White, + onTertiary = Color.White, + onBackground = Color(0xFF1C1B1F), + onSurface = Color(0xFF1C1B1F), + */ +) + +@Composable +fun MyApplicationTheme( + darkTheme: Boolean = isSystemInDarkTheme(), + // Dynamic color is available on Android 12+ + dynamicColor: Boolean = true, + content: @Composable () -> Unit, +) { + val colorScheme = + when { + dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> { + val context = LocalContext.current + if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context) + } + darkTheme -> DarkColorScheme + else -> LightColorScheme + } + + MaterialTheme(colorScheme = colorScheme, typography = Typography, content = content) +} \ No newline at end of file diff --git a/Grid/app/src/main/java/com/example/gridsample/ui/theme/Type.kt b/Grid/app/src/main/java/com/example/gridsample/ui/theme/Type.kt new file mode 100644 index 0000000..7379f84 --- /dev/null +++ b/Grid/app/src/main/java/com/example/gridsample/ui/theme/Type.kt @@ -0,0 +1,34 @@ +package com.example.gridsample.ui.theme + +import androidx.compose.material3.Typography +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.text.font.FontFamily +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.unit.sp + +// Set of Material typography styles to start with +val Typography = Typography( + bodyLarge = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 16.sp, + lineHeight = 24.sp, + letterSpacing = 0.5.sp + ) + /* Other default text styles to override + titleLarge = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Normal, + fontSize = 22.sp, + lineHeight = 28.sp, + letterSpacing = 0.sp + ), + labelSmall = TextStyle( + fontFamily = FontFamily.Default, + fontWeight = FontWeight.Medium, + fontSize = 11.sp, + lineHeight = 16.sp, + letterSpacing = 0.5.sp + ) + */ +) \ No newline at end of file diff --git a/Grid/app/src/main/res/drawable/ic_launcher_background.xml b/Grid/app/src/main/res/drawable/ic_launcher_background.xml new file mode 100644 index 0000000..61bb79e --- /dev/null +++ b/Grid/app/src/main/res/drawable/ic_launcher_background.xml @@ -0,0 +1,170 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Grid/app/src/main/res/drawable/ic_launcher_foreground.xml b/Grid/app/src/main/res/drawable/ic_launcher_foreground.xml new file mode 100644 index 0000000..966abaf --- /dev/null +++ b/Grid/app/src/main/res/drawable/ic_launcher_foreground.xml @@ -0,0 +1,30 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/Grid/app/src/main/res/mipmap-anydpi/ic_launcher.xml b/Grid/app/src/main/res/mipmap-anydpi/ic_launcher.xml new file mode 100644 index 0000000..5ad9ce1 --- /dev/null +++ b/Grid/app/src/main/res/mipmap-anydpi/ic_launcher.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Grid/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml b/Grid/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml new file mode 100644 index 0000000..5ad9ce1 --- /dev/null +++ b/Grid/app/src/main/res/mipmap-anydpi/ic_launcher_round.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Grid/app/src/main/res/mipmap-hdpi/ic_launcher.webp b/Grid/app/src/main/res/mipmap-hdpi/ic_launcher.webp new file mode 100644 index 0000000..c209e78 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-hdpi/ic_launcher.webp differ diff --git a/Grid/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp b/Grid/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp new file mode 100644 index 0000000..b2dfe3d Binary files /dev/null and b/Grid/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp differ diff --git a/Grid/app/src/main/res/mipmap-mdpi/ic_launcher.webp b/Grid/app/src/main/res/mipmap-mdpi/ic_launcher.webp new file mode 100644 index 0000000..4f0f1d6 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-mdpi/ic_launcher.webp differ diff --git a/Grid/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp b/Grid/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp new file mode 100644 index 0000000..62b611d Binary files /dev/null and b/Grid/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp differ diff --git a/Grid/app/src/main/res/mipmap-xhdpi/ic_launcher.webp b/Grid/app/src/main/res/mipmap-xhdpi/ic_launcher.webp new file mode 100644 index 0000000..948a307 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-xhdpi/ic_launcher.webp differ diff --git a/Grid/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp b/Grid/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp new file mode 100644 index 0000000..1b9a695 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp differ diff --git a/Grid/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp b/Grid/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp new file mode 100644 index 0000000..28d4b77 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp differ diff --git a/Grid/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp b/Grid/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp new file mode 100644 index 0000000..9287f50 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp differ diff --git a/Grid/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp b/Grid/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp new file mode 100644 index 0000000..aa7d642 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp differ diff --git a/Grid/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp b/Grid/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp new file mode 100644 index 0000000..9126ae3 Binary files /dev/null and b/Grid/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp differ diff --git a/Grid/app/src/main/res/values/colors.xml b/Grid/app/src/main/res/values/colors.xml new file mode 100644 index 0000000..09837df --- /dev/null +++ b/Grid/app/src/main/res/values/colors.xml @@ -0,0 +1,10 @@ + + + #FFBB86FC + #FF6200EE + #FF3700B3 + #FF03DAC5 + #FF018786 + #FF000000 + #FFFFFFFF + \ No newline at end of file diff --git a/Grid/app/src/main/res/values/strings.xml b/Grid/app/src/main/res/values/strings.xml new file mode 100644 index 0000000..7f80dd9 --- /dev/null +++ b/Grid/app/src/main/res/values/strings.xml @@ -0,0 +1,3 @@ + + Compose App + \ No newline at end of file diff --git a/Grid/app/src/main/res/values/themes.xml b/Grid/app/src/main/res/values/themes.xml new file mode 100644 index 0000000..77795be --- /dev/null +++ b/Grid/app/src/main/res/values/themes.xml @@ -0,0 +1,4 @@ + + +