Wednesday, December 20, 2023

Drawable - Creating sharp corners that extend out of chat bubble

December 20, 2023 android, android-drawable No comments

Issue

How would I make it so that the corner of my chatbubble extends outwards? I tried changing the top left radius however its not extending out of the bubble.

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorWhite" />
    <corners
        android:topLeftRadius="15dp"
      />
</shape>

What I want it to look like:

Solution

Try this

- Receive Chat Bubble

<?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="#ffffff" />
            </shape>
        </rotate>
    </item>
    <item android:left="8dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="8dp" />
        </shape>
    </item>

</layer-list>

- Sent Chat Bubble

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

    <!--Shadow Layer-->

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            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:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#01000000" />
        </shape>
    </item>

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

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            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:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding android:bottom="1px" />
            <solid android:color="#09000000" />
        </shape>
    </item>

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

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            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:right="10dp">
        <shape android:shape="rectangle">
            <corners android:radius="4dp" />
            <padding
                android:bottom="1px"
                android:left="1px"
                android:right="1px" />
            <solid android:color="#10000000" />
        </shape>
    </item>

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


    <!--ForeGround-->

    <item>
        <rotate
            android:fromDegrees="40"
            android:pivotX="100%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
            </shape>
        </rotate>
    </item>
    <item android:right="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <corners android:radius="4dp" />
        </shape>
    </item>

</layer-list>

- Receive Chat Bubble Nine Patch

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

    <item
        android:bottom="5dp"
        android:left="15dp"
        android:right="10dp"
        tools:height="50dp"
        tools:width="50dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item
        android:width="10dp"
        android:bottom="15dp"
        android:gravity="left"
        android:left="5dp"
        android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item
        android:width="10dp"
        android:bottom="15dp"
        android:gravity="right"
        android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
        </shape>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:bottom="5dp"
        android:gravity="bottom|right">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M0,10 A10,10 0 0,0 10,0 L0,0 Z" />
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="top|right">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z" />
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="top|left"
        android:left="5dp">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z" />
        </vector>
    </item>

    <item
        android:width="15dp"
        android:height="15dp"
        android:gravity="bottom|left">
        <vector
            android:width="15dp"
            android:height="15dp"
            android:viewportWidth="150.0"
            android:viewportHeight="150.0">
            <path
                android:fillColor="#ffffff"
                android:pathData="M150,100 L150,0 L50,0 C50,11.9054549 52.5180742,22.2130322 55.2200144,32.2289993 C59.25,47.1679688 65.7054859,60.8615415 68.15625,65.5820312 C55.2200144,107.207031 41.7460938,127.800781 0,151 C61.5311854,147.539062 101.691406,129.675781 124.615295,97.6602593 C132.823321,99.8389881 141.106342,100 150,100 Z" />
        </vector>
    </item>

</layer-list>

- Sent Chat Bubble Nine Patch

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

    <item
        android:left="10dp"
        android:right="15dp"
        android:bottom="5dp"
        tools:width="50dp"
        tools:height="50dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>

    <item
        android:top="10dp"
        android:bottom="15dp"
        android:gravity="left"
        android:width="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>

    <item
        android:top="10dp"
        android:bottom="15dp"
        android:right="5dp"
        android:gravity="right"
        android:width="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff"/>
        </shape>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:bottom="5dp"
        android:gravity="bottom|left">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M0,0 A10,10 0 0,0 10,10 L10,0 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:right="5dp"
        android:gravity="top|right">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,10 A10,10 0 0,0 0,0 L0,10 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

    <item
        android:width="10dp"
        android:height="10dp"
        android:gravity="top|left">
        <vector
            android:width="10dp"
            android:height="10dp"
            android:viewportWidth="10.0"
            android:viewportHeight="10.0">
            <path
                android:pathData="M10,0 A10,10 0 0,0 0,10 L10,10 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

    <item
        android:width="15dp"
        android:height="15dp"
        android:gravity="bottom|right">
        <vector
            android:width="15dp"
            android:height="15dp"
            android:viewportWidth="150.0"
            android:viewportHeight="150.0">
            <path
                android:pathData="M0,100 C7.67309143,100 14.1935201,100.346373 20.500756,99.0996492 C43.6628959,129.872031 94.1698247,146.306561 150.320843,150.792562 C113.168693,130.799632 87.2808993,98.5054948 81.0808824,68.6524321 C94.1277117,51.7595331 100,23.9957121 100,0 L0,0 L0,100 Z"
                android:fillColor="#ffffff"/>
        </vector>
    </item>

</layer-list>

I hope this can help You!

Thank You.

Answered By - Hardik Talaviya

This Answer collected from stackoverflow and tested by AndroidBugFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Wednesday, December 20, 2023

Drawable - Creating sharp corners that extend out of chat bubble

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels