I am filling the content of a fragment with Compos...

# compose

[Mehdi Haghgoo]

I am filling the content of a fragment with Compose. I don't know why there is a huge margin around the Compose area.

I haven't used any padding for the scaffold.

Here's my fragment code:

class HomeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? = LinearLayout(context).apply{
        addView(ComposeView(context).apply {
            setContent {
                BodyContent(this.findFragment())
            }
        })
    }

}

@Composable
fun BodyContent(fragment: Fragment) {


    val data = listOf("One", "Two", "Three", "Four", "Five")

    Scaffold(
        modifier = Modifier.background(Color.Black).fillMaxSize()
            .background(Color.Blue),
        topBar = {
            MyTopAppBar()
        },
        bottomBar = {
            MyBottomBar()
        },

        floatingActionButton = { MyFab(fragment) },
        floatingActionButtonPosition = FabPosition.End,
        snackbarHost = {  },
        drawerContent = { MyDrawer() }

    ){



        LazyColumnFor(items = data, modifier = Modifier
            .background(Color.Green),
            itemContent = {item->
                Text(item, modifier = Modifier.padding(8.dp))
            }
        )




    }
}

@Composable
fun MyDrawer() {
    val items = arrayOf("My Account", "Monthly Cost", "Savings Report")
    Box(paddingStart = 32.dp) {
        Column(modifier = Modifier.align(Alignment.CenterVertically)) {
            for (item in items) {
                Text(item, modifier = Modifier.padding(8.dp))
            }
        }
    }
}


@Composable
fun MyTopAppBar() {
    TopAppBar(modifier = Modifier.padding(8.dp, 16.dp, 8.dp, 8.dp)) {
        if(gCost != null){
            Text("Cost is $gCost", modifier = Modifier.border(1.dp, Color.Red))
        }
        Icon(Icons.Default.Add, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
        Icon(Icons.Default.AccountBox, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
        Icon(Icons.Default.ExitToApp, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
        Icon(Icons.Default.ArrowBack, modifier = Modifier.clip(RoundedCornerShape(8.dp)))
    }
}




@Composable
fun MyBottomBar() {
    BottomAppBar() {
        Row(){
            Icon(Icons.Default.Person, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
            Icon(Icons.Default.Call, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
            Icon(Icons.Default.Send, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
            Icon(Icons.Default.Refresh, modifier = Modifier.clip(RoundedCornerShape(8.dp)).weight(0.25f))
        }
    }
}

@Composable
fun MyFab(fragment: Fragment) {
    FloatingActionButton(
        icon = { Icon(Icons.Default.Add) },

        onClick = {
            findNavController(fragment).navigate(HomeFragmentDirections.actionHomeFragmentToAddCostActivity())

            launchActivity = true
        },
        modifier = Modifier.padding(8.dp)
    )
}

[Yann Badoual]

What do you mean by "there is a huge margin around the Compose area" ?
Where precisely ?

[Yann Badoual]

If you're talking about the toolbar, that would be because of TopAppBar(modifier = Modifier.padding(8.dp, 16.dp, 8.dp, 8.dp))
You're settings padding arround the toolbar, which is applied first in this case, before the background etc (the order of modifiers matters).
It's like if you were setting margins with views here

[Yann Badoual]

And if you want the green background to fill, add fillMaxSize modifier in LazyColumnFor.
By the way, scaffold is passing a PaddingValues for your content that you should forward to your lazycolumn

[Mehdi Haghgoo]

Removing the paddings does not remove the extra margins (white space around the UI area). Seems like the LinearLayout automatically gets a margin. Not sure if this is a bug.

[Yann Badoual]

Oh my bad didn't realize, I thought it was on purpose for the screen

[Yann Badoual]

Can't you just return the ComposeView from onCreateView without using a LienarLayout?

[Mehdi Haghgoo]

Good idea. Tried it, but had no effect on the initial problem.

[Ian Arbuckle]

The lazy column needs to be placed inside body content like this in your scaffold:

Scaffold(
    topBar = {
        // top bar content
    },
    bodyContent = { innerPadding ->             LazyColumnFor(
            contentPadding = innerPadding,
            items = data, 
            modifier = Modifier
            .background(Color.Green),
            itemContent = {item->
                Text(item, modifier = Modifier.padding(8.dp))
            }
        )
    },
    bottomBar = {
    // bottom bar content
    }
)

[Ian Arbuckle]

Make sure you set inner padding from the body content in your LazyColumnFor

[Mehdi Haghgoo]

@Ian Arbuckle it has no effect on the padding around the content. I don't know how to use innerPadding to get rid of the space.

[Ian Arbuckle]

Did you set any margins in your activity xml where you inflate the fragment? This could be why there is margins around the compose view

[Yann Badoual]

@Ian Arbuckle I wouldn't use the innerPadding as contentPadding but as a Modifier.padding instead. Using it as contentPadding can lead to weird effects

[Ian Arbuckle]

Interesting @Yann Badoual I haven't seen any weird side effects in using it so far. Only downside in using Modifier.padding is that you won't be add padding if it was being clipped.

[Yann Badoual]

Using contentPadding means the content is actually bigger than the available space, let's say you set a background on it, the background will fill without the padding I believe in this case. Meaning it could show behind topbar/bottombar or whatever