I've looked for days and can not find any good leads on how I can draw a bubble or where a draw 9 patch images is to use as a background. I am a terrible artist. Can anyone help?
The best sample I found is here on Stack Overflow, but it's written in Objective C.
How to draw a "speech bubble" on an iPhone?
If you are creating a chat screen you are probably going to want to implement an incoming speech bubble and an outgoing speech bubble. Here is how I did that :
shape_bg_incoming_bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#color/primary" />
</shape>
</rotate>
</item>
<item android:left="16dp">
<shape android:shape="rectangle" >
<solid android:color="#color/primary" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
shape_bg_outgoing_bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="100%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#color/grey_500" />
</shape>
</rotate>
</item>
<item android:right="16dp">
<shape android:shape="rectangle" >
<solid android:color="#color/grey_500" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
I know its bit too late for this. For those, who don't want to use 9-patch images yet want to cast shadows from speech bubble. This is closest I could get to WhatsApp speech bubble. And thanks to #toobsco42 for the answer above.
Here you go..
Incoming Speech 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="#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>
Outgoing Speech 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="#CBEBFC" />
</shape>
</rotate>
</item>
<item android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#CBEBFC" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
Use the paddings properly in the layout. I used these values :
<TextView
android:id="#+id/text_message_incoming"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#drawable/bg_speech_bubble_incoming"
android:lineSpacingExtra="2dp"
android:paddingLeft="20dp"
android:paddingTop="4dp"
android:paddingRight="10dp"
android:paddingBottom="10dp"
android:text="Hi, How are you?"
android:textColor="#color/colorBlack"
android:textSize="13.5dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_max="wrap"
app:layout_constraintWidth_percent="0.8" />
My output came out like this:
Here is a simple speech bubble drawable I made. Hopefully, it's start in the right direction for someone. The view that this drawable is used in needs a height of at least 70-80dp and a similar minimum width to show properly.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="30dp">
<rotate
android:fromDegrees="-45"
android:pivotX="0%"
android:pivotY="0%"
android:toDegrees="0" >
<shape android:shape="rectangle" >
<solid android:color="#CCC" />
</shape>
</rotate>
</item>
<item android:left="20dp">
<shape android:shape="rectangle" >
<solid android:color="#CCC" />
<corners android:radius="5dp" />
</shape>
</item>
</layer-list>
Android Drawables leave a lot to be desired in terms of how usable they are for drawing anything even slightly complex.
This version looks like this:
UPDATE I've been working on XML speech bubbles again and was a little dissatisfied with my 2014 solution. In 2018, we have vector drawables which enable better solutions than the one above. Here are some more modern alternatives. They allow things like small messages and transparency.
speech_bubble_simple_user.xml
<?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="#dimen/speech_bubble_tail"
tools:width="100dp"
tools:height="50dp">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_user"/>
<corners
android:topLeftRadius="#dimen/speech_bubble_corners"
android:topRightRadius="#dimen/speech_bubble_corners"
android:bottomRightRadius="0dp"
android:bottomLeftRadius="#dimen/speech_bubble_corners"/>
</shape>
</item>
<item
android:width="#dimen/speech_bubble_tail"
android:height="#dimen/speech_bubble_tail"
android:gravity="bottom|right">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_tail"
android:height="#dimen/speech_bubble_tail"
android:viewportWidth="25.0"
android:viewportHeight="25.0">
<path
android:pathData="M25,25 25,0 0,0z"
android:fillColor="#color/speech_bubble_user"/>
</vector>
</item>
</layer-list>
speech_bubble_simple_agent.xml
<?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="#dimen/speech_bubble_tail"
tools:width="100dp"
tools:height="50dp">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_agent"/>
<corners
android:topLeftRadius="#dimen/speech_bubble_corners"
android:topRightRadius="#dimen/speech_bubble_corners"
android:bottomLeftRadius="0dp"
android:bottomRightRadius="#dimen/speech_bubble_corners"/>
</shape>
</item>
<item
android:width="#dimen/speech_bubble_tail"
android:height="#dimen/speech_bubble_tail"
android:gravity="bottom|left">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_tail"
android:height="#dimen/speech_bubble_tail"
android:viewportWidth="25.0"
android:viewportHeight="25.0">
<path
android:pathData="M0,25 25,0 0,0z"
android:fillColor="#color/speech_bubble_agent"/>
</vector>
</item>
</layer-list>
The two above look like this: (These versions don't quite work with transparency and I'm not sure why when the versions below seem to work fine.)
speech_bubble_nine_patch_user.xml
<?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="#dimen/speech_bubble_corners"
android:right="#dimen/speech_bubble_corners_plus_tail"
android:bottom="#dimen/speech_bubble_spacing"
tools:width="50dp"
tools:height="50dp">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_user"/>
</shape>
</item>
<item
android:top="#dimen/speech_bubble_corners"
android:bottom="#dimen/speech_bubble_corners_plus_tail"
android:gravity="left"
android:width="#dimen/speech_bubble_corners">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_user"/>
</shape>
</item>
<item
android:top="#dimen/speech_bubble_corners"
android:bottom="#dimen/speech_bubble_corners_plus_tail"
android:right="#dimen/speech_bubble_spacing"
android:gravity="right"
android:width="#dimen/speech_bubble_corners">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_user"/>
</shape>
</item>
<item
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
android:bottom="#dimen/speech_bubble_spacing"
android:gravity="bottom|left">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
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="#color/speech_bubble_user"/>
</vector>
</item>
<item
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
android:right="#dimen/speech_bubble_spacing"
android:gravity="top|right">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
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="#color/speech_bubble_user"/>
</vector>
</item>
<item
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
android:gravity="top|left">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
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="#color/speech_bubble_user"/>
</vector>
</item>
<item
android:width="#dimen/speech_bubble_corners_plus_tail"
android:height="#dimen/speech_bubble_corners_plus_tail"
android:gravity="bottom|right">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners_plus_tail"
android:height="#dimen/speech_bubble_corners_plus_tail"
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="#color/speech_bubble_user"/>
</vector>
</item>
</layer-list>
speech_bubble_nine_patch_agent.xml
<?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="#dimen/speech_bubble_corners_plus_tail"
android:right="#dimen/speech_bubble_corners"
android:bottom="#dimen/speech_bubble_spacing"
tools:width="50dp"
tools:height="50dp">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_agent"/>
</shape>
</item>
<item
android:top="#dimen/speech_bubble_corners"
android:bottom="#dimen/speech_bubble_corners_plus_tail"
android:left="#dimen/speech_bubble_spacing"
android:gravity="left"
android:width="#dimen/speech_bubble_corners">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_agent"/>
</shape>
</item>
<item
android:top="#dimen/speech_bubble_corners"
android:bottom="#dimen/speech_bubble_corners_plus_tail"
android:gravity="right"
android:width="#dimen/speech_bubble_corners">
<shape android:shape="rectangle">
<solid android:color="#color/speech_bubble_agent"/>
</shape>
</item>
<item
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
android:bottom="#dimen/speech_bubble_spacing"
android:gravity="bottom|right">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
android:viewportWidth="10.0"
android:viewportHeight="10.0">
<path
android:pathData="M0,10 A10,10 0 0,0 10,0 L0,0 Z"
android:fillColor="#color/speech_bubble_agent"/>
</vector>
</item>
<item
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
android:gravity="top|right">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
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="#color/speech_bubble_agent"/>
</vector>
</item>
<item
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
android:left="#dimen/speech_bubble_spacing"
android:gravity="top|left">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners"
android:height="#dimen/speech_bubble_corners"
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="#color/speech_bubble_agent"/>
</vector>
</item>
<item
android:width="#dimen/speech_bubble_corners_plus_tail"
android:height="#dimen/speech_bubble_corners_plus_tail"
android:gravity="bottom|left">
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="#dimen/speech_bubble_corners_plus_tail"
android:height="#dimen/speech_bubble_corners_plus_tail"
android:viewportWidth="150.0"
android:viewportHeight="150.0">
<path
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"
android:fillColor="#color/speech_bubble_agent"/>
</vector>
</item>
</layer-list>
The two above look like this:
dimens.xml (for both)
<dimen name="speech_bubble_corners">10dp</dimen>
<dimen name="speech_bubble_corners_plus_tail">15dp</dimen>
<dimen name="speech_bubble_spacing">5dp</dimen>
<dimen name="speech_bubble_tail">25dp</dimen>
just in case anyone needs another style of bubble here you go tnx #vipin Negi
chat_receiver_bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Shadow Layer-->
<item android:right="10dp">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<padding
android:bottom="1px"
android:left="1px"
android:right="1px" />
<solid android:color="#01000000" />
</shape>
</item>
<!--===============-->
<item android:right="10dp">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<padding android:bottom="1px" />
<solid android:color="#09000000" />
</shape>
</item>
<!--===============-->
<item android:right="10dp">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<padding
android:bottom="1px"
android:left="1px"
android:right="1px" />
<solid android:color="#10000000" />
</shape>
</item>
<!--===============-->
<!--ForeGround-->
<item android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/app_color" />
<corners android:bottomLeftRadius="0dp" android:radius="100dp" />
</shape>
</item>
</layer-list>
chat_sender_bubble.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Shadow Layer-->
<item android:right="10dp">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<padding
android:bottom="1px"
android:left="1px"
android:right="1px" />
<solid android:color="#01000000" />
</shape>
</item>
<!--===============-->
<item android:right="10dp">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<padding android:bottom="1px" />
<solid android:color="#09000000" />
</shape>
</item>
<!--===============-->
<item android:right="10dp">
<shape android:shape="rectangle">
<corners android:radius="100dp" />
<padding
android:bottom="1px"
android:left="1px"
android:right="1px" />
<solid android:color="#10000000" />
</shape>
</item>
<!--===============-->
<!--ForeGround-->
<item android:right="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/settings_bg" />
<corners android:bottomRightRadius="0dp" android:radius="100dp" />
</shape>
</item>
</layer-list>
use like this
<RelativeLayout
android:gravity="center"
android:id="#+id/chatLayout"
android:background="#drawable/chat_receiver_bubble" //or #drawable/chat_sender_bubble
android:visibility="gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:textSize="14sp"
android:textColor="#color/text_colour"
android:id="#+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text=""
android:fontFamily="#font/regular"/>
</RelativeLayout>
final look
You should make an image in some kind of image editor and then create a 9 patch out of it. You can set the area you would like content to be using the 9 patch method. Then you can simply have a TextView with the background set to your 9 patch. Have a look at an app called Bnter on the market, it uses speech bubbles to display conversations similar to what you are looking for.
Here I have created for incoming and outgoing messages by following this Android make oval background drawable with chat corner
itemincoming.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
app:cardElevation="1dp"
android:layout_margin="2dp"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hii how are you ? 11:37"
android:paddingStart="16dp"
android:paddingTop="10dp"
android:paddingEnd="12dp"
android:paddingBottom="8dp"
android:textColor="#color/white"
android:background="#drawable/testrect"/>
<ImageView
android:layout_marginTop="-1.5dp"
android:layout_width="8dp"
android:layout_height="16dp"
android:layout_gravity="start"
android:background="#drawable/testcorner"
/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
testrect.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#E26841" />
<corners
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
testcorner.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="135%"
android:pivotY="15%"
android:toDegrees="45"
>
<shape android:shape="rectangle">
<solid android:color="#E26841"/>
</shape>
</rotate>
</item>
</layer-list>
outgoing.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
app:cardElevation="1dp"
android:layout_margin="2dp"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="11:37 Hii how are you ?"
android:paddingStart="16dp"
android:paddingTop="10dp"
android:paddingEnd="12dp"
android:paddingBottom="8dp"
android:textColor="#color/txtcolor_commn"
android:background="#drawable/testrecty"/>
<ImageView
android:layout_marginTop="-4.5dp"
android:layout_marginRight="4.5dp"
android:layout_width="8dp"
android:layout_height="16dp"
android:layout_gravity="end"
android:rotation="90"
android:background="#drawable/testcornery"
/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
testrecty.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<corners
android:bottomLeftRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
testcornery.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="45"
android:pivotX="135%"
android:pivotY="15%"
android:toDegrees="45"
>
<shape android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</rotate>
</item>
</layer-list>
now its look like this
Related
I tried to customized a toggle switch and after hours on playing with material, I just gave up and re-used the SwitchCompat
<androidx.appcompat.widget.SwitchCompat
android:id="#+id/settingsSwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/cell_padding"
android:checked="#{item.enabled}"
tools:checked="true"
android:thumb="#drawable/ios_thumb"
app:trackTintMode="multiply"
app:trackTint="#null"
app:track="#drawable/ios_track"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
and the ios_thumb look like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#FFFFFF"/>
<corners android:radius="15dp" />
<size android:width="30dp" android:height="30dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#FFFFFF"/>
<corners android:radius="15dp" />
<size android:width="30dp" android:height="30dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
</selector>
and ios_track as below:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#color/green300"/>
<corners android:radius="25dp" />
<size android:width="60dp" android:height="30dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#color/lightness200"/>
<corners android:radius="25dp" />
<size android:width="60dp" android:height="30dp" />
</shape>
</item>
</selector>
the mechanism works and I almost there for the customization... Only thing is that :
When the switch is to false for check or true, it's not exactly reflecting the color.
As an example:
The white is grey-ish. I think the false is also bad but as my background for false state is a transparent white it's not affecting the visual. It's look like the track is displayed over the thumb instead of the opposite. Any idea?
When I want a Transparent CardView with some elevation the result will be as follows:
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#B3FFFFFF"
app:cardElevation="8dp"
app:cardBackgroundColor="#B3FFFFFF"
app:cardCornerRadius="25dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="#+id/folder_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal|top"
android:background="#color/transparent"
android:gravity="center"
android:hint="#string/default_folder_name"
android:importantForAutofill="no"
android:inputType="text"
android:padding="10dp"
android:textAllCaps="false"
android:textColor="#color/folder_title"
android:textColorHint="#color/folder_title_hint"
android:textSize="15sp"
android:textStyle="bold" />
<!--this is only for the cardView to give it more space to display the issue-->
<View
android:layout_width="150dp"
android:layout_height="60dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
The issue is that there is a color difference inside the CardView, it should be like:
When I replace app:cardCornerRadius="25dp" -> app:cardCornerRadius="0dp", the size of the unwanted color difference increased.
Is this issue the way elevation works?
And are there workarounds?
Thanks in advance,
Try to add this to your theme
<item name="elevationOverlayEnabled">false</item>
With CardView it is not possible.
The workaround in this case is to remove CardView and set a android:background="#drawable/shadowfile"to the LinearLayout.
The file contains the [transparency, elevation, radius].
res/drawable/shadowfile.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- every item add a layer of evaluation to the border, with the padding you define how the evaluation is located around the border-->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#03000000" />
<corners android:radius="20dp" />
</shape>
</item> <item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#03000000" />
<corners android:radius="20dp" />
</shape>
</item> <item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#03000000" />
<corners android:radius="20dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#03000000" />
<corners android:radius="20dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#03000000" />
<corners android:radius="20dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#03000000" />
<corners android:radius="20dp" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="1dp" android:left="1dp" />
<solid android:color="#03000000" />
<corners android:radius="20dp" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#D2FFFFFF" />
<corners android:radius="20dp" />
</shape>
</item>
</layer-list>
I have this code for the style of my list item.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<size
android:width="40dp"
android:height="40dp" />
<solid android:color="#444444" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp"/>
</shape>
</item>
<item android:top="30dp">
<shape android:shape="rectangle">
<size
android:width="30dp"
android:height="30dp" />
<solid android:color="#2f2f2f" />
<corners
android:bottomRightRadius="10dp"
android:bottomLeftRadius="10dp"
android:topLeftRadius="00dp"
android:topRightRadius="0dp"/>
</shape>
</item>
</layer-list>
How can I dye the right bottom corner black ?
When I add a new layer-list-item it only appears at the bottom of the last.
Here is an example what I want to do:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorPrimary" />
<item
android:bottom="-200dp"
android:right="-200dp"
android:top="250dp">
<rotate
android:fromDegrees="-6"
android:pivotX="0%"
android:pivotY="100%">
<shape android:shape="rectangle">
<solid android:color="#edf0f9" />
</shape>
</rotate>
</item>
</layer-list>
Try this one and chnage from degree ,pivot x and y
and one thing add this as child view and put both view inside framelayout
I have tried to implement edittext with shadow like the https://www.google.com.gh/imghp using this layerd xml
<?xml version="1.0" encoding="utf-8"?>
<!-- most important is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item>
<shape android:shape="rectangle" >
<solid android:color="#d8d8d8" />
<corners
android:bottomLeftRadius="7dp"
android:bottomRightRadius="7dp" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px"
android:left="3px"
android:right="3px">
<shape android:shape="rectangle" >
<solid android:color="#FFFFFF" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp" />
</shape>
</item>
.but have not succeded. can anyone place help
Try this into layer-list drawable file-
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="5dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#ffffff" />
<corners android:radius="0dp" />
</shape>
</item>
</layer-list>
Check this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most important is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#BEBEBE" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px" android:right="3px" android:top="3px" android:left="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
I'm trying to make my custom seekbar.
This is what i try to do:
and this is what I succeed to do:
How to add this circles behind my progress?
Here is my code:
<SeekBar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/progress"
android:thumb="#drawable/unnamed"
android:id="#+id/risk_seek_bar"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
progress.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<solid android:color="#00FF0000" />
<padding android:bottom="1dp"/>
</shape>
</item>
<item
android:id="#android:id/background"
android:drawable="#drawable/background_fill"/>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_fill" />
</item>
</layer-list>
background fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FF555555"
android:endColor="#FF555555"
android:startColor="#FF555555" />
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
progress_fill.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:angle="90"
android:centerColor="#FFFF4400"
android:endColor="#FFFF4400"
android:startColor="#FFFF4400" />
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#50999999" />
<stroke
android:width="1dp"
android:color="#70555555" />
</shape>
You can use any of the following libraries
range-slider-view
material-range-bar
range-bar