Develop Reference

How to make horizontal Linear Layout Child wrap its content? [duplicate]

This question already has answers here:
Android - LinearLayout Horizontal with wrapping children
(12 answers)
Closed 1 year ago.
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.

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>

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>

Android how to use auto-layout to move other views when a view is hidden?

I wanted to make resizable views when one of them is hidden. The question is already asked for iOS in the following link. I wanna make it for android. Any helps are appreciated. I wanted to add free space to three TextViev: position, stat_name, price after setting visibility hidden to count and discount
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:gravity="center"
android:orientation="horizontal"
android:paddingBottom="10dp"
android:paddingLeft="5dp"
android:paddingTop="30dp"
android:weightSum="100" >
<TextView
style="#style/list_titles_style"
android:layout_weight="10"
android:text="#string/position" />
<TextView
style="#style/list_titles_style"
android:layout_weight="35"
android:paddingLeft="15dp"
android:text="#string/stat_name" />
<TextView
style="#style/list_titles_style"
android:layout_weight="20"
android:text="#string/price" />
<TextView
android:id="#+id/count_label"
style="#style/list_titles_style"
android:layout_weight="10"
android:visibility="invisible"
android:text="#string/count" />
<TextView
android:id="#+id/discount_label"
style="#style/list_titles_style"
android:visibility="invisible"
android:layout_weight="25"
android:text="#string/discount" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="2dp"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_marginTop="1dp"
android:background="#drawable/border_layout"
android:orientation="horizontal" >
<ListView
android:id="#+id/stats_listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_marginBottom="5dp"
android:divider="#drawable/list_divider"
android:dividerHeight="2dp"
android:paddingBottom="0dp"
android:paddingLeft="10dp"
android:paddingTop="0dp" />
</LinearLayout>
And my style here it is:
<style name="list_titles_style">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">match_parent</item>
<item name="android:textColor">#color/Blue</item>
<item name="android:gravity">center</item>
<item name="android:textSize">18sp</item>
</style>

I have gone through the provided link...To remove the left side view just set the android:visibility="gone" for the view in your xml layout file....if you want remove programmatically try view.setVisibility(View.GONE);....

You can achieve this using LinearLayout with match_parent parameter depending on what orientation you desire. So you might set weights for each child view and also put an stub view in order to stretch out the size.
Note that if you hide your views with INVISIBLE flag they will hold the space whereas with GONE it's like the view never been there.
Hope that helps.

ActionBar Tab with custom View not centered

I need to use a custom View for my tabs, the problem is that fill_parent doesn't work (as seen here).
So I need to use margin and stuff, but in order to have the view centered inside the tab in all configuration (landscape/portrait, or on a tablet where the height of the tabs will change) it's a bit tricky to do.
I don't know what value to use on each configuration. Plus, I don't find the default layout that the system uses to start with.

I'd recommend that you use the ActionBar Tab styles. This is clean and simple. For example (zeroing in on the TabView):
<style name="MyActionBar" parent="#style/android:Widget.Holo.ActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
<item name="android:attr/actionBarTabTextStyle">#style/MyActionBarTabText</item>
<item name="android:attr/actionBarTabStyle">#style/MyActionBarTabStyle</item>
</style>
<!-- styling for the tabs -->
<style name="MyActionBarTabStyle" parent="#style/android:Widget.Holo.Light.ActionBar.TabView">
<item name="android:background">#drawable/tab_bar_bg_master</item>
<item name="android:gravity">center</item>
</style>
(I'll also note that the tabs are highly styleable by using custom Drawables. But that's a topic for another day!)

the above reply from #Stephane-Mathis is on the right track, but I couldn't get it to work just right in my code. Here's a simpler version that uses the same concept.
Again, the idea is to force your view to be much taller than the tab itself.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingTop="3dp"
android:paddingBottom="3dp">
<View
android:id="#+id/spacer_1"
android:layout_width="0dp"
android:layout_height="1000dp"
android:layout_weight="1" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="#drawable/ic_tabicon_1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:layout_gravity="center_vertical"
android:textColor="?accentColor"
android:text="My Albums" />
<View
android:id="#+id/spacer_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
The spacer_1 and spacer_2 views exist to pad the ImageView and TextView evenly on the left and right side. Furthermore, the height on spacer_1 is set to something absurdly high (1000dp) so force the parent view to be excessively tall. Then the ImageView and the TextView re both set to center_vertical.

