center multiple RelativeLayout inside LinearLayout

Question

Inside a linearLayout I have put three RelativeLayouts with weight = 1. I want RelativeLayouts to be in the center of the screen. How can I manage their position?

below is my xml code:

<LinearLayout
            android:id="@+id/layout_circular_items"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view_bg_profile_img"
            android:padding="16dp"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginStart="8dp"
            android:layout_marginLeft="8dp"
            android:background="@color/color_backgrounds_light">

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_txt_view"
                android:layout_margin="8dp"
                android:gravity="center"
                android:layout_gravity="center">

                <TextView
                    android:id="@+id/txt_view_scores"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="2843"
                    android:textSize="@dimen/dim_txt_size_times"
                    android:gravity="center"
                    android:foregroundGravity="center"
                    android:layout_centerHorizontal="true"/>

                <TextView
                    android:id="@+id/txt_view_scores_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="scores"
                    android:layout_below="@id/txt_view_scores"
                    android:textSize="@dimen/dim_txt_size_times_title"
                    android:gravity="center"
                    android:foregroundGravity="center"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_txt_view"
                android:layout_margin="8dp"
                android:gravity="center"
                android:layout_gravity="center">

                <TextView
                    android:id="@+id/txt_view_purchase"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="12"
                    android:textSize="@dimen/dim_txt_size_times"
                    android:gravity="center"
                    android:foregroundGravity="center"
                    android:layout_centerHorizontal="true"/>

                <TextView
                    android:id="@+id/txt_view_purchase_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="purchase"
                    android:layout_below="@id/txt_view_purchase"
                    android:textSize="@dimen/dim_txt_size_times_title"
                    android:gravity="center"
                    android:foregroundGravity="center"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/circle_txt_view"
                android:layout_margin="8dp"
                android:gravity="center"
                android:layout_gravity="center">

                <TextView
                    android:id="@+id/txt_view_cash"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="21450"
                    android:textSize="@dimen/dim_txt_size_times"
                    android:gravity="center"
                    android:foregroundGravity="center"
                    android:layout_centerHorizontal="true"/>

                <TextView
                    android:id="@+id/txt_view_cash_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="cash"
                    android:layout_below="@id/txt_view_cash"
                    android:textSize="@dimen/dim_txt_size_times_title"
                    android:gravity="center"
                    android:foregroundGravity="center"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

        </LinearLayout>

and this is the screen shot of output:

I want the red spaces be equal.

Set _android:gravity="center" android:layout_gravity="center"_ for _LinearLayout_ — Piyush, Oct 05 '16 at 07:01

score 1 · Accepted Answer · answered Oct 05 '16 at 07:03

1

In your top LinearLayout

simply use android:gravity="center"

It will definitely work. If it does not work remove all gravity from RelativeLayout. Only use android:gravity="center" in top LinearLayout.

answered Oct 05 '16 at 07:03

Däñish Shärmà

2,891
2
25
43

it's working! No need to remove `gravity` from `RelativeLayout`. just working with the first two lines. – Shima Erfan Oct 05 '16 at 07:25
1

yeah you are right. Actually gravity is a property of LinearLayout, so if you use gravity inside RelativeLayout it would not effect anything. – Däñish Shärmà Oct 05 '16 at 07:32

score 0 · Answer 2 · answered Oct 05 '16 at 07:09

You can try to this code and edit according your need

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/layout_circular_items"
android:layout_width="match_parent"
android:layout_height="wrap_content">

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:gravity="center">

        <TextView
            android:id="@+id/txt_view_scores"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:foregroundGravity="center"
            android:gravity="center"
            android:text="2843" />

        <TextView
            android:id="@+id/txt_view_scores_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/txt_view_scores"
            android:layout_centerHorizontal="true"
            android:foregroundGravity="center"
            android:gravity="center"
            android:text="scores" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        android:gravity="center">

        <TextView
            android:id="@+id/txt_view_purchase"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:foregroundGravity="center"
            android:gravity="center"
            android:text="12" />

        <TextView
            android:id="@+id/txt_view_purchase_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/txt_view_purchase"
            android:layout_centerHorizontal="true"
            android:foregroundGravity="center"
            android:gravity="center"
            android:text="purchase" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center">

        <TextView
            android:id="@+id/txt_view_cash"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:foregroundGravity="center"
            android:gravity="center"
            android:text="21450" />

        <TextView
            android:id="@+id/txt_view_cash_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/txt_view_cash"
            android:layout_centerHorizontal="true"
            android:foregroundGravity="center"
            android:gravity="center"
            android:text="cash" />

    </RelativeLayout>
</LinearLayout>

score 0 · Answer 3 · edited May 23 '17 at 12:24

Although this question is answered correctly but just want to add more explanation.

When you want to change the children positions you must work with their parent gravity, No need to change the children gravity. In your case you must simply change your LinearLayout's gravity to center or center_horizontal like this:

<LinearLayout
            android:id="@+id/layout_circular_items"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            <!-- Add this line-->
            android:gravity="center" 
> ...

android:gravity is the Inside gravity of that View. This means, in which direction it's contents should align.

This link is also useful to find more info about gravity and layout_gravity:

Gravity and layout_gravity on Android

center multiple RelativeLayout inside LinearLayout

3 Answers3