Develop Reference

Shape not getting applied to Button Selector in Android

Shape Radius defined in xml is not getting applied to Button Focus & Pressed state.
I have
instagram_button_style.xml as below:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/instagram_button_shape" android:state_focused="true" android:textColor="#color/colorAccent" />
<item android:drawable="#drawable/instagram_button_shape" android:state_pressed="true" android:textColor="#color/colorAccent" />
<item android:drawable="#color/colorButton" />
</selector>
and My instagram_button_shape.xml as:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
<solid android:color="#color/colorButton" />
</shape>
</item>
<item android:drawable="#drawable/instagram_gradient" >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>
Where
instagram_gradient is a jpg image
Using it in button like :
android:background="#drawable/instagram_button_style"
My Initial Button State:
My Pressed Button State
Expectation: I was expecting pressed state to have oval button, but Radius is not getting applied.
FINAL Update:
At last, after numerous research I ended up changing my .JPG gradient file to android_gradient shape file.

You need to set android:radius="30dp" in your #drawable/instagram_gradient
Try this way
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="#+id/tvKioskMode"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:background="#drawable/instagram_button_style"
android:padding="10dp"
android:text="OPEN IN"
android:textColor="#android:color/white"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
drawable/instagram_button_style
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/instagram_button_shape" android:state_selected="true" android:textColor="#color/colorAccent" />
<item android:drawable="#drawable/instagram_button_shape" android:state_pressed="true" android:textColor="#color/colorAccent" />
<item android:drawable="#drawable/normal_button" />
</selector>
#drawable/instagram_button_shape
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:drawable="#drawable/instagram_gradient" >
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>
#drawable/normal_button
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
<solid android:color="#color/colorAccent" />
</shape>
#drawable/instagram_gradient
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#00E5FF"
android:endColor="#FF1744"
android:startColor="#3D5AFE"
android:type="linear" />
<corners
android:radius="30dp"/>
</shape>
OUTPUT
UPDATE
#drawable/instagram_button_style
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/instagram_button_shape" android:state_selected="true" android:textColor="#color/colorAccent" />
<item android:drawable="#drawable/instagram_button_shape" android:state_pressed="true" android:textColor="#color/colorAccent" />
<item android:drawable="#drawable/normal_button" />
</selector>
#drawable/instagram_button_shape
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
<solid android:color="#color/colorPrimary" />
</shape>
</item>
<item android:drawable="#drawable/my_gradient"/>
</layer-list>
#drawable/my_gradient
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
</item>
<!--add here your instagram image-->
<item
android:drawable="#drawable/insta_gradient_image"
android:bottom="30dp"
android:left="30dp"
android:right="30dp"
android:top="30dp"/>
</layer-list>
#drawable/normal_button
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="30dp" />
<solid android:color="#color/colorAccent" />
</shape>

try this to change instagram_button_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="30dp" />
<solid android:color="#color/colorButton" />
</shape>
</item>
<item
android:bottom="30dp"
android:drawable="#drawable/instagram_gradient"
android:left="30dp"
android:right="30dp"
android:top="30dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorButton" />
<corners android:radius="30dp" />
</shape>
</item>
</layer-list>

The <layer-list> has items, and you define this item incorrectly:
<item android:drawable="#drawable/instagram_gradient">
<shape android:shape="rectangle">
<corners android:radius="30dp" />
</shape>
</item>
Indeed, android:drawable defines the Drawable used to render the layer. The nested shape is just ignored.
You have three options to reach your goal:
use a shape with a gradient, and remove the android:drawable="#drawable/instagram_gradient"
use a PNG with transparency and rounded corners for the the #drawable/instagram_gradient
and of course implement a custom Drawable

The simplest way is wrap your button with CardView. It has property called CornerRadius. That way you can round your button into custom corner shape.

Try this Updated,
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/instagram_button_shape"
android:state_selected="true" />
<item android:drawable="#drawable/instagram_button_shape" />
<item android:drawable="#color/colorButton" />
</selector>
now, when you click this botton set
buttonId.setSelected(true);

Android custom radiobutton

I want to make custom radio button.I have created a drawable for normal(radio_normal) state.But I find it difficult to create a shape for checked state(radio_pressed).I have tried creating my desired way.But didn't work out well.I don't know if I have done it the right way.For checked state the shape should look like this.The outer border and the inner circle must be white in color.Can anybody help me with that?
radio_normal:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid
android:color="#2196f3"></solid>
</shape>
radio_pressed:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval"
xmlns:android="http://schemas.android.com/apk/res/android">
<solid
android:color="#android:color/transparent">
</solid>
<size
android:height="60dp"
android:width="60dp">
</size>
<stroke
android:color="#ffffff"
android:width="1dp"
>
</stroke>
</shape>
</item>
<item>
<shape android:shape="oval">
<solid
android:color="#ffffff">
</solid>
</shape>
<size
android:height="30dp"
android:width="30dp">
</size>
</item>
</layer-list>
radio_bg:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/radio_pressed"
>
</item>
<item
android:state_checked="false"
android:drawable="#drawable/radio_normal"
>
</item>
</selector>
activity_main:
<RadioButton
android:id="#+id/radio"
android:layout_centerInParent="true"
android:layout_width="10dp"
android:button="#drawable/radio_bg"
android:layout_marginTop="100dp"
android:layout_height="10dp"
/>

