Android - Center Textview in ImageView of Relative Layout

Question

I have a relative layout with an ImageView in it and want to center the TextView in side the ImageView, in the activity layout xml file.

Here is the image view and then what I have tried for the TextView

This is inside of the relative layout:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minHeight="170dp"
    android:minWidth="170dp"
    android:id="@+id/logoBackground"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="33dp"
    android:layout_marginStart="33dp"
    android:layout_marginTop="33dp"
    android:contentDescription="@string/content_description_useless"
    android:background="#ffffd0cd" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/capital_u"
    android:id="@+id/textView"
    android:textSize="30sp"
    android:layout_alignTop="@+id/logoBackground"
    android:layout_alignLeft="@+id/logoBackground"
    android:layout_alignStart="@+id/logoBackground"
    android:layout_marginLeft="43dp"
    android:layout_marginStart="43dp"
    android:layout_marginTop="65dp"/>

It looks okay I think but the marginTop is 65 shouldn't it be half of the height of the imageView?

Thanks for the help in advance.

Answer 1

It's not working because you're telling the TextView to be in the center of the parent RelativeLayout, but the ImageView is attached to the top-left of the parent.

One approach would be to force the TextView to be the exact size of the ImageView using RelativeLayout's alignXyz properties. You then set the gravity attribute to center, and that makes the text appear in the center of the TextView's bounds. This should work as long as the ImageView is larger than the TextView in all dimensions.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/capital_u"
    android:id="@+id/textView"
    android:textSize="30sp"
    android:layout_alignTop="@+id/logoBackground"
    android:layout_alignLeft="@+id/logoBackground"
    android:layout_alignRight="@+id/logoBackground"
    android:layout_alignBottom="@+id/logoBackground"
    android:gravity="center"/>

Will that work for you?

Answer 2

One problem I see is this line:

android:layout_centerInParent="@+id/logoBackground"

The value of layout_centerInParent should be true or false. I'm guessing it is evaluating to false and is in the upper left corner. If you set it to true it will center itself in the middle of the parent (the relative layout). To center it in the ImageView you would need to have the relative layout the same size as the ImageView.

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

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minHeight="170dp"
    android:minWidth="170dp"
    android:id="@+id/logoBackground"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="33dp"
    android:layout_marginStart="33dp"
    android:layout_marginTop="33dp"
    android:contentDescription="@string/content_description_useless"
    android:background="#ffffd0cd" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/capital_u"
    android:id="@+id/textView"
    android:textSize="30sp"
    android:layout_centerInParent="true"/>
</RelativeLayout>

Answer 3

Try this to your textview : android:layout_centerInParent="true"

So that makes:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minHeight="170dp"
    android:minWidth="170dp"
    android:id="@+id/logoBackground"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_marginLeft="33dp"
    android:layout_marginStart="33dp"
    android:layout_marginTop="33dp"
    android:contentDescription="@string/content_description_useless"
    android:background="#ffffd0cd" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/capital_u"
    android:id="@+id/textView"
    android:textSize="30sp"
    android:layout_alignTop="@+id/logoBackground"
    android:layout_alignLeft="@+id/logoBackground"
    android:layout_alignStart="@+id/logoBackground"
    android:layout_marginLeft="43dp"
    android:layout_marginStart="43dp"
    android:layout_marginTop="65dp"
    android:layout_centerInParent="true"/>

Answer 4

Try this code :

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

    <ImageView
        android:scaleType="centerCrop"
        android:layout_width="30dp"
        android:layout_height="30dp"/>

    <TextView
        android:id="@+id/your_text_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="1" />
</RelativeLayout>

Answer 5

For this purpose you have to use the Frame Layout .

For Reference, See here www.developer.android.com/reference/android/widget/FrameLayout.html

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent">

   <ImageView 
   android:src="@drawable/ic_launcher"
   android:layout_height="fill_parent"
   android:layout_width="fill_parent"/>

   <TextView
   android:text="Frame Text"
   android:textSize="30px"
   android:textStyle="bold"
   android:layout_height="fill_parent"
   android:layout_width="fill_parent"
   android:gravity="center"/>
</FrameLayout>