CODEWITHSUNDEEP
androidandroid-imageviewandroid-relativelayout
curlyreggie
curlyreggie

Reputation: 1530

Align ImageView to center of a TextView in RelativeLayout

I have a Relative Layout as below:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dip"
    android:layout_weight="0.38"
    android:background="@drawable/layout"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:layout_marginLeft="80dp"
        android:textColor="@color/text1color"
        android:textSize="15sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/text2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/text1"
        android:layout_below="@+id/text1"
        android:background="@drawable/text2_background"
        android:layout_marginTop="10dp"
        android:paddingLeft="10dp"
        android:textColor="@color/text2color"
        android:textSize="13sp" />

    <com.widgets.CustomImageView
        android:id="@+id/myImage"
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:layout_margin="0dp"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/text2"
        android:src="@drawable/logo" />

</RelativeLayout>

The ImageView @+id/myImage needs to align to the center of @+id/text2 TextView! Currently, it is aligning to the top of @+id/text2 and is aligning to the layout's parentBottom. I don't want this hack.

Is there a way of aligning the ImageView to the TextView's center?

Upvotes: 0

Views: 1647

Answers (1)

Phant&#244;maxx
Phant&#244;maxx

Reputation: 38098

This is a perfect case for a compound drawable (which is a best practice, to flatten your design).
The ImageView goes INSIDE the TextView text2, at its bottom:

Just add this to your text2 definition:

android:drawableBottom="@drawable/logo"

You can add some padding, too

android:drawablePadding="4dp"

The image is horizontally aligned to its container.
If the text grows vertically, the image will be pulled down (as the TextView grows).

To have the image left aligned and vertically centered, just change drawableTop with drawableLeft and you're done:

android:drawableLeft="@drawable/logo"

Upvotes: 2

Related Questions