Hi All, I want to create a bottom tab bar which ha...

# compose

[Ashwani Singh]

Hi All,
I want to create a bottom tab bar which have have some offset from bottom like in attached image.
I tried to create bottom bar using below code

Scaffold(
    bottomBar = {
        //  Bottom bar code
    },
)

But bottom Bar render in bottom, with any offset from bottom or transparent margin.
Is there any way/sample?

[Timo Drick]

It should work. But your content should not .clipToBounds()
Many of the compose functions do .clipToBounds() e.g. ScrollableColumn or LazyColumn
So you need to create your own versions without clipping.
Or you just create a custom view and not using Scaffold

[Timo Drick]

https://kotlinlang.slack.com/files/URMNPDGN8/F016XTSHWKD/device-2020-07-11-100551.webm

device-2020-07-11-100551.webm

[Timo Drick]

There i am using Scaffold but with a custom LazyColumnFor implementation which do not .clipToBounds()

[Timo Drick]

And than i can use the innerPadding to position the FAB and still able to view the items below the content area of the Scaffold

[Ashwani Singh]

Transparent is fine but there is no any margin/offset from bottom. That's the problem.

[Timo Drick]

You can just define any compose view as BottomBar. So of course you can use padding and also use custom shapes like in your image

[Ashwani Singh]

Yes, I used own custom view which is working, But I want to do using bottomBar(){}

[Timo Drick]

ah ok. Yes maybe this is not possible. At least not with the custom shape. But semi transparent should work. I am doing it.

[Ashwani Singh]

yes 👍

[Ashwani Singh]

Not able to customize

Scaffold(
    bottomBar = {
        //  Bottom bar code
    },
)

[Timo Drick]

Can you try s.th. like this:

Column(modifier = Modifier.drawOpacity(appBarOpacity)) {
    BottomAppBar(...) {
        content()
    }
}

[Ashwani Singh]

Currently I used and its working but want to do in

Scaffold(
    bottomBar = {
        //  Bottom bar code
    },
)

[Timo Drick]

Yes i do it this way:

Scaffold(
    bottomBar = {
        Column(modifier = Modifier.drawOpacity(appBarOpacity)) {
           BottomAppBar(...) {
              content()
           }
        }
    },
)

But yes maybe not perfect solution

[Ashwani Singh]

May be it will work.

[Timo Drick]

But the problem is that nothing will be displayed behind this bottombar until you use compose elements in the bodyContent area which will fillMaxSize and do NOT have .clipToBounds() as modifier

[Timo Drick]

Scaffold(
    bodyContent = {
        ImageList()
    },
    bottomBar = {
        BottomAppBar(backgroundColor = Color.Transparent) {
            IconButton(onClick = {}) {
                Icon(imageVector = <http://Icons.Default.Menu|Icons.Default.Menu>)
            }
            IconButton(onClick = {}) {
                Icon(imageVector = Icons.Default.Add)
            }
            Spacer(modifier = Modifier.weight(1f))
            IconButton(onClick = {}) {
                Icon(imageVector = Icons.Default.Search)
            }
        }
    }
)

[Timo Drick]

And with the rounded corners you can archive using custom views:

Scaffold(
    bodyContent = {
        ImageList(remoteImageList)
    },
    bottomBar = {
        Row(modifier = Modifier.fillMaxWidth().padding(8.dp).background(Color.LightGray.copy(alpha = 0.6f), shape = RoundedCornerShape(12.dp))) {
            IconButton(onClick = {}) {
                Icon(imageVector = <http://Icons.Default.Menu|Icons.Default.Menu>)
            }
            IconButton(onClick = {}) {
                Icon(imageVector = Icons.Default.Add)
            }
            Spacer(modifier = Modifier.weight(1f))
            IconButton(onClick = {}) {
                Icon(imageVector = Icons.Default.Search)
            }
        }
    }
)

[Timo Drick]

[Ashwani Singh]

Oh that's great thank you ....