How to center a view using RelativeLayout?

Question

I wanted to know how to center a View between two other views (or between a view and the parent edge) using RelativeLayout.

For example, if I have the following...

enter image description here

How do I vertically center the Button between the ImageView and the bottom of the screen using RelativeLayout?

I'm looking for a solution where...

the Button is not stretched in any way
there are no nested layouts

And I'm trying to do this in the XML layout (not programmatically).

Shrikant Ballal · Answer 1 · 2012-08-29T05:27:26.677

29

You can use following:

<RelativeLayout 
        android:layout_below="@id/theImageView"
        android:align_parentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="200dp" >    


        <Button 
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"            
            android:onClick="onClickButton"
            android:textSize="20sp"
            android:text="Go"/>

    </RelativeLayout>

edited Aug 29 '12 at 05:27

answered Aug 28 '12 at 06:04

Shrikant Ballal

7,067
7
41
61

Wouldn't this just place the button _immediately_ below the TextView? There doesn't seem to be any regard to the bottom of the screen in the above layout. I need the button vertically centered between the TextView and the bottom of the screen. – Gus Aug 28 '12 at 06:56
Hi Shrikant, sorry, I don't see what that layout does. It makes no mention of the ImageView anymore. If the RelativeLayout you have defined is the root layout, then this will just center the Button in the entire window. – Gus Aug 28 '12 at 17:53

score 4 · Answer 2 · answered Jul 18 '14 at 22:19

There's unfortunately no easy way to do this. You can either nest layouts, or do it at runtime. The simplest way is to nest layouts:

<LinearLayout
    android:width="match_parent"
    android:height="match_parent"
    android:orientation="vertical">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/my_top_image"/>
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/my_button_label"/>
    </RelativeLayout>
</LinearLayout>

This puts the image at the top. Below that, the layout_height=0 and layout_weight=1 attributes on the RelativeLayout cause it to take up all the remaining space. You can then center the button in the RelativeLayout. You can play with padding on the button to get it to the size you want.

score 3 · Answer 3 · answered Aug 28 '12 at 06:22

Use below XMl code for that, it will solve your problem.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <LinearLayout
        android:id="@+id/mLlayout1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/mImgView1"
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="match_parent"
            android:layout_weight="2" >

            <Button
                android:id="@+id/Btn1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="Dipak" />
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

Manoj Manani · Answer 4 · 2012-08-28T06:18:29.603

use this android:layout_centerInParent="true" in XML file..

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:weightSum="1.0" >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="0.8"
        android:background="#00ff00" >

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true" />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dip"
        android:layout_weight="0.2" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Button" />
    </RelativeLayout>

</LinearLayout>

This is really using a LinearLayout to do the work, rather than RelativeLayout. — Gus, Aug 28 '12 at 06:58

score 1 · Answer 5 · answered Aug 28 '12 at 06:18

@Gus you can create center view between two other view... this is not exact you must try with this way....

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="#00ccFF"
        android:orientation="horizontal" >
    </LinearLayout>

    <LinearLayout
        android:layout_width="59dp"
        android:layout_height="59dp"
        android:layout_alignRight="@+id/linearLayout1"
        android:layout_alignTop="@+id/linearLayout1"
        android:layout_marginRight="-21dp"
        android:layout_marginTop="-21dp"
        android:background="#FFccFF"
        android:orientation="vertical" >
    </LinearLayout>

</RelativeLayout>

score 0 · Answer 6 · answered Jul 11 '14 at 09:12

I think what you just need is to allign the imageview as you would normally done and align the button using layout_below , no need for hardcoding nor using nested views use android:gravity="center" on the button you're done

   <RelativeLayout 
    android:layout_below="@id/theImageView"
    android:align_parentBottom="true"
    android:layout_width="match_parent"
    android:layout_height="200dp" >    

   <ImageView
       android:id="@+id/imgview"
        android:layout_width="match_parentmat"
        android:layout_height="wrap_content"  />
    <Button 
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_below="@+id/imgview"
        android:gravity="center"        
        android:onClick="onClickButton"
        android:textSize="20sp"
        android:text="Go"/>

</RelativeLayout>

score 0 · Answer 7 · answered Mar 23 '23 at 20:30

On a similar note, if you want a signal level drawable with vertical bars, including invisible spacing between some of them, the following works:

<item android:top="35dp" android:left="0dp" android:right="110dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_dark"/>
        <size android:height="10dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="35dp" android:left="10dp" android:right="100dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
        <size android:height="20dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="30dp" android:left="20dp" android:right="90dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_bright"/>
        <size android:height="30dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="25dp" android:left="30dp" android:right="80dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_dark"/>
        <size android:height="40dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="25dp" android:left="40dp" android:right="70dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
        <size android:height="40dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="20dp" android:left="50dp" android:right="60dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_bright"/>
        <size android:height="40dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="15dp" android:left="60dp" android:right="50dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_dark"/>
        <size android:height="40dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="15dp" android:left="70dp" android:right="40dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
        <size android:height="40dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="10dp" android:left="80dp" android:right="30dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_bright"/>
        <size android:height="40dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="5dp" android:left="90dp" android:right="20dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_dark"/>
        <size android:height="40dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="5dp" android:left="100dp" android:right="10dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/transparent"/>
        <size android:height="45dp" android:width="10dp"/>
    </shape>
</item>

<item android:top="0dp" android:left="110dp" android:right="0dp">
    <shape android:shape="rectangle">
        <solid android:color="@android:color/holo_blue_dark"/>
        <size android:height="50dp" android:width="10dp"/>
    </shape>
</item>

score -1 · Answer 8 · answered Aug 28 '12 at 06:15

    <?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" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:src="@drawable/wood" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/imageView1"
        android:layout_below="@+id/imageView1"
        android:layout_marginLeft="101dp"
        android:layout_marginTop="53dp"
        android:text="Image Button" />
</RelativeLayout>

How to center a view using RelativeLayout?

8 Answers8