Thread
#compose
    a

    Ashwani Singh

    1 year ago
    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

    Timo Drick

    1 year ago
    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

    1 year ago
    Transparent is fine but there is no any margin/offset from bottom. That's the problem.
    Timo Drick

    Timo Drick

    1 year ago
    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

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

    Timo Drick

    1 year ago
    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

    1 year ago
    yes 👍
    Not able to customize
    Scaffold(
        bottomBar = {
            //  Bottom bar code
        },
    )
    Timo Drick

    Timo Drick

    1 year ago
    Can you try s.th. like this:
    Column(modifier = Modifier.drawOpacity(appBarOpacity)) {
        BottomAppBar(...) {
            content()
        }
    }
    a

    Ashwani Singh

    1 year ago
    Currently I used and its working but want to do in
    Scaffold(
        bottomBar = {
            //  Bottom bar code
        },
    )
    Timo Drick

    Timo Drick

    1 year ago
    Yes i do it this way:
    Scaffold(
        bottomBar = {
            Column(modifier = Modifier.drawOpacity(appBarOpacity)) {
               BottomAppBar(...) {
                  content()
               }
            }
        },
    )
    But yes maybe not perfect solution
    a

    Ashwani Singh

    1 year ago
    May be it will work.
    Timo Drick

    Timo Drick

    1 year ago
    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
    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:
    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)
                }
            }
        }
    )
    a

    Ashwani Singh

    1 year ago
    Oh that's great thank you ....