Merge pull request #2 from android/supporting_pane_preferred_width

Supporting pane preferred width

Author: tiwiz

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

@@ -28,6 +28,7 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.LocalMinimumInteractiveComponentSize
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.material3.VerticalDragHandle
 import androidx.compose.material3.adaptive.ExperimentalMaterial3AdaptiveApi
@@ -39,6 +40,7 @@ import androidx.compose.material3.adaptive.layout.rememberPaneExpansionState
 import androidx.compose.material3.adaptive.navigation.rememberSupportingPaneScaffoldNavigator
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -47,6 +49,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import com.example.supportingpanecompose.R
 import kotlinx.coroutines.launch
@@ -67,6 +70,7 @@ fun SupportingPaneSample(modifier: Modifier = Modifier) {
     var selectedTopic: String by rememberSaveable { mutableStateOf(data.keys.first()) }
     val navigator = rememberSupportingPaneScaffoldNavigator()
     val scope = rememberCoroutineScope()
+    var preferredWidthInDp by rememberSaveable { mutableIntStateOf(300) }
 
     BackHandler(enabled = navigator.canNavigateBack()) {
         scope.launch {
@@ -80,7 +84,9 @@ fun SupportingPaneSample(modifier: Modifier = Modifier) {
         modifier = modifier,
         supportingPane = {
             AnimatedPane(
-                modifier = Modifier.padding(all = 16.dp)
+                modifier = Modifier
+                    .padding(all = 16.dp)
+                    .preferredWidth(preferredWidthInDp.dp)
             ) {
                 Column {
                     Text(
@@ -143,6 +149,24 @@ fun SupportingPaneSample(modifier: Modifier = Modifier) {
                             .padding(16.dp)
                     )
                 }
+
+                Text(
+                    text = stringResource(R.string.preferred_width_label),
+                    modifier = modifier
+                        .padding(top = 48.dp)
+                        .padding(horizontal = 24.dp),
+                    textAlign = TextAlign.Center,
+                    style = MaterialTheme.typography.titleLarge
+                )
+                Slider(
+                    value = preferredWidthInDp.toFloat(),
+                    modifier = Modifier
+                        .padding(top = 16.dp)
+                        .padding(horizontal = 24.dp),
+                    valueRange = (250f..450f),
+                    onValueChange = { preferredWidthInDp = it.toInt() }
+                )
+                Text(text = preferredWidthInDp.toString())
             }
         },
         paneExpansionState = rememberPaneExpansionState(navigator.scaffoldValue),

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

@@ -18,4 +18,5 @@
     <string name="app_name">SupportingPaneCompose</string>
     <string name="related_content_label">Related Content</string>
     <string name="main_content_label">Main Content</string>
+    <string name="preferred_width_label">Preferred Width of the side panel</string>
 </resources>