Is there something broken about `Button`s regardin...
# composen
Nino
10/22/2024, 11:12 AMIs there something broken about `Button`s regarding their height ? Why won't they "crop" like a
TextTextButtonTextButtonNino
10/22/2024, 11:13 AMWith Text :
Copy code
package fr.delcey.endnewpostcompose
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
class LayoutActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Box(Modifier.fillMaxSize()) {
var sliderPosition by remember { mutableFloatStateOf(0f) }
Column(
modifier = Modifier
.align(Alignment.TopCenter)
.fillMaxWidth()
.height((sliderPosition * 200).dp),
) {
CroppableContent()
}
Column(
modifier = Modifier
.align(Alignment.BottomCenter)
) {
Slider(
value = sliderPosition,
onValueChange = { sliderPosition = it }
)
Text(text = sliderPosition.toString())
}
}
}
}
@Composable
private fun CroppableContent() {
Text(
text = "Lorem ipsum dolor sit amet",
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Red)
)
Text(
text = "Lorem ipsum dolor sit amet",
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Blue)
)
}
}Nino
10/22/2024, 11:13 AMWith button :
Copy code
@Composable
private fun CroppableContent() {
Button(
onClick = { /*TODO*/ },
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Red)
) {
Text(text = "Lorem ipsum dolor sit amet")
}
Button(
onClick = { /*TODO*/ },
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.background(Color.Blue)
) {
Text(text = "Lorem ipsum dolor sit amet")
}
}s
Stylianos Gakis
10/22/2024, 11:22 AMButton is a material component, which follows the material design guidelines and it's for that reason opinionated in how it works and how it lays out itself in different scenarios.
If you did it yourself using foundation components, like doing a
Copy code
Surface(Modifier.clickable {}) {
Text("text", Modifier.padding...)
}n
Nino
10/22/2024, 11:25 AMSo if a component is behaving erratically in "low height", I have no choice but to redo them entirely by myself ? Can't I control this myself with an intermediate layout or a modifier to tell them to "still crop" ?
This is just a very simple example and I don't see myself recoding something a Lottie composable just because they don't behave the same way in low height as the defaut components
s
Stylianos Gakis
10/22/2024, 11:28 AMHow is Lottie brought up here? I am confused.
It's not "erratic" behavior, it's following the material specifications. If your app is not using the material design system and specs, then yeah, it wouldn't make sense that you would expect their components to do what your custom requirements are expecting.
n
Nino
10/22/2024, 11:32 AMThis is just a simple example, but the same bugs appear with more complex components like a
LottieAnimations
Stylianos Gakis
10/22/2024, 11:40 AMIf you have some specific issue LottieAnimation it might be best to bring that up with their maintainers. Or you can look at how it's done internally to try and see if they make any assumptions for the height of them or whatever your issue is.
What I mean for the material components is that hey need to follow the specs as seen here https://m3.material.io/components/buttons/specs so this is then reflected in their internal implementation, for example here https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]dx/compose/material3/Button.kt;l=152-155?q=material3%2FButton
If you try to render them with constraints where they would not normally fit, due to how they are implemented the button seems to want to still render itself outside of those incoming constraints, because it has a fixed min height it needs to adhere to.
If you can not do what you need to do with those constraints, you need to not use the material component and you can make your own which does not have that
minSizen
Nino
10/22/2024, 11:43 AMOk, this is very disappointing that every component will behave differently regarding their height. At least in XML Android this behavior was consistent. No animation about height I guess 😞
Thank you very much for your time, this was very educating. I guess I won't be using Compose for still another couple year 😄
s
Stylianos Gakis
10/22/2024, 11:54 AMIf this is the reason you are not going to use compose, then you will never use compose. This is not some temporary limitation or something unexpected. If you are using components from some design system, then you are bound to the rules of that design system.
Compose offers an excellent foundation layer of composables which let you do whatever you wish to do, with as much flexibility as you wish to have.
You can also try to be a bit more smart about the height animation and wrap the material button in your column with a AnimatedVisibility which lets you freely edit the animation spec between being invisible and visible.
The options are more or less infinite, as long as you don't constraint yourself for no reason.
n
Nino
10/22/2024, 12:02 PMI'm using a back-for-front server with a lot of different components and dynamic height (and many other stuff) I can't control. I can't possibly test all the combinations.
I can't rely on a system that behave erratically about the "simplest" of concept (size). That's just visual bugs waiting to happen.
And if there's not way to "force back" the "default cropping" (top to bottom) with an intermediate layout or something like that, I can't trust any composable that I didn't do by myself, and it's wayyyy too much of a cost to simply "do Compose" 😞
Thanks for the AnimatedVisibility idea, but it feels like hidding the bad stuff under a rug haha 🙈
s
Stylianos Gakis
10/22/2024, 12:03 PMDo as you wish, I still think you are stuck labeling things as "erratic" when I just explained exactly what is going on 🤷 I don't know what else I can add to this conversation.
n
Nino
10/22/2024, 12:04 PMThank you for your time 🙏 I'm sorry I don't like Compose, I try really hard but even the simplest thing alway go wrong for the past 4 years 😞
a
Albert Chang
10/22/2024, 12:06 PMEvery Material component has a minimum size enforcement by default (to ensure touch target size), which you can disable by this.
Copy code
CompositionLocalProvider(
LocalMinimumInteractiveComponentEnforcement provides false
) {
...
}AnimatedVisibilityn
Nino
10/22/2024, 12:09 PMThat's much better indeed ! Thank you ! But it still behaves like an accordion 🇫🇷 instead of "cropping". How can I achieve that ?
a
Albert Chang
10/22/2024, 12:17 PMJust use
AnimatedVisibility Copy code
Modifier
.graphicsLayer(clip = true)
.wrapContentHeight(align = <http://Alignment.Top|Alignment.Top>, unbounded = true)💥 1
s
Stylianos Gakis
10/22/2024, 12:19 PMThe nuclear option, I like it 😅
Btw in AnimatedVisibility you can also do stuff like
Copy code
AnimatedVisibility(
visible = ...,
enter = expandVertically(expandFrom = <http://Alignment.Top|Alignment.Top>),
exit = shrinkVertically(shrinkTowards = <http://Alignment.Top|Alignment.Top>),
)n
Nino
10/22/2024, 12:29 PMYes !!
Copy code
Modifier
.graphicsLayer(clip = true)
.wrapContentHeight(align = <http://Alignment.Top|Alignment.Top>, unbounded = true)animate*AsState34 Views