I need to create a custom image view for choosing color by design. When user click the circle, inner white circle with a tick should appear, like in example below:
Otherwise, it should be just a circle shape with some color (unchecked state), like below:
The main problem, that I do not know how to create a selector with the inner circle inside and with keeping the ability to setup color programmatically.
Simple rounded shape I can setup, for example, like this:
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_crop"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_gravity="center"
android:src="#android:color/holo_red_dark" />
How to modify it to setup white circle with tick inside on a checked state (when user click on it)?
So easy.
1. Create layer-list Drawable Called "icon_check"
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item //for the round white background
android:bottom="10dp" //margin, "<size>" tag doesn't work
android:end="10dp"
android:start="10dp"
android:top="10dp">
<shape
android:shape="oval">
<solid
android:color="#color/white" />
</shape>
</item>
<item
android:drawable="#drawable/check" //check mark from built-in asset
android:bottom="14dp" //margin, extra 4dp is prefered
android:end="14dp"
android:start="14dp"
android:top="14dp" />
</layer-list>
2. Create selector Drawable Called "foreground_check"
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/icon_check" //layer-list created above
android:state_selected="true" />
<item
android:drawable="#android:color/transparent" //key point, 【"#null" doesn't work!!】
android:state_selected="false" />
</selector>
3. Setup CardView
<androidx.cardview.widget.CardView //【MaterialCardView doesn't work!!】
android:id="#+id/cardView"
android:layout_width="40dp"
android:layout_height="40dp"
android:foreground="#drawable/foreground_check" //apply layer-list drawable
app:cardBackgroundColor="#color/black"
app:cardCornerRadius="20dp" /> //half of side length
4. Setup Ui Controller
cardView.setOnClickListener {
it.isSelected = !it.isSelected
}
Result:
You need to create a drawable selector for your image view, for example:
drawable_round_view_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/drawable_round_view_selected" android:state_selected="true" />
<item android:drawable="#drawable/drawable_round_view_unselected" android:state_selected="false" />
<item android:drawable="#drawable/drawable_round_view_unselected" />
</selector>
drawable_round_view_selected
<?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="40dp"
android:height="40dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="1dp"
android:color="#3383FF" />
<solid android:color="#3383FF"/>
</shape>
</item>
<item>
<shape android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<solid android:color="#ffffff" />
</shape>
</item>
<item android:drawable="#drawable/ic_baseline_check_24" />
</layer-list>
and drawable_round_view_unselected
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
android:width="40dp"
android:height="40dp" />
<!-- unselected button background -->
<solid
android:color="#color/black" />
<stroke
android:color="#color/gray_martini"
android:width="1dp"/>
</shape>
After that on your layout set the image view like:
<ImageView
android:id="#+id/roundImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:src="#drawable/drawable_round_view_selector"/>
Finally on your activity or fragment change view depending on selected state:
binding.roundImageView.setOnClickListener {
it.isSelected = !it.isSelected
}
PS: change colors and sizes depending on your requirements.
Related
Here is my Button:
<androidx.appcompat.widget.AppCompatButton
android:id="#+id/status1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/large_text"
android:text="#string/offline"
android:drawableEnd="#drawable/online_dot"
android:drawableTint="#color/colorOnline"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
online_dot.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorOnline" />
<stroke android:width="1dp" android:color="#color/colorLightBlack"/>
<corners android:radius="#dimen/circle_radius" />
</shape>
</item>
</selector>
online_dot.xml doesn't show. If I change drawableEnd to an actual image (not drawable) then it works. But I want to show a shape.
How can I fix this?
It happens because your shape hasn't a defined size.
You have to specify the size inside online_dot.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#color/colorOnline" />
<stroke android:width="1dp" android:color="#color/colorLightBlack"/>
<corners android:radius="#dimen/circle_radius" />
<!-- Specify the shape size here. -->
<size
android:height="20dp"
android:width="20dp" />
</shape>
</item>
</selector>
i'm trying to create a border for a Button with two color white and black. So I decide to create a shape. i trying to add gradient with white and black color my code doesn't work
i want border like this :
my 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:angle="360"
android:centerColor="#000000"
android:endColor="#bfbfbf"
android:gradientRadius="360"
android:startColor="#ffffff"
android:type="sweep" />
<stroke
android:width="2dp"
android:color="#ffffff" />
</shape>
</item>
<item
android:bottom="4dp"
android:left="4dp"
android:right="4dp"
android:top="4dp">
<shape android:shape="rectangle" >
<solid android:color="#d2d2d2" />
</shape>
</item>
</layer-list>
and buttn :
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK"
android:background="#drawable/border"
android:layout_alignBottom="#+id/progress"
android:layout_centerHorizontal="true"
android:id="#+id/okbtn" />
button_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">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#000" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_outer"
android:right="#dimen/stroke_width_outer">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#FFF" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_outer"
android:left="#dimen/stroke_width_outer"
android:right="#dimen/stroke_width_outer"
android:top="#dimen/stroke_width_outer">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#7F7F7F" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_inner"
android:left="#dimen/stroke_width_outer"
android:right="#dimen/stroke_width_inner"
android:top="#dimen/stroke_width_outer">
<shape android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width_outer"
android:color="#DFDFDF" />
</shape>
</item>
<item
android:bottom="#dimen/stroke_width_inner"
android:left="#dimen/stroke_width_inner"
android:right="#dimen/stroke_width_inner"
android:top="#dimen/stroke_width_inner">
<shape android:shape="rectangle">
<solid android:color="#BFBFBF" />
</shape>
</item>
</layer-list>
values/dimen.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="stroke_width_outer">3dp</dimen>
<dimen name="stroke_width_inner">6dp</dimen>
</resources>
stroke_width_inner should be twice of stroke_width_outer always
Apply background to button -
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_background"
android:text="OK"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
On Layout Editor -
On Device -
On Device you won't see the grayish left and top border as you see on Layout Editor
This appears to be a good place to use a 9-patch image. Any solution based on a regular .png file, a <shape>, or a <vector> will wind up scaling the white and black borders of your button.
Once you've created your button.9.png file, then you can set it to be your button's background using android:background="#drawable/button".
Edit
Here's a 9-patch based on your linked .png file:
Please look here about creating a shape drawable http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
Once you have done this, in the XML for your button set android:background="#drawable/your_button_border"
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
I want to develop custom spinner like line around spinner with triangle at right bottom corner.
like following image
For above fig I wrote my custom spinner like a
spinner.xml
<Spinner android:background="#drawable/spinner_background"/>
spinner_background.xml
<?xml version="1.0" encoding="UTF-8"?>
<item android:state_pressed="true"
android:drawable="#drawable/spinner_ab_pressed_new_theme_bs">
<shape>
<solid
android:color="#color/White" />
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/skyblue" />
</shape>
</item>
<!-- spinner_ab_default_new_theme_bs -> this image for corner triangle -->
<item
android:drawable="#drawable/spinner_ab_default_new_theme_bs" >
<shape>
<solid
android:color="#color/White">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/gray"/>
</shape>
</item>
And I got output like following image
I tried lot but not achieve my goal please anybody have solution to develop spinner.
like above first one image.
Spinner
<Spinner
android:id="#+id/To_Units"
style="#style/spinner_style" />
style.xml
<style name="spinner_style">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">#drawable/gradient_spinner</item>
<item name="android:layout_margin">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingRight">20dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:popupBackground">#DFFFFFFF</item>
</style>
gradient_spinner.xml (in drawable folder)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item><shape>
<gradient android:angle="90" android:endColor="#B3BBCC" android:startColor="#E8EBEF" android:type="linear" />
<stroke android:width="1dp" android:color="#000000" />
<corners android:radius="4dp" />
<padding android:bottom="3dp" android:left="3dp" android:right="3dp" android:top="3dp" />
</shape></item>
<item ><bitmap android:gravity="bottom|right" android:src="#drawable/spinner_arrow" />
</item>
</layer-list></item>
</selector>
#drawable/spinner_arrow is your bottom right corner image
This is a simple one.
your_layout.xml
<android.support.v7.widget.AppCompatSpinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/spinner_background"
/>
In the drawable folder, spinner_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item><layer-list>
<item>
<shape>
<solid
android:color="#color/colorWhite">
</solid>
<corners android:radius="3dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<stroke
android:width="2dp"
android:color="#color/colorDarkGrey"/>
</shape>
</item>
<item >
<bitmap android:gravity="bottom|right"
android:src="#drawable/ic_arrow_drop_down_black_24dp" />
</item>
</layer-list></item>
</selector>
Preview:
You can achieve the following by using a single line in your spinner declaration in XML:
Just add this: style="#android:style/Widget.Holo.Light.Spinner"
This is a default generated style in android. It doesn't contain borders around it though. For that you'd better search something on google.
Hope this helps.
UPDATE:
AFter a lot of digging I got something which works well for introducing border around spinner.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:top="8dp">
<shape>
<solid android:color="#android:color/white" />
<corners android:radius="4dp" />
<stroke
android:width="2dp"
android:color="#9E9E9E" />
<padding
android:bottom="16dp"
android:left="8dp"
android:right="16dp"
android:top="16dp" />
</shape>
</item>
</layer-list>
Place this in the drawable folder and use it as a background for spinner. Like this:
<RelativeLayout
android:id="#+id/speaker_relative_layout"
android:layout_width="0dp"
android:layout_height="70dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="#drawable/spinner_style"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<Spinner
android:id="#+id/select_speaker_spinner"
style="#style/Widget.AppCompat.DropDownItem.Spinner"
android:layout_width="match_parent"
android:layout_height="70dp"
android:entries="#array/select_speaker_spinner_array"
android:spinnerMode="dialog" />
</RelativeLayout>
If you don't prefer to create multiple XML files, try:
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:strokeWidth="1dp"
app:strokeColor="#color/black"
app:cardCornerRadius="4dp">
<androidx.appcompat.widget.AppCompatSpinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"/>
</com.google.android.material.card.MaterialCardView>
To change the border color:
app:strokeColor="YOUR_COLOR_HERE"
To change the border's width:
app:strokeWidth="YOUR_DP_WIDTH_HERE"
There are two ways to achieve this.
1- As already proposed u can set the background of your spinner as custom 9 patch Image with all the adjustments made into it .
android:background="#drawable/btn_dropdown"
android:clickable="true"
android:dropDownVerticalOffset="-10dip"
android:dropDownHorizontalOffset="0dip"
android:gravity="center"
If you want your Spinner to show With various different background colors i would recommend making the drop down image transparent, & loading that spinner in a relative layout with your color set in.
btn _dropdown is as:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_window_focused="false" android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_window_focused="false" android:state_enabled="false"
android:drawable="#drawable/spinner_default" />
<item
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_focused="true" android:state_enabled="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_enabled="true"
android:drawable="#drawable/spinner_default" />
<item
android:state_focused="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:drawable="#drawable/spinner_default" />
</selector>
where the various states of pngwould define your various States of spinner seleti
To change only "background" (add corners, change color, ....) you can put it into FrameLayout with wanted background drawable, else you need to make nine patch background for to not lose spinner arrow. Spinner background is transparent.
You could design a simple nine-patch png image and use it as the background of spinner. Using GIMP you can put both border and right triangle in image.
It's super easy you can just add this to your Adapter -> getDropDownView
getDropDownView:
convertView.setBackground(getContext().getResources().getDrawable(R.drawable.bg_spinner_dropdown));
bg_spinner_dropdown:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<corners
android:bottomLeftRadius=enter code here"25dp"
android:bottomRightRadius="25dp"
android:topLeftRadius="25dp"
android:topRightRadius="25dp" />
</shape>
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.