CODEWITHSUNDEEP
androidandroid-layoutandroid-xml
Snake
Snake

Reputation: 14648

Center Text below an imageview

How would I put a textview below an imageview so that the text is centered? If I use the relative layout, the only way is android:layoutBelow but you can't align to the center of the imageview as you can align to right or left of the image. Unless I have missed something

Thanks

Upvotes: 0

Views: 3632

Answers (3)

Larry McKenzie
Larry McKenzie

Reputation: 3283

After seeing your comments I have a better understanding of what you are trying to accomplish. This uses an extra view but allows you to group the textview to the imageview.

RelativeLayout in the upper Left:

<?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="match_parent" >

    <!-- place this layout anywhere and the imageview and textview will follow. -->
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageView1"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:text="TextViewTextViewTextViewTextViewTextView" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_launcher" />
    </RelativeLayout>

</RelativeLayout>

RelativeLayout in the center of the screen:

<?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="match_parent" >

    <!-- place this layout anywhere and the imageview and textview will follow. -->

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageView1"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:text="TextViewTextViewTextViewTextViewTextView" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_launcher" />
    </RelativeLayout>

</RelativeLayout>

RelativeLayout in the Bottom Right:

<?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="match_parent" >

    <!-- place this layout anywhere and the imageview and textview will follow. -->

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageView1"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:text="TextViewTextViewTextViewTextViewTextView" />

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerHorizontal="true"
            android:src="@drawable/ic_launcher" />
    </RelativeLayout>

</RelativeLayout>

As you can see anywhere you place the inner RelativeLayout the ImageView and TextView follow.

Upvotes: 1

MDMalik
MDMalik

Reputation: 4001

This will solve both your problems reading at the comment of the Text length, use android:ems in text which define the basic length of it

<TextView
android:layout_width="0dp"
android:layout_align="wrap_content"
android:layout_alignLeft="@+id/id_of_imageview"
android:layout_alignRight="@+id/id_of_imageview"
android:layout_below="@+id/id_of_imageview"
android:gravity="center_horizontal" 
android:ems="10" />

Upvotes: 0

Karakuri
Karakuri

Reputation: 38595

Try declaring your textview like so:

<TextView
android:layout_width="0dp"
android:layout_align="wrap_content"
android:layout_alignLeft="@+id/id_of_imageview"
android:layout_alignRight="@+id/id_of_imageview"
android:layout_below="@+id/id_of_imageview"
android:gravity="center_horizontal" />

Upvotes: 1

Related Questions