Develop Reference

How to remove arrow from the spinner when i click On spinner?

I tried this below code its showing normal effects.I want when i click on spinner the down should hide..
<?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>
Thank is Advance...

I have made my custom spinner like this follow these step:
Step 1: create one Drawable resource file inside your drawable folder say spinnerbg.xml and write below code in your xml file.
<?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="#color/spinner"
android:startColor="#color/spinner"
android:type="linear" />
<corners android:radius="0dp" />
</shape>
</item>
<item>
<bitmap android:gravity="bottom|right"
android:src="#drawable/dropdown" />
</item>
</layer-list>
</item>
</selector>
Step:2 Inside your style.xml write below code
<style name="spinner_style" >
<item name="android:background">#drawable/spinnerbg</item>
<item name="android:layout_marginBottom">10dp</item>
<item name="android:paddingLeft">8dp</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
</style>
step:3 And finallay inside your spinner use style like this.
<Spinner
style="#style/spinner_style"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</Spinner>

Custom Vertical Progress Bar

I've made a custom vertical progress bar and I want to show labels along side 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">
<shape>
<solid android:color="#777" />
</shape>
</item>
<item android:id="#android:id/progress">
<layer-list>
<item>
<clip
android:clipOrientation="vertical"
android:gravity="bottom">
<shape>
<gradient
android:angle="90"
android:centerColor="#FFFF00"
android:endColor="#FF0000"
android:startColor="#00FF00" />
</shape>
</clip>
</item>
<item>
<clip
android:clipOrientation="vertical"
android:gravity="fill">
<layer-list>
<item android:top="75dp">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#333" />
</shape>
</item>
<item android:top="25dp">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#333" />
</shape>
</item>
<item android:bottom="25dp">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#333" />
</shape>
</item>
<item android:bottom="75dp">
<shape android:shape="line">
<stroke
android:width="2dp"
android:color="#333" />
</shape>
</item>
</layer-list>
</clip>
</item>
</layer-list>
</item>
</layer-list>
Usage:
<ProgressBar
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="10dp"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/form_items_margin"
android:layout_gravity="center"
android:max="100"
android:progress="90"
android:progressDrawable="#drawable/progress_drawable_vertical" />
This is what mine looks like
This is What I wanted
Of course I couldn't achieve exactly like this But I only want to show labels alongside this now. I know I can make another vertical layout and show textview labels but that would be too messy. Is there any way I could adjust it in layer-list layout.

XML drop shadow and different states

I'm trying to define a background for my ListView that has drop shadow and different colours for pressed state. Here's what I have.
<?xml version="1.0" encoding="utf-8"?>
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:bottom="1dp"/>
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:bottom="1dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item android:state_pressed="true">
<shape>
<solid android:color="#color/fublue" />
</shape>
</item>
<item android:state_activated="true">
<shape>
<solid android:color="#color/fublue" />
</shape>
</item>
<item>
<shape>
<solid android:color="#color/white" />
</shape>
</item>
However, that doesn't work. What do I need to change to get it working?

I'm not entirely sure what you're doing for the drop-shadow, but for the press states, you must make your list view item layouts clickable. And then create a background selector drawable for your push states.
Standard Style File
yourcolorstates.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:platformrq="http://schemas.android.com/apk/res-auto" >
<item
android:background="#yourneutralcolor"
android:state_pressed="false" />
<item
android:background="#yourpressedcolor"
android:state_pressed="true" />
</selector>

wrap the items in a state selector and the states need to be be set.
example
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_focused="true">
<shape>
...
</shape>
</item>
</selector>

Android progress bar with padding

I want to make my progress bar looks something like that:
I dont want to use images, so I have tried to make this with the shapes:
<item android:id="#android:id/background">
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:centerColor="#2a2723"
android:centerY="0.75"
android:endColor="#2a2723"
android:startColor="#2a2723" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:centerColor="#16e61c"
android:centerY="0.75"
android:endColor="#9dfd6e"
android:startColor="#16e61c" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:endColor="#9dfd6e"
android:startColor="#16e61c" />
</shape>
</clip>
</item>
But I cant set padding for the green line (Ive tried to set its everywhere where it was possible), and also I can't make such round corners (looks like corners android:radius isn't working). Please help me

