How to center views with RelativeLayout

Question

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? :-)

Answer 1

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>

Answer 2

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>