Center textview below image view

Question

I need to center a textview just below an image view. This is a row screenshot from what I a getting now:

I need to put the textview with the text "30" below the image view with the thumbs up hand, and centered. The height position is fine as it is now.

Like this:

This is my layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#5981b2"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="2dp"
        android:src="@drawable/facebook" />

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/valoracion" />


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView2"
        android:layout_centerHorizontal="true"
        android:text="30"
        android:textAppearance="?android:attr/textAppearanceSmall" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:lines="2"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge"
         android:layout_toRightOf="@id/imageView1"
        />

</RelativeLayout>

Any help is welcome.

Answer 1

If you don't wanna use margins, which can behave differently on other screens, you could for example use the TextView with an compoundDrawable like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#5981b2"
android:orientation="vertical" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginLeft="2dp"
    android:src="@drawable/facebook" />

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerHorizontal="true"
    android:text="30"
    android:drawablePadding="10dp"
    android:gravity="center"
    android:drawableTop="@drawable/valoracion"
    android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:lines="2"
    android:text="Large Text"
    android:textAppearance="?android:attr/textAppearanceLarge"
     android:layout_toRightOf="@id/imageView1"
    />

</RelativeLayout>

Answer 2

Remove this line

android:layout_centerHorizontal="true"

and add

android:layout_alignParentRight="true"

and you are good to go

Answer 3

Take away

android:layout_centerHorizontal="true" 

The "below" is good. Then use

android:layout_toLeftOf="@id/imageView2"
android:layout_marginLeft="xxdp"

Set the margin until it appears correct.

Answer 4

Try this..

Remove android:layout_centerHorizontal="true" add android:layout_alignParentRight="true" and give android:layout_marginRight="15dp" for textView3 TextView

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageView2"
    android:layout_alignParentRight="true"
    android:layout_marginRight="15dp"
    android:text="30"
    android:textAppearance="?android:attr/textAppearanceSmall" />