Develop Reference

How to keep a Switch thumb shadow/elevation when using a custom drawable for the thumb?

I need to remplace the default Switch thumb with my own drawable. To do so I used the android:thumb attribute, it works well minus the shadow under the thumb is no longer present. How can I use my custom thumb drawable while keeping the thumb shadow/elevation ?
Here's the style I implemented :
<style name="TiimeGreenSwitch" parent="Widget.AppCompat.CompoundButton.Switch">
<item name="android:thumb">#drawable/switch_green_thumb</item>
<item name="trackTint">#color/switch_green_track</item>
</style>
The drawable is this selector :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_green_thumb_disabled" android:state_enabled="false" />
<item android:drawable="#drawable/switch_green_thumb_checked" android:state_checked="true" />
<item android:drawable="#drawable/switch_green_thumb_default" />
</selector>
And each drawable look like this :
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="20dp" android:height="20dp" />
<solid android:color="#ffffff" />
<stroke android:width="1dp" android:color="#color/switch_checked" />
</shape>
Edit: Following Gabe Sechan answer I implemented a shadow directly in the drawable as follow, it works as expected:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<size
android:width="22dp"
android:height="22dp" />
<solid android:color="#22000000" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp">
<shape android:shape="oval">
<size
android:width="20dp"
android:height="20dp" />
<solid android:color="#ffffff" />
<stroke
android:width="1dp"
android:color="#color/switch_checked" />
</shape>
</item>
</layer-list>

Put the shadow in the drawable. That's how it works in the default drawable, which is why you lost it now. Its really the only way to do it, as the OS doesn't know the shape you're actually using and could at best put a shadow below the entire drawable, which would be wrong if you used a circle or rounded edges.

Progress bar shadow only on filled part

Implementing a progress bar in android, trying to get a drop shadow on the bottom part of the filled section only, like this:
API level is KitKat and up but i wont mind a solution that applies to LOLLIPOP and up only.
Elevation does not seem to work, nor do the card View.
any sugesstions?

Create the following xml shape and place it as your progressBar background.
** The 10dp in the xml assumes the progressBar is 20dp in Height and that you want the shadow to be exactly half of it.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<layer-list>
<item android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#color/orange" />
</shape>
</item>
</layer-list>
</item>
<item android:id="#android:id/progress">
<clip>
<layer-list>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/green" />
</shape>
</item>
<item android:top="10dp">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#color/black"
android:startColor="#color/white" />
</shape>
</item>
</layer-list>
</clip>
</item>
</layer-list>

Android Custom shape for EditText

I am trying to create a custom design for EditText. See the attached image below,
I am trying to achieve this using a custom shape like the one defined below.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/places_ic_search"
android:width="30dp">
<shape
android:shape="rectangle"></shape>
</item>
<item
android:left="30dp"
android:drawable="#color/white">
<shape android:shape="rectangle" >
<gradient android:startColor="#000000" android:endColor="#FFFFFF" android:angle="90"/>
</shape>
</item>
</layer-list>
But the search icon is not displayed. How can I achieve this?
Thanks.
I have applied the answer by tiny sunlight and the EditBox looks like this, Search icon is no aligned to the left.

I edit my answer. Edit Shape.xml as below:
Shape.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<stroke android:width="5dp" android:color="#FF0000" />
</shape>
</item>
<item
android:left="3dp"
android:right="3dp"
android:top="3dp"
android:bottom="3dp"
>
<shape android:shape="rectangle" >
<stroke android:width="1dp" android:color="#FF0000" />\
<solid android:color="#FFFFFF" />
<corners android:radius="3dp" />
</shape>
</item>
<item android:gravity="left" android:left="10dp">
<bitmap android:src="#android:drawable/ic_menu_search" android:gravity="left">
</bitmap>
</item>
</layer-list>

I would do it like this :
For the border part, you could do it with a drawable like you did
For the search icon, instead of trying to put it in the drawable file, why not set it in you EditText xml layout, using android:drawableLeft, you can then set padding using android:paddingLeft and android:drawablePadding

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" >
<gradient android:startColor="#FFFFFF" android:endColor="#FFFFFF" android:angle="90"/>
<corners android:radius="3dp"></corners>
</shape>
</item>
<item android:drawable="#drawable/places_ic_search"
android:gravity="center_vertical|left"
android:height="10dp"
android:width="30dp">
</item>
</layer-list>

Setting Tint in appcompat for XML drawables

I have a fairly simple selector with two states. A light gray shade for normal and a dark gray for pressed. Code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<inset android:insetLeft="8dp"
android:insetTop="8dp"
android:insetRight="8dp"
android:insetBottom="8dp">
<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/widget_gray_dark" />
<padding android:left="8dp"
android:top="8dp"
android:right="8dp"
android:bottom="8dp" />
</shape>
</inset>
</item>
<item>
<inset android:insetLeft="8dp"
android:insetTop="8dp"
android:insetRight="8dp"
android:insetBottom="8dp">
<shape android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#color/widget_gray_light" />
<padding android:left="8dp"
android:top="8dp"
android:right="8dp"
android:bottom="8dp" />
</shape>
</inset>
</item>
</selector>
Now I want to add the android's tint feature to it. Setting the tint attribute to any widget with this selector on pre-lollipop devices has no effect. I am using app-compact and according to its blog, it should work. Maybe I am not using it properly.
How can I set the tint?

Keep ripple within stroke

I'm trying to create a ripple background drawable for a Button with a stroke.
This is what I have so far:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#336699">
<item>
<shape android:shape="rectangle">
<solid android:color="#998811" />
<stroke
android:width="2dp"
android:color="#119988" />
</shape>
</item>
</ripple>
But with this solution, the ripple overlaps with my stroke.
I only want the ripple within the stroke, How can I do this?

As per the documentation you add another item with id #android:id/mask - that will limit where the ripple goes. You can set that to be inset, like so:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#336699">
<item>
<shape android:shape="rectangle">
<solid android:color="#998811" />
<stroke
android:width="2dp"
android:color="#119988" />
</shape>
</item>
<item android:id="#android:id/mask">
<inset android:insetBottom="2dp"
android:insetLeft="2dp"
android:insetRight="2dp"
android:insetTop="2dp">
<shape android:shape="rectangle">
<!-- Color doesn't matter -->
<solid android:color="#android:color/white"/>
</shape>
</inset>
</item>
</ripple>