I don’t even know what to google…
I have the following layout:
<code>Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Column {
Text(
text = thatText,
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(text = someText)
}
FilledTonalButton(
onClick = { }) {
Text(text = "Button")
}
}
</code>
<code>Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Column {
Text(
text = thatText,
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(text = someText)
}
FilledTonalButton(
onClick = { }) {
Text(text = "Button")
}
}
</code>
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Column {
Text(
text = thatText,
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(text = someText)
}
FilledTonalButton(
onClick = { }) {
Text(text = "Button")
}
}
Which looks like:
<code>thatText | ////////////
----------------------| // Button //
someText | ////////////
</code>
<code>thatText | ////////////
----------------------| // Button //
someText | ////////////
</code>
thatText | ////////////
----------------------| // Button //
someText | ////////////
Now when thatText becomes too long it deforms the Button:
<code> | /////
| // //
| // //
thatText that is really long | // //
-----------------------------| // //
someText | // //
| // //
| // //
| /////
</code>
<code> | /////
| // //
| // //
thatText that is really long | // //
-----------------------------| // //
someText | // //
| // //
| // //
| /////
</code>
| /////
| // //
| // //
thatText that is really long | // //
-----------------------------| // //
someText | // //
| // //
| // //
| /////
But I would like it to be:
<code>thatText that is r... | ////////////
----------------------| // Button //
someText | ////////////
</code>
<code>thatText that is r... | ////////////
----------------------| // Button //
someText | ////////////
</code>
thatText that is r... | ////////////
----------------------| // Button //
someText | ////////////
In xml I would do
<code><RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/my_button">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:id="@+id/share_file_detail_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/my_button"
android:layout_alignParentRight="true" />
</RelativeLayout>
</code>
<code><RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/my_button">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:id="@+id/share_file_detail_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/my_button"
android:layout_alignParentRight="true" />
</RelativeLayout>
</code>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="@id/my_button">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"/>
<TextView
android:id="@+id/share_file_detail_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/my_button"
android:layout_alignParentRight="true" />
</RelativeLayout>
How do I achieve that in compose?
Add weight to the Column and achieve this even with the larger text, A button doesn’t collapse.
Here is the code.
<code> Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Column(Modifier.weight(1f)) { // weight added here
Text(
text = "thatText",
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(text = "someText")
}
FilledTonalButton(
onClick = { }) {
Text(text = "Button")
}
}
</code>
<code> Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Column(Modifier.weight(1f)) { // weight added here
Text(
text = "thatText",
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(text = "someText")
}
FilledTonalButton(
onClick = { }) {
Text(text = "Button")
}
}
</code>
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween,
modifier = Modifier
.fillMaxWidth()
.padding(16.dp)
) {
Column(Modifier.weight(1f)) { // weight added here
Text(
text = "thatText",
overflow = TextOverflow.Ellipsis,
maxLines = 1
)
Text(text = "someText")
}
FilledTonalButton(
onClick = { }) {
Text(text = "Button")
}
}
1