https://kotlinlang.org
Join Slack
Hi All, I want to create a bottom tab bar which have have some offset from bottom like in attached i...
# compose
a
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
Copy 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?
👍 2
t
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
There i am using Scaffold but with a custom LazyColumnFor implementation which do not .clipToBounds()
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
a
Transparent is fine but there is no any margin/offset from bottom. That's the problem.
t
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
a
Yes, I used own custom view which is working, But I want to do using bottomBar(){}
t
ah ok. Yes maybe this is not possible. At least not with the custom shape. But semi transparent should work. I am doing it.
a
yes 👍
Not able to customize
Copy code
Scaffold(
    bottomBar = {
        //  Bottom bar code
    },
)
t
Can you try s.th. like this:
Copy code
Column(modifier = Modifier.drawOpacity(appBarOpacity)) {
    BottomAppBar(...) {
        content()
    }
}
a
Currently I used and its working but want to do in
Copy code
Scaffold(
    bottomBar = {
        //  Bottom bar code
    },
)
t
Yes i do it this way:
Copy code
Scaffold(
    bottomBar = {
        Column(modifier = Modifier.drawOpacity(appBarOpacity)) {
           BottomAppBar(...) {
              content()
           }
        }
    },
)
But yes maybe not perfect solution
👍 1
a
May be it will work.
t
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
Copy code
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)
            }
        }
    }
)
And with the rounded corners you can archive using custom views:
Copy code
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)
            }
        }
    }
)
👍 1
a
Oh that's great thank you ....
7 Views
Open in Slack
PreviousNext
Powered by

kotlinlang

A modern programming language that makes developers happier.

Powered by