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

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).

Solution 1

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>

Solution 2

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.

Solution 3

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>

Solution 4

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>

Solution 5

@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>

View more solutions

Comments

[Gus]

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]

This is really using a LinearLayout to do the work, rather than RelativeLayout.

[Gus]

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.