So, if you want to do that you will need to do a bit of dirty stuff.
Since fill_parent doesn't work, you need to force the root view to have more height than the tab height and then center what you really need. So my first LinearLayout is useless, and the second one will be in the center of the tab.
Here is what I used. I just wanted one textview with another one at the top right of it.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="invisible">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<TextView
android:id="#+id/tv_tab_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/tv_tab_title"
android:layout_gravity="right"
android:background="#drawable/bg_notification"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:text="1"
android:gravity="center"
android:minWidth="14dp"
android:textStyle="bold"
android:textColor="#color/blanc"
android:textSize="8dp" />
<TextView
android:id="#+id/tv_tab_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/noire"
android:textSize="12dp"
android:textStyle="bold" />
<TextView //this has the same height as the `tv_tab_count` so it remains centered vertically
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/tv_tab_title"
android:layout_gravity="right"
android:background="#0f0"
android:paddingLeft="2dp"
android:paddingRight="2dp"
android:text="1"
android:textSize="8dp"
android:visibility="invisible" />
</LinearLayout>
This work for the vertical alignment but the view only has the width of the content I put in my textview. So if you need to use the complete width, you should put a really really long word in one of the invisible textviews.

android textview not wrapping correctly

I have the following xml to display rows in a listView. I want the TextView with the id rowCreatedAt, to wrap around nicely but it never does and only shows 1 line. I tried most of the solutions in the other questions and added them in the code, but it still doesn't work. Can anyone tell me why...?
+I would like to avoid setting the exact size to the textview.
++ To put it differently, why does the rowCreatedAt textView doesn't wrap the text when width/height is set to fill_parent while other textViews wrap texts just fine?
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_margin="5dp"
android:layout_marginBottom="5dp" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/rowUserImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/twitter_icon"
android:layout_margin="5dp"/>
<TextView
android:id="#+id/rowCreatedAt"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="10dp"
android:textColor="#ff696969"
android:ellipsize="none"
android:singleLine="false"
android:scrollHorizontally="false"
android:layout_weight="1"
android:maxLines="100"
android:text="aaaaaaaaaaaaaaabbbbbbbbbbbbbb" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/rowUserName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="username"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/rowText"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:text="status text" />
</LinearLayout>
</LinearLayout>

<TextView
android:id="#+id/rowCreatedAt"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:gravity="center"
android:textSize="10dp"
android:textColor="#ff696969"
android:ellipsize="none"
android:singleLine="false"
android:scrollHorizontally="false"
android:layout_weight="1"
android:maxLines="100"
android:text="aaaaaaaaaaaaaaabbbbbbbbbbbbbb" />
Change android:layout_width="fill_parent" to android:layout_width="200dp"

Try like this :
<TextView
android:id="#+id/Lesson_Description"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:minLines="4"
android:maxLines="6"
android:gravity="right|center"
android:background="#drawable/filed_shape_corner"
android:inputType="textMultiLine" />
Then do something like in code :
mLessonDescription = (TextView) rootView
.findViewById(R.id.Lesson_Description);
mLessonDescription.setMovementMethod(new ScrollingMovementMethod());

Try out be setting android:ems="10" it will make your edittext that much wide and wraps the other characters.
OR
You should use android:ellipsize="marquee". If you do not want to fix the height.

Add the following style changes to fix the width problem. along with the initial changes
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:singleLine">false</item>
<item name="android:maxLines">100</item>
<item name="android:width">0dp</item>
<item name="android:layout_weight">1</item>

Centering CheckBox Views

