CODEWITHSUNDEEP
javaandroidmaterial-components-androidandroid-shapedrawable
Anas Reza
Anas Reza

Reputation: 686

Message Bubble Custom Drawable

I will share the image below that I want to develop my message bubble in Native AndroidHave to make like this

I have written some code in Custom Drawable XML please have a look and I will share the image what it looks like, first see the code:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item>

    <rotate
        android:fromDegrees="55"
        android:pivotX="100%"
        android:pivotY="0%"
        android:toDegrees="0">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="#00A1E4" />
        </shape>
    </rotate>
</item>
<item android:right="28dp">
    <shape android:shape="rectangle">
        <solid android:color="#00A1E4" />
        <corners android:radius="10dp" />
    </shape>
</item>

the above code looks like this The Above code

Please help me on how to make like the first image.

Thanks

Upvotes: 3

Views: 438

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364556

You can use the ShapeAppearanceModel to apply a custom EdgeTreatment to a widget for eaxmple a CardView:

    <LinearLayout
        android:padding="8dp"
        android:clipChildren="false"
        android:clipToPadding="false"
        ...>

       <com.google.android.material.card.MaterialCardView
          android:id="@+id/cardview"
          android:layout_height="100dp"
          app:cardCornerRadius="24dp"
          app:cardBackgroundColor="@color/..."/>

    </LinearLayout>

Then you can apply a custom ShapeAppearanceModel using the builtin MarkerEdgeTreatment that draws an arrow on the edge given the radius of a circle. Something like:

    val markerEdgeTreatment = MarkerEdgeTreatment(cardview.radius)
    val offsetEdgeTreatment = OffsetEdgeTreatment(markerEdgeTreatment, 90f)

    cardview.setShapeAppearanceModel(
        cardview.getShapeAppearanceModel()
            .toBuilder()
            .setRightEdge(offsetEdgeTreatment)
            .build()
    )

enter image description here

You can also customize the shape of the edge extending the EdgeTreatment and overriding the getEdgePath method.

Note: it requires at least the version 1.2.0 of the Material Components Library.

Upvotes: 1

Related Questions