Android relative layout with button width using weight

Question

I've used the layout_weight parameter to set the width of the buttons at 70% of the total layout width, but it seems I'm missing some important detail in order to make it work.

(Another solution would be to work with display.getWidth() programmatically, but it doesn't work either, because I don't know what my .xml should look like If I choose to set the width with button.setWidth())

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent"
    android:layout_weight="1.0">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="15px"  
        android:id="@+id/userVersionTextViewNew"
        android:gravity="center"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="15px"
        android:gravity="center"
        android:layout_above="@id/userVersionTextViewNew"
        android:id="@+id/userSoftSerialNumberTextView"/>
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo_200"
        android:layout_above="@id/userSoftSerialNumberTextView"
        android:layout_centerHorizontal="true"/>    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="15px"
        android:gravity="center"
        android:layout_below="@id/userVersionTextViewNew"
        android:id="@+id/dummyTextView"/>       
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/loginButton"
        android:text="Σύνδεση"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/dummyTextView"
        android:layout_weight="0.7"/>
    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/demoLoginButton"
        android:text="Δοκιμαστική χρήση"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/loginButton"
        android:layout_weight="0.7"/>
</RelativeLayout>

Seems like this can help you: http://stackoverflow.com/questions/4961355/percentage-width-in-a-relativelayout — amukhachov, Oct 21 '11 at 08:46
on a side note it is not recommended to use px with textsize instead use sp — Ahmed, Jun 01 '14 at 01:18

score 28 · Answer 1 · answered May 23 '13 at 07:28

The Problem

You can't use the layout_weight parameters on a RelativeLayout. These are parameters from the LinearLayout. I'll give some more information about the differences later below. But first about the solution for this question

A Solution

Use a LinearLayout where you can position elements in a row with a weight distribution. Don't forget to use the 0dp width when adding layout_weights though! The below example shows a weight distribution of 70/30.

<LinearLayout
android:id="@+id/wrapper"
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:weightSum="1.0" >

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".30" />

</LinearLayout>

All this within the RelativeLayout you already had in your code. The rest of this answer is background information that everyone with these questions should read in order to understand what they're doing.

RelativeLayout

Whenever you start with a layout with more than one element I advise you to prefer a RelativeLayout in favor of the Linear thing. The RelativeLayout is very powerful and lets you position elements in relation to each other (leftOf, below, ...). In most cases that is more than you'll ever need.

