CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpackbottombar
Satyam Gondhale
Satyam Gondhale

Reputation: 1457

ModalBottomSheet is showing above BottomBar in Jetpack Compose

I have BottomBar added in ComposeActivity. BottomBar is responsible for showing 3 composable. I don't want to add ModalBottomSheet to Activity instead I have added ModalBottomSheet inside 3rd Screen Composable. When ModalBottomSheet is invoked it is displayed above the BottomBar. How ModalBottomSheet can be displayed when Call to Action is done from 3rd screen Composable and it should be above BottomBar. Any help will be appreciated. enter image description here

It should display over BottomBar and on Bottom.

Upvotes: 3

Views: 8218

Answers (2)

Aniokrait
Aniokrait

Reputation: 61

You can use now ModalBottomSheet by Compose Material 3.

Add dependencies:

dependencies {
    implementation "androidx.compose.material3:material3:1.1.1"
    implementation "androidx.compose.material3:material3-window-size-class:1.1.1"
}

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.1.1"
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

Example:

@Composable
fun MyScreen() {
    var openBottomSheet by rememberSaveable { mutableStateOf(false) }
    var skipPartiallyExpanded by remember { mutableStateOf(false) }
    val scope = rememberCoroutineScope()
    val bottomSheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = skipPartiallyExpanded
    )

    // Screen content
    Button(onClick = {
        scope.launch {
            openBottomSheet = !openBottomSheet
        }
    }) {
        Text(text = "Show Bottom Sheet")
    }

    // When openBottomSheet is true, bottom sheet is visible.
    if (openBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = { openBottomSheet = false },
            sheetState = bottomSheetState,
        ) {
            //Sheet content
            Column(
                modifier = Modifier.padding(start = 16.dp, bottom = 32.dp)
            ) {
                Text("Your sheet content is here.")
            }
        }
    }
}

closed image and open image.

NOTE: This API is undergoing frequent changes at the 1.1.x version. You must refer official API documentation for more detailed description and example.

Upvotes: 4

commandiron
commandiron

Reputation: 1473

Just Position your ModalBottomSheetLayout on top of the Scaffold component.

Example:

AppTheme() {

   ModalBottomSheetLayout(){ //<-- Here

      Scaffold(){

                             //<-- Not Here or below

         NavigationGraph(){
         }
      }
   }
}

and call bottomSheet from NavHost.

Also you can hide Bottombar with action from screen but its long way;

*it may vary depending on your component child structure

Screen:

@Composable
fun 3rdScreen(onClickForHideBottomBar:() -> Unit){

    Button(onClick = { onClickForHideBottomBar()}) {

        Text(text = "Hide BottomBar")
    }
}

NavGraph:

@Composable
fun NavigationGraph(onClickForHideBottomBar:() -> Unit,){

    NavHost(){
         composable(){
             3rdScreen(onClickForHideBottomBar ={onClickForHideBottomBar()})
         }
    }
}

Scaffold:

var bottomBarVisibility by remember { mutableStateOf(false)}

Scaffold(
    bottomBar = {BottomNavigationView(bottomBarVisibility=bottomBarVisibility)}){

    NavigationGraph(onClickForHideBottomBar = bottomBarVisibility = !bottomBarVisibility){}
}

BottomNavigationView:

@Composable
fun BottomNavigationView(bottomBarVisibility: Boolean){

    AnimatedVisibility(visibleState =MutableTransitionState(bottomBarVisibility)){

        BottomNavigation()
    }
}

Upvotes: 8

Related Questions