0

I am trying to create a chat bubble design with android drawables

My design idea was the following:

New

What I currently have, but what I don't like is that:

Old

The code is the following:

<layer-list>
    <item
        android:right="1dp"
        android:top="12dp">
        <rotate
            android:fromDegrees="45"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <solid android:color="?attr/message_out_color" />
                <stroke
                    android:width="1px"
                    android:color="@color/colorFakeShadow" />
            </shape>
        </rotate>
    </item>

    <item
        android:right="8dp"
        android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="?attr/message_out_color" />
        </shape>
    </item>

</layer-list>

I tried to use the corner tag with a high radius, but that didn't result in what I imagined. Another idea was to use two ovals as that is how I've done my design idea in Paint.NET, but I didn't manage to position the ovals right. Is my idea possible to create with android drawables and if so how?

UPDATE: When I add <corners android:radius="50dp" /> it looks like this

Corners

But as you can see, it is too round, it doesn't look like my image (the first one in this post).

UPDATE 2: I cannot use 9 patch drawables, because these message bubbles have to scale in all directions, and also I need a <ripple> on the shape because the user can click on my message bubble, which can't be done with a 9 patch.

Thanks in advance!

Twometer
  • 1,561
  • 2
  • 16
  • 24
  • This is interesting article https://stackoverflow.com/questions/16161448/how-to-make-layout-with-rounded-corners – Stanojkovic Oct 21 '17 at 20:12
  • I have tried that but it does not look as in my image – Twometer Oct 21 '17 at 20:12
  • can you show what the corner radius looks like – yfdgvf asdasdas Oct 21 '17 at 20:25
  • 1
    There's no point or advantage to doing this with an xml drawable. Use a 9 patch. – Gabe Sechan Oct 21 '17 at 20:28
  • @yfdgvfasdasdas I've updated my question – Twometer Oct 21 '17 at 20:29
  • @GabeSechan but I need this for multiple colors that are generated dynamically – Twometer Oct 21 '17 at 20:30
  • 1
    @Twometer Then apply a tint to the 9 patch drawable – Gabe Sechan Oct 21 '17 at 20:30
  • @GabeSechan does that work with API level >= 16? – Twometer Oct 21 '17 at 20:31
  • @Twometer With the support library yes. Although supporting <19 is pointless at this point in time. The number of people using <19 is under 10%, mostly in SE asia and africa. Which are about the lowest advertising and spending areas in the world. – Gabe Sechan Oct 21 '17 at 20:32
  • Or use multiple drawables for the multiple colors. If you find yourself needing to jump through hoops to get something done via an xml drawable, then you shouldn't be doing it via an xml drawable. – Gabe Sechan Oct 21 '17 at 20:33
  • Okay, thank you. Is there any loss in quality, performance or something if I use a 9 patch drawable (how do I create those for something like my image btw?) instead of an xml drawable? And if you post an answer with what you said (and will say in response to this comment maybe), I'll mark that as accepted. – Twometer Oct 21 '17 at 20:36
  • Use 9 patch images. It is simpler – Xenolion Oct 21 '17 at 20:59
  • @GabeSechan I cannot use a 9 patch drawable because I need it to scale horizontally **and** vertically, which is not possible with a 9 patch drawable and my rounded shape. – Twometer Oct 22 '17 at 07:13

0 Answers0