Centering Textview Below a image button that is under relative layout?

Question

I have this problem of the textview is not centering below the image button. anyway to fix this issue? the coding and image is given below thx!

enter image description here

   <LinearLayout android:gravity="center_vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp"> 

       <RelativeLayout  android:gravity="center"  android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 

  <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnCat1"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerInParent="true"
    android:clickable="false"
    android:text="text" />

</RelativeLayout>

       <RelativeLayout  android:gravity="center"  android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 

  <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnContact"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerInParent="true"
    android:clickable="false"
    android:text="text" />

</RelativeLayout>
</LinearLayout>






   <LinearLayout android:gravity="center_vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp"> 

       <RelativeLayout  android:gravity="center"  android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 

  <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnRoute"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerInParent="true"
    android:clickable="false"
    android:text="text" />

</RelativeLayout>

       <RelativeLayout  android:gravity="center"  android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 

  <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnChecList"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerInParent="true"
    android:clickable="false"
    android:text="text" />

</RelativeLayout>
</LinearLayout>




</LinearLayout>

would be great if reason of down voting is given :( – ericlee Jul 13 '12 at 07:44 — ericlee, Jul 13 '12 at 07:44

score 18 · Accepted Answer · answered Jul 13 '12 at 07:44

Try this snippet :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="10dp"
    android:gravity="center_vertical" >

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

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@null"
            android:onClick="btnCat1"
            android:src="@drawable/ic_launcher" >
        </ImageButton>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageButton1"
            android:layout_centerInParent="true"
            android:clickable="false"
            android:text="text" />
    </RelativeLayout>

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

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@null"
            android:onClick="btnCat1"
            android:src="@drawable/ic_launcher" >
        </ImageButton>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageButton1"
            android:layout_centerInParent="true"
            android:clickable="false"
            android:text="text" />
    </RelativeLayout>

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

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@null"
            android:onClick="btnCat1"
            android:src="@drawable/ic_launcher" >
        </ImageButton>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageButton1"
            android:layout_centerInParent="true"
            android:clickable="false"
            android:text="text" />
    </RelativeLayout>
</LinearLayout>

enter image description here

Massimo · Answer 2 · 2019-09-06T07:21:44.603

11

You can do, simply (!!!):

android:layout_alignRight="@id/my_image_view"
android:layout_alignLeft="@id/my_image_view"

just align it left and right together, the result is the TextView centered.

edited Sep 06 '19 at 07:21

answered Mar 02 '15 at 16:36

Massimo

3,436
4
40
68

1

Using this approach, the width of the text will be limited to the width of the icon. If the icon is narrow in comparison to the length of the text, the text will wrap several times. – spaaarky21 Jun 18 '15 at 15:41
Yes, tha workaround is to put the TextView inside of a ViewGroup (e.g. a FrameLayout) with width and height set to wrap_content, and set the attributes clipChildren and clipToPadding to false. This ViewGroup will be centered below the image and the TextView inside of it will be totally visible. – Massimo Jun 18 '15 at 15:46
1

That doesn't seem to work - tested in Android Studio's Design view and on a 5.0.x device. I have a FrameLayout, set to wrap its content, with both clipping options set to false. The TextView in the FrameLayout is still limited to the width of the icon it's centered below. – spaaarky21 Jun 18 '15 at 16:36
From my experience, in order to let clipchildren to work as you expect, you also have to set that property also to the grandparent of the textview... http://stackoverflow.com/a/26528854/1507512 – Massimo Jun 18 '15 at 16:46

score 4 · Answer 3 · answered Mar 31 '15 at 13:18

4

Just adding these values:

 <TextView
    android:layout_alignLeft="@+id/my_image_view"
    android:layout_alignRight="@+id/my_image_view"
    android:gravity="center" />

answered Mar 31 '15 at 13:18

Raúl López

63
4

score 1 · Answer 4 · answered Jul 13 '12 at 07:38

1

put the button and text view in the same vertical LinearLayout (and you can place the LinearLayout in a relative layout) and simply assign center gravity to the text view.

answered Jul 13 '12 at 07:38

Vinay W

9,912
8
41
47

score 0 · Answer 5 · answered Jul 13 '12 at 07:36

0

android:layout_centerHorizontal="true" add this

answered Jul 13 '12 at 07:36

Vishal Pawar

4,324
4
28
54

score 0 · Answer 6 · answered Jul 13 '12 at 07:38

remove the line android:layout_centerInParent="true" from the textviews

or else try this

<LinearLayout  android:gravity="center"  android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical"> 

        <ImageButton
            android:contentDescription="@string/app_name"
            android:id="@+id/imageButton1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@null"
            android:onClick="btnCat1"
            android:src="@drawable/ic_launcher" >
        </ImageButton>

        <TextView
            style="@style/MenuStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="false"
            android:text="@string/app_name" 
            android:textColor="@color/black"/>

        </LinearLayout>

score 0 · Answer 7 · answered Jul 13 '12 at 13:27

btw i tried doing it the opposite way. i changed from horizontal to vertical and it worked

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="@+id/widget33"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#FFFFFF" >


   <LinearLayout  android:gravity="center" android:layout_weight="1" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp"> 

       <RelativeLayout  android:gravity="center"   android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 

    <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnCat1"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerHorizontal="true"
    android:clickable="false"
    android:text="Cat 1" />


</RelativeLayout>

       <RelativeLayout  android:gravity="center"  android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 

  <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnRoute"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerHorizontal="true"
    android:clickable="false"
    android:text="Route" />

</RelativeLayout>
</LinearLayout>



   <LinearLayout  android:gravity="center" android:layout_weight="1" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="10dp"> 

       <RelativeLayout  android:gravity="center"   android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 

    <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnContact"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerHorizontal="true"
    android:clickable="false"
    android:text="Contacts" />


</RelativeLayout>

       <RelativeLayout  android:gravity="center"  android:layout_weight="1"  android:layout_width="wrap_content" android:layout_height="wrap_content"> 


  <ImageButton
      android:id="@+id/imageButton1"
      android:layout_width="100dp"
      android:layout_height="100dp"
      android:background="@null"
      android:onClick="btnChecList"
      android:src="@drawable/nopic" >
</ImageButton>

<TextView
    style="@style/MenuStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/imageButton1"
    android:layout_centerHorizontal="true"
    android:clickable="false"
    android:text="CheckList" />

</RelativeLayout>
</LinearLayout>







</LinearLayout>

Centering Textview Below a image button that is under relative layout?

7 Answers7