Develop Reference

Gravity for xml drawable

I want to create a custom View based on ImageView to make a widget as below where the drawable source is the camera and the background is the rectangle with the tick sign:
The problems are:
I can not create the border with the tick sign on the right: the tick is stretched fullscreen instead of staying at the bottom right.
The tick sign is sometime behind the image if I set it with android:background.
Here are my xml files:
The current border xml drawable
<?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="#android:color/transparent"/>
<stroke
android:width="2dip"
android:color="#color/bg_black"/>
<padding
android:left="3dp"
android:right="3dp"
android:top="3dp"
android:bottom="3dp"
/>
</shape>
</item>
<item >
<layer-list >
<item>
<shape
android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#color/border_yellow"/>
<size
android:width="37dp"
android:height="37dp"/>
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp"/>
</shape>
</item>
<item android:drawable="#drawable/ic_tick"/>
</layer-list>
</item>
</layer-list>
The Image Button xml layout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/product1"
android:background="#drawable/toggle_rectangle_check"/>
Thanks for your time.

I'm not sure if this is the sort of solution you'd be looking for but instead of having an xml file with the styling in it, I believe it would be better to have a layout file which defines your layout for your custom Widget, Something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customWidgetBox"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/customCheckmark"
android:gravity="bottom|right" />
</LinearLayout>
And to the drawable folder you would need to add both the customCheckmark.xml and customWidgetBox.xml
customCheckmark.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/check_mark">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
customWidgetBox.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<item android:drawable="#drawable/camera">
<stroke android:width="3dp" android:color="#color/blue_button_border" />
</item>
</shape>
Not sure if this code accomplish exactly what you want, but it'll be a good help to get you started because this is definitely the way to do it! :)
Some links that might be interesting for examples:
Set border and background color of textView
Drawable Resource, Android API
how to put a border around an android textview
Tips & Tricks -XML Drawables Part 1

layer-list drawable not drawn correctly

I am trying to create a simple layer-list drawable for my Android app. When I set the drawable as src of an ImageView it is not drawn correctly:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Just two ovals with a little offset to each other. Nothing special (just a test) but it does not work.
It seems that android:left|right|bottom|top is the problem. If I use only of of these commands the drawable is drawn correctly. If two or more are used the ImageView stays empty.
Works:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
<item>
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
Does NOT work (like the first example):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="..." >
<item android:top="20dp" android:left="20dp">
<shape android:shape="oval">
<solid android:color="#color/dark_gray" />
</shape>
</item>
</layer-list>
What is wrong here?
EDIT: # Rod_Algonquin
I use a quite simple layout to test the drawable:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:background="#aaa" >
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/testDrawable" >
</ImageView>
</LinearLayout>
It seems that the number of android:left|right|bottom|top arguments is not the source of the problem but the concrete value being used.
This drawable works fine and:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="2dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
This one does not draw anything (the ImageView is just transparent):
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:top="1dp">
<shape android:shape="oval">
<solid android:color="#0f0" />
</shape>
</item>
</layer-list>
The only difference here is the value of android:top. 1dp does not work. 2dp works without any problem.
Any idea?

The problem is that you are using the layer-list drawable as an image resource of the ImageView. android:src will only accept an image not a drawable thus giving you nothing in there.
solution:
Instead of putting it in the android:src put it in the background where you can freely use the drawable.
<ImageView
android:id="#+id/image_logo"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#drawable/testDrawable" >
</ImageView>

Adding image and border to a layout in Android

There are many useful links here describing how to add a border to layout in android and there also others describing how to add a image as background to a layout. But they are working seperately.
I have a textview in my app and I want to add a background image to it and also a border.
I searched around but haven't found anything.
Here is the seperate code for my XML files:
Background Image:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/TitlePattern"
android:tileMode="repeat" />
Border:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#FFFFFF"/>
<stroke android:width="2dip" android:color="#635E5E" />
<padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>
How can I give my textview both of them?

You can use layer-list. Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<color android:color="#ffffff" />
</item>
<item
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp">
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/TitlePattern"
android:tileMode="repeat" />
</item>
</layer-list>

Include your textview with background, inside a layout with border

View with Solid Background and Top+Bottom Inner Shadows

