Android Relative Layout With Button Width Using Weight

March 23, 2024 Post a Comment

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. (An

Solution 1:

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"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="fill_parent"android:paddingLeft="16dp"android:paddingRight="16dp" ><EditTextandroid:id="@+id/name"android:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="@string/reminder" /><Spinnerandroid: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" /><Spinnerandroid:id="@id/times"android:layout_width="96dp"android:layout_height="wrap_content"android:layout_below="@id/name"android:layout_alignParentRight="true" /><Buttonandroid: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.

Baca Juga

Again an example from the android development documentation.

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns: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" ><EditTextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="@string/to" /><EditTextandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:hint="@string/subject" /><EditTextandroid:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1"android:gravity="top"android:hint="@string/message" /><Buttonandroid:layout_width="100dp"android:layout_height="wrap_content"android:layout_gravity="right"android:text="@string/send" /></LinearLayout>

Solution 2:

Try This..

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

Solution 3:

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"

Solution 4:

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.PercentRelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_height="fill_parent"android:layout_width="fill_parent"><!-- Other controls --><Buttonandroid: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>

Solution 5:

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.

Android Coder