Androider2
Androider2

Reputation: 507

How to center views with RelativeLayout

I have a card view that has to show an icon, a title and subtitle like the drawing below.

 --------------------------------------------
|  --------                                  |
| |        |   TextView_1                    |
| |  Icon  |   TextView_2                    |
| |        |                                 |
|  ________                                  |
 ____________________________________________

What I want is to have the TextView_1 and TextView_2 centered vertically but I can not get it. I know I can use a LinearLayout horizontal and a LinearLayout vertical. What I want is to get the same result but using only RelativeLayout. Below the code I'm using:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginRight="@dimen/normal_spacing"
        android:src="@drawable/icon" />

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/icon"
        android:layout_toRightOf="@+id/icon"
        tools:text="Title" />

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/title"
        android:layout_toEndOf="@+id/icon"
        android:layout_toRightOf="@+id/icon"
        android:textStyle="bold"
        tools:text="Subtitle" />
</RelativeLayout>

Any ideas about how I can center vertically the two text views? :-)

Upvotes: 0

Views: 270

Answers (2)

Deepak Goyal
Deepak Goyal

Reputation: 4907

use this....

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginRight="@dimen/normal_spacing"
            android:src="@drawable/icon" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/icon"
            android:layout_alignTop="@+id/icon"
            android:layout_toEndOf="@+id/icon"
            android:layout_toRightOf="@+id/icon"
            android:orientation="vertical" 
            android:gravity="center_vertical">

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                tools:text="Title"/>

            <TextView
                android:id="@+id/subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textStyle="bold"
                tools:text="Subtitle" />
        </LinearLayout>
    </RelativeLayout>

Upvotes: 1

Kristy Welsh
Kristy Welsh

Reputation: 8520

Use layout_centerVertical like so:

<ImageView
    android:id="@+id/icon"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginRight="@dimen/normal_spacing"
    android:src="@drawable/icon" />

<TextView
    android:id="@+id/title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toEndOf="@+id/icon"
    android:layout_toRightOf="@+id/icon"
    tools:text="Title" 
    android:layout_centerVertical="true"/>

<TextView
    android:id="@+id/subtitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/title"
    android:layout_toEndOf="@+id/icon"
    android:layout_toRightOf="@+id/icon"
    android:textStyle="bold"
    tools:text="Subtitle"
    android:layout_centerVertical="true" />
   </RelativeLayout>

Upvotes: 0

Related Questions