Develop Reference

Drawable with padding for Button with Icon and Text

Im trying to have an icon and text on my custom button. I want both to be centered. For this Im using phillipcalvin-iconbutton. This works quite well however the drawable is set does not have any padding so it looks like this:
I have tried to create another drawable with the same same resource that has a padding like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="1dp">
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_done"
>
<padding
android:left="50dp"
android:top="50dp"
android:right="50dp"
android:bottom="50dp"
/>
</item>
</selector>
</item>
That does not make a difference.
I don't want to use some sort of Layout were I set a wrap a TextView and a ImageView because I loose the button animation.
Any Idea how I can solve this?
Just incase you want to see my custom button:
<ripple
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/darkRipple">
<item android:id="#android:id/mask"
android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp"
tools:targetApi="lollipop">
<shape android:shape="rectangle">
<solid android:color="#color/darkRipple" />
<corners android:radius="7dp" />
</shape>
</item>
<item android:id="#android:id/background"
android:bottom="4dp" android:left="4dp" android:right="4dp" android:top="4dp">
<shape android:shape="rectangle">
<corners android:radius="7dp" />
<solid android:color="#color/dark" />
<size android:width="110dp" android:height="40dp" />
</shape>
</item>
</ripple>
and here is how I use it:
<com.phillipcalvin.iconbutton.IconButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:background="#drawable/btn_dark"
android:drawableLeft="#drawable/btn_ic_done"
app:iconPadding="10dp"
android:text="DONE"
android:textColor="#color/White"/>

I think one way to get around the problem could be to import the image used as a drawableLeft (android:drawableLeft="#drawable/btn_ic_done" in this case) to android studio as a new Image Asset. That'll allow you to set padding to the image at the time you import it(or you could set padding to the image using some external image editor).
Steps to achieve this:
Right click res folder
res -> new -> image asset
[Customise the image according to your needs][1]
[1]: https://i.stack.imgur.com/6Weu6.png

From official documrntation:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/your.project.package"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
<!-- ... -->
<com.phillipcalvin.iconbutton.IconButton
android:id="#+id/search"
android:drawableLeft="#drawable/action_search"
android:text="#string/search"
app:iconPadding="10dp" />

Spinner arrow disappears when I change the background color

When I change the background color of my spinner, the drop-down arrow disappears. I have seen some answers to similar questions here, but they don't really address how to make the arrow "reappear" or change the arrow's color directly from the XML (assuming that's possible).
I am trying to make the arrow white, but the spinner (using the code below) still appears without the arrow.
<Spinner
android:id="#+id/eventSpinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#android:color/holo_green_dark"
android:dropDownSelector="#ffffff"
android:popupBackground="#android:color/holo_green_dark"
android:spinnerMode="dropdown" />
Any help would be appreciated. Thanks in advance.

You can draw line by xml code. like below
<item >
<layer-list>
<item>
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent" />
<!-- background color of box -->
</shape>
</item>
<item
android:left="-2dp"
android:right="-2dp"
android:top="-2dp">
<shape>
<solid android:color="#android:color/transparent" />
<stroke
android:width="1dp"
android:color="#323232" />
<!-- color of stroke -->
</shape>
</item>
<item android:right="5dp">
<bitmap android:gravity="center_vertical|right" android:src="#drawable/downlarrow" />
</item>
</layer-list>
</item>
output looks something like this

Make Custom Drawable Shape in Android

I want to make drawable like below,
I am able to make the Rectangle and Triange shape in two different xml files. But i want to joint them to make the drawable like this.

Use layer-list to make this custom shape drawable.
/res/drawable/custom_shape.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Transparent Rectangle -->
<item>
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<!-- Colored Rectangle -->
<item
android:bottom="20dp">
<shape android:shape="rectangle">
<size
android:width="300dp"
android:height="60dp" />
<solid android:color="#9A8585" />
</shape>
</item>
<!-- Bottom Triangle -->
<item
android:left="80dp"
android:right="120dp"
android:top="0dp"
android:bottom="30dp">
<rotate android:fromDegrees="45">
<shape android:shape="rectangle">
<solid android:color="#9A8585" />
</shape>
</rotate>
</item>
<!-- Top Border -->
<item
android:bottom="75dp">
<shape android:shape="rectangle">
<solid android:color="#EFC1B3" />
</shape>
</item>
</layer-list>
USE:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/custom_shape"/>
OUTPUT:
Hope this will help~

Use <layer-list/> for that.
Here is an example for instance.
in Drawable folder of resin project directory,
make xml file and name it as layerlist.xml and paste it below code as your requirement.
you can also add your shape drawable instead of drawable in the <item/> tag in the example. and use this xml as a background of ImageView.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/android_red"
android:gravity="center" />
</item>
<item android:top="10dp" android:left="10dp">
<bitmap android:src="#drawable/android_green"
android:gravity="center" />
</item>
<item android:top="20dp" android:left="20dp">
<bitmap android:src="#drawable/android_blue"
android:gravity="center" />
</item>
</layer-list>
Here is the result of the use of <layer-list/>.
I hope it helps you...

I expect that you need it for a a Tabular navigator or a ViewPager. My suggestion is that
1)Use the rectangle as your background for all the cases.
2)Create the same triangle drawable but with the background color (White or transparent) for the unselected item.
3)Create a view with the triangle background for all the items
4)Manually setVisibility of the triangle view according to the selection state

