Search code examples
androidtextviewalignmentbaseline

Align TextView baseline and another TextView bottom

I have RelativeLayout and two TextView, one of which with background.

On image two baselines aligned, but I want to align baseline of one and background bottom of another.

enter image description here

Here is my xml code. 

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="@dimen/chat_room_item_height"
    android:background="?attr/selectableItemBackground"
    android:paddingEnd="16dp"
    android:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:paddingStart="16dp"
    >

    <!-- other stuff -->

    <TextView
        android:id="@+id/text_view_unread_message_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/text_view_last_message_date"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:background="@drawable/chat_unread_message_count_background"
        style="@style/ChatRoomUnreadMessageCountTextStyle"
        tools:text="101"
        />

  <TextView
      android:id="@+id/text_view_last_message"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@+id/text_view_title"
      android:layout_toEndOf="@id/image_view_icon"
      android:layout_toLeftOf="@id/text_view_unread_message_count"
      android:layout_toRightOf="@id/image_view_icon"
      android:layout_toStartOf="@id/text_view_unread_message_count"
      android:ellipsize="end"
      android:layout_alignBaseline="@+id/text_view_unread_message_count"
      android:gravity="bottom"
      android:maxLines="1"
      tools:text="My life is a story book with many different chapters but I don’t let everyone read it."
      style="@style/ChatRoomLastMessageTextStyle"
      />

</RelativeLayout>

I have tried wrap TextView with background to different ViewGrops, wrap both TextView to layout, no avail.

Solution

  • You can do a little trick, here we go:

    Put the text_view_unread_message_count inside a some viewgroupo e.g. RelativeLayout and add a paddingBottom with using SP scaling (this is your space for manually align), something like this:

    Obs.: You need to give a new ID to you TextView, this is a example ID's and size values can be changed. 

       <!-- sp scaling will change with font size -->
    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:paddingBottom="10sp"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_toEndOf="@id/image_view_icon"
        android:layout_toLeftOf="@id/text_view_unread_message_count"
        android:layout_toRightOf="@id/image_view_icon"
        android:layout_toStartOf="@id/text_view_unread_message_count">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/chat_unread_message_count_background"
                style="@style/ChatRoomUnreadMessageCountTextStyle"
                tools:text="101"
        />
    </RelativeLayout>

    Put you locations definitions on parent and text definitions on textview. This should work.