This is about as close as I can get you, hope it works on your side and that it helps :)
radio_normal:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid android:color="#2196f3" />
<size
android:width="25dp"
android:height="25dp" />
</shape>
radio_pressed:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:padding="3dp">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid android:color="#android:color/white" />
<size
android:width="25dp"
android:height="25dp" />
</shape>
</item>
<item
android:bottom="7dp"
android:left="7dp"
android:right="7dp"
android:top="7dp">
<shape
android:shape="oval"
android:useLevel="false">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
radio_bg:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:drawable="#drawable/radio_pressed"
>
</item>
<item
android:state_checked="false"
android:drawable="#drawable/radio_normal"
>
</item>
</selector>
activity_main:
<RadioButton
android:id="#+id/radio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:button="#drawable/radio_bg"/>
Let me know if this worked for you :)

Is this maybe what you were looking for ?
radio_pressed:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid android:color="#android:color/white" />
<size
android:width="10dp"
android:height="10dp" />
</shape>
</item>
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp">
<shape
android:shape="oval"
android:useLevel="false">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Reaction to comment:
The code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false">
<solid android:color="#android:color/white" />
<size
android:width="150dp"
android:height="150dp" />
</shape>
</item>
<item
android:bottom="50dp"
android:left="50dp"
android:right="50dp"
android:top="50dp">
<shape
android:shape="oval"
android:useLevel="false">
<solid android:color="#android:color/white" />
</shape>
</item>
</layer-list>
Note: The only changes made was in the sizes to accomodate your imageview of 150dp X 150dp. When using it for your radio button I highly reccomend using the 10x10dp sizes

Android: Draw shape with skewed corner

I want to use a background for my buttons. But when I use a png it slows down the app. Therefore I want to use a xml shape but I do not know how to make the corner cut (like on the picture).
By now I have the following shape which is just a rectangle:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/blue_semi_transparent"/>
<padding android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
<margin android:bottom="10dp" android:right="10dp" android:top="10dp" android:left="10dp"/>
</shape>
How can I draw the bottom right corner?

You can try this,
skewed_background.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="#3F8EEB" />
</shape>
</item>
<item>
<rotate
android:fromDegrees="110"
android:pivotX="90%"
android:pivotY="90%"
>
<shape android:shape="rectangle" >
<solid android:color="#FFF" />
</shape>
</rotate>
</item>
</layer-list>
sample_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
android:orientation="vertical" >
<View
android:layout_width="200dp"
android:layout_height="50dp"
android:background="#drawable/triangle1"/>
</LinearLayout>
If you want to modify the skewed area you just need to change the value of fromDegrees, pivotX and pivotY value in the second item in skewed_background.xml.

This is exactly what you looking for
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg"
android:paddingRight="15dp"
android:textColor="#ffffff"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
bg.xml
<?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="100dp"
android:height="40dp" />
<solid android:color="#13a89e" />
</shape>
</item>
<item
android:right="100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
<item
android:right="-100dp"
android:left="100dp"
android:top="-100dp"
android:bottom="-100dp">
<rotate
android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
OUTPUT

This will give you your desired result
<?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:top="-20dp"
android:bottom="-50dp"
android:left="350dp"
android:right="-120dp">
<rotate
android:fromDegrees="10"
android:pivotX="50%"
android:pivotY="0%">
<shape
android:shape="rectangle">
<solid
android:color="?android:colorBackground"/>
</shape>
</rotate>
</item>
</layer-list>

custom seekbar not showing

I created a custom seekbar.
It looks normal on the Android emulator, but only the thumb is visible on the actual device.
If you subtract the android:progressDrawable or android:thumb attributes from the properties of the seekbar in the xml file, the thumb or progressbar will look normal.
The seekbar is not visible properly when you apply two properties at the same time.
here is source.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
android:layout_height="match_parent"
tools:context="speakeragent.com.myapplication.MainActivity">
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="368dp"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/seekbar_seekbar1"
android:thumb="#drawable/seekbar_thumb1"
android:thumbOffset="0dp"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp"
tools:ignore="MissingConstraints" />
</android.support.constraint.ConstraintLayout>
seekbar_seekbar1.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="line">
<stroke android:width="6dp" android:color="#D5D5D5" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape android:shape="line">
<stroke android:width="6dp" android:color="#B2CCFF"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="line">
<stroke android:width="6dp" android:color="#6799FF"/>
</shape>
</clip>
</item>
</layer-list>
seekbar_thumb1.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#B2CCFF"></solid>
<stroke android:width="2dp"
android:color="#B2CCFF"/>
<size
android:width="6dp"
android:height="6dp"/>
</shape>

