https://kotlinlang.org logo
Channels
Powered by
a

Ashwani Singh

11/19/2020, 11:46 AM
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

Timo Drick

11/19/2020, 1:12 PM
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

Ashwani Singh

11/19/2020, 1:21 PM
Transparent is fine but there is no any margin/offset from bottom. That's the problem.
t

Timo Drick

11/19/2020, 1:22 PM
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

Ashwani Singh

11/19/2020, 1:23 PM
Yes, I used own custom view which is working, But I want to do using bottomBar(){}
t

Timo Drick

11/19/2020, 1:24 PM
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

Ashwani Singh

11/19/2020, 1:26 PM
yes 👍
Not able to customize
Copy code
Scaffold(
    bottomBar = {
        //  Bottom bar code
    },
)
t

Timo Drick

11/19/2020, 1:27 PM
Can you try s.th. like this:
Copy code
Column(modifier = Modifier.drawOpacity(appBarOpacity)) {
    BottomAppBar(...) {
        content()
    }
}
a

Ashwani Singh

11/19/2020, 1:29 PM
Currently I used and its working but want to do in
Copy code
Scaffold(
    bottomBar = {
        //  Bottom bar code
    },
)
t

Timo Drick

11/19/2020, 1:31 PM
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

Ashwani Singh

11/19/2020, 1:33 PM
May be it will work.
t

Timo Drick

11/19/2020, 1:37 PM
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

Ashwani Singh

11/20/2020, 12:04 PM
Oh that's great thank you ....
2 Views
Powered by