How to make horizontal Linear Layout Child wrap its content?

Question

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.

I think changing the width of all the TextViews to wrap_content should solve your problem. — , Nov 09 '17 at 14:17
use wrap_content with width parameter. but it's size will increase horizontally as the text limit increase. — Umair, Nov 09 '17 at 14:21
Mehul Kanzariya No, I was trying it before reading about `weight` solution, which also not working for me — Blue Bot, Nov 09 '17 at 14:22
you want the size to increase with text length horizontally but the text should remain in one line ? — Umair, Nov 09 '17 at 14:23
Umair hard coding the width also not working... I dont care if the text will break to new line. at this point non works. at the end ill render simple html there and would like to break line at some size, but this is outside scope at this point — Blue Bot, Nov 09 '17 at 14:26
@darthydarth I have tried your code and now i have three textviews aligned vertically and their size increases horizontally as the length increase. I found your question quite confusing ;) — Umair, Nov 09 '17 at 14:29
didnt understand your question? If u want the textview to have only one line, use maxLines=1. — Jerin A Mathews, Nov 09 '17 at 14:32
Jerin A Mathews don't really matter just want the width to be the length of the text (its short) — Blue Bot, Nov 09 '17 at 14:40
@Mahozad this question seems different than that. This is a vertical layout wrapping the horizontal size of its children, not wrapping children around to another line when there's no more room. — Ryan M, Aug 03 '21 at 05:41

Ajil O. · Answer 1 · 2017-11-09T15:38:36.643

1

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

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>

edited Nov 09 '17 at 15:38

answered Nov 09 '17 at 14:46

Ajil O.

6,562
5
40
72

@darthydarth Are you sure you are looking at the latest edit? What output are you getting at this point and how do you require it? – Ajil O. Nov 09 '17 at 14:57
getting the `Text View`s stretch full width of device/linear layout and height of `Linear Layout` is as the `Text View` content. in short - full width and squished vertically – Blue Bot Nov 09 '17 at 14:59
@darthydarth In that case I don't see why [Umair](https://stackoverflow.com/a/47204670/6891637)'s answer does not work for you. In my answer the TextView will not expand to width of the `LinearLayout` (unless the text is long, ofc). – Ajil O. Nov 09 '17 at 15:08
In this answer `Text View` are still stretching full width. in Umair's answer they all stretch to the size of the `Text View` width the longest text which is also not good. Maybe there is no good solution with `Linear Layout` but I cant use constraints.... feeling hopeless – Blue Bot Nov 09 '17 at 15:13
@darthydarth Just to get some clarity, how wide do you want the `TextView` to actually go – Ajil O. Nov 09 '17 at 15:15
Ajil O the width of its text (content). lets assume its no more the 2-4 short words to simplify the problem – Blue Bot Nov 09 '17 at 15:19
@darthydarth I have added an image in the answer. The `TextView` **IS** as wide as it's content. I don't understand what your requirement is – Ajil O. Nov 09 '17 at 15:30
I see, for some reason I'm not getting the same result, trying to understand why – Blue Bot Nov 09 '17 at 15:37
I voted up because this works for the question I published for next ppl to come. but in my project it is still not working, there are more complexity there.. Thanks anyway – Blue Bot Nov 09 '17 at 15:48
1

@darthydarth If you post in more detail there is a good chance some one might be able to help – Ajil O. Nov 09 '17 at 15:50
Ajil O updated my question with more details from my own project – Blue Bot Nov 09 '17 at 16:14

Blue Bot · Accepted Answer · 2017-11-09T17:16:53.510

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

score 0 · Answer 3 · answered Nov 09 '17 at 14:42

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>

this is ok but in my case I need the `Text View`s to wrap the their content, here they will be the size of the longest text — Blue Bot, Nov 09 '17 at 14:49
@darthydarth then you have 2 options either give hardcoded width to textview and the text will go down when size increase. if you want that too fixed then use maxlines="1" along with hardcoded width — Umair, Nov 09 '17 at 14:54

score 0 · Answer 4 · answered Nov 09 '17 at 14:51

0

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

answered Nov 09 '17 at 14:51

wannabe

136
6

you are totally right but i can't in this case because I'm adding and removing the `Text View`s programmatically so constraints get messed up very quickly – Blue Bot Nov 09 '17 at 14:54

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

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>

Thanks I already figured it out, see answer https://stackoverflow.com/a/47207341/5674583 — Blue Bot, Nov 10 '17 at 08:32

How to make horizontal Linear Layout Child wrap its content?

5 Answers5

Try this