2

My app consists of the home screen and on this screen, there is a button when users click on it they navigate to the login bottom sheet.

I am going to use this login bottom sheet elsewhere in the app so I prefer to make it a separate screen and navigate from home to login.

It is desirable to show the home screen as the background for the login screen. I mean the login bottom sheet's main content should be empty and transparent in order to see the home screen as the background. But instead of the home screen for background, the white background shows up.

Here are my codes:

LoginScreen:

@Composable
fun LoginScreen(
    loginViewModel: LoginViewModel = hiltViewModel()
) {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            LoginContent()
        },
        sheetPeekHeight = 400.dp,
        sheetShape = RoundedCornerShape(topEnd = 52.dp, topStart = 52.dp),
        backgroundColor = Color.Transparent
    ) {
        Box(modifier = Modifier.fillMaxSize().background(color = Color.Transparent)) {

        }
    }
}

HomeScreen:

@Composable
fun HomeScreen(
    modifier: Modifier = Modifier,
    viewModel: HomeViewModel = hiltViewModel(),
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
    ) {
        somecontent 
        ...
        ...
        ...
        Button(onClick = {
            viewModel.navigate(
                LoginDestination.route()
            )

        }) {
            Text("Go to the login screen")
        }
    }
}

I use navigation like this:

fun interface NavigationDestination {

    fun route(): String
    val arguments: List<NamedNavArgument>
        get() = emptyList()

    val deepLinks: List<NavDeepLink>
        get() = emptyList()
} 

and then Login destination overrides it:

object LoginDestination : NavigationDestination {
    override fun route(): String = "login"
}

and here is the implementation of the navigator:

@Singleton
internal class ClientNavigatorImpl @Inject constructor() : ClientNavigator {

    private val navigationEvents = Channel<NavigatorEvent>()
    override val destinations = navigationEvents.receiveAsFlow()

    override fun navigateUp(): Boolean =
        navigationEvents.trySend(NavigatorEvent.NavigateUp).isSuccess

    override fun popBackStack(): Boolean =
        navigationEvents.trySend(NavigatorEvent.PopBackStack).isSuccess

    override fun navigate(route: String, builder: NavOptionsBuilder.() -> Unit): Boolean =
        navigationEvents.trySend(NavigatorEvent.Directions(route, builder)).isSuccess
}

and the navigator event is:

sealed class NavigatorEvent {
    object NavigateUp : NavigatorEvent()
    object PopBackStack : NavigatorEvent()
    class Directions(
        val destination: String,
        val builder: NavOptionsBuilder.() -> Unit
    ) : NavigatorEvent()
}

5
  • 1
    Have you tried setting sheetBackgroundColor parameter in BottomSheetScaffold? Nov 15, 2021 at 7:30
  • Yes and that doesn't help Nov 15, 2021 at 7:31
  • I want something like BottomSheetFragment in JetPack compose Nov 15, 2021 at 7:32
  • How do you manage navigation? Add definition of viewModel.navigate function. Nov 15, 2021 at 7:41
  • I added how to navigate in the app @PhilipDukhov Nov 15, 2021 at 8:08

3 Answers 3

2

the way you are trying to show the LoginScreen won't work as you expected because when you navigate to LoginScreen it's like opening a new Screen, HomeScreen is then added to the backstack and not shown behind your LoginScreen. To make it work, try like this:

@Composable
fun HomeScreen(
    modifier: Modifier = Modifier,
    viewModel: HomeViewModel = hiltViewModel(),
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = Color.White)
    ) {
        Button(onClick = {
            //TODO: Add functionality
        }) {
            Text("Go to the login screen")
        }
    }
}

And change the LoginScreen parameters that you can give it a Composable:

@Composable
fun LoginScreen(
    loginViewModel: LoginViewModel = hiltViewModel(),
    screen: @Composable (() -> Unit)
) {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            //The Login Content needs to be here
*EDIT*

            BackHandler(enabled = true) {
              coroutineScope.launch {   
                 bottomSheetScaffoldState.bottomSheetState.collapse()
              }
            }
*EDIT*
        },
        sheetPeekHeight = 400.dp,
        sheetShape = RoundedCornerShape(topEnd = 52.dp, topStart = 52.dp),
        backgroundColor = Color.Transparent
    ) {
        screen() //Adds the content which is shown on the Screen behind bottomsheet
    }
}

And then use it somehow like this:

LoginScreen( /*YourLoginViewModel*/) {
    HomeScreen(Modifier, /*YourHomeScreenModel*/){
    }
}

Now your bottom sheet is shown all the time, to hide it you need to work with the BottomSheetState collapsed/expanded and the sheetPeekHeight = 400.dp, which you need to set to 0 that the sheet is hidden completely at first

In the end you need to implement that the BottomSheetState changes on the ButtonClick where you navigated to the Screen in your first attempt

Edit: Also don't use backgroundColor. To change the bottomSheets Background you need to use sheetBackgroundColor = Color.Transparent

