Aligning Time inside a Text Speech Bubble

Question

I want to implement this feature, as present in WhatsApp in Android.

Here, for implementing this I used separate TextViews for both text and time, placed inside a relative layout.

My Question is, how WhatsApp is deciding when to move the time in the new-line and when not.

Below are the Portrait and Landscape screenshot of WhatsApp.

Instinct feeling is, code must be something like this.

if(width_of_last_line_of_textview > some_fixed_value)
    move time_textview to new-line;
else
    make time_textview in-line;

But I was wondering if this can be done using xml (using some property weight etc)

WhatsApp bubble adjusts itself on every screen size, whether the screen is Landscape or Portrait.

Attached is the layout WhatsApp using for text bubble.

conversation_row_text_right.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >

<com.whatsapp.DividerView
    android:id="@id/date_divider"
    style="@style/DateDivider" />

<LinearLayout
    android:id="@id/main_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@id/date_divider"
    android:layout_marginLeft="40.0dip"
    android:minHeight="30.0dip"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@id/web_page_preview_holder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="4.0dip"
        android:paddingLeft="8.0dip"
        android:paddingRight="8.0dip"
        android:paddingTop="8.0dip" />

    <view
        android:id="@id/text_content_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        class="com.whatsapp.TextAndDateLayout"
        android:paddingBottom="2.0dip"
        android:paddingRight="2.0dip" >

        <com.whatsapp.TextEmojiLabel
            android:id="@id/message_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:paddingBottom="3.0dip"
            android:paddingLeft="8.0dip"
            android:paddingRight="8.0dip"
            android:paddingTop="2.0dip"
            android:textColor="#ff000000"
            android:textSize="@dimen/conversation_text_row_tv" />

        <LinearLayout
            android:id="@id/date_wrapper"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center|right"
            android:orientation="horizontal"
            android:paddingBottom="1.0dip"
            android:paddingRight="5.0dip" >

            <TextView
                android:id="@id/date"
                style="@style/ConversationDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center|right"
                android:gravity="right" />

            <ImageView
                android:id="@id/status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center|right"
                android:paddingBottom="3.0dip"
                android:paddingLeft="4.0dip" />
        </LinearLayout>
    </view>
</LinearLayout>

WhatsApp is using LinearLayout for Date, it contains TextView (for date i.e 3:48 PM) and ImageView (for icons i.e ✔)

@BobMalooga i have added the WhatsApp layout code, it seems like they are doing this from Java not from xml, may be. — shanraisshan, Apr 06 '16 at 12:59
`it contains TextView (for date i.e 3:48 PM) and ImageView (for icons i.e ✔)` Then WhatsApp is **not optimized**. They should use a **compound drawable** directly inside the TextView, for the ✔ icons. — Phantômaxx, Apr 07 '16 at 11:08
whatsapp uses custom view defined in `com.whatsapp.TextAndDateLayout` class. — Mukesh Sharma, Jun 27 '16 at 13:19
@Syeda Zunairah try [Flexbox Layout](https://android-developers.googleblog.com/2017/02/build-flexible-layouts-with.html?m=1) — shanraisshan, Oct 11 '17 at 05:26
But it didn't make the both text views to overlap for example when we have a text of 1.5 lines we want the time to be below the first line and on the front of the second line. — Syeda Zunaira, Oct 11 '17 at 05:45

score 3 · Answer 1 · answered Apr 06 '16 at 13:07

3

As @Bob Malonga mentioned on your comment my opinion is also this layout can be achieved by using FlowLayout.

FlowLayout let us adding views one to another until total width of views reached maximum width. Then it will continue from new line.

You can find example FlowLayout libraries below

https://github.com/ApmeM/android-flowlayout

https://github.com/blazsolar/FlowLayout

In your case , main point will be you need to set android:gravity value as right , by this way when your time_text_view exceed the width, it will be on new line and it will be aligned to right

answered Apr 06 '16 at 13:07

Emin Ayar

1,104
9
13

1

WhatsApp aren't using Flow Layout. – shanraisshan Apr 07 '16 at 06:45
1

I dont know what layouts whatsapp are using , but your need can be achieved with flowlayout – Emin Ayar Apr 07 '16 at 06:47

score 2 · Accepted Answer · answered Feb 22 '17 at 05:23

2

Android open sourced FlexboxLayout to bring the same functionalities of the CSS Flexible Layout module to Android.

answered Feb 22 '17 at 05:23

shanraisshan

3,521
2
21
44

Aligning Time inside a Text Speech Bubble

2 Answers2