layout_weight Android Example

0

layout_weight assigns weight to the children of LinearLayout. For example, if there are three child items within the LinearLayout, then the space assigned will be in proportion to the weight which means the child with larger weight will be allow to expand more. Thus weight decides how much space an item is allowed to occupy on the screen.

In general, if each item is assigned a weight, then the space assigned to an item would be space equal to = (item’s weight) / (sum of weight of every item in Linear Layout).

If you don’t assign any weight, its default value would be zero.

In this example, we will try to understand how exactly weight influences the space assigned?

Main screen

In our main screen we have three buttons within the LinearLayout layout, sharing the horizontal space. We have assigned a weight of 70, 1 and 29 to the buttons. We also want to test the weight’s influence on button’s width at runtime so we have three text items which will allow us to set the button’s layout_weight dynamically.

welcome.xml:

<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:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.javarticles.android.DatePickerExample" >

    <TextView
        android:id="@+id/welcome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="40dp"
        android:layout_marginTop="18dp"
        android:text="@string/welcome"
        android:textColor="@color/welcome_text_color"
        android:textSize="20sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="70"
            android:text="@string/button1_label" />

        <Button
            android:id="@+id/button2"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/button2_label" />

        <Button
            android:id="@+id/button3"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="29"
            android:text="@string/button3_label" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <EditText
            android:id="@+id/button1_weight"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:hint="@string/button1_weight"
            android:inputType="number" />

        <EditText
            android:id="@+id/button2_weight"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:hint="@string/button2_weight"
            android:inputType="number" />

        <EditText
            android:id="@+id/button3_weight"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/button3_weight"
            android:inputType="number" >

            <requestFocus />
        </EditText>

    </LinearLayout>

</LinearLayout>

Main Activity

In our main activity, we have three buttons sharing the horizontal space. We also have three text items to change the layout_weight of the buttons. In the MainActivity, we attach a TextWatcher listener to each text item so that as soon as the weight is changed, the button’s latout-weight is reset and layout re-drawn.

MainActivity:

package com.javarticles.android;

import android.app.Activity;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;

public class MainActivity extends Activity {
	private Button button1;
	private Button button2;
	private Button button3;
	private EditText text1;
	private EditText text2;
	private EditText text3;

	public void onCreate(final Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.welcome);
		button1 = (Button) findViewById(R.id.button1);
		button2 = (Button) findViewById(R.id.button2);
		button3 = (Button) findViewById(R.id.button3);

		text1 = (EditText) findViewById(R.id.button1_weight);
		text2 = (EditText) findViewById(R.id.button2_weight);
		text3 = (EditText) findViewById(R.id.button3_weight);

		text1.addTextChangedListener(new WeightChanger(button1));
		text2.addTextChangedListener(new WeightChanger(button2));
		text3.addTextChangedListener(new WeightChanger(button3));
	}

	private class WeightChanger implements TextWatcher {
		private Button button;

		WeightChanger(Button button) {
			this.button = button;
		}

		@Override
		public void beforeTextChanged(CharSequence s, int start, int count,
				int after) {
		}

		@Override
		public void onTextChanged(CharSequence s, int start, int before,
				int count) {
		}

		@Override
		public void afterTextChanged(Editable s) {
			if (s.toString().equals("")) {
				return;
			}
			LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) button
					.getLayoutParams();
			layoutParams.weight = Float.valueOf(s.toString());
			button.requestLayout();
		}

	}
}

Run the application

Main screen has three buttons and three text fields to change the layout_weight dynamically.

layout_weight example

layout_weight Example

Change the weight. The buttons size changes.

layout_weight changed

layout_weight changed

Download source code

This was an example about android's layout_weight. You can download the source code here: layoutWeightExample.zip

Share.

Comments are closed.