Merge pull request #456 from tiwiz/ro_adaptive_support_pane

Material 3 Adaptive Support Pane

CanonicalLayouts/supporting-pane-compose/app/build.gradle

@@ -21,12 +21,12 @@ plugins {
 
 android {
     namespace 'com.example.supportingpanecompose'
-    compileSdk 33
+    compileSdk 34
 
     defaultConfig {
         applicationId "com.example.supportingpanecompose"
         minSdk 21
-        targetSdk 33
+        targetSdk 34
         versionCode 1
         versionName "1.0"
 
@@ -65,15 +65,15 @@ android {
 dependencies {
     def composeBom = platform('androidx.compose:compose-bom:2022.10.00')
     implementation(composeBom)
-
-    implementation "com.google.accompanist:accompanist-adaptive:0.27.0"
-    implementation 'androidx.core:core-ktx:1.9.0'
-    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
-    implementation 'androidx.activity:activity-compose:1.6.1'
+
+    implementation 'androidx.core:core-ktx:1.12.0'
+    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.7.0'
+    implementation 'androidx.activity:activity-compose:1.8.2'
     implementation "androidx.compose.ui:ui"
     implementation "androidx.compose.ui:ui-tooling-preview"
-    implementation "androidx.window:window:1.1.0-alpha03"
+    implementation "androidx.window:window:1.2.0"
     implementation 'androidx.compose.material3:material3'
+    implementation("androidx.compose.material3:material3-adaptive:1.0.0-alpha05")
     implementation "androidx.compose.material3:material3-window-size-class"
     testImplementation 'junit:junit:4.13.2'
 }

CanonicalLayouts/supporting-pane-compose/app/src/main/java/com/example/supportingpanecompose/MainActivity.kt

@@ -19,22 +19,19 @@ package com.example.supportingpanecompose
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
+import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
 import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi
-import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import com.example.supportingpanecompose.ui.SupportingPaneSample
 import com.example.supportingpanecompose.ui.theme.SupportingPaneCompose
-import com.google.accompanist.adaptive.calculateDisplayFeatures
 
+@OptIn(ExperimentalMaterial3AdaptiveApi::class)
 class MainActivity : ComponentActivity() {
     @OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
             SupportingPaneCompose {
-                SupportingPaneSample(
-                    windowSizeClass = calculateWindowSizeClass(this),
-                    displayFeatures = calculateDisplayFeatures(this)
-                )
+                SupportingPaneSample()
             }
         }
     }

CanonicalLayouts/supporting-pane-compose/app/src/main/java/com/example/supportingpanecompose/ui/SupportingPaneSample.kt

@@ -16,6 +16,8 @@
 
 package com.example.supportingpanecompose.ui
 
+import androidx.activity.compose.BackHandler
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -24,18 +26,25 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
-import androidx.compose.material3.windowsizeclass.WindowSizeClass
+import androidx.compose.material3.adaptive.AnimatedPane
+import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
+import androidx.compose.material3.adaptive.SupportingPaneScaffold
+import androidx.compose.material3.adaptive.SupportingPaneScaffoldRole
+import androidx.compose.material3.adaptive.rememberSupportingPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
-import androidx.window.layout.DisplayFeature
+import com.example.supportingpanecompose.R
 
 // Create some simple sample data
 private val data = mapOf(
@@ -47,53 +56,80 @@ private val data = mapOf(
     "flutter" to listOf("android", "desktop")
 )
 
+@ExperimentalMaterial3AdaptiveApi
 @Composable
-fun SupportingPaneSample(
-    windowSizeClass: WindowSizeClass,
-    displayFeatures: List<DisplayFeature>
-) {
+fun SupportingPaneSample() {
     var selectedTopic: String by rememberSaveable { mutableStateOf(data.keys.first()) }
+    val navigator = rememberSupportingPaneScaffoldNavigator()
 
-    SupportingPane(
-        main = {
-            Column(
-                horizontalAlignment = Alignment.CenterHorizontally,
-                modifier = Modifier.fillMaxSize()
-            ) {
-                Text("Main Content", style = MaterialTheme.typography.titleLarge)
-                Text(selectedTopic)
-            }
-        },
-        supporting = {
-            Column(
-                modifier = Modifier.fillMaxSize()
-            ) {
-                Text("Related Content", style = MaterialTheme.typography.titleLarge)
+    BackHandler(enabled = navigator.canNavigateBack()) {
+        navigator.navigateBack()
+    }
 
-                LazyColumn {
-                    items(
-                        data.getValue(selectedTopic),
-                        key = { it }
-                    ) { relatedTopic ->
-                        Box(
-                            Modifier
-                                .fillMaxWidth()
-                                .clickable {
-                                    selectedTopic = relatedTopic
-                                }
-                        ) {
-                            Text(
-                                text = relatedTopic,
-                                modifier = Modifier
-                                    .padding(16.dp)
+    SupportingPaneScaffold(
+        scaffoldState = navigator.scaffoldState,
+        supportingPane = {
+            AnimatedPane(
+                modifier = Modifier.padding(all = 16.dp)
+            ) {
+                Column {
+                    Text(
+                        stringResource(R.string.related_content_label),
+                        modifier = Modifier.padding(vertical = 16.dp),
+                        style = MaterialTheme.typography.titleLarge
+                    )
 
-                            )
+                    LazyColumn {
+                        items(
+                            data.getValue(selectedTopic),
+                            key = { it }
+                        ) { relatedTopic ->
+                            Box(
+                                Modifier
+                                    .fillMaxWidth()
+                                    .padding(all = 4.dp)
+                                    .clickable {
+                                        selectedTopic = relatedTopic
+                                        if (navigator.canNavigateBack()) {
+                                            navigator.navigateBack()
+                                        }
+                                    }
+                            ) {
+                                Text(
+                                    text = relatedTopic,
+                                    modifier = Modifier
+                                )
+                            }
                         }
                     }
                 }
             }
-        },
-        windowSizeClass = windowSizeClass,
-        displayFeatures = displayFeatures
-    )
+        }
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+            modifier = Modifier.fillMaxSize()
+        ) {
+            Text(
+                stringResource(R.string.main_content_label),
+                style = MaterialTheme.typography.titleLarge
+            )
+
+            Box(
+                Modifier
+                    .fillMaxWidth()
+                    .padding(all = 8.dp)
+                    .clickable {
+                        navigator.navigateTo(SupportingPaneScaffoldRole.Supporting)
+                    },
+                contentAlignment = Alignment.Center
+            ) {
+                Text(
+                    text = selectedTopic,
+                    modifier = Modifier
+                        .padding(16.dp)
+                )
+            }
+        }
+    }
 }

CanonicalLayouts/supporting-pane-compose/app/src/main/res/values/strings.xml

@@ -1,3 +1,5 @@
 <resources>
     <string name="app_name">SupportingPaneCompose</string>
+    <string name="related_content_label">Related Content</string>
+    <string name="main_content_label">Main Content</string>
 </resources>

CanonicalLayouts/supporting-pane-compose/build.gradle

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 plugins {
-    id 'com.android.application' version '7.3.1' apply false
-    id 'com.android.library' version '7.3.1' apply false
+    id 'com.android.application' version '8.2.2' apply false
+    id 'com.android.library' version '8.2.2' apply false
     id 'org.jetbrains.kotlin.android' version '1.7.20' apply false
 }

CanonicalLayouts/supporting-pane-compose/gradle.properties

@@ -20,4 +20,6 @@ kotlin.code.style=official
 # Enables namespacing of each library's R class so that its R class includes only the
 # resources declared in the library itself and none from the library's dependencies,
 # thereby reducing the size of the R class for that library
-android.nonTransitiveRClass=true
+android.nonTransitiveRClass=true
+android.defaults.buildfeatures.buildconfig=true
+android.nonFinalResIds=false

CanonicalLayouts/supporting-pane-compose/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 #Wed May 25 14:11:15 UTC 2022
 distributionBase=GRADLE_USER_HOME
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-bin.zip
 distributionPath=wrapper/dists
 zipStorePath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME