Develop Reference

Change Button Shape on selected State?

I have an Android Button:
<Button
android:layout_width="wrap_content"
android:layout_height="44dp"
android:background="#drawable/action_button" />
action_button.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<padding
android:left="25dp"
android:right="25dp"/>
<gradient
android:angle="0"
android:endColor="#color/whiteColor"
android:startColor="#color/whiteColor"/>
<corners android:radius="#dimen/borderRadius"/>
<stroke
android:width="2px"
android:color="#color/actionColor"/>
</shape>
How can I change the shape, when the button is pressed?

Hi please use below selector and change according to your need
selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- <item android:state_enabled="false"
android:drawable="#drawable/cyan_strip" />
<item android:state_pressed="true"
android:drawable="#drawable/cyan_strip" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/cyan_strip" />
<item android:drawable="#drawable/black_strip" /> -->
<item android:state_enabled="false">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_pressed="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item android:state_selected="true">
<shape>
<solid
android:color="#4ec9d9" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
<item >
<shape>
<solid
android:color="#000000" />
<stroke
android:width="1dp"
android:color="#FFFFFF" />
<padding
android:left="1dp"
android:top="1dp"
android:right="1dp"
android:bottom="1dp" />
</shape>
</item>
</selector>

you need a 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="#drawable/action_button_pressed" />
<item android:drawable="#drawable/action_button" />
</selector>
put it in a xml file, under drawable/, and use it as background for your Button . Android will take care of the rest

see :
Link
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#302226"
android:endColor="#6D7B8D"
android:angle="45"/>
<padding android:left="6dp"
android:top="6dp"
android:right="6dp"
android:bottom="6dp" />
<corners android:radius="30dp" />
</shape>
or see :
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/shape_oval" />
Shape_oval is an image which we can take from google serching or drawing ourself in paint or photoshop.

Transparent background for android

i want to make my own background transparent, can anyone guide me how.
below is the background color i wanna use and i want it transparent
<?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="rectangle" >
<corners android:radius="10dp" />
<stroke android:width="1dip" android:color="#ffffff" />
<gradient android:angle="-90" android:startColor="#ffffff" android:endColor="#000000" />
</shape>
</item>
<item android:state_focused="true">
<shape android:shape="rectangle" >
<corners android:radius="10dp" />
<stroke android:width="1dip" android:color="#000000" />
<solid android:color="#ffffff"/>
</shape>
</item>
<item >
<shape android:shape="rectangle" >
<corners android:radius="10dp" />
<stroke android:width="1dip" android:background="#null" />
<gradient android:angle="-90" android:startColor="#C0C0C0" android:centerColor="#C0C0C0" android:endColor="#C0C0C0" />
</shape>
</item>
</selector>

Try to use #android:color/transparent for your background field, it is the android's system color for transparency

How to make relative layout with box shadow

How do i make the relative layout look like the image

There are two ways to create shadow:
If sdk version is lower than 5.0...
A. You can also use android drawable image
android:background="#android:drawable/dialog_holo_light_frame"
B. Use below shadow_round.xml to make a drawable background for shadow of view. android:background="#drawable/shadow_round
<!-- Drop Shadow Stack -->
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#00CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#10CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#20CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#30CCCCCC" />
</shape>
</item>
<item>
<shape>
<padding android:top="1dp" android:right="1dp" android:bottom="2dp" android:left="1dp" />
<corners android:radius="10dp" />
<solid android:color="#50CCCCCC" />
</shape>
</item>
<!-- Background -->
<item>
<shape>
<solid android:color="#ffffff" />
<corners android:radius="10dp" />
</shape>
</item>
If you are using SDK 5.0 or greater then use the view's elevation property.
android:elevation="2dp"

simple add elevation property in your relative layout. or
create xml in drowable folder and call as a background
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ddd" />
<stroke
android:width="5dp"
android:color="#b8b9b9" />
<corners
android:radius="3dp" />
</shape>

Try this code:- radius.xml
:- this xml add in drawable folder in and relative layout in background in set
android:background="#drawable/radius"
<shape android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<stroke android:width="2dp" android:color="#b8b9b9"/>
<corners android:bottomLeftRadius="3dp" android:bottomRightRadius="3dp" android:topLeftRadius="3dp" android:topRightRadius="3dp"/>
</shape>

Add a stroke on top of a layout

I have the following XML code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<stroke
android:width="0dp"
android:color="#CCFFFFFF" />
<solid android:color="#55FFFFFF" />
<padding
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="0dp" />
<corners android:topLeftRadius="0dp" android:topRightRadius="0dp" android:bottomLeftRadius="8dp" android:bottomRightRadius="8dp" />
</shape>
which produces the following:
How do I modify the code so there is a black line on the top like this:

You can add above the text and below the shape in xml file this code
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#000000" />

You should do what with nine-patch or insert View widget with height 1dp (or more) and black background above this TextView.

when the color of the top layer IS NOT semi-transparent, there is a fast, versatil, and clean, to add borders to a view, with layerlist drawable.
Probably you couldnt use it in your case, but it this will be handful to somebody else who reach this question
for this, you create an xml file in you drawable folder, called border.xml with this content:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="0dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#000000" />
</shape>
</item>
<item >
<shape
android:shape="rectangle">
<padding android:left="0dp" android:top="10dp" android:right="0dp"
android:bottom="0dp" />
<solid android:color="#ffffff" />
</shape>
</item>
</layer-list>
Then in your layout, you use
android:background="#drawable/border"
with this you have a way to quickly add borders, to one, or more sides of any view.

adding selector and layer list to edittext

I was planning to add a shadow on my edittext I know how to add shadow but I want also to add a selector on it how can I add selector and shadow at the same time?
selector:
<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_focused="true">
<shape>
<solid
android:color="#3f3f3f"/>
<stroke
android:width="2.3dp"
android:color="#656565" />
<corners
android:radius="2dp" />
</shape>
</item>
<item android:state_pressed="true" android:state_focused="false">
<shape>
<solid
android:color="#3f3f3f"/>
<stroke
android:width="2.3dp"
android:color="#656565" />
<corners
android:radius="2dp" />
</shape>
</item>
<item android:state_pressed="false" android:state_focused="true">
<shape>
<solid
android:color="#3f3f3f"/>
<stroke
android:width="2.3dp"
android:color="#656565" />
<corners
android:radius="2dp" />
</shape>
</item>
<item android:state_pressed="true" android:state_focused="true">
<shape>
<stroke
android:width="2.3dp"
android:color="#F6EBC9" />
<corners
android:radius="10dp" />
</shape>
</item>
<item android:state_enabled="true">
<shape>
<solid
android:color="#3f3f3f"/>
<padding
android:left="4dp"
android:top="4dp"
android:right="4dp"
android:bottom="4dp"
/>
</shape>
</item>
</selector>
shadow:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- most improtant is order of layers -->
<!-- Bottom right side 2dp Shadow -->
<item >
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<!-- Bottom 2dp Shadow -->
<item>
<shape android:shape="rectangle">
<solid android:color="#000000" />
</shape>
</item>
<!-- White Top color -->
<item android:bottom="3px" android:right="3px">
<shape android:shape="rectangle">
<solid android:color="#FFFFFF" />
</shape>
</item>
edittext:
<EditText
android:id="#+id/searchScreen2Edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/textinputborder"
android:ems="10"
android:hint="Search Bus Station..."
android:imeOptions="actionDone"
android:inputType="textVisiblePassword"
android:padding="8dip"
android:textSize="18sp"
android:shadowColor="#000000"
android:shadowDx="1.2"
android:shadowDy="1.2"
android:shadowRadius="1.5"
>
I dont know how to implement the both cause I can add two background at the same time.. how can Do it?