Essentially, I am trying to create the following background:
The traditional gradient which use in the drawable that I use for background only supports start color, middle color and end color.
However, as you can see from the mockup, I am trying to create only a slight overlay/shadow at the top and bottom of the shape, with a #50000000 color (black with 50% opacity).

If you're using this inside a Layout view, then you can simply create a View with a gradient background and place it in the beginning and in the end of the Layout.
For example:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/parent">
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:background="#drawable/gradient" />
<!-- Your other child views -->
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:background="#drawable/gradient" />
</LinearLayout>
And your gradient.xml file will have this:
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#FFFFFF" android:endColor="#000000" android:angle="90"/>
</shape>
You can specify the blue background color to the parent layout.
You'll essentially get something like this:
[EDIT]
You can create two drawables - gradient_top.xml and gradient_bottom.xml to get the angle right

I prefer doing this than having to mess around with 9-Patches. Although, having said that, I wish Google would get on with providing built-in support for drop shadows, since they're so common.
Just to build on JoelFernandez solution with a more complete example:
The Container:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="[your_container_height]"
android:background="#drawable/container_bg_color">
<View
android:layout_width="match_parent"
android:layout_height="12dp"
android:layout_alignParentTop="true"
android:background="#drawable/container_gradient_top"/>
<View
android:layout_width="match_parent"
android:layout_height="12dp"
android:layout_alignParentBottom="true"
android:background="#drawable/container_gradient_bottom" />
<!-- Insert your content here -->
</RelativeLayout>
The Background Color (container_bg_color.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<gradient android:startColor="#4a6fb4"
android:endColor="#color/deepBlue"
android:angle="135"/>
</shape>
The Top Gradient (container_gradient_top.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<gradient
android:startColor="#00222222"
android:centerColor="#11111111"
android:endColor="#44000000"
android:angle="90"/>
</shape>
The Bottom Gradient (container_gradient_bottom.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<gradient
android:startColor="#44000000"
android:centerColor="#11111111"
android:endColor="#00222222"
android:angle="90"/>
</shape>
Result:

Elaborating #ramaral's answer, build this drawable:
<?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="#FF408DAA"/>
</shape>
</item>
<item android:top="0dip" android:bottom="32dip">
<shape android:shape="rectangle">
<gradient android:startColor="#00000000" android:endColor="#50000000" android:angle="90"/>
</shape>
</item>
<item android:top="32dip" android:bottom="0dip">
<shape android:shape="rectangle">
<gradient android:startColor="#50000000" android:endColor="#00000000" android:angle="90"/>
</shape>
</item>
</layer-list>
You would need to set a fixed height in the view, in order to achieve the best result. In my case I was setting the height to "36dip". Notice that the "32dip" is the amount of space from where the gradient ends to the end of the drawable, so that would leave me with a top and bottom gradients of "4dip" (36-32=4 :p)

Start with this:
Create a drawable:
<?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="#408DAA"/>
</shape>
</item>
<item >
<shape android:shape="rectangle">
<solid android:color="#50000000"/>
</shape>
</item>
<item android:top="10dip" android:bottom="10dip">
<shape android:shape="rectangle">
<solid android:color="#408DAA"/>
</shape>
</item>
</layer-list>
Use it as background of any view.
Adjust top, bottom and color="#408DAA" according your needs

How can I set shadows to Android views using 9-patch images [duplicate]

I want to know how to add a shadow layer to any general View in android. for eg: suppose i have a layout xml, showing something like this..
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
<Button....
...
</LinearLayout>
Now when it is displayed I want to have a shadow around it.

The best way to create a shadow is to use a 9patch image as the
background of the view (or a ViewGroup that wraps the view).
The first step is to create a png image with a shadow around it. I
used photoshop to create such an image. Its really simple.
Create a new image with Photoshop.
Add a layer and create a black square of 4x4.
Create a shadow on the layer by selecting the layer in layer
explorer and clicking on a button titled fx and choosing drop shadow.
Export the image as png.
The next step is to create 9-patch drawables from this image.
Open draw9patch from android-sdk/tools
Open the image in draw9patch
Create 4 black lines on the four sides of the square like the
following and then save the image as shadow.9.png.
Now you can add this shadow as the background of the views you want to
add the shadow to. Add shadow.9.png to res/drawables. Now add it
as a background:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/shadow"
android:paddingBottom="5px"
android:paddingLeft="6px"
android:paddingRight="5px"
android:paddingTop="5px"
>
I recently wrote a blog post that explains this in detail and
includes the 9patch image that I use for creating the shadow.

Assuming u would use a linear layout(i have considered a vertical linear layout)..and have a view just below your linear layout.Now for this view provide a start colour and end colour..
I also wanted to get this thing,its working for me..If you need a even better effect,then just work around the start and end colour.
activity_main
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/vertical"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#drawable/layout_back_bgn"
android:orientation="vertical" >
</LinearLayout>
<View
android:layout_below="#+id/vertical"
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="#drawable/shadow"
>
</View>
</LinearLayout>
layout_back_bgn.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#FF4500" />
</shape>
shadow.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:startColor="#4D4D4D"
android:endColor="#E6E6E6"
android:angle="270"
>
</gradient>
</shape>
I tried to post an image which i have it after using the above code,but stackoverflow doesnot allow me coz i dont have reputation..Sorry about that.

You can use elevation, available since API level 21
The elevation of a view, represented by the Z property, determines the
visual appearance of its shadow: views with higher Z values cast
larger, softer shadows. Views with higher Z values occlude views with
lower Z values; however, the Z value of a view does not affect the
view's size. To set the elevation of a view:
in a layout definition, use the
 
android:elevation
 attribute. To set the elevation of a view in the code of an activity,
use the
View.setElevation()
 method.
Source

Here's my cheesy version of the solution...This is the modification of the solution found
here
I didn't like how the corners look so I faded all of them...
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Layer 0-->
<!--Layer 1-->
<!--Layer 2-->
<!--Layer 3-->
<!--Layer 4 (content background)-->
<!-- dropshadow -->
<item>
<shape>
<gradient
android:startColor="#color/white"
android:endColor="#color/white"
android:centerColor="#10CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#color/white"
android:endColor="#color/white"
android:centerColor="#20CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#color/white"
android:endColor="#color/white"
android:centerColor="#30CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#color/white"
android:endColor="#color/white"
android:centerColor="#40CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="#color/white"
android:endColor="#color/white"
android:centerColor="#50CCCCCC"
android:angle="180"/>
<padding android:top="0dp" android:right="0dp" android:bottom="2dp" android:left="0dp" />
</shape>
</item>
<!-- content background -->
<item>
<shape>
<solid android:color="#color/PostIt_yellow" />
</shape>
</item>

There are a simple trick, using two views that form the shadow.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="10dp"
android:background="#CC55CC">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:stretchColumns="0">
<TableRow>
<LinearLayout
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:text="#string/hello" />
</LinearLayout>
<View
android:layout_width="5dp"
android:layout_height="fill_parent"
android:layout_marginTop="5dp"
android:background="#55000000"/>
</TableRow>
</TableLayout>
<View
android:layout_width="fill_parent"
android:layout_height="5dp"
android:layout_marginLeft="5dp"
android:background="#55000000"/>
</LinearLayout>
</FrameLayout>
Hope this help.

Create card_background.xml in the res/drawable folder with the following code:
<?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="#BDBDBD"/>
<corners android:radius="5dp"/>
</shape>
</item>
<item
android:left="0dp"
android:right="0dp"
android:top="0dp"
android:bottom="2dp">
<shape android:shape="rectangle">
<solid android:color="#ffffff"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
Then add the following code to the element to which you want the card layout
android:background="#drawable/card_background"
the following line defines the color of the shadow for the card
<solid android:color="#BDBDBD"/>

</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/dropShadow" />
Use Just Below the LinearLayout
Another Method
create "rounded_corner_bg.xml" in /drawable folder
<?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="#color/primaryColor" />
<corners android:radius="4dp" />
</shape>
</item>
<item
android:bottom="2dp"
android:left="0dp"
android:right="0dp"
android:top="0dp">
<shape android:shape="rectangle">
<solid android:color="#F7F7F7" />
<corners android:radius="4dp" />
</shape>
</item>
</layer-list>
To use this Layout android:background="#drawable/rounded_corner_bg"