customize a toggle switch for Android - java

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?

Related

Right-Bottom-Corner black colored on a 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

Removing the "checked" circle from a RadioButton

I want to remove the inner circle from the checked radio button in Android Studio.I've read that android:button="#null" would solve it but it removed my whole button. This is my code:
RadioButton
<RadioButton
android:id="#+id/xroma11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/radio_bg1"
android:tag = "00" />
radio_bg1.xml
<item android:state_pressed="true" >
<shape android:shape="oval" >
<corners android:radius="3dp" />
<stroke android:width="3dip" android:color="#333333" />
<solid android:color="#color/xrwma2"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="oval" >
<corners android:radius="3dp" />
<stroke android:width="3dip" android:color="#333333" />
<solid android:color="#color/xrwma2"/>
</shape>
</item>
<item>
<shape android:shape="oval" >
<corners android:radius="3dp" />
<solid android:color="#color/xrwma2"/>
</shape>
</item>

In checked state make color of solid as transparent like this
.....
<item android:state_checked="true">
<shape android:shape="oval" >
<corners android:radius="3dp" />
<stroke android:width="3dip" android:color="#333333" />
<solid android:color="#android:color/transparent"/>
</shape>
</item>
.....

You can also try android:button="?android:selectableItemBackground"

Android edittext with shadow like cardview

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>

Android custom seekBar with "stations"

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

Android drawable speech bubble

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

Categories