Consider the following layout: a horizontal LinearLayout with 2 buttons with the text "Push me", and an ImageButton with a small envelope icon (for example, to send an email).
I want the ImageButton's width to be set to "wrap_content" so it's only as large as the envelope's size, and then I want the other two buttons to evenly split the remainder of the screen evenly. How can it be done?
layout_weight specifies how much of the extra space in the layout to be allocated to the View.
So, for your envelope ImageButton set the android:layout_width="wrap_content". And for your remaining 2 buttons set android:layout_width="0dp" and add android:layout_weight="0.5" to both buttons.
Try this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/ib"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"/>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Push me"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Push me"/>
</LinearLayout>
</LinearLayout>
Related
I have a horizontal LinearLayout with two buttons with text inside.
The LinearLayout's and the buttons layout_height is wrap_content.
The text of one of the two buttons takes two lines unlike the other's which takes one line.
So at the end one of the buttons has a bigger height than the other which is something that I don't want.
I know how to solve this programmatically. So the reason I making this question is to know whether I can solve this through xml.
One possible solution is, for the button whose text is one line, set
layout_height="match_parent"
and it works fine.
But the problem here is that generally I don't know which button will occupy the biggest height.
In essence what I want to do is: having a LinearLayout with Views inside
I want to set the height of all the children Views to be equal to the height of the View which when has its content wrapped has the max height.
And the question is if this is possible through xml?
An example XML. Also I forgot to add that I already have 0dp in the widths.
<LinearLayout
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="#string/some_string" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/some_other_string" />
</LinearLayout>
I guess what you search is android:baselineAligned="false", this will avoid that the text are on the same baseline and the buttons will start at the same y position on the screen.
Here without android:baselineAligned="false":
And here with:
However if you also want that both buttons are equal sized try this layout example:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:baselineAligned="false">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="aaaaa"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="bbbbbbb bbbbbbbb bbbbbbbb bbbbbbbbbbbb bbbbbb"/>
</LinearLayout>
That will look like this:
Use this thing to set weigh Sum and weight layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="100" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="10"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Button 2" />
</LinearLayout>
</LinearLayout>
I have created a set of vertical tabs using buttons to represent the tabs and I have set the height of the buttons to wrap content.
This doesnt seem to be respected though as the buttons scale to take up all available space, there are only 5 buttons in the vertical linear layout yet they all stretch to take up the available space. The icon in the button is small and so is the text so this doesnt look very good.
How do I get the buttons to truly only wrap their content? I would like them all the same size and to not fill all available space.
Is setting the height explicitly in dp a good or bad idea?
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_grey">
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginLeft="8dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginRight="8dp">
<FrameLayout android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="3">
<TabWidget android:id="#android:id/tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"/>
<LinearLayout
android:id="#+id/tab_btn_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="1.0"
android:background="#color/lightest_grey"
android:id="#+id/patient_tab_btn"
android:text="Patient"
android:textSize="7sp"
android:gravity="bottom|center"
android:drawableTop="#drawable/user"
android:paddingTop="4dp"
/>
<Button
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="1.0"
android:background="#color/lightest_grey"
android:id="#+id/relations_tab_btn"
android:text="Relations"
android:layout_marginTop="1dp"
android:textSize="7sp"
android:gravity="bottom|center"
android:drawableTop="#drawable/family"
android:paddingTop="4dp"
/>
<Button
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="1.0"
android:background="#color/lightest_grey"
android:id="#+id/providers_tab_btn"
android:text="Providers"
android:layout_marginTop="1dp"
android:textSize="7sp"
android:gravity="bottom|center"
android:drawableTop="#drawable/doctors_bag"
android:paddingTop="4dp"
/>
<Button
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="1.0"
android:background="#color/lightest_grey"
android:id="#+id/locations_tab_btn"
android:text="Locations"
android:layout_marginTop="1dp"
android:textSize="7sp"
android:gravity="bottom|center"
android:drawableTop="#drawable/map_marker"
android:paddingTop="4dp"
/>
<Button
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_weight="1.0"
android:background="#color/lightest_grey"
android:id="#+id/summary_tab_btn"
android:text="Summary"
android:layout_marginTop="1dp"
android:textSize="7sp"
android:gravity="bottom|center"
android:drawableTop="#drawable/treatment_plan"
android:paddingTop="4dp"
/>
<Button
android:layout_height="|"
android:layout_width="match_parent"
android:layout_weight="1.0"
android:background="#color/lightest_grey"
android:id="#+id/cpis_tab_btn"
android:text="Protection"
android:layout_marginTop="1dp"
android:textSize="7sp"
android:gravity="bottom|center"
android:drawableTop="#drawable/students"
android:paddingTop="4dp"
/>
</LinearLayout>
</FrameLayout>
<FrameLayout android:id="#android:id/tabcontent"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="17"
android:background="#color/white"/>
</LinearLayout>
</android.support.v4.app.FragmentTabHost>
Thanks
Setting height in dp will not keep perfect proportions through different screens.
For me, the easiest way is to create my interface by code so i can make any calculations i need and set the exact sizes on px.
Take a look at my post asking for opinions.
As for fixing your xml, set your LinearLayout height to wrap_content or remove the weights, it is making the buttons to distribute parent height equally.
Hope this helps.
The layout_weight parameter of the buttons is what is causing your problem. If this parameter is set, the height parameter is ignored. Setting a weight results in all the remaining space being allocated to all children with weights in the ratio of their weights. In your layout, you have 6 buttons. Hence, the remaining space is filled by the 6 buttons with equal height set for all. You can either limit the height of the linear layout parent, or remove the weights of the buttons.
Edit: I have mentioned that if weight is set, height is ignored. This is true only if the orientation of the LinearLayout is vertical. In case it is horizontal, the width attribute is ignored.
I am trying to understand the weight layout with this example.
It is definitely not a rocket science. However, this example making it...
The weightSum dictate how big the size is and
Then divide the layout based on layout_weight value for the view in LinearLayout.
In this example I have a layout, weighted with 5, that is then divided between two views:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transactionRowBackground"
android:paddingBottom="5dp"
android:paddingTop="5dp" android:orientation="horizontal" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="2" >
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="Test Title"
android:textColor="#color/textColor"
android:textSize="#dimen/subHeadingTextSize"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="This is a test description"
android:textColor="#color/textColor"
android:textSize="#dimen/normalTextSize" />
</LinearLayout>
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="3"
android:src="#drawable/ic_launcher"
android:layout_gravity="top"
android:contentDescription="" />
</LinearLayout>
The thing that I cannot understand is the bigger number I give to ImageViewer the smallest space it get from the parent. So how it is actually calculating the size for ImageView.
You can try with the above xml. If you change the layout weight of an ImageView to 1 , and child linearlayout to 4, that I believe makes more sense, then the opposite will occur.
ImageView will expend and child linearlayout will shrink. I thought the bigger the number is more you get some space.
Since on your outermost layout you have android:orientation="horizontal", I believe you want to vary the size/space taken by ImageView and internal LinearLayout in horizontal direction. For this case try using
android:layout_width="0dp"
on the layouts where you've put android:layout_weight. If your orientation of the outer layout was vertical, I would have used android:layout_height="0dp" in order for the weights to handle width/height of the layouts.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/transactionRowBackground"
android:paddingBottom="5dp"
android:paddingTop="5dp" android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical" android:layout_weight="2" >
<TextView
android:id="#+id/title"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="Test Title"
android:textColor="#color/textColor"
android:textSize="#dimen/subHeadingTextSize"
android:textStyle="bold" />
<TextView
android:id="#+id/description"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:clickable="true"
android:gravity="top"
android:padding="5dp"
android:text="This is a test description"
android:textColor="#color/textColor"
android:textSize="#dimen/normalTextSize" />
</LinearLayout>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="3"
android:src="#drawable/ic_launcher"
android:layout_gravity="top"
android:contentDescription="" />
</LinearLayout>
Reading over Android docs might help: Layout Weights
With layout_weight you can specify a size ratio between multiple views. E.g. you have a MapView and a table which should show some additional information to the map. The map should use 3/4 of the screen and table should use 1/4 of the screen. Then you will set the layout_weight of the map to 3 and the layout_weight of the table to 1.
To get it work you also have to set the height or width (depending on your orientation) to 0dp.
Example
If there are three text boxes and two of them declare a weight of 1, while the third one is given no weight (0), then remaining space is assigned as follows:
1st text box = 1/(1+1+0)
2nd text box = 1/(1+1+0)
3rd text box = 0/(1+1+0)
In android app development, with Linear Layout, I have two buttons side-by-side in a row. I made such an arrangement with TableRow and center aligned it. But the buttons dont fill completely the extra space. How do I make the buttons fill the extra space to the left and to the right?
Here the xml code:
<TableRow
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center"
android:layout_margin="7dp"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Save"
android:textAlignment="center"
android:id="#+id/save"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:textAlignment="center"
android:id="#+id/cancel"
/>
</TableRow>
The LinearLayout has the following attributes:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context="com.appname.classname">
Here is the sample screen shot:
Instead of using the TableRow, use an horizontal LinearLayout inside the vertical LinearLayout. Note that the default orientation of LinearLayout is horizontal. So you can do soemthing like:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/save"
android:text="#string/save"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content" />
<Button
android:id="#+id/cancel"
android:text="#string/cancel"
android:layout_weight="1"
android:layout_width="0dip"
android:layout_height="wrap_content" />
</LinearLayout>
The layout_weight attribute will make each item occupy the available space in that ration. In this case, the buttons will share the screen space in a 1:1 ratio.
Set the android:layout_marginRight of the first button to "-8dip" or even more. The sspace should be smaller or gone.
You can use RelativeLayout, there are no margins there.
In LinearLayout we can populate elements horizontally by using Layout_Weight which makes them occupy all the width and the width each take depends on their Layout_Weight value(or ratio). My question is how can I do the same in case of RelativeLayout. There is no attribute like Layout_Weight.
I am using a RelativeLayout in my project and it contains 4 buttons which need to be at the bottom of the screen and must fill the whole width. If I use hardcode Layout_Width="20dp" or something like that. It created a problem when I change the orientation from Portrait to Landscape or vice versa.
<?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" >
<Button
android:id="#+id/feed_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/feed"
android:textColor="#FF000000" />
<Button
android:id="#+id/iwant_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/feed_button"
android:text="#string/iwant"
android:textColor="#FF000000" />
<Button
android:id="#+id/share_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/iwant_button"
android:text="#string/share"
android:textColor="#FF000000" />
<Button
android:id="#+id/profile_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#id/share_button"
android:text="#string/profile"
android:textColor="#FF000000" />
</RelativeLayout>
for making relative layout to take full width
android:layout_width="fill_parent"
to add it at the bottom
android:layout_alignParentBottom="true"
I think that there is no attribute like layout_weight in Relative layout .
But android has given functionality with Linear Layout . In that case, why would you want to go with Relative layout?
I think you know how to use layout_weight in Linear Layout.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom" >
<Button
android:id="#+id/feed_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="feed"
android:textColor="#FF000000" />
<Button
android:id="#+id/iwant_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="iwant"
android:textColor="#FF000000" />
</LinearLayout>
I know you have compulsory use Relative Layout But if you put above code in your activity it show all buttons at bottom of display and If want to show those button layout at below of any other layout then use android:layout_below attributte in <LinearLayout > tag and use outer most layout as Relative Layout
Thanks
The only way to ensure the buttons are all equal with would be to put them in a LinearLayout that fills the area you want the buttons to cover like so:
<?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" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<Button
android:id="#+id/feed_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/feed"
android:textColor="#FF000000" />
<Button
android:id="#+id/iwant_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:layout_toRightOf="#id/feed_button"
android:text="#string/iwant"
android:textColor="#FF000000" />
<Button
android:id="#+id/share_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/share"
android:textColor="#FF000000" />
<Button
android:id="#+id/profile_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:text="#string/profile"
android:textColor="#FF000000" />
</LinearLayout>
</RelativeLayout>
The LinearLayout will fill the entire width of the parent layout and will divide the buttons evenly based on their weight.
There is a very nifty trick if you have two layouts that you want to divide evenly in RelativeLayout. Create an "invisible" layout of 0x0 pixels, align it to the center of the parent view, then align the two layouts to the invisible layout relative to where you want them.
in relative layout we can achieve this dynamically.
DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
int height = metrics.heightPixels;
int width = metrics.widthPixels;
Button1.setWidth(width / 2);
Button2.setWidth(width / 2);