How to apply custom drawable on Compose - BottomNavigation?

Question

@AndroidCompose Thanks for paying attention on my question. I need to implement Bottom navigation in Android Compose and need to apply a custom drawable(Vector,9patch,PNG etc) background to that navigation bar.

So what does that mean....?

I need to change the Bottom navigation item rectangle container background to some custom background.

Here is what I am doing :

@Composable
fun BottomNavBar() {
    val navController = rememberNavController()
    Scaffold(
//        topBar = { TopBar() },
//        drawerShape = customShape(),
        backgroundColor = Color.Transparent,
        bottomBar = {
            BottomNavigationBar(navController)
        }
    ) {
        Navigation(navController = navController)
    }
}

Problem : With Bottom Navigation, it's easy to change it's BG color with existing solution but I didn't find a way to apply background drawable. This is the way to change it's BG color but no way to apply custom drawable.

BottomNavigation(
        modifier = Modifier
            .padding(top = 24.dp)
            .height(108.dp),
        backgroundColor = colorResource(id = R.color.white),
//        contentColor = Color.White
        contentColor = colorResource(id = R.color.colorAccent),
    )
    {
// TODO 
    }

I will be thankful if someone can suggest a way?

Answer 1

If I understand your question properly, all you need to do is this:

@Composable
fun MyBackGround() {
    Image(
        painterResource(R.drawable.maples),
        contentDescription = "",
        contentScale = ContentScale.Crop,
        modifier = Modifier.fillMaxSize()
    )
}

@Composable
fun BottomNavBar() {

    Scaffold(
        backgroundColor = Color.Transparent,
        bottomBar = {
            BottomNavigation(
                modifier = Modifier
                    .padding(top = 24.dp)
                    .height(108.dp),
                contentColor = colorResource(id = R.color.black),
            )
            {
                MyBackGround()
            }
        }
    ) {
    }
}

Edit

If you add this in your onCreate():

WindowCompat.setDecorFitsSystemWindows(window, false)

And this in your themes.xml:

<item name="android:navigationBarColor">
            @android:color/transparent
        </item>

You will then have the drawable behind the nav buttons.