<?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>
<solid android:color="#222" />
<corners android:radius="10dp" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<layer-list>
<item>
<color android:color="#00000000" />
</item>
<item
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp">
<shape>
<solid android:color="#00FF00" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
</clip>
</item>
</layer-list>
see my blog

A simple workaround is to wrap progress bar into layout which has rounded shape and same background color as progress bar.
Sample progress bar drawable (drawable/progress_bar.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>
<corners android:radius="50dip" />
<solid android:color="#color/white"/>
<padding android:bottom="3dip" android:left="3dip" android:right="3dip" android:top="3dip" />
</shape>
</item>
<item android:id="#android:id/progress">
<bitmap android:src="#drawable/test_progress_bar_progress" android:tileMode="repeat"/>
</item>
</layer-list>
Progress bar style:
<resources>
<style name="ProgressBarStyle" parent="#android:style/Widget.ProgressBar.Horizontal">
<item name="android:layout_width">fill_parent</item>
<item name="android:layout_height">10dip</item>
<item name="android:max">100</item>
<item name="android:progressDrawable">#drawable/progress_bar</item>
</style>
</resources>
Layout shape (drawable/rounded_shape.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<padding android:top="2dip" android:left="2dip" android:right="2dip" android:bottom="2dip"/>
<corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" android:topLeftRadius="7dp" android:topRightRadius="7dp"/>
<solid android:color="#color/white"/>
</shape>
Activity layout:
<!-- ... -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_shape"
android:layout_marginLeft="30dip"
android:layout_marginRight="30dip">
<ProgressBar
android:id="#+id/testSummaryProgressBar"
android:progress="10"
style="#style/ProgressBarStyle"/>
</LinearLayout>
<!-- ... -->
Effect:
To increase padding of progress bar you have to increase padding in rounded_shape file.

Yes it's possible to have exactly that without using image like #Nykakin has suggested. To have the padding and the rounded corner for the progress is to use list-layer for the item progress.
<item android:id="#android:id/progress">
<clip>
<layer-list>
<-- transparent background -->
<item>
<color android:color="#00000000" />
</item>
<-- padding -->
<item
android:left="2dp"
android:top="2dp"
android:right="2dp"
android:bottom="2dp">
<shape>
<corners android:radius="50dp" />
<gradient
android:angle="270"
android:endColor="#9dfd6e"
android:startColor="#16e61c" />
</shape>
</item>
</layer-list>
</clip>

Unfortunately I didn't find solution for my problem. The only way I could make round corners was to use rounded 9-pitch image
There is a good tutorial to do that: http://blog.mediarain.com/2011/04/android-custom-progressbar-with-rounded-corners/

How to apply shape and selector simultaneously for Button?

I have applied a shape for a button like:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient android:startColor="#DD000000" android:endColor="#DD2d2d2d" android:angle="90"></gradient>
<corners android:radius="15dip"></corners>
</shape>
Now I want to use a selector like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/active"
android:state_pressed="true" />
<item android:drawable="#drawable/passive"/>
for this Button as well. Is it possible ...???

use this way:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>.......</shape>
</item>
..........
..........
</selector>

Detailed to the point answer
Create a color resource in
res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<item name="yellow" type="color">#F7B500</item>
<item name="yellow_dark" type="color">#AC7E00</item>
<integer-array name="androidcolors">
<item>#color/yellow</item>
<item>#color/yellow_dark</item>
</integer-array>
</resources>
Create a drawable at
res/drawable/bg_yellow_round.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#color/yellow" />
<stroke
android:width="2dp"
android:color="#color/yellow" />
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
</shape>
Create another drawable, you want for transition at same place and name it
res/drawable/bg_yellow_dark_round.xml
<solid android:color="#color/yellow_dark" />
<stroke
android:width="2dp"
android:color="#color/yellow_dark" />
<corners
android:bottomLeftRadius="20dp"
android:bottomRightRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp" />
Now create a color state list at
res/color/btn_selector_yellow.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="#android:integer/config_shortAnimTime">
<item android:drawable="#color/yellow" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#drawable/bg_yellow_dark_round" android:state_pressed="true"/>
<item android:drawable="#drawable/bg_yellow_round"/>
</selector>
Now set it to your button as following
<Button
android:id="#+id/button1"
android:layout_width="248dp"
android:layout_height="44dp"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="20dp"
android:background="#color/btn_selector_yellow"
android:text="AZ_ is so cool" />
Now this will do transition from
to
.

shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/star_off"/>
<corners android:radius="5dp"/>
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>
selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android" android:exitFadeDuration="#android:integer/config_mediumAnimTime">
<item android:drawable="#color/tab_focused" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#color/tab_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/shape"/>
</selector>

You can also create a shape that is using a selector inside. If your shape is just changing its color in different states, this is a lot cleaner.
color/color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/blue_dark" android:state_pressed="true" />
<item android:color="#color/blue_light" />
</selector>
drawable/shape.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/color_selector" />
<corners android:bottomLeftRadius="6dip" android:bottomRightRadius="6dp" />
<padding android:bottom="0dip" android:left="0dip" android:right="0dip" android:top="0dip" />
</shape>

Well I know it's way too late
But here is a solved example
<TextView
android:id="#+id/txt_out_going_calls"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="04dp"
android:layout_weight="1"
android:background="#drawable/header_text_view_selector"
android:gravity="center"
android:text="#string/outgoing_calls_tab_button_text"
android:textColor="#color/home_text_color" />
and my header_text_view_selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/home_fragment_tab_color_selected"/>
<corners android:radius="25dip" />
<padding android:bottom="08dip" android:left="9dip" android:right="9dip" android:top="08dip" />
</shape>
</item>
<item android:state_selected="false">
<shape>
<solid android:color="#color/home_fragment_tab_color_simple"/>
<corners android:radius="25dip" />
<padding android:bottom="08dip" android:left="9dip" android:right="9dip" android:top="08dip" />
</shape>
</item>
</selector>
So basically i m creating a rounded textview with selector. Here i m handling only state_selected and not_selected. Hope it helps

This is my way, and it works!
<item android:state_pressed="true">
<shape android:shape="oval">
<gradient android:centerX=".6"
android:centerY=".40"
android:endColor="#color/colorPrimary"
android:gradientRadius="20"
android:startColor="#color/colorPrimary"
android:type="radial" />
<stroke android:width="1dp"
android:color="#FFFFFF" />
<size android:width="55dp"
android:height="55dp" />
</shape>
</item>
<item android:state_focused="false">
<shape android:shape="oval">
<gradient android:centerX=".6"
android:centerY=".40"
android:endColor="#android:color/transparent"
android:gradientRadius="20"
android:startColor="#android:color/transparent"
android:type="radial" />
<stroke android:width="1dp"
android:color="#FFFFFF" />
<size android:width="55dp"
android:height="55dp" />
</shape>
</item>

My example is a circle button with state_pressed.
code bellow:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape android:shape="oval">
<solid android:color="#color/light_primary_color" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/accent_color" />
</shape>
</item>
</selector>

Use your shape name as you use any image and use it selector as you use image. Try out you will not face any problem. Is that what you were asking?

To be more reusable, you can set states on single properties. Avoid duplicating your shapes
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
>
<item>
<shape android:shape="rectangle" >
<corners android:radius="5dp"/>
<solid
android:state_enabled="false"
android:color="#color/transparent"
/>
<solid
android:state_enabled="true"
android:color="#color/background"
/>
<stroke
android:width="#dimen/dividerHeight"
android:color="#color/dividerLight"
/>
</shape>
</item>
</selector>
I was able to set background programmatically once disabled using this method.