How to make horizontal Linear Layout Child wrap its content?

Viewed 3166

As the title suggests in my case the child view is a TextView with some content. and I want it to be one per line

So putting layout_width to 0dp and adding layout_weight to 1 did not work, Im assuming that because its the only one in its line so 1 is the highest wight... not sure about it though

this is the xml:

    <LinearLayout
        android:id="@+id/tagsVerticalLineup"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:gravity="center_horizontal">

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

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

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

    </LinearLayout>

At the end I want them one after another vertically (one on each row) with horizontal size as their text length (content)

Is this even possible with Linear Layout?

Thanks

EDIT: As @Ajil O answer is working, my own problem still remains. I isolated the main difference.

In my project Im adding the Text Views from the code using Inflate because I have default styling.

Inflating Code:

    final LinearLayout tagAreaView = (LinearLayout) findViewById(R.id.tagsVerticalLineup);
    TextView tag = (TextView) getLayoutInflater().inflate(R.layout.answer_tag, null);

    int tagId = someListArray.size();
    tag.setId(tagId);
    tag.setText(someChangingObject.text);
    tagAreaView.addView(tag, tagId);

Text View answer_tag:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    style="@style/SelectedTagAnswer" />

style xml SelectedTagAnswer:

<style name="SelectedTagAnswer">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginStart">8dp</item>
    <item name="android:layout_marginEnd">16dp</item>
    <item name="android:background">@drawable/selected_answer</item>
    <item name="android:drawablePadding">8dp</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:drawableStart">@drawable/ic_cross_round</item>
    <item name="android:elevation">3dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:paddingEnd">25dp</item>
    <item name="android:paddingStart">15dp</item>
    <item name="android:paddingTop">8dp</item>
</style>

NOTE:

When inserting a simple Text View to xml that uses same style, it works like in @Ajil O answer. Some thing in the inflating process messing it up.

5 Answers

Make the LinearLayout width to match_parent and height to wrap_content

<LinearLayout
    android:id="@+id/tagsVerticalLineup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     />

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     />

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     />

</LinearLayout>

If you want the TextView to occupy 1 line use android:maxLines="1" attribute

EDIT

enter image description here

The TextView are all in color now. You can see that the TextView is as wide as it's content.

The container, LinearLayout is shaded in the light violet(?) color. This LinearLayout has to be atleast as wide as the longest TextView or the view (or it's content) would get clipped.

<LinearLayout
    android:id="@+id/tagsVerticalLineup"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:background="#AAAAFF"
    android:layout_gravity="center">

    <TextView
        android:layout_margin="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#080"
        android:text="small text"
        android:textColor="#FFF"
        android:textSize="18sp"
        android:maxLines="1"/>

    <TextView
        android:layout_margin="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Slightly longer text"
        android:background="#400"
        android:textColor="#FFF"
        android:textSize="18sp"
        android:maxLines="1"/>

    <TextView
        android:layout_margin="8dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="loooooooooooooooooong text"
        android:background="#008"
        android:textColor="#FFF"
        android:textSize="18sp"
        android:maxLines="1"/>

</LinearLayout>

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

Just use wrap_content parameter in your android:layout_widthand you will be fine You are using 0dp now:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:id="@+id/tagsVerticalLineup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center_horizontal"
xmlns:android="http://schemas.android.com/apk/res/android">

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

    />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />

</LinearLayout>

It is preferable that you use the ContrainstLayout and you can manipulate any event to the dimensions that you want

Try this

  • make the parent layout's Height and Width=match_parent
  • textView make width match_parent so that you can use textalignment=centre or you can use gravity=centre

<LinearLayout
    android:id="@+id/tagsVerticalLineup"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal">

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"/>

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"     />

    <TextView 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>

</LinearLayout>
Related