Develop Reference

ToggleButton rectangle containing an icon

I am trying to have a ToggleButton rectangle that contains an icon, once clicked the background should change color but the icon should remain visible.
So far I'm able to have a rectangle change color on click like such:
<ToggleButton
android:background="#drawable/toggle_selector"
android:id="#+id/toggle"
android:checked="false"
android:textOn=""
android:textOff=""
android:layout_width="60dp"
android:layout_height="60dp" />
toggle_selector.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/toggle_state_on"
android:state_checked="true" />
<item
android:drawable="#drawable/toggle_state_off"
android:state_checked="false" />
</selector>
toggle_state_on.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- Draw a 5dp width border around shape -->
<stroke
android:color="#4c975d"
android:width="5dp"
/>
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
<item
android:bottom="5dp"
>
<shape android:shape="rectangle">
<solid android:color="#6dd988"/>
</shape>
</item>
</layer-list>
toggle_state_off being the same as on but with different colors.
I'm not able to find how to put an icon at the center of the button I have created, can that be achieved? And how?

You may need to modify the below as required however this will have a icon the center for both state on and off. Add the line toggle_state_off and toggle_state_on android:drawable="#drawable/ic_attach_money_black_24dp"
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<!-- Draw a 5dp width border around shape -->
<stroke
android:color="#2c125d"
android:width="5dp"
/>
</shape>
</item>
<!-- Overlap the left, top and right border using background color -->
<item
android:bottom="5dp"
android:drawable="#drawable/ic_attach_money_black_24dp">
<shape android:shape="rectangle">
<solid android:color="#2c125d"/>
</shape>
</item>
</layer-list>
Mark it as answered if this helps

Switch-Button thumb gets skewed?

The thumb for my Switch-button seems to get skewed(for on&off state). There were similar problems on github, but those were for people making libraries to support Switch button in API 4.0-
main contains the switch-button, and there is a thumb and track drawable applied to it
This is what is happening:
This is how its suppose to loook:
switch_track_on.png
main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="112dp"
android:thumb="#drawable/switch_thumb_selector"
android:track="#drawable/switch_track_selector"
android:textOn=""
android:textOff=""/>
</RelativeLayout>
switch_thumb_selector.xml
<selector>
<item android:drawable="#drawable/switch_thumb">
</item>
</selector>
switch_track_selector.xml
<selector>
<item android:drawable="#drawable/switch_track_on" android:state_checked="true"/>
<item android:drawable="#drawable/switch_track_off" android:state_checked="false"/>
</selector>

For Custom Switch (Like IOS switch) I tried below Steps:
Create a drawable track_selector.xml:
<?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="#ca120f" />
<corners android:radius="25dp" />
<size android:width="2dp" android:height="18dp" />
</shape>
</item>
<item android:state_checked="false">
<shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
<solid android:color="#27170432" />
<corners android:radius="25dp" />
<size android:width="2dp" android:height="18dp" />
</shape>
</item>
</selector>
Create a drawable thumb_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<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="100dp" />
<size android:width="24dp" android:height="25dp" />
<stroke android:width="4dp" android:color="#0000ffff" />
</shape>
</item>
</selector>
In your layout :
<Switch
android:id="#+id/checkboxAttendanceSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:thumb="#drawable/thumb_selector"
app:track="#drawable/track_selector" />
Its working fine for me.