An example from the android development document (believe me it's all there):

<?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:paddingLeft="16dp"
    android:paddingRight="16dp" >
    <EditText
        android:id="@+id/name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/reminder" />
    <Spinner
        android:id="@+id/dates"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/times" />
    <Spinner
        android:id="@id/times"
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/name"
        android:layout_alignParentRight="true" />
    <Button
        android:layout_width="96dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/times"
        android:layout_alignParentRight="true"
        android:text="@string/done" />
</RelativeLayout>

LinearLayout

The LinearLayout might look very capable too but in order to get everything sorted with only Linears you'll most likely start nesting these layouts. And that's where it get's ugly performance wise.

Again an example from the android development documentation.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="@string/send" />
</LinearLayout>

score 14 · Accepted Answer · edited May 12 '15 at 06:57

Try This..

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent">
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="15px"  
        android:id="@+id/userVersionTextViewNew"
        android:gravity="center"
        android:layout_centerVertical="true"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="15px"
        android:gravity="center"
        android:layout_above="@id/userVersionTextViewNew"
        android:id="@+id/userSoftSerialNumberTextView"/>
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/logo_200"
        android:layout_above="@id/userSoftSerialNumberTextView"
        android:layout_centerHorizontal="true"/>    
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="15px"
        android:gravity="center"
        android:layout_below="@id/userVersionTextViewNew"
        android:id="@+id/dummyTextView"/>      
    <LinearLayout  
        android:layout_height="wrap_content"  
        android:layout_width="fill_parent" 
        android:gravity = "center_horizontal"
        android:layout_below="@id/dummyTextView"
        android:id="@+id/loginButtonLayout"
        android:weightSum="1.0">  
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/loginButton"
            android:text="Σύνδεση"
            android:layout_weight="0.7"/>
    </LinearLayout>
    <LinearLayout  
        android:layout_height="wrap_content"  
        android:layout_width="fill_parent" 
        android:gravity = "center_horizontal"
        android:layout_below="@id/loginButtonLayout"
        android:weightSum="1.0">  
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/demoLoginButton"
            android:text="Δοκιμαστική χρήση"
            android:layout_weight="0.7"/>
    </LinearLayout>
</RelativeLayout>

It works almost perfectly, the first button is a bit smaller than the second. I suspect it's the size of the text that matters. — iCantSeeSharp, Oct 21 '11 at 09:42
For getting both the button of exact same size i.e. 70% of the screen's width, just change the width parameter of button to android:layout_width="0dp" — chetanmoswal, Oct 21 '11 at 09:58
While this answer is valid, code does not explain itself. See below for a better overall answer, including code and thorough explanations of why it works. — Sean Beach, Sep 22 '14 at 14:49

score 5 · Answer 3 · answered Aug 26 '15 at 07:36

I know that this question is old, but just for someone who looking for a solution:

Google introduced new API called android.support.percent

PercentRelativeLayout exactly your case:

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="fill_parent" 
    android:layout_width="fill_parent">

    <!-- Other controls -->

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/loginButton"
        android:text="Σύνδεση"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/dummyTextView"
        app:layout_widthPercent="70%"/>

    <!-- Other controls -->

</android.support.percent.PercentRelativeLayout>

score 5 · Answer 4 · answered Oct 21 '11 at 08:46

I don't think layout_weight works inside a RelativeLayout. Maybe you should add a LinearLayout inside the RelativeLayout and use layout_weight inside.

Also when using layout_weight you usually have to have either the width or the height of the object defined as 0dp, so in your case like this:

android:layout_weight="0.7"
android:layout_height="0dp"

score 1 · Answer 5 · answered Oct 21 '11 at 08:29

1

layout_weight, works on the LinearLayout as parent. so i think the problem lies there. you have to use a mix of all linear layout and relative layouts to achieve what you need.

answered Oct 21 '11 at 08:29

Yashwanth Kumar

28,931
15
65
69

score 0 · Answer 6 · answered Oct 26 '17 at 17:39

As @hcpl correctly mentioned in his answer:

You can't use the layout_weight parameters on a RelativeLayout. These are parameters from the LinearLayout.

Yep, he's right! But think about negative impact on performance caused by nested layouts.

With the introduction of ConstraintLayout, you can solve your problem without nested LinearLayout. You just paste two vertical guidelines with 15% and 85% margins and place your buttons between them.

Here's the layout source code:

<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <TextView
        android:id="@+id/userVersionTextViewNew"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:text="userVersionTextViewNew"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/userSoftSerialNumberTextView"
        app:layout_constraintVertical_chainStyle="packed" />

    <TextView
        android:id="@+id/userSoftSerialNumberTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:text="userSoftSerialNumberTextView"
        app:layout_constraintTop_toBottomOf="@+id/userVersionTextViewNew"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/imageView" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo_200"
        app:layout_constraintTop_toBottomOf="@+id/userSoftSerialNumberTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/dummyTextView" />

    <TextView
        android:id="@+id/dummyTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="15sp"
        android:text="dummyTextView"
        app:layout_constraintTop_toBottomOf="@+id/imageView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/loginButton" />

    <Button
        android:id="@+id/loginButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Σύνδεση"
        app:layout_constraintTop_toBottomOf="@+id/dummyTextView"
        app:layout_constraintLeft_toLeftOf="@+id/leftGuideline"
        app:layout_constraintRight_toLeftOf="@+id/rightGuideline"
        app:layout_constraintBottom_toTopOf="@+id/demoLoginButton" />

    <Button
        android:id="@+id/demoLoginButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Δοκιμαστική χρήση"
        app:layout_constraintTop_toBottomOf="@+id/loginButton"
        app:layout_constraintLeft_toLeftOf="@+id/leftGuideline"
        app:layout_constraintRight_toLeftOf="@+id/rightGuideline"
        app:layout_constraintBottom_toBottomOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/leftGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.15" />

    <android.support.constraint.Guideline
        android:id="@+id/rightGuideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.85" />

</android.support.constraint.ConstraintLayout>

As a result you get this view:

You can find more details in Building interfaces with ConstraintLayout.

score 0 · Answer 7 · edited Jun 18 '15 at 13:03

0

I think you should not define android:layout_weight="1.0" in Relative layout tag, if you want to set the length of button other then the "wrap_content"

edited Jun 18 '15 at 13:03

Dhanuka

2,826
5
27
38

answered Oct 21 '11 at 08:21

himanshu

1,990
3
18
36

android:layout_weight only works for LinearLayout, not RelativeLayout – Thupten Apr 15 '14 at 23:32

MKJParekh · Answer 8 · 2011-10-21T08:49:16.280

-1

Try This,

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout  
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_height="fill_parent"  
    android:layout_width="fill_parent" 
    android:orientation="vertical"
    android:layout_weight="10"> 
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:textSize="15px"   
        android:id="@+id/userVersionTextViewNew" 
        android:layout_weight="0.75"
    /> 
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:textSize="15px" 
        android:layout_weight="0.75"
        android:id="@+id/userSoftSerialNumberTextView"/> 
    <ImageView 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:src="@drawable/logo_200" 
        android:layout_weight="0.75"/>     
    <TextView 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:textSize="15px" 
        android:layout_weight="0.75"
        android:id="@+id/dummyTextView"/>        
    <Button 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:id="@+id/loginButton" 
        android:text="Σύνδεση" 
        android:layout_weight="3.5"/> 
    <Button 
        android:layout_width="fill_parent" 
        android:layout_height="0dp" 
        android:id="@+id/demoLoginButton" 
        android:text="Δοκιμαστική χρήση" 
        android:layout_weight="3.5"/> 
</LinearLayout>

edited Oct 21 '11 at 08:49

answered Oct 21 '11 at 08:40

MKJParekh

34,073
11
87
98

I suppose you mean 7.5 instead of 0.75. – iCantSeeSharp Oct 21 '11 at 08:46
no i mean 0.75...you want 70% to your button then..this will give 70% to last 2 button and rest 30% to above 4 text and image view..just try and tell me.. – MKJParekh Oct 21 '11 at 08:48
Still, the buttons are at 100% width and moreover, they occupate half my total window, more than 50% of the tab content. – iCantSeeSharp Oct 21 '11 at 08:52
the above code is to set the weight for the height ..not for width..how do you want to look the xml if possible post image above – MKJParekh Oct 21 '11 at 08:54
In my original post I wrote about the button width at 70% of the total width. And my method could not work, so it's about fixing this issue. – iCantSeeSharp Oct 21 '11 at 08:58
I can post a screenshot, but I thought that it was obvious that the only thing I wanted was to make my buttons occupy the 70% of the total width. Anyway, screenshot incoming soon. – iCantSeeSharp Oct 21 '11 at 09:05
http://imageshack.us/photo/my-images/844/screenshotwex.png/ I just want the 2 buttons to have with at 70% of the window. – iCantSeeSharp Oct 21 '11 at 09:12

vicentazo · Answer 9 · 2011-10-21T08:54:46.033

-2

First, add the param android:weightSum="1.0" to the container (in this case, add it to RelativeLayout).

Then, define the weight of each of their children. For example, if you add to a button this

android:layout_weight="0.5"
android:layout_width="0px"

the button will take 50% of total width.

edited Oct 21 '11 at 08:54

answered Oct 21 '11 at 08:33

vicentazo

1,739
15
19

It won't accept android:layout_width="0", it's "0px", but the buttons have disappeared. – iCantSeeSharp Oct 21 '11 at 08:41
Sorry, it is "0dp" or "0px" or similar... You must set this params in all children – vicentazo Oct 21 '11 at 08:54
The sum of all layout_weight must be equal to layout_weightSum – vicentazo Oct 21 '11 at 09:47
do the RelativeLayout have a android:weightSum param ? – rahul Sep 05 '12 at 12:35

Android relative layout with button width using weight

9 Answers9

Linked