CODEWITHSUNDEEP
androidandroid-layout
Hairo
Hairo

Reputation: 2214

android - align a textview to the center of another view

i have some imagebuttons and each one has a corresponding textview, i'd like to align those textview's to the center of their corresponding imageview, i mean, like is seen on the app drawer...

 !-----!
 !icon !
 !_____!
app  name

this is my code, i'm using a RelativeLayout

<ImageButton
    android:id="@+id/blog_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/logo_img"
    android:layout_marginLeft="50dp"
    android:layout_marginTop="51dp"
    android:background="@null"
    android:contentDescription="@string/blog_desc"
    android:src="@drawable/blog" />

<TextView
    android:id="@+id/blog_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/blog_button"
    android:layout_below="@+id/blog_button"
    android:layout_marginTop="8dp"
    android:text="@string/blog_desc" />

Upvotes: 21

Views: 31899

Answers (4)

Amirhossein Ghasemi
Amirhossein Ghasemi

Reputation: 22138

If your views in RelativeLayout follow these steps:

1- wrap your view that wants to be aligned in the center of target view in Framelayout.

2- move all layout attributes to FrameLayout.

3- set layout_align_top and layout_align_bottom (or start and end if horizontal) to target view.

4- set layout_gravity to center_vertical (or horizontal) to child of Frame layout

Result: enter image description here 

<RelativeLayout
        android:id="@+id/yourView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0">

    <RatingBar
            android:id="@+id/masseur_rating_bar"
            android:layout_width="wrap_content"
            android:layout_height="16dp"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:isIndicator="true"
            android:progressDrawable="@drawable/ic_selector_rating_bar"
            android:rating="@{masseurItem.rate}"
            android:scaleX="0.8"
            android:scaleY="0.8"
            tools:rating="4.5" />

    <TextView
            android:id="@+id/rate_text_view"
            style="@style/BodyTextViewStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toEndOf="@id/masseur_rating_bar"
            android:text="@{String.valueOf(masseurItem.rate)}"
            android:textSize="12sp"
            tools:text="4.5" />
</RelativeLayout>

Upvotes: 1

Pratap Patil
Pratap Patil

Reputation: 189

If a the TextView can be transparent then this can be achieved with a single View

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Test string"
    android:drawableTop="@android:drawable/btn_star"
    android:background="@android:color/transparent"
    android:textSize="10sp"
     />

Upvotes: 1

gwakamol
gwakamol

Reputation: 189

Old post but if this can help I think it's not necessary to add an additional container.

<ImageButton
    android:id="@+id/blog_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/logo_img"
    android:layout_marginLeft="50dp"
    android:layout_marginTop="51dp"
    android:background="@null"
    android:contentDescription="@string/blog_desc"
    android:src="@drawable/blog" />

<TextView
    android:id="@+id/blog_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/blog_button"
    android:layout_alignRight="@+id/blog_button"
    android:layout_below="@+id/blog_button"
    android:gravity="center_horizontal"
    android:layout_marginTop="8dp"
    android:layout_marginLeft="-20dp"
    android:layout_marginRight="-20dp"
    android:text="@string/blog_desc" />

It's work for me.

Upvotes: 18

Jason Robinson
Jason Robinson

Reputation: 31283

Wrap that in a LinearLayout and center the children, like so:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/logo_img"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageButton
        android:id="@+id/blog_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:contentDescription="@string/blog_desc"
        android:src="@drawable/blog" />

    <TextView
        android:id="@+id/blog_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/blog_desc" />
</LinearLayout>

Upvotes: 32

Related Questions