Android: Using alignBaseline for an image following text

Question

Below is a TextView followed by an ImageView contained in RelativeLayout. I'm trying to get the bottom of the image to align with the baseline of the text. When I use alignBaseline for the image,reference the TextView, it is the top of the image that aligns with the baseline of the text instead of the bottom. How can I fix this?

<TextView 
        android:id="@+id/month" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="feb"
        android:textSize="60px"
        android:typeface="serif"
        />
   <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingLeft="15px"
        android:layout_toRightOf="@id/month"
        android:layout_alignBaseline="@id/month"
        android:src="@drawable/minicalimage" 
        android:id="@+id/calimage"
        />

score 18 · Answer 1 · answered Aug 04 '12 at 22:15

18

Since API11 you can simply use android:baselineAlignBottom="true"

Prior to API11 you can overwrite getBaseLine() and return image height.

answered Aug 04 '12 at 22:15

lujop

13,504
9
62
95

score 7 · Answer 2 · answered Jan 24 '16 at 12:56

You should use both following lines in your ImageView to align bottom of Image view to bottom of nearby TextView:

        android:layout_alignBaseline="@+id/txtview"
        android:baselineAlignBottom="true"

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <TextView
        android:id="@+id/txtview"
        ... />

    <ImageView
        ...
        android:layout_toRightOf="@+id/txtview"
        android:layout_alignBaseline="@+id/txtview"
        android:baselineAlignBottom="true"
        ...
        />
</RelativeLayout>

score 3 · Accepted Answer · answered Feb 24 '11 at 10:01

I was able to accomplish what I wanted to do. I did not utilize alignBaseline, just fixed the problem with padding and resizing the image. Some of the issues I was having arose from having an image too big and it filling up the space undesirably. The code I used to achieve what I wanted is below:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" 
    android:paddingLeft="25px"
    android:paddingTop="30px"
    android:id="@+id/LinearLayout1">
    <TextView 
        android:id="@+id/month" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="feb"
        android:textSize="60px"
        android:typeface="serif"
        />
   <ImageView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_toRightOf="@id/month"
        android:layout_alignBottom="@id/month"
        android:paddingBottom="12px"
        android:src="@drawable/minicalimage" 
        android:id="@+id/calimage"
        />
    <TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:text="2011" 
        android:id="@+id/year" 
        android:layout_toRightOf="@id/calimage"
        android:layout_alignBaseline="@id/month"
        android:typeface="serif"
        android:textSize="40px"
        />
</RelativeLayout>

This was the result:
Header for a calendar/planner

I have tested on a few different emulators and the result is the same. I was aiming to have the three elements tied to each other in this configuration regardless of the screen and the above code seems to accomplish that. Please explain the advantage of using dpi instead of px, if you would. — Gaege, Feb 24 '11 at 17:30
I asked because I tried your code in emulators with different size and resolutions, and sometime the picture was a little bit below the text, or above, and in 3.7in WVGA(Nexux One) emulator, my picture is even cropped because of the padding. Though, I don't have a better solution... For advantage of dpi over px, please read the answer here http://stackoverflow.com/questions/4517289/relations-between-dip-px-and-dpi — Adinia, Feb 25 '11 at 16:24
Thanks for the response, I just now realized you had posted. I've since gotten this bit MOSTLY worked out. Most of the issues were coming from the original size of the image. — Gaege, Mar 09 '11 at 02:46
This is not an ideal solution. The TextView can changes sizes or positioning. For example, user's on Android can change the device font size. Adding margin or padding will mean the ImageView will no longer be aligned when the screen changes. See my solution below. — AdamHurwitz, Jul 20 '16 at 19:15

score 0 · Answer 4 · answered Aug 22 '12 at 13:10

0

I stumbled upon a similar issue, and solved it just by avoiding layout_alignBaseline altogether, relying on layout_alignBottom instead, which is available since API 1.

answered Aug 22 '12 at 13:10

Giulio Piancastelli

15,368
5
42
62

score 0 · Answer 5 · answered Jul 24 '14 at 15:32

i used a text view instead of an image view and used the new text view's drawable to set the image and it worked:

<TextView 
        android:id="@+id/month" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:text="feb"
        android:textSize="60px"
        android:typeface="serif"
        />
<TextView 
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingLeft="15px"
        android:layout_toRightOf="@id/month"
        android:layout_alignBaseline="@id/month"
        android:drawableRight="@drawable/minicalimage" 
        android:id="@+id/calimage"
        />

score -1 · Answer 6 · edited Sep 04 '15 at 06:23

/**
 * Set whether to set the baseline of this view to the bottom of the view.
 * Setting this value overrides any calls to setBaseline.
 *
 * @param aligned If true, the image view will be baseline aligned with
 *      based on its bottom edge.
 *
 * @attr ref android.R.styleable#ImageView_baselineAlignBottom
 */
public void setBaselineAlignBottom(boolean aligned) {
    if (mBaselineAlignBottom != aligned) {
        mBaselineAlignBottom = aligned;
        requestLayout();
    }
}

score -1 · Answer 7 · answered Jul 20 '16 at 19:26

You want to use the android:layout_alignBottom attribute to align the ImageView with the baseline of another View.

In the sample below I aligned the ImageView to another TextView. I included the code for the ImageView, and not the TextView. In order to align to the TextView you'll just need to include the id of the TextView.

Adjusting the margin or padding will result in the Views being misaligned if the user changes the text size on their device.

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="?attr/selectableItemBackground">

        <!-- additional code here -->

        <ImageView
            android:id="@+id/message_time_chevron_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/replies_username_id"
            android:layout_alignParentRight="true"
            android:clickable="true"
            android:src="@drawable/ic_chevron_right"/>

        <!-- additional code here -->

</RelativeLayout>

Android: Using alignBaseline for an image following text

7 Answers7

Linked