androidandroid-jetpack-composeandroid-bottomappbar

Is Jetpack Compose BottomNavBar? How can use bottomNavbar any Example?


I am working on jectpack compose in android application. So i want to use use bottomAppbar. Never found any example can someone help?


Solution

  • Yes jetpack compose support BottomAppBar with simple and FloatingActionButton Check below code example which help you more

    BottomAppBarWithoutFab

    @Composable
    fun BottomAppBarNoFab(getMyActionImage: () -> Image, getMyNavigationImage: () -> Image) {
        val someActionImage: Image = getMyActionImage()
        val someNavigationImage: Image = getMyNavigationImage()
        val navigationIcon: @Composable() () -> Unit = {
            AppBarIcon(someNavigationImage) { /* doSomething()*/ }
        }
        val actionData = listOf(someActionImage)
        BottomAppBar(
            navigationIcon = navigationIcon,
            actionData = actionData
        ) { actionImage ->
            AppBarIcon(actionImage) { /* doSomething()*/ }
        }
    }
    

    Check BottomAppbarWithoutFab Screenshot

    enter image description here

    BottomAppBarWithCutout

    @Composable
    fun BottomAppBarCutoutFab(
        getMyActionImage: () -> Image,
        getMyNavigationImage: () -> Image
    ) {
        val someActionImage: Image = getMyActionImage()
        val someNavigationImage: Image = getMyNavigationImage()
        val navigationIcon: @Composable() () -> Unit = {
            AppBarIcon(someNavigationImage) { /* doSomething()*/}
        }
        val actionData = listOf(someActionImage)
        BottomAppBar(
            navigationIcon = navigationIcon,
            fabConfiguration = BottomAppBar.FabConfiguration(cutoutShape = CircleShape) {
                FloatingActionButton(
                    color = +themeColor { secondary },
                    icon = +imageResource(R.drawable.ic_add_icon),
                    onClick = { /** doSomething() */ })
            },
            actionData = actionData
        ) { actionImage ->
            AppBarIcon(actionImage) { /* doSomething()*/  }
        }
    }
    

    Check bottomAppbarcutoutFab screenshot

    enter image description here

    Check below code how we call in @Compose function

    Column(mainAxisAlignment = MainAxisAlignment.End) {
            BottomAppBarNoFab(getMyActionImage = {
                +imageResource(R.drawable.ic_home_icon)
            }, getMyNavigationImage = {
                +imageResource(R.drawable.ic_heart_icon)
            })
        }