I had the same requirement. I checked Android code and found that
switch ignores any vertical margin/padding applied to a thumb shape drawable (thus thumb always touch the top and bottom of the track)
the width of the thumb is calculated by taking the horizontal paddings + the max width of the on and off texts.
This makes really hard to make a circle thumb.
But if you specify the thumb drawable as a layer drawable for the sole reason to be able to specify padding for the single layer of the drawable, you can get the desired effect.
Thumb selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<!--
NOTE
We want a thumb with padding around it inside the track.
Sadly, a switch draws its track and thumb with the same height ignoring
any padding of the drawable, so using a shape with padding does not work.
To overcome, we apply a trick. We create layer list because the
LayerListDrawable draws itself with taking the top, left, right, bottom
values into account.
-->
<layer-list>
<item
android:top="#dimen/switch_thumb_padding"
android:left="#dimen/switch_thumb_padding"
android:right="#dimen/switch_thumb_padding"
android:bottom="#dimen/switch_thumb_padding">
<!--
NOTE
No need to specify size because:
- The thumb fills the track in height.
- The thumb width is determined from thumb max(on, off) text +
text padding + drawable padding.
-->
<shape android:shape="oval">
<solid android:color="#color/switch_thumb"/>
<!-- NOTE did not work, had to set Switch's thumbTextPadding to the radius -->
<!--
<padding android:right="#dimen/switch_thumb_radius"
android:left="#dimen/switch_thumb_radius"/>
-->
</shape>
</item>
</layer-list>
</item>
</selector>
I set the on and off text of switch to empty (actually to "" to prevent warning about empty resource).
track:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<size android:height="#dimen/switch_track_height"/>
<corners android:radius="#dimen/switch_thumb_radius"/>
<solid android:color="#color/switch_track_off"/>
</shape>
</item>
<item android:state_checked="true">
<shape android:shape="rectangle">
<size android:height="#dimen/switch_track_height"/>
<corners android:radius="#dimen/switch_thumb_radius"/>
<solid android:color="#color/switch_track_on"/>
</shape>
</item>
</selector>
Switch style:
<style name="CustomSwitch">
<!-- NOTE this way the switch will be as width as required minimally -->
<item name="android:switchMinWidth">0dp</item>
<item name="android:track">#drawable/switch_track</item>
<item name="android:thumb">#drawable/switch_thumb</item>
<item name="android:textOff">#string/switch_thumb_off</item>
<item name="android:textOn">#string/switch_thumb_on</item>
<!-- NOTE if set to 0dp, the thumb was not visible even with padding
of the thumb drawable set to -->
<item name="android:thumbTextPadding">#dimen/switch_thumb_radius</item>-->
<!--<item name="android:thumbTextPadding">0dp</item>-->
</style>
And finally, the dimens:
<dimen name="switch_track_height">30dp</dimen>
<dimen name="switch_thumb_radius">15dp</dimen>
<dimen name="switch_thumb_padding">2dp</dimen>
So the only 'tricky' thing is to keep height = radius * 2.

No clue why this happens but solved it by placing the Switch-button within a linearLayout.
There must be some propery(width) of the thumb that has a "match_parent" of some sort that must've been causing it.
Edit: It happens when I remove the default 'ON' and 'OFF' text. So to hide the text i changed its color to white.
How to change textcolor of switch in Android
main.java
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.toggle_button);
Switch sw = (Switch) findViewById(R.id.switch1);
//Both of these need to be used to change the text color to white
sw.setTextColor(Color.WHITE);
sw.setSwitchTextAppearance(this, Color.WHITE);
//Doing this would skew the circle
//sw.setTextOn(" ");
//sw.setTextOff(" ");
}
main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="70dp" >
<Switch
android:id="#+id/switch1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:thumb="#drawable/switch_thumb_selector"
android:track="#drawable/switch_track_selector" />
</LinearLayout>

You can always horizontally stretch the graphic itself (ie, "switch_thumb.png") if you can't use the other answers.
If you use the original software used to design the graphic and re-export it after stretching, it shouldn't cause blurring of the image. You'll have to eye-ball it for your dimensions, but starting at +30% stretching should get you close.

How to do an outer glow via xml on button?

I have a customized button with rounded corners, I put some shadow for when it's pressed but I want to do an outer shadow just to the bottom part of the button, I am making the drawable via xml, so if the glow could be that way would be great.
These are the relevant parts of the code:
button_pressed_shadows.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" >
<gradient
android:startColor="#color/black_overlay"
android:endColor="#color/btn_login"
android:angle="270"/>
<corners android:radius="4dip" />
</shape>
</item>
<item
android:top="2px">
<shape android:shape="rectangle">
<solid android:color="#color/btn_login"/>
<corners android:radius="4dip" />
</shape>
</item>
</layer-list>
style_login.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed_shadows" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_login" /> <!-- default -->
</selector>

Since I have the button design on photoshop, I made a 9 patch image with it, and put it on the style selector, everything went fine, think is the better (easiest) way.

