I think I'm having problems with layout_weight. I'm trying to make the fourth button twice the size of the other buttons, but I'm getting the following:
And my layout looks like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0">
<!--android:background="#drawable/button_image"-->
<Button android:id="#+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_weight="0.2" />
<Button android:id="#+id/button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2" />
<Button android:id="#+id/button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.2" />
<Button android:id="#+id/button04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.4" />
</LinearLayout>
Are the weights supposed to give what I want?
If you want to force the proportions as a fraction, make the layout_width of the buttons = 0, and the weightSum of the Layout that's containing them equal to the sum of their weights, while this last step is not necessary it will be used if there are child views that don't specify their weight, to calculate it from the remainder.
Note that if you don't set them to 0, then the width will be a product of the width resulting of the wrap_content and the weight giving you inexact proportions.
The layout:
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/button1"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/button3"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:id="#+id/button4"
android:layout_weight="2"
android:text="2" />
</LinearLayout>
The result:
Set the layout_width to 0. I'm assuming this is a LinearLayout with horizontal orientatation.
layout_weight works this way:
Items are queried for their initial size
Available size is divided according to initial sizes
If there is any remaining space, it is divided according to weights.
In your case, the wrap_content gives an initial size that does not leave any room for step 3. Using a layout_width of 0dp, as recommended by android, results in all elements being given only space according to their weight, regardless of their intrinsic size.
Related
I'm getting some weird behavior in my LinearLayout when I try to set regular Buttons and an ImageButton to the same layout_weight. The image button's android:src resource is extrememly small and fits well inside the ImageButton without any problems. Even though their widths should be identical, for some reason the ImageButton's width is about 2/3rds the size of the rest of the normal buttons. If I multiply the ImageButton's layout_weight by 10, its much closer to the right size, but why isn't this working?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_weight="1">
<Button
android:id="#+id/clear"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/clear"/>
<Button
android:id="#+id/left_paren"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/left_paren"/>
<Button
android:id="#+id/right_paren"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/right_paren"/>
<ImageButton
android:id="#+id/backspace"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:contentDescription="#string/backspace"
android:src="#drawable/backspace"/>
</LinearLayout>
You need to set android:layout_width="0dp" for all buttons that should be the same width. (More precisely, you need to set the same layout_width for all those buttons and 0dp is the conventional width to use. When using equal weights, as long as there's still extra space to distribute, the actual width you use isn't relevant to the result.) The layout_weight only determines how the remaining space is allocated after the buttons take up their assigned widths. So if they start out unequal (which they will with widths of wrap_content), they remain different after their weights are taken into account.
You need to set equal android:layout_weight to all views and set the android:layout_width to 0dp to achieve a equal portion of the width to all views.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/clear"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/clear" />
<Button
android:id="#+id/left_paren"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/left_paren" />
<Button
android:id="#+id/right_paren"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/right_paren" />
<ImageButton
android:id="#+id/backspace"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:contentDescription="#string/backspace"
android:src="#drawable/plus" />
</LinearLayout>
I'm attempting to resize buttons on rotate to expand proportionately. Right now, they are a fix length, but I'm unsure of an alternative method to get the buttons to resize (setting the weight doesn't seem to help). I want the buttons to essentially fill the length of the screen both vertically and horizontally. Please let me know if you need more information.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_gravity="center_vertical" >
<Button
android:id="#+id/mainCommentBtn"
android:layout_width="119dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="1"
android:text="#string/commentBtn" />
<Button
android:id="#+id/mainProfileBtn"
android:layout_width="119dp"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="1"
android:layout_centerInParent="true"
android:text="#string/profileBtn" />
<Button
android:id="#+id/mainDetailBtn"
android:layout_width="119dp"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="#string/shareBtn" />
</LinearLayout>
Replace your resource with this. Copy the edited changes
Notice how there width is 0dp because they are using weight.
Using Weight:
1. In order to use weight you need to set the weightSum in the parent.
2. Make sure the width or height is set to 0 according to how you are using weight.
(for instance since we are going with horizontal orientation we want to use "0dp" width. This allows weight to control the width of the object.
3. Lastly make sure the weight of all the objects add up to the weightSum.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginTop="5dp"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:id="#+id/mainCommentBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="#string/commentBtn" />
<Button
android:id="#+id/mainProfileBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_weight="1"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="#string/profileBtn" />
<Button
android:id="#+id/mainDetailBtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_weight="1"
android:clickable="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="#string/shareBtn" />
</LinearLayout>
You need to specify an orientation for the LinearLayout.
I guess you want to use android:orientation="horizontal".
Then, in order to make android:weight work, you'd need to specify the width of every button as 0px by using android:layout_width="0px" for every button.
<Button
android:id="#+id/button1"
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:text="Button" />
These xml properties size the button to fill the screen both vertically and horizontally.
You can create the layout with the help of layout weight so that it will automatically fill the screen in landscape mode also as below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3" >
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_weight="1" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_weight="1" />
</LinearLayout>
I have a problem with a layout in android. I want that two views should have the equal width, and they should almost use the full width of the screen. Each view should contain a centered label.
It should look like this when it's done:
Here is what I have so far:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<View
android:id="#+id/view1"
android:layout_width="10dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp" />
<View
android:id="#+id/view2"
android:layout_width="10dp"
android:layout_height="90dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp" />
</RelativeLayout>
I just have placeholder values for the width right now.
Thanks.
You have to use android:layout_weight attribute in xml so try below code hope it will resolve your problem :-
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="Register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
<Button
android:text="Not this time"
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
</LinearLayout>
To create a linear layout in which each child uses the same amount of
space on the screen, set the android:layout_height of each view to
"0dp" (for a vertical layout) or the android:layout_width of each view
to "0dp" (for a horizontal layout). Then set the android:layout_weight
of each view to "1"
For more info you need to read Linear layout.
It will be easier with LinearLayout, set the layout to match_parent with horizontal orientation.
After that, set layout_width to 0px and layout_weight=1 in both of your view.
See this for good explanation :
Layout buttons so each divides up the space equally
You have to use layout_weight attribute for this.
<Button
android:text="Register"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
<Button
android:text="Not this time"
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:padding="10dip"
android:layout_margin="5dp"
android:layout_weight="1" />
</LinearLayout>
i would like to have three buttons taking equal amount of available space horizontally in a row.
I used android:layout_gravity. What is the problem?
layout xml :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1.0"
>
<Button android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Bg"
android:background="#drawable/button_red"
android:layout_weight=".2"
android:layout_gravity="left"
/>
<Button android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/Bm"
android:background="#drawable/button_red"
android:layout_weight=".2"
android:textColor="#ffffff"
android:layout_gravity="center"
/>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_red"
android:layout_weight=".2"
android:text="#string/Bf"
android:layout_gravity="right"
/>
</LinearLayout>
if someone see whats wrong, thanks.
The following layout should work. weights are for LinearLayouts..
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
>
<Button android:id="#+id/button1"
...
android:layout_weight="1"/>
<Button android:id="#+id/button2"
...
android:layout_weight="1"/>
<Button
android:id="#+id/button3"
...
android:layout_weight="1"/>
</LinearLayout>
besides of setting a layout_weight you have to set layout_width or layout_height to 0dp. So if you want for example to distribute the buttons horizontally , layout_width should be 0dp and layout_weight .2 or any number as long as is equal through the buttons you have.
so your layout should be like this
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bg"
android:background="#drawable/button_red"
android:layout_weight="1"
/>
<Button android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/Bm"
android:background="#drawable/button_red"
android:layout_weight="1"
android:textColor="#ffffff"
/>
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/button_red"
android:layout_weight="1"
android:text="#string/Bf"
/>
</LinearLayout>
Divide the weight sum to equal proportion in all buttons.
Remove layout_gravity property and add android:layout_weight=0.33.
It will work
Check out this:
<RelativeLayout
android:id="#+id/layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true">
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/button1"/>
</RelativeLayout>
<Button
android:id="#+id/button3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Give android:layout_weight="1" for each Button
Here Android Developer Guide:
Layout Weight
LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.
For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.
Source
Put the buttons in a relative layout. add properties to the buttons allignParentleft = true, another allignParentcenter= true and the allignParentRight = true to each button.
Please consider the following layout snippet:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="3">
<ImageView
android:src="#drawable/logo1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="left|center_vertical" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Some Title"
android:textColor="#android:color/black"
android:layout_gravity="center"
android:gravity="center"
android:layout_weight="1" />
<ImageView
android:src="#drawable/logo2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="right|center_vertical" />
</LinearLayout>
2 things to note above.
A. I created a LinearLayout with weightSum of 3.
B. Then inside that I create 3 elements each having layout_weight of 1 so that I can have my child elements distribute the entire space among themselves evenly.
I have make it pragmatically without weight
float width = CommonUtills.getScreenWidth(activity);
int cardWidth = (int) CommonUtills.convertDpToPixel(((width) / 3), activity);
LinearLayout.LayoutParams params =
new LinearLayout.LayoutParams(cardWidth,
LinearLayout.LayoutParams.MATCH_PARENT);
btnOne.setLayoutParams(params);
btnTwo.setLayoutParams(params);
btnThree.setLayoutParams(params);
public class CommonUtills {
public static float getScreenWidth(Context context) {
float width = (float) 360.0;
DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
width = displayMetrics.widthPixels / displayMetrics.density;
return width;
}
}
<LinearLayout
android: layout_width = "match_parent"
android: layout_height = "50dp"
android: orientation = "horizontal" >
<Button
android: id = "#+id/btnOne"
android: layout_width = "wrap_content"
android: layout_height = "match_parent" > </Button>
<Button
android: id = "#+id/btnTwo"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content" > </Button>
<Button
android: id = "#+id/btnThree"
android: layout_width = "wrap_content"
android: layout_height = "wrap_content" > </Button>
</LinearLayout>
You can divide it like this:
`
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/imageButtonLikedPost">
<ImageButton
android:id="#+id/imageButtonMyPost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/mypost_tab_bg" />
</RelativeLayout>
<ImageButton
android:id="#+id/imageButtonLikedPost"
android:layout_width="40dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/mylike_tab_bg" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/imageButtonLikedPost">
<ImageButton
android:id="#+id/imageButtonMyBlog"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#drawable/tab4_bg" />
</RelativeLayout>
</RelativeLayout>`
I have following three button in a Linear Layout with width fill_parent.
How can I set the width of these buttons to equally cover the whole screen area?
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnReplyMessage"
android:gravity="left"
android:text="Reply"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/btnMarkAsUnread"
android:gravity="left"
android:text="Mark as unread"
/>
<ImageButton
android:id="#+id/btnDeleteMessage"
android:src="#drawable/imgsearch"
android:gravity="right"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
/>
Give all buttons the following properties
android:layout_width="fill_parent"
android:layout_weight="1"
fill_parent tells them to consume as much width as possible, and weight determines how that width shall be distributed, when more than one control are competing for the same space. (Try playing around with different values of weight for each button to see how that works)
You should just specify these attributes for each button:
android:layout_width="fill_parent"
android:layout_weight="1"
So it should be something like that:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
you can use following code:
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"/>
You must to do 0dp in width on every button.