0

I have this style I want to implement in my chat app when user sends a message:

enter image description here

Should I use 9 patch or make it with XML? If XML is the better option how could I achieve this?

F.Mysir
  • 2,838
  • 28
  • 39
  • 1
    In theory, a vector drawable can handle that. If you are using Android Studio, you could create an SVG representing this shape in some external graphic editor (e.g., Inkscape), then try importing it via the Vector Asset Wizard and see if you get the results that you want. – CommonsWare May 31 '20 at 12:15
  • Wouldn't this stretch the corner awkwardly? – F.Mysir May 31 '20 at 12:16
  • The corners will be stretched as part of the entire image when the image is stretched. If that is unacceptable, then I am uncertain how to create this using some other form of XML. Nine-patches can handle it, though they are a pain to create. Another possibility would be to render this directly in Java/Kotlin code, rather than try to pull off your desired look via resources alone. The `layer-list` solution from the one answer might work as a foundation, but that lower-left corner isn't something that can be created by a `shape` AFAIK. – CommonsWare May 31 '20 at 12:21
  • 1
    Take a look at this library and it's implementations if you want to implement it your self. https://github.com/Devlight/CornerCutLinearLayout?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=8111 – ali73 May 31 '20 at 12:38

1 Answers1

0

You can make an XML for this, and you should make a bubble for incoming and outgoing messages.

This is one example for incoming chat bubble source.

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

<!--Shadow Layers-->

<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"/>
            <solid android:color="#01000000" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <padding
            android:bottom="1px"
            android:left="1px"
            android:right="1px"/>
        <solid android:color="#01000000" />
        <corners android:radius="8dp" />
    </shape>
</item>

<!--===============-->
<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <padding
                android:bottom="1px" />
            <solid android:color="#09000000" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <padding
            android:bottom="1px" />
        <solid android:color="#09000000" />
        <corners android:radius="8dp" />
    </shape>
</item>

<!--===============-->

<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px"/>
            <solid android:color="#10000000" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <padding
            android:bottom="1px"
            android:left="1px"
            android:right="1px"/>
        <solid android:color="#10000000" />
        <corners android:radius="8dp" />
    </shape>
</item>

<!--ForeGround-->

<item>
    <rotate
        android:fromDegrees="-35"
        android:pivotX="0%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="4dp"/>
            <solid android:color="@color/colorWhite" />
        </shape>
    </rotate>
</item>
<item android:left="8dp">
    <shape android:shape="rectangle">
        <solid android:color="@color/colorWhite" />
        <corners android:radius="8dp" />
    </shape>
</item>

</layer-list>
Abhishek AN
  • 648
  • 7
  • 24