Toggle Button acting as an Image Button

I need a toggle button to have an image and a background color. Currently, my toggle button only has an image and no background color. Here is the code for it
<ToggleButton
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:onClick="onToggleClicked"
android:textSize="0sp"
android:checked="false"
android:background="#drawable/soundfocuslone1"/>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<bitmap android:src="#drawable/soundonlone1"
android:gravity="center"/>
</item>
<item android:state_pressed="true">
<bitmap android:src="#drawable/soundfocuslone1"
android:gravity="center" />
</item>
<item android:state_checked="false">
<bitmap android:src="#drawable/soundofflone1"/>
</item>
</selector>
Is it possible to have two backgrounds on the toggle button? I want a background color as well as an image on it. If not, is there a simple way to have an image button behave like a toggle button? Having an image button acting as a toggle button would probably be easier as the image is not scaled on the toggle button. Thanks, and I would appreciate all replies.

if you dont want the image to be placed in the center, use this for giving background.
1. put this in your toggle button - android:background="#drawable/bw_toggle_on_selector"
2. create an XML in drawable folder with the name "bw_toggle_on_selector" and paste the below code in it-
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#7995A8"
android:startColor="#E8E8E8"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>
3 .use android:drawableLeft for setting background image.
and if you want to place the image in center, then use this code (it covers everything incl. background image).
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true">
<layer-list>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_stop"
/>
</item>
<item>
<shape>
<gradient
android:angle="270"
android:endColor="#a0e0b071"
android:startColor="#a0a67637" />
<stroke
android:width="1dp"
android:color="#5c3708" />
<corners
android:radius="5dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
<item
android:state_enabled="true">
<layer-list>
<item>
<bitmap
android:gravity="center"
android:src="#drawable/ic_back"
/>
</item>
<item>
<shape
android:shape="rectangle">
<gradient
android:angle="270"
android:endColor="#a0a67637"
android:startColor="#a0e0b071" />
<stroke
android:width="1dp"
android:color="#5c3708" />
<corners
android:radius="5dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
** Some Tips **
*Changing Button text onClick
1. create a XML file in Drawable folder with the name "text_color.xml"
paste the below code in it-
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#000000" />
<item
android:state_pressed="false"
android:color="#01DFD7" />
</selector>
2. put this in your button to define the XML
android:textColor="#drawable/text_color"
*Faster way of Resizing my images?
use this tool or Android asset studio (google it)
*How do i make a Custom Background for my Buttons?
try this online tool :)

Actually ToggleButton has "android:button" attribute. So u can use "android:button" attribute for selector, and "android:background" for giving the background color to the ToggleButton.But using toggle button we can get the gravity issue so you can use check box instead of toggle button.
<CheckBox
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_weight="1.0"
android:layout_margin="5dp"
android:onClick="onToggleClicked"
android:textSize="0sp"
android:checked="false"
android:padding="5dp"
android:button="#drawable/soundfocuslone1"
android:background="ur_background_color_code or drawable"/>

First of all you write inside your xml file:
<ToggleButton
android:id="#+id/tgTextReader"
android:layout_width="60dp"
android:layout_height="36dp"
android:background="#drawable/bw_toggle_on_selector"
android:focusable="false"
android:focusableInTouchMode="false"
android:textOff=""
android:textOn="" />
then create folder inside res/
drawable folder
write xml file name is bw_toggle_on_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- When selected, use grey -->
<item android:drawable="#drawable/a"
android:state_checked="true" />
<!-- When not selected, use white-->
<item android:drawable="#drawable/b"
android:state_checked="false"/>
</selector>
this file keep in drawable foloder.
and also create a new folder inside res /
drawable-nodpi
where two image keep there. such as image a, image b.
hops work successfully. 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.