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>

Too long TextView makes other Views disappear

How to stop checkbox from disappearing in code below when text in the TextView is too long? I'm not interested in hardcoding max_width for the TextView and I want to display my whole text.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_weight="0"
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_weight="1"/>
</LinearLayout>
styles.xml
<style name="Text">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:padding">#dimen/margin</item>
<item name="android:textSize">#dimen/text</item>
<item name="android:textAlignment">center</item>
</style>

I would use weight. Add android:weightSum to your LinearLayout with value 1.
For each element in your LinearLayout add weight. For example 0.8 for textview and 0.2 for Checkbox.
Then set width to 0dp for each element !
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_weight="0.8"
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_weight="0.2"/>
</LinearLayout>
And update your style :
<style name="Text">
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_width">0dp</item>
<item name="android:padding">#dimen/margin</item>
<item name="android:textSize">#dimen/text</item>
<item name="android:textAlignment">center</item>
</style>

If you are about to display large data on textview, i suggest to use scroll view in your parent layout.

I'm late for this but I hope to help smn with this issue. Have same problem checkBox make TextView unreachable for LinearLayout, both checkBox and textView need to have this line in xml:
android:layout_gravity="center_vertical"

use text view weight = 1 and other view as wrap_content so size of other view not change according your text
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_weight=""
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_weight="wrap_content"/>
</LinearLayout>

If you want text to go in new line (use RelativeLayout):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<CheckBox
android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toStartOf="#id/checkbox" />
</RelativeLayout>
Another solution is to use this lib to shrink text:
https://github.com/grantland/android-autofittextview

I would suggest to use RelativeLayout to maintain uniformity in UI. Below is sample Relative layout code
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="2">
<TextView
android:id="#+id/tv"
style="#style/Text"
android:layout_toLeftOf="#+id/cb"
android:text="#string/multiple_sounds" />
<CheckBox
android:id="#+id/cb"
style="#style/Text"
android:layout_gravity="right"
android:layout_alignParentEnd="true"/>
</RelativeLayout>

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.

How to center a RatingBar in Android

I have created a custom RatingBar as described in one of the tutorials given here on stack-overflow and it's looking great, the problem is with the centering of the image. here is what I've got:
As you can see the TextView is centered vertically in the LinearLayout, but the RatingBar is at the top of it. Here is my xml code of this image:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:foregroundGravity="center" >
<LinearLayout
android:layout_width="320dp"
android:layout_height="match_parent"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<RatingBar
android:id="#+id/ratingBar1"
style="#style/starsRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:numStars="5"
android:rating="2.3"
android:stepSize="1" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="#drawable/ic_launcher" />
</LinearLayout>
</ScrollView>
Here is the code of the styling:
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/star_ratingbar_full</item>
<item name="android:minHeight">36dip</item>
<item name="android:maxHeight">36dip</item>
</style>
Any ideas in the RatingBar would be apprisiated!
THANKS

Ok, I think I've got it.
The key issue is the ScrollView: it automatically makes things compact, unless you specifically tell it otherwise. In the scroll view, set
android:fillViewport="true"
to make it use the space available.

Hello to get all items at top you have to put:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="TextView" />
instead of:
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
if you just want the rating bar centred:
just remove style="#style/starsRatingBar"
EDIT:
forget any think I said befor, it seems to work better when I changed the style to : (adjust your min/max height to get "perfect result" )
<style name="starsRatingBar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#android:drawable/star_on</item>
<item name="android:minHeight">26dip</item>
<item name="android:maxHeight">26dip</item>
</style>

Android custom dialog linearlayout size same as dialogs bg image

I am creating a custom dialog as:
Dialog myDialog = new Dialog(context, R.style.Theme_Levels);
myDialog.setContentView(R.layout.levelselector);
myDialog.show();
Style used:
<style name="Theme.Levels" parent="#android:style/Theme.Dialog">
<item name="android:windowFrame">#null</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowBackground">#drawable/dlgbg</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:windowNoTitle">true</item>
<item name="android:backgroundDimEnabled">false</item>
</style>
Layout xml file:
<LinearLayout android:id="#+id/LevelSelector"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_gravity="bottom|center_horizontal"
android:paddingBottom="50dip"
>
<Button android:text="Easy"
android:id="#+id/btn_Easy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
I want the button to appear at bottom center of the dialog (50dip padding from bottom) but it appears at top left of the Dialog.
Thats because LinearLayout does not know the width/height of the dialog, which is the size of the background image I have used in style xml file.
Question: How do I know the width height of the dialog so that LinearLayout is of the same size as the Dialog size?

Here is how you can do this:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LevelSelector"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical"
android:paddingBottom="50dip" >
<View
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1" />
<Button android:text="Easy"
android:id="#+id/btn_Easy"
android:layout_gravity="center_horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

Change android:layout_gravity="bottom|center_horizontal" to android:gravity="bottom|center_horizontal".
android:layout_gravity is gravity of the layout itself w.r.t. its parent. android:gravity applies to its contents.

i had the same problem in my case i ended up using a RelativeLayout
here it is.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/body" android:layout_margin="20dip"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/dialog_bg"
>
<TextView android:id="#+id/message"
android:layout_alignParentTop="true"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_margin="10dip"
android:inputType="textMultiLine"
android:textColor="#color/table_text"
android:textScaleX=".95" android:textStyle="bold"
/>
<TextView android:id="#+id/dummy" android:layout_below="#id/message"
android:layout_width="fill_parent" android:layout_height="60dip"
android:visibility="invisible"
/>
<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="10dip" android:layout_below="#id/message"
android:layout_centerHorizontal="true" android:orientation="horizontal"
>
<ImageButton android:id="#+id/ok"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/button_alert" android:src="#drawable/btn_yes"
android:visibility="gone" android:layout_weight=".5"
/>
<ImageButton android:id="#+id/cancel"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:background="#drawable/button_alert" android:src="#drawable/btn_no"
android:visibility="gone" android:layout_weight=".5"
/>
</LinearLayout>
</RelativeLayout>

Ok, I have found a way, not a clean way but works.
You need to add background in style.xml file
<item name="android:windowBackground">#drawable/levelselectbg</item>
AND also in you linearlayout:
android:background="#drawable/levelselectbg"
The first background is required to keep the dialog borderless (which I have specified in my style.xml in my question) and the linearlayout background is required to give size to the layout, now it knows its dimensions and places the button at bottom center with padding.
Hope this helps someone, if a better solution is available please share.