Android - Linearlayout Horizontal with Wrapping Children

Android - LinearLayout Horizontal with wrapping children

As of May 2016 Google has created its own FlexBoxLayout which should solve your problem.

You can find the GitHub repo here: https://github.com/google/flexbox-layout

How to make horizontal Linear Layout Child wrap its content?

Finally found a solution, So turns out Android wont refresh layout of views with wrap_content once it has been displayed.

As found in this answer WRAP_CONTENT not working after dynamically adding views

So my problem was inflating the view and then adding content (text).

To over come that, I set again the the height and width like so:

    tag.setLayoutParams(new ViewGroup.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT));

Now, if all from Ajil O answer is implemented, it is working!

Hope this edge case will come handy to someone in the future

Android Horizontal LinearLayout - Wrap Elements

LinearLayout cant help with this. Instead you will have make your own Layout as mentioned in this http://nishantvnair.wordpress.com/2010/09/28/flowlayout-in-android/ or incorporate the same approach as of this Android - LinearLayout Horizontal with wrapping children

Linearlayout with horizontal children with predefined width

Try this:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="30dp"
>

<com.google.android.material.button.MaterialButton
android:layout_width="50dp"
android:layout_height="50dp"
android:backgroundTint="@color/BrightYellowCrayola"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:padding="0dp"
app:icon="@drawable/outline_two_wheeler_24"
app:iconGravity="textStart"
app:iconPadding="0dp"
app:iconSize="24dp"
app:iconTint="@null"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />

<com.google.android.material.button.MaterialButton
android:layout_width="50dp"
android:layout_height="50dp"
android:backgroundTint="@color/BrightYellowCrayola"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:padding="0dp"
app:icon="@drawable/outline_two_wheeler_24"
app:iconGravity="textStart"
app:iconPadding="0dp"
app:iconSize="24dp"
app:iconTint="@null"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />

<com.google.android.material.button.MaterialButton
android:layout_width="50dp"
android:layout_height="50dp"
android:backgroundTint="@color/BrightYellowCrayola"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:padding="0dp"
app:icon="@drawable/outline_two_wheeler_24"
app:iconGravity="textStart"
app:iconPadding="0dp"
app:iconSize="24dp"
app:iconTint="@null"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

<Space
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />

<com.google.android.material.button.MaterialButton
android:layout_width="50dp"
android:layout_height="50dp"
android:backgroundTint="@color/BrightYellowCrayola"
android:insetLeft="0dp"
android:insetTop="0dp"
android:insetRight="0dp"
android:insetBottom="0dp"
android:padding="0dp"
app:icon="@drawable/outline_two_wheeler_24"
app:iconGravity="textStart"
app:iconPadding="0dp"
app:iconSize="24dp"
app:iconTint="@null"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle" />

</LinearLayout>

Using space is the way to go

Horizontal LinearLayout with Multiple Children, Move Children Below on New Line When No More Horizontal Space

I would like to have a horizontal LinearLayout that is as wide as the
screen and as high as its children, but the trick is that its children
will have dynamic width each and I don't want them going off screen
(cut out).

A LinearLayout can't do that(any default layout from the SDK can't do that) because the LinearLayout is set to place all the children in one horizontal or vertical line. Also, any type of conditional layout rules based on dimensions not yet available(like in your case the available width for the LinearLayout) are not possible in the xml anyway.

What you need is a custom layout which measures the children to use the available space moving any non fitting children on a new line below(a so called FlowLayout).

Edit:

Google now provides the flexbox library which implements the web's flexbox layout on Android. Using that library, the children of a FlexboxLayout will be placed on multiple lines based on their widths by using the flexDirection(with a value of row) and flexWrap(with a value of wrap) attributes.

LinearLayout children - all views should have the same height and at least wrap their content

Use a height of wrap_content for the outer LinearLayout, and use a height of match_parent for both of the children.

I know it seems a little bit odd, but as long as none of the children of the outer LinearLayout have a deterministic size (either fixed or wrap_content), the resulting behavior will be that each child is the height of the tallest child.

Sample Image

Sample Image

Android linearLayout with 3 children. 2 of which are of equal width

Try this:

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Left" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Middle Button Long Text " />

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Right" />
</LinearLayout>

Make the width of middle button android:layout_width="wrap_content"

Option 2

i would suggest to use it ...use a Relative layout instead. With help of android:layout_alignParentLeft="true" and android:layout_alignParentRight="true" you can achieve the layout

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<Button
android:id="@+id/bt_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:minWidth="0dp"
android:text="Left" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@+id/bt_right"
android:layout_toRightOf="@+id/bt_left"
android:text="Middle Button Long Text Middle Button Long Text Middle Button Long Text Middle Button Long Text" />

<Button
android:id="@+id/bt_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:minWidth="0dp"
android:text="Right" />
</RelativeLayout>

output:

Sample Image

LinearLayout not showing all its children

This behavior of LinearLayout is "as intended": it will display its children in a horizontal or vertical line.

Since all of the child Views in your blueprint seem to be of a similar size, consider switching to GridLayout, it is available as androidx-library (e.g. androidx.gridlayout:gridlayout:1.0.0).

For child Views with varying dimensions, FlexboxLayout is a good alternative. It was introduced in a blog post in February 2017. There is a version for androidx available: 'com.google.android:flexbox:1.1.0'

LinearLayout clipping children with TextView width set to wrap_content

You can achieve the desired result using android:layout_weight

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_top_holder"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">

<TextView
android:id="@+id/card_top_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="One Two Three Four Five"
android:textSize="40sp"/>

<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:src="@drawable/ic_volume_up_black_48dp"/>
</LinearLayout>

Edit: A little quote from the docs about how layout_weight works

LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.



Related Topics



Leave a reply



Submit