Issue
Compose card surface shows always overdrawn. However, it's not the case if we use old style CardView in xml.
From here it's always recommended to reduce overdrawing of any view to make it more towards green, blue.
Just this following code will produce some output like this, which means it's overdrawn 3 or 4 times.
Card(
elevation = CardDefaults.cardElevation(defaultElevation = 10.dp),
modifier = modifier.fillMaxWidth().padding(vertical = 10.dp)
) {
Column(
modifier = Modifier
.padding(all = 16.dp)
) {
Text("randomText")
}
}
I tried to look into NowInAndroid sample application but even that produces all red output when debugged to show overdrawn areas.
Question
Is the Debug GPU Overdraw option in developer settings giving right information?
Can we really avoid this overdraw? If so, how?
Consider that this composable, which acts as a "Dialog", is being drawn in front the root application:
I tried to simulate this dialog by making it fit the entire screen and making its root container have a basic background(Color.Gray.copy(alpha = 0.5f) modifier.
However, even it is in front still being possible to interact with that top buttons.
My question is if there's a "direct" way to "disable" interactions of a particular composable tree to avoid passing parameters (such as "clickable") to all affected composables?
I thought doing something like:
take a "screenshot" from the area behind the alpha color;
draw the screenshot as an Image;
then draw the in-front composable (in my example, the "dialog").
However, I don't know how worth this is to implement or even how to take that "screenshot".
Also, may be an way to handle this using something relatad to remember compostion state or so on.
You can have a Box that consumes click events without click feedback:
val interactionSource = remember { MutableInteractionSource() }
Box(
modifier = modifier
.background(
color = MaterialTheme.colors.surface.copy(alpha = .4f)
)
.clickable(
onClick = {
if (dismissOnTouchOutside) {
onDismiss()
}
},
interactionSource = interactionSource,
indication = null
),
contentAlignment = Alignment.Center,
) {
// content here
}
This code fills the full screen if i specify the size to be 100.dp.
ComposeTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Box(
modifier = Modifier
.width(100.dp)
.height(100.dp)
.clip(RoundedCornerShape(12.dp))
.background(color = Color.Red)
) {
}
}
}
This code behave properly by filling the required size.
ComposeTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(modifier = Modifier.fillMaxSize()) {
Box(
modifier = Modifier
.width(100.dp)
.height(100.dp)
.clip(RoundedCornerShape(12.dp))
.background(color = Color.Red)
) {
}
}
}
}
Can somebody please explain why is it happening?
This is how Box works with the propagateMinConstraints parameter set to true. Surface is using it under the hood.
As an example, setting propagateMinConstraints to true can be useful when the Box has content on which modifiers cannot be specified directly and setting a min size on the content of the Box is needed. If propagateMinConstraints is set to true, the min size set on the Box will also be applied to the content, whereas otherwise the min size will only apply to the Box.
Therefore, the first-level Surface children will have min size constraints equal to the size of Surface.
Here is how one of the maintainers explains the reasons for this decision:
Surface is not really a layout. We had such issue with FloatingActionButton - We set min width and height on it according to the specification, but users can set larger size if they need. And now the content (icon) inside FloatingActionButton needs to be fill the whole size of Surface so we apply a ripple on it, and then ripple is clipped by the Surface shape. If we just set Modifier.fillMaxSize() it will fill the whole screen as FloatingActionButton has no max size specified. And there is no such which as Modifier.fillMinSize() as this information is not propagated by Box because of how the system works. So we come up with propagateMinConstraints=true idea, now the content inside Surface has to fill the min size applied on Surface. To be honest I am not sure the explanation is clear enough :). But yeah, if you need to have some real layout and multiple elements inside your Surface you need to add it manually, so add your own Box.
It can be overridden by Modifier.requiredSize, or, as you did in your second code example - by using an other container. The Column in your example still have size equal to the parent Surface.
This code fills the full screen if i specify the size to be 100.dp.
ComposeTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Box(
modifier = Modifier
.width(100.dp)
.height(100.dp)
.clip(RoundedCornerShape(12.dp))
.background(color = Color.Red)
) {
}
}
}
This code behave properly by filling the required size.
ComposeTheme {
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
Column(modifier = Modifier.fillMaxSize()) {
Box(
modifier = Modifier
.width(100.dp)
.height(100.dp)
.clip(RoundedCornerShape(12.dp))
.background(color = Color.Red)
) {
}
}
}
}
Can somebody please explain why is it happening?
This is how Box works with the propagateMinConstraints parameter set to true. Surface is using it under the hood.
As an example, setting propagateMinConstraints to true can be useful when the Box has content on which modifiers cannot be specified directly and setting a min size on the content of the Box is needed. If propagateMinConstraints is set to true, the min size set on the Box will also be applied to the content, whereas otherwise the min size will only apply to the Box.
Therefore, the first-level Surface children will have min size constraints equal to the size of Surface.
Here is how one of the maintainers explains the reasons for this decision:
Surface is not really a layout. We had such issue with FloatingActionButton - We set min width and height on it according to the specification, but users can set larger size if they need. And now the content (icon) inside FloatingActionButton needs to be fill the whole size of Surface so we apply a ripple on it, and then ripple is clipped by the Surface shape. If we just set Modifier.fillMaxSize() it will fill the whole screen as FloatingActionButton has no max size specified. And there is no such which as Modifier.fillMinSize() as this information is not propagated by Box because of how the system works. So we come up with propagateMinConstraints=true idea, now the content inside Surface has to fill the min size applied on Surface. To be honest I am not sure the explanation is clear enough :). But yeah, if you need to have some real layout and multiple elements inside your Surface you need to add it manually, so add your own Box.
It can be overridden by Modifier.requiredSize, or, as you did in your second code example - by using an other container. The Column in your example still have size equal to the parent Surface.
How exactly can you add Margin in Jetpack Compose?
I can see that there is a Modifier for padding with Modifier.padding(...) but I can't seem to find one for margins or am I blind?
Someone guide me please.
Thank you very much.
You can consider padding and margin as the same thing (imagine it as "spacing"). A padding can be applied twice (or more) in the same composable and achieve the similar behavior you would get with margin+padding. For example:
val shape = CircleShape
Text(
text = "Text 1",
style = TextStyle(
color = Color.White,
fontWeight = FontWeight.Bold,
textAlign = TextAlign.Center),
modifier = Modifier.fillMaxWidth()
.padding(16.dp)
.border(2.dp, MaterialTheme.colors.secondary, shape)
.background(MaterialTheme.colors.primary, shape)
.padding(16.dp)
)
Will result on this:
As you can see, the first padding is adding a space between the component and its border. Then the background and border are defined. Finally, a new padding is set to add space between the border and the text.
Thinking in terms of padding and margin you refer to the so-called box model that we are used to. There's no a box model in Compose but a sequence of modifiers which is applied to a given composable. The trick is that you can apply the same modifier like padding or border multiple times and the order of these matters, for example:
#Composable
fun PaddingExample() {
Text(
text = "Hello World!",
color = Color.White,
modifier = Modifier
.padding(8.dp) // margin
.border(2.dp, Color.White) // outer border
.padding(8.dp) // space between the borders
.border(2.dp, Color.Green) // inner border
.padding(8.dp) // padding
)
}
As the result you'll get this composable:
This design is well explained in the Modifiers documentation:
Note: The explicit order helps you to reason about how different modifiers will interact. Compare this to the view-based system where you had to learn the box model, that margins applied "outside" the element but padding "inside" it, and a background element would be sized accordingly. The modifier design makes this kind of behavior explicit and predictable, and gives you more control to achieve the exact behavior you want.
You can also use Spacer:
Spacer(modifier = Modifier.width(10.dp))
It represents an empty space layout, whose size can be defined using Modifier.width, Modifier.height and Modifier.size modifiers.
Suppose you want to add margin between 2 composables, then you can achieve it as
Text(
text = stringResource(id = R.string.share_your_posters),
fontSize = 16.sp,
color = Color.Black
)
Spacer(modifier = Modifier.width(10.dp))
Image(painter = painterResource(id = R.drawable.ic_starts), contentDescription = null)
The margin is different than padding, margin is the space outside the widget, where padding is the distance inside the widget, in old XML you could have decided explicitly which one to use, however the new compose way is different.
How compose treat paddings and margins?
There is an object which can be set as Parameter to the composable called Modifier, you can use this to do both margins and paddings.
Example of Padding:
Text(
text = "Test",
modifier = Modifier
.padding(16.dp)
.clickable { }
)
Example of Margin
Text(
text = "Test",
modifier = Modifier
.clickable { }
.padding(16.dp)
)
As you can see the order makes a difference here in compose, all the modifiers are implemented by order.
So from what I can understand after reading the documentation there is no margin modifier as such as the API designer felt it is redundant to give something different name which essentially does the same thing.
So let's say you want to apply a margin of 8dp before colouring your container with yellow background and you want the container with a padding of 4dp for the content.
Column(modifier = Modifier.padding(all = 8.dp)
.background(color = Color.Yellow)
.padding(all=4.dp)) {
Text(text = "Android")
...
}
Here in the above example you can see that I have applied the padding first and after that I have added background colour to the container and finally the last padding. And here's how it looks. Just like we intended.
I was also looking for something which should give me a direct option to set margin on a View like TextView. But unfortunately we don't have margin support in Jetpack compose. But the good news is we can still achieve it by using layout container like Box, which allows us to add views like TextView, ImageView etc.
So you can add margin to any of the child(TextView) by using padding modifier to the parent(Box).
Here is the code:
Box(Modifier.padding(10.dp)) {
Surface(color = Color.LightGray) {
Text(text = "Hello $text!", color = Color.Blue,
modifier = Modifier.padding(16.dp))
}
}
And the result is:
Here I have given 10.dp padding to the box.
Hope it is useful.
You can achieve the same effect as margin with putting your content, that has padding, inside a different composable like Box and make outer composable clickable. With this approach, inner padded areas will be included in clickable content.
You can achieve a margin effect by using nested Surface elements with padding
e.g.
#Composable
fun MainScreen() {
Surface(color=Color.Yellow, modifier=Modifier.padding(10.dp)){
Surface(color=Color.Magenta, modifier=Modifier.padding(30.dp)) {
Surface(
color = Color.Green,
modifier = Modifier.padding(10.dp).wrapContentSize()) {
Text(text = "My Dummy Text", color = Color.Black)
}
}
}
}