Android switches - making thumb height larger than track height, how?

Is there any way to make the height of the thumb of a switch bigger than the track height in Android versions prior to Lollipop ?
I am essentially trying to create a material design-like switch widget in Kitkat (and older versions- the problem here is the thumb by default 'fits' inside the track). I have been working on this for quite some time now but I can't seem to arrive at the correct design.
I followed the solutions on this SO post: How to change the size of a Switch Widget.
Any suggestions or a solution would be most appreciated.

I added a transparent stroke to my track drawable shape which results in a padding around the track:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/track_color"/>
<size android:height="#dimen/track_height" />
<size android:width="#dimen/track_width" />
<!-- results in the track looking smaller than the thumb -->
<stroke
android:width="6dp"
android:color="#00ffffff"/>
</shape>

Yup
I solved this
<android.support.v7.widget.SwitchCompat
android:id="#+id/mySwitch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="ON"
android:textOff="OFF"
style="#style/Color1SwitchStyle"
android:text="" />
This is My Color1SwitchStyle
<style name="Color1SwitchStyle">
<item name="android:thumb">#drawable/customswitchselector</item>
<item name="android:track">#drawable/my_custom_track</item>
//when use Switch in xml file
<item name="track">#drawable/my_custom_track</item>
//when use android.support.v7.widget.SwitchCompat in xml
</style>
*Hear is my customswitchselector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="true"
android:drawable="#drawable/on" >
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#66AAFF00"
android:endColor="#6600FF00"
android:angle="270"/>
<corners
android:radius="15dp"/>
<size
android:width="200dp"
android:height="80dp" />
<stroke
android:width="4dp"
android:color="#0000ffff"/>
</shape>
</item>
<item android:state_checked="false"
android:drawable="#drawable/off">
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#66AAFF00"
android:endColor="#6600FF00"
android:angle="270"/>
<corners
android:radius="15dp"/>
<size
android:width="200dp"
android:height="80dp" />
<stroke
android:width="4dp"
android:color="#0000ffff"/>
</shape>
</item>
</selector>
And hear is magic my my_custom_track.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_checked="true"
android:state_enabled="true"
android:drawable="#drawable/switch_track_on" />
<item
android:state_checked="false"
android:state_enabled="false"
android:drawable="#drawable/switch_track_off" />
</selector>
switch_track_on.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#color/profile_pic_bg"
android:endColor="#color/profile_pic_bg"
android:angle="270"/>
<corners
android:radius="0dp"/>
<size
android:width="100dp"
android:height="10dp" />
<stroke
android:width="12dp"
android:color="#00ffffff"/>
</shape>
</item>
</layer-list>
switch_track_off.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle"
android:dither="true"
android:useLevel="false"
android:visible="true">
<gradient
android:startColor="#color/gray"
android:endColor="#color/gray"
android:angle="270"/>
<corners
android:radius="0dp"/>
<size
android:width="100dp"
android:height="10dp" />
<stroke
android:width="12dp"
android:color="#00ffffff"/>
</shape>
</item>
</layer-list>
Thanks stevenp without your comment i cannot solve this

Adding top and bottom inset in the 'track' drawable works for me. android:bottom="5dp" android:top="5dp"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="5dp"
android:top="5dp">
<shape>
<corners android:radius="15dp" />
<solid android:color="#android:color/transparent" />
<stroke
android:width="2dp"
android:color="#EEEEEE" />
</shape>
</item>
<androidx.appcompat.widget.SwitchCompat
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:track="#drawable/switch_track_drawable" />

The solution I came up with is just to use for the track a shape that is a line instead of a rectangle, and set the width explicitly in its stroke.
For example if the switch is defined as follows:
<android.support.v7.widget.SwitchCompat
android:id="#+id/my_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:track="#drawable/switch_track"
app:theme="#android:style/Theme.DeviceDefault.Light" />
The in the switch_track.xml drawable use a line shape with whatever width you desire:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" >
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line" >
<stroke android:color="#50bbb9bf" android:width="5dp"/>
</shape>
</item>
<item android:state_checked="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="line">
<stroke android:color="#5000b6de" android:width="5dp"/>
</shape>
</item>
</selector>