If you're interested in RadioButtons in addition to (or instead of) CheckBoxes, see this question instead.
Despite the presence of
<item name="android:layout_gravity">center_horizontal</item>
in the style file, the two checkboxes are not centered, but appear "left-justified".
res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="#+id/cb1"
style="#style/CB_style" />
<CheckBox
android:id="#+id/cb2"
style="#style/CB_style" />
</LinearLayout>
res/values/styles.xml
<style name="CB_style" parent="#android:style/TextAppearance.Medium">
<item name="android:layout_gravity">center_horizontal</item>
<item name="android:layout_weight">1</item>
<item name="android:gravity">center</item>
<item name="android:checked">false</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
</style>

You have android:layout_weight = 1. So your checkboxes fill all width of screen.
Remove android:layout_weight from style and add margin between checkboxes.
Gravity in Checkbox don't affect the inner tick button, only text.
EDIT
Ok, try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_weight="1"/>
<CheckBox
android:id="#+id/cb1"
style="#style/CB_style" />
<TextView
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_weight="1"/>
<CheckBox
android:id="#+id/cb2"
style="#style/CB_style" />
<TextView
android:layout_width="0dp"
android:layout_height="5dp"
android:layout_weight="1"/>
</LinearLayout>
And remove layout_weight from style.
Another way is create custom checkbox. But I think it's too complicated for this problem.

Here's something that may help:
android:gravity vs android:layout_gravity
android:gravity is usually internal, usually asking the view itself what to do with the pixels it has
android:layout_gravity is usually external, usually asking the parent ViewGroup (LinearLayout/RelativeLayout/FrameLayout) how to position the view with extra pixels that the view is not using
If you are using a view with wrap_content, you probably want to use layout_gravity. If you are using a view with match_parent, you probably want to try gravity.
Sometimes wrapping another ViewGroup around a troublesome View can help with positioning. Views and ViewGroups go through an intricate "screen space" negotiating phase, and different Views (Buttons/TextView/ImageView/etc) and ViewGroups (LinearLayout/RelativeLayout/TableLayout/etc) have different rules and negotiating powers
This is why sometimes pairing a troublesome View with another parent like a FrameLayout or LinearLayout can make it behave all of the sudden

This is a little messy but it works, and yes it works as well for 3 or more checkbox inputs:
<LinearLayout
android:padding="0dip"
android:layout_width="0dp"
android:layout_weight="1"
android:hint="name"
android:layout_height="40dip"
android:textAlignment="center" android:layout_gravity="center"
android:orientation="horizontal"
>
<TextView
android:layout_width="0dip"
android:layout_height="1dip" android:layout_weight="1" android:text=" " />
<CheckBox
android:id="#+id/chk1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleX="1.5" android:scaleY="1.5"
>
</CheckBox>
<TextView
android:layout_width="0dip"
android:layout_height="1dip" android:layout_weight="1" android:text=" " />
<CheckBox
android:id="#+id/chk2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleX="1.5" android:scaleY="1.5"
>
</CheckBox>
<TextView
android:layout_width="0dip"
android:layout_height="1dip" android:layout_weight="1" android:text=" " />
</LinearLayout>

Try it in style
<item name="android:layout_width">0dp</item>
I hope it will work.. thanks..

<style name="TextlessCheckBox" parent="android:Widget.Material.CompoundButton.CheckBox">
<item name="android:button">#null</item>
<item name="android:foreground">?android:listChoiceIndicatorMultiple</item>
<item name="android:foregroundGravity">center</item>
</style>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/MyLL"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#ff0000"
android:gravity="center" >
<CheckBox
android:id="#+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:background="#00FF00"
android:gravity="center" >
<CheckBox
android:id="#+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
ok, last try for today ;) you should post a picture next time, HOW it should look... well, now you ll have your LinearLayout divided into two similar wide part (red & green), and in every block your checkbox is in the center...did i got it right this time?!

Just add this to your LinearLayout :
android:gravity="center_horizontal"
This line specifies that anything inside this layout will be in the center.
The Full layout code :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<CheckBox
android:id="#+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox ONE"
/>
<CheckBox
android:id="#+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox TWO" />
</LinearLayout>
Here is the output i got :