Creating a chat bubble using Shapes or 9-patch image

匆匆过客 提交于 2021-02-19 02:26:59

问题


I am trying to create a template for my chat bubbles in an android app i am currently working on. The end result should look something like this:

enter image description here

I tried it with Shapes, but i could not get the multiple layers right. I also tried a 9-patch image, but creating the 9-patch was as far as i got. I hade no clue as to how to use it, specifically with the avatar, message header and content placements.

Can anyone help out?

My knowledge on shapes is fairly limited, although, i think i know just enough to understand what you guys will be saying :)


回答1:


A 9 patch would be really easy. Here's a nice tutorial: Simple Guide to 9 Patch.
Just make the extension .9.png, not just .png.
Use it as a background for your ViewGroup (your View container), as in:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/row"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bubble_left"
    android:layout_margin="8dp"
    android:padding="8dp"
    >
    <!-- The User -->
    <TextView
        android:id="@+id/txtUser"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
    />
    <!-- The Date -->
    <TextView
        android:id="@+id/txtDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/txtUser"
    />
    <!-- The Message -->
    <TextView
        android:id="@+id/txt2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/txtDate"
    />
</RelativeLayout>

I left you free to choose the graphics you desire (to match your taste and not to ruin your fun).

Obviously, you might want to prepare a bubble for the left side and a bubble for the right side (or have bubbles with differently coloured corners), and swap them accordingly in your Java code.



来源:https://stackoverflow.com/questions/28506117/creating-a-chat-bubble-using-shapes-or-9-patch-image

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!