Also while using layer-list you can use appropriate color combinations and padding to make it like glow or shadow.
edit_text_background
<?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="#fff" />
<corners android:radius="4dp" />
</shape>
</item>
<item android:bottom="1dp">
<shape android:shape="rectangle" >
<corners android:radius="4dp" />
<stroke
android:width="1dp"
android:color="#dadad7" />
<solid android:color="#fff" />
</shape>
</item>

How to dynamically change colors of a layerlist in a selector?

I am using a listview. Each row has a fancy layout with different press states, shapes and layers. In the adapter of my listview, I would like to set a particular color to these states according to the list row content. The particular color I would like to change in my adapter for each row is the on in the file "list_row_pressed.xml" (see below, almost at the end, on line android:color="#android:color/blue" )
The xml for each row is in an xml file "list_child.xml"
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rlLevel"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#layout/list_rowbg" >
...
"list_rowbg.xml" is another xml file containing my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#layout/list_row_pressed" >
</item>
<item
android:state_pressed="false"
android:drawable="#layout/list_row_notpressed" >
</item>
"list_row_pressed.xml" is:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid
android:color="#android:color/transparent" />
<corners
android:radius="3dp" />
</shape>
</item>
<!-- Top Shadow -->
<item android:top="#dimen/rowShadow">
<shape>
<solid
android:color="#android:color/blue" /> <-- I WANT TO SET THIS COLOR DYNAMICALLY
<corners android:radius="3dp" />
<stroke
android:width="0dp"
android:color="#color/grey" />
</shape>
</item>
So how can I change in my listview adapter the color "#android:color/blue" in my file "list_row_pressed.xml" ?
Thanks

Android Button border shadow

Shadow property in Button view gives shadow to text. How can I give shadow to right and bottom border of a Button?As shown below:

You can try it. I use it in my project. I give shadow to right and bottom border of a Button.
Button xml
<Button
android:id="#+id/buttonSignIn"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:background="#drawable/button_dropshadow"
android:textColor="000000"
android:text="Sign In" />
In drawable file add button_dropshadow.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:left="5dp" android:top="5dp">
<shape>
<corners android:radius="3dp" />
<solid android:color="#000000" />
</shape>
</item>
<item android:bottom="2dp" android:right="2dp">
<shape>
<gradient android:angle="270"
android:endColor="#ffffff" android:startColor="#ffffff" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="10dp" android:left="10dp"
android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
Thank you.

Try making your own button 9-patch image with selector:
btn_normal.9.png:
btn_pressed.9.png:
btn_focused.9.png:
btn_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/btn_focused" />
<item android:state_focused="true" android:drawable="#drawable/btn_focused" />
<item android:state_pressed="true" android:drawable="#drawable/btn_pressed" />
<item android:drawable="#drawable/btn_normal" />
</selector>
and add android:background="#drawable/btn_selector" in button's attributes.

Here is a blob post that I found and could help. It will only work in a RelativeLayout. Create a View component with the same size as your button and place it immediately below:
<Button
android:id="+#id\my_button"
android:layout_below="#id/some_layout_item"
android:layout_width="100dp"
android:layout_height="5dp"
>
</Button>
<View
android:layout_below="#id/my_button"
android:layout_width="100dp"
android:layout_height="5dp"
android:background="#drawable/drop_shadow"
>
</View>
Create the shadow as a drawable (drop_shadow.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”>
<gradient
android:startColor="#color/cream_dark"
android:endColor="#color/cream"
android:angle="270"
>
</gradient>
</shape>

My button's background is set like this
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient
android:startColor="#android:color/holo_green_dark"
android:endColor="#android:color/holo_green_light"
android:angle="90">
</gradient>
<stroke
android:width="1px"
android:color="#android:color/darker_gray" />
</shape>
The effect of the shadow can be done by adding a second shape under the original button shape, changing its color to a darker one either black or grey. But the shadow should be of the same shape as that of the button.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#android:color/darker_gray"/>
</shape>
To overlap different items we have to use a “layer-list” resource and include the previous shapes. The shadow should appear in first place and then the original button with some displacement. In this example, we are creating the shadow at the bottom of the button and an offset of 4px.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/shadow"/>
<item
android:drawable="#drawable/button"
android:bottom="4px"
android:right="4px"
/>
</layer-list>
Now set the background of the button as the layerlist drawable. This should do it partially.