Search code examples
androidandroid-relativelayout

centerInParent sets the X-coordinate too much to the right


I'm trying to make 2 buttons with 1 textview under each of the buttons align besides each other.

This is my code so far:

<LinearLayout 
    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"
    android:orientation="vertical"
    android:background="@color/background_color"
    tools:context=".WelcomeActivity"
    android:weightSum="1">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="a string of text"
        android:textSize="30dp"
        android:background="#cac09F"
        android:id="@+id/textView2"
        android:gravity="center_vertical|center_horizontal" />

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center_vertical|center_horizontal">
        <Button android:id="@+id/btn1"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:focusable="true"
            android:background="@mipmap/icon_1">
        </Button>
        <Button android:id="@+id/btn2"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_marginLeft="50dp"
            android:focusable="true"
            android:layout_toRightOf="@+id/btn1"
            android:background="@mipmap/icon_2">
        </Button>
        <TextView
            android:id="@+id/txt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:text="Button 1"
            android:layout_centerInParent="true"
            android:layout_below="@id/btn1"/>
        <TextView
            android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="15sp"
            android:text="Button 2"
            android:layout_below="@+id/btn2"/>
    </RelativeLayout>
</LinearLayout>

When i add android:layout_centerInParent="true" for both of the TextViews their right edge will be aligned with the right edge of btn2.

Heres a picture when btn1 has layout_centerInParent="true" and not btn2 enter image description here


Solution

  • Try with this:

    <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"
    android:background="@color/background_color"
    android:orientation="vertical"
    android:weightSum="1"
    tools:context=".WelcomeActivity">
    
    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:background="#cac09F"
        android:gravity="center_vertical|center_horizontal"
        android:text="a string of text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dp" />
    
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
    
        <LinearLayout
            android:id="@+id/ll1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
    
            <Button
                android:id="@+id/btn1"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="@mipmap/icon_1"
                android:focusable="true" />
    
            <TextView
                android:layout_gravity="center_horizontal"
                android:id="@+id/txt1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/btn1"
                android:layout_centerInParent="true"
                android:text="Button 1"
                android:textSize="15sp" />
    
    
        </LinearLayout>
    
        <LinearLayout
            android:layout_marginLeft="50dp"
            android:layout_toRightOf="@+id/ll1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">
    
    
            <Button
                android:id="@+id/btn2"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_toRightOf="@+id/btn1"
                android:background="@mipmap/icon_2"
                android:focusable="true" />
    
            <TextView
                android:layout_gravity="center_horizontal"
                android:id="@+id/txt2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/btn2"
                android:text="Button 2"
                android:textSize="15sp" />
    
        </LinearLayout>
    </RelativeLayout>
    

    I used a relative layout as a parent and put the 2 buttons with their below text in 2 different linear layouts.