6
  • The problem with this solution is that when the login bottom sheet shows up and the user press the back button then the app will be closed. Nov 15, 2021 at 9:33
  • Why do you need a back button on your HomeScreen? Your back button should be on the BottomSheet and then it should only triggers BottomSheetState to collapsed. Or the user can click next to the sheet and it will disappear again. Nov 15, 2021 at 10:09
  • I mean the back button of the device Nov 15, 2021 at 11:22
  • Just add a BackHandler: BackHandler(enabled = true) { //TODO: set bottomSheetState to collapsed } This Function listens to devices back button clicks Nov 15, 2021 at 11:54
  • You cannot invoke the composable function from oncklick Nov 16, 2021 at 10:04
1

this way you can create transparent bottomsheet in compose, extend below custombottomsheet

 abstract class CustomBottomSheeet : 
         BottomSheetDialogFragment() {
       var isDraggable: Boolean = true

   abstract fun init()

   @Composable
   abstract fun BuildContentComposable()

   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
   }

   override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
       super.onViewCreated(view, savedInstanceState)
       dialog?.let {
           val sheet = it as BottomSheetDialog
           sheet.behavior.state = BottomSheetBehavior.STATE_EXPANDED
           sheet.behavior.peekHeight = 
         Resources.getSystem().displayMetrics.heightPixels
           sheet.behavior.isDraggable = isDraggable
       }
   }

   override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
       val dialog = super.onCreateDialog(savedInstanceState)

       dialog.setOnShowListener {
           //this line transparent your dialog background
           (view?.parent as ViewGroup).background =
               ColorDrawable(android.graphics.Color.TRANSPARENT)
       }

       return dialog
   }

   
   override fun onCreateView(
       inflater: LayoutInflater,
       container: ViewGroup?,
       savedInstanceState: Bundle?
   ): View? {
       val view = ComposeView(requireContext()).apply {
           setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
           setContent {
               BottomSheetTop {
                   BuildContentComposable()
               }
            
           }
       }

       init()
       return view
   }
   @Preview
   @Composable
   private fun Preview(){
       BottomSheetTop(){}
   }

   @Composable
   private fun BottomSheetTop(content: @Composable () -> Unit) {
       Box(modifier = Modifier
               .fillMaxWidth()
               .background(
                   colorResource(id = R.color.transparent),
                   shape = RoundedCornerShape(topStart = 14.sdp, topEnd = 14.sdp)
               )
               .clip(RoundedCornerShape(topStart = 14.sdp, topEnd = 14.sdp))
       ) {
           ConstraintLayout(
               modifier = Modifier
                   .fillMaxWidth()
                   .background(color = colorResource(id = R.color.transparent))
           ) {
               val (topImage, contentView) = createRefs()
             //  ImageViewCustomPainterSource(painterResource = R.drawable.bg_transparent,modifier = Modifier.fillMaxSize())
               Box(
                   modifier = Modifier
                       .width(40.sdp)
                       .height(3.sdp)
                       .constrainAs(topImage) {
                           top.linkTo(parent.top)
                           start.linkTo(parent.start)
                           end.linkTo(parent.end)
                       }
                       .background(
                           colorResource(id = R.color.white),
                           shape = RoundedCornerShape(20.sdp)
                       )
               )
                val marginHorizontal = 6.sdp
                val marginTop = 4.sdp
               val marginBottom = 10.sdp
               Box(modifier = Modifier.background(color = colorResource(id = R.color.white),shape = RoundedCornerShape(14.sdp))
                   .padding(start = 4.sdp, end = 4.sdp, top = 6.sdp, bottom = 10.sdp)
                   .constrainAs(contentView) {
                       start.linkTo(parent.start,marginHorizontal)
                       end.linkTo(parent.end,marginHorizontal)
                       top.linkTo(topImage.bottom,marginTop)
                       bottom.linkTo(parent.bottom,marginBottom)
                       width = Dimension.fillToConstraints
                   }) {
                   content()
               }
           }
       }
   }

  

}

0

helpinghand You are right about handling the device back button. But now when the user presses the back button only the Login screen's sheet content collapse and the main content of the login screen which is the main content of the home screen remains. In order to it works I don't need the composable callback screen as a parameter for the login screen function and instead, I replace it with another callback like (callback: () -> Unit) and whenever want to get rid of login screen just invoke it in the login screen (for example when clicking outside the bottom sheet or collapsing it) and then in the home screen create a boolean mutable state for detecting when it needs to show the login screen and so in the trailing lambda make the state false.

3
  • I'm a bit confused about what behavior you want to achieve, do you have something like a mockup? So you now have your HomeScreen which is shown right? Then when you click on something the bottom sheet appears. And after that you want to close it and show which screen? The HomeScreen should be shown now. Nov 17, 2021 at 10:05
  • The problem with your solution was that when the user presses the back button more than one time nothing happens because the user still is on the login screen and we handle the back button to collapse the bottom sheet. Although it needs some more code to fix, also I don't want to pass home screen contents with all of its states and events handled by its viewmodel to Login screen. Nov 17, 2021 at 12:31
  • Ah now I see what you mean. In that case you probably shouldn't use BottomSheetScaffold and instead make Login Screen to something like a Card which slides into the screen from the bottom. Nov 17, 2021 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.