Android make button 1/3 of screen width and height in relative layout

Question

I have some XML. In this XML there is a single button inside a relative layout. The relative layout takes up the entire screen. I want the button to have 1/3 of the screen width and height. How could I do this?

Here is the XML:

    <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout
    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="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp"
    android:paddingBottom="0dp"
    tools:context="com.vroy.trapper.MainMenuActivity"
    android:layout_weight="2">

    <Button
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/menu_button_text"
        android:background="@drawable/round_button"
        android:id="@+id/button"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        />
</RelativeLayout>

I looked at this question, but even though I assigned a weight to the relative layout itself I could not assign a weight to the button.

Jayanth · Accepted Answer · 2021-09-24T16:52:34.620

15

you can do this easily in java code.

write this code in oncreate.

    Button btn = (Button) findViewById(R.id.button);
    int width = getResources().getDisplayMetrics().widthPixels/3;
    int height = getResources().getDisplayMetrics().heightPixels/3;
    btn.setLayoutParams(new RelativeLayout.LayoutParams(width, heigth));

edited Sep 24 '21 at 16:52

answered Feb 09 '16 at 04:43

Jayanth

5,954
3
21
38

score 4 · Answer 2 · answered Feb 10 '16 at 06:58

Percent Support Library is the thing you need.

This library is pretty easy to use since it is just the same RelativeLayout and FrameLayout we are familiar with, just with some additional functionalities.

First of all, since Percent Support Library comes along with Android Support Library 23 so please make sure that you update Android Support Library in SDK Manager to the latest version already. And then add a dependency like below in build.gradle file:

compile 'com.android.support:percent:23.0.0'

Now come back to your Question, you can do something like this for achieving your output. Hope it will help you.

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/bird"
    android:text="Your text"
    app:layout_heightPercent="33%"
    app:layout_widthPercent="33%" />
</android.support.percent.PercentRelativeLayout>

`PercentRelativeLayout` was deprecated in API level 26.1.0. The official documentation recommends to use ConstraintLayout instead:https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html — marc.garcia, Apr 04 '18 at 14:05

Elye · Answer 3 · 2016-02-10T06:25:52.787

(EDITED to consider width as well) Wrap the button around a linear layout.

<?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"
    android:paddingBottom="0dp"
    android:paddingLeft="0dp"
    android:paddingRight="0dp"
    android:paddingTop="0dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center"
        android:weightSum="3" >
        <LinearLayout
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:gravity="center"
            android:weightSum="3">

            <Button
                android:id="@+id/button"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_centerHorizontal="true"
                android:layout_centerVertical="true"
                android:layout_weight="1"
                android:text="@string/menu_button_text"
                android:background="@drawable/round_button"
                />
        </LinearLayout>
    </LinearLayout>
</RelativeLayout>

Change the android:gravity if you want your button to be on the right/left etc. With this, you could still use your relative layout for other things around it.

Your version of the code seems to make the button take up 1/3 of the screen's height. But not 1/3 of the screen's width. Maybe this is because you set the width to `"match_parent"`? — Foobar, Feb 10 '16 at 02:49
I have edited to consider width as well, by adding additional LinearLayout. Not the nicest way of doing things, since it's nested layout. — Elye, Feb 10 '16 at 06:26

score 0 · Answer 4 · answered Feb 09 '16 at 04:21

Use LinearLayout instead of RelativeLayout to achieve your goal.

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

    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"> 
        <View
             android:layout_width="wrap_content"
             android:layout_height="0dp"
             android:layout_weight="1"
             />
        <Button
             android:layout_width="match_parent"
             android:layout_height="0dp"
             android:layout_weight="1"
             android:text="@string/menu_button_text"
             android:background="@drawable/round_button"
             android:id="@+id/button"/>
            <View
             android:layout_width="wrap_content"
             android:layout_height="0dp"
             android:layout_weight="1"
             />
    </LinearLayout>   
   <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        />

   </LinearLayout>

Hope it helps!!

The problem is I want a relative layout for my overall layout. — Foobar, Feb 10 '16 at 02:43
I understand but is not possible to use weight in RelativeLayout, this element is for widget inside LinearLayout :( ...But you could use RelativeLayout as your parent layout and inside it put my posted LinearLayout with android:layout_width="match_parent" and android:layout_height="match_parent". This is one of the trick use RelativeLayout combined with LinearLayout — Gueorgui Obregon, Feb 10 '16 at 03:41

Android make button 1/3 of screen width and height in relative layout

4 Answers4