android listview apperence like whats app Listview for chat application

Question

Hello all i need to develop layout like whats app in chatting screen like this in this i want to display time after chat textview complete.

For that i have done

<RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/blue" >

                <TextView
                    android:id="@+id/tv_message_chat_item_f"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="2dp"
                    android:layout_marginTop="2dp"
                    android:gravity="left|center"

                    android:paddingBottom="@dimen/one_dp"
                    android:paddingLeft="@dimen/fifteen_dp"
                    android:paddingRight="@dimen/five_dp"
                    android:paddingTop="@dimen/one_dp"
                      android:textAppearance="?android:attr/textAppearanceMedium"
                    android:text="fgfdgdf rete tretretret rtrtrwtw fgdfr grtwerwerewr ewrwerew" />

                <TextView
                    android:id="@+id/tv_message_time_f"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_below="@+id/tv_message_chat_item_f"
                    android:layout_marginBottom="2dp"
                   android:paddingRight="@dimen/five_dp"
                    android:gravity="right"
                    android:paddingBottom="@dimen/one_dp"
                    android:text="fgfdg"
                    android:textAppearance="?android:attr/textAppearanceSmall" />



            </RelativeLayout>

But not working with big message (the time texview not set properly)

use javapapers tutorial : http://javapapers.com/android/android-chat-bubble/ — Tushar Pandey, Dec 12 '14 at 12:50
yes i am able to set message textview but problem is when, when i am putting date/time like above screen shote — Android, Dec 12 '14 at 12:55
use gravity right or use framelayout as parent layout then place, time as always right. — Tushar Pandey, Dec 12 '14 at 12:57
i have used like see edited que. But i need it like exact screen shot mean when small message then relative layout must exact that width like screen shot — Android, Dec 12 '14 at 13:02
or see your whatsapp. send small message like hi and send message of 3 4 line and see difference — Android, Dec 12 '14 at 13:05
look you can additionally add that ">" icon at bottom_right with the help of framelayout with gravity = bottom|right. — Tushar Pandey, Dec 12 '14 at 13:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66753/discussion-between-tushar-pandey-and-pragna). — Tushar Pandey, Dec 12 '14 at 13:08
nope this is not solution (linear layout) as i want wrap text — Android, Dec 12 '14 at 13:16
ok solved my question by android:layout_weight="1" to both textview — Android, Dec 12 '14 at 13:21
nope i am not able to find. and we change our designing slightly. and if you find any solution please let me know. — Android, Jun 26 '15 at 05:56

score 1 · Answer 1 · answered Dec 12 '14 at 13:20

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:gravity="bottom"
        android:background="@drawable/blue"
        android:layout_alignParentStart="true" android:weightSum="10">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:text="Hi"
            android:layout_weight="1"
            android:id="@+id/textView"
            android:gravity="bottom"
            android:layout_centerVertical="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="bottom"
            android:layout_marginStart="10dp"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceSmall" />

    </LinearLayout>

score 0 · Answer 2 · answered Dec 12 '14 at 12:49

assuming your textView3 is the one with the "Big message" you should first take advantage of relative layout capabilities and use android:layout_below="@id/textview2" this will prevent overlapping with textView2 instead of just aligning everything from the bottom up.

  <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textView2"
                android:layout_centerHorizontal="true"
                android:text="Small Text"
                android:textAppearance="?android:attr/textAppearanceSmall" />

then after you set your TextView that will hold your 'time' you can once agian use something like

   <TextView
                    android:id="@+id/textView3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/textView2"
                    android:gravity="right"
                    android:layout_alignParentRight="true"
                    android:text="12:00 pm"
                    android:textAppearance="?android:attr/textAppearanceSmall" />

Gravity right will allow the text to be place from right to left, since displaying time usually does not take more than 6 or 7 characters it will help.

Hope it resolves your problem.

score 0 · Answer 3 · answered Dec 12 '14 at 13:02

0

You will need to implement ImageViews using 9patches (here: link) And a listview, which can handle CustomLayouts for ListItems (with the 9Patch ImageView).

I think you are able to implement a list view, therefore I don't go deeper here. Greets.

answered Dec 12 '14 at 13:02

JacksOnF1re

3,336
24
55

android listview apperence like whats app Listview for chat application

3 Answers3