[Navigation] Irregular Padding and shadow for bottom sheet with padding

[HuM4NoiD]

Description

• Bottom Sheet Irregular padding and layout:
  • Top, Start and End shows proper padding of 16 dp
  • Bottom Padding is absent
  • Background of the bottom sheet is shifted towards the bottom, clipping is not applied
• The Shadow effect starts from an edge above the sheet content. Bug Screenshot

Steps to reproduce

1. Create a new jetpack compose project using Android studio.
2. Add the following as the root composable:

   Surface(
     modifier = Modifier.fillMaxSize(),
     color = MaterialTheme.colors.background
   ) {
     val navigator = rememberBottomSheetNavigator()
     val navController = rememberNavController()
     navController.navigatorProvider.addNavigator(navigator)
     ModalBottomSheetLayout(
         bottomSheetNavigator = navigator,
         scrimColor = MaterialTheme.colors.surface.copy(alpha = 0.4f),
         sheetBackgroundColor = Color.Transparent
     ) {
         NavHost(
             navController = navController,
             startDestination = "home",
         ) {
             composable(route = "home") {
                 Home(navController)
             }
             bottomSheet(route = "sheet") {
                 BottomSheetContent()
             }
         }
     }
   }

3. Define the remaining composables:

   @Composable
   fun Home(
     navController: NavHostController
   ) {
     Column(
         verticalArrangement = Arrangement.Center,
         horizontalAlignment = Alignment.CenterHorizontally,
         modifier = Modifier.fillMaxSize()
     ) {
         Button(onClick = { navController.navigate("sheet") }) {
             Text(text = "Open Bottom Sheet")
         }
     }
   }
   
   @Composable
   fun BottomSheetContent() {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(8.dp),
         modifier = Modifier
             .fillMaxWidth()
             .padding(16.dp)
             .clip(RoundedCornerShape(16.dp))
             .border(
                 width = 2.dp,
                 brush = Brush.linearGradient(
                     listOf(
                         MaterialTheme.colors.primary,
                         MaterialTheme.colors.secondary
                     )
                 ),
                 shape = RoundedCornerShape(16.dp)
             )
             .padding(16.dp)
     ) {
         Text(text = "First")
         Text(text = "Second")
         Text(text = "Third")
         Text(text = "Fourth")
         Text(text = "Fifth")
     }
   }

Expected behavior

• The Shadow should start from the top edge of the content
• Padding should be applied properly on the bottom sheet content

Additional context Library versions:

implementation "androidx.navigation:navigation-compose:2.4.1"
implementation "com.google.accompanist:accompanist-navigation-material:0.23.1"

[HuM4NoiD]

Are there any plans for a fix?

[jossiwolf]

Hi, this is an issue with the upstream component. Would you mind filing an issue on the issue tracker?

Once this is fixed upstream, it should automatically be fixed here as well.