Develop Reference

creating background drawable using layer-list, icon getting stretched

Hi I am trying to create a background drawable for my splash screen which I'll be setting in theme itself. But the bitmap drawable used to keep in the center is getting stretched and I am not able to figure how to keep it normal. Below is my drawable code:
splash_screen_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="360"
android:centerColor="#color/colorAccentXDark"
android:endColor="#color/Black"
android:gradientRadius="500dp"
android:startColor="#color/colorAccentXDark"
android:type="radial"
android:useLevel="false" />
</shape>
</item>
<item
android:bottom="50dp"
android:top="50dp">
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="500dp"
android:innerRadiusRatio="1"
android:shape="oval">
<gradient
android:angle="360"
android:centerColor="#color/colorAccentXDark"
android:endColor="#color/colorAccentXDark"
android:gradientRadius="400dp"
android:startColor="#color/colorAccent"
android:type="radial"
android:useLevel="false" />
</shape>
</item>
<item android:gravity="center">
<bitmap android:src="#drawable/ty_logo" />
</item>
</layer-list>
Here is code where I am setting this drawable as background of an activity:
<style name="TYTheme" parent="SearchActivityTheme.NoActionBar">
<item name="colorPrimaryDark">#color/colorAccentXDark</item>
<item name="android:alertDialogTheme">#style/AlertDialogTheme</item>
<item name="android:windowBackground">#drawable/splash_screen_bg</item>
</style>
So here the bitmap drawable ty_logo is an png is getting stretched in my phone. Since there is no scaleType option with bitmapDrawable I don't know how to handle it.

Add gravity to your bitmap set to center.
<item android:gravity="center">
<bitmap android:src="#drawable/ty_logo"
android:gravity="center" />
</item>

I hope that ty_logo is of suitable pixels and you have provided different pixels image for various device screens (ldpi, mdpi, hdpi, xhdpi, etc).
If not, do go through this answer to a similar problem you find yourself in : Resize images in bitmap in xml
Otherwise, this can be easily solved if your target version is for API 23 as <item> has width,height,gravity attributes provided for them.
And if not, the following code should work, using gravity attribute for bitmap. Again, this is going by the assumption that your logo is not having more pixels than resolution of the devices.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
...
<item>
<bitmap android:src="#drawable/ty_logo"
android:gravity="center" />
</item>
...
</layer-list>

You can wrap bitmap inside ScaleDrawable <scale> and use ScaleDrawable inside LayerListDrawable.
<item android:gravity="center">
<scale android:drawable="#drawable/ty_logo"
android:scaleHeight="80%"
android:scaleWidth="80%" >
</scale>
</item>

Tile with a drawable background exceeds height limit

I made a tile with some "shadow" and rounded corners using the following layer-list:
<?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/background" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<solid android:color="#color/activity_background" />
<corners android:radius="5dp" />
</shape>
</item>
<item android:bottom="3px" android:right="3px">
<shape android:shape="rectangle">
<solid android:color="#color/header" />
</shape>
</item>
</layer-list>
It's used as a background for dynamically loaded views that are not activity layouts, and thus do not cover the whole screen (notifications, for example).
Here's a layout that uses this tile:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:padding="6dp"
android:background="#drawable/tile">
...
</RelativeLayout>
Now I want to use a drawable PNG as the background of the layout. I tried to put it directly as the background of the layout android:background="#drawable/blob_gradient" but then the first view (aka first notification) covers the whole screen. I also tried to use the tile with android:drawable="#drawable/blob_gradient" in its last item, but same results.
I'm sure that the solution is simple, and I probably approach the subject with the wrong attitude. Any help will be appreciated.

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

How Do Create This Type Of Button In Android

How to create this type of button in android. I tried . May I know what is the correct way to achieve my objective?Maybe this question too basic, but i did't find any suitable solution.Please Help me out.
I want to create This
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/green_circle"
android:textSize="20sp"
android:textColor="#android:color/white"
android:clickable="true"
/>
Here is green_circle.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
When i use this ,Button looks
How can i get my desire button. Any Help Appreciated

You defined 1sp (you should use "dp" btw.) circle and you got it.
I think that the easiest way to achieve what you want is using layer list xml element - just put your current drawing as the first layer and put second layer for the centered dot (just solid oval with some margins)
Here you have documentation: http://developer.android.com/guide/topics/resources/drawable-resource.html#LayerList
Simple usage (it's not your's case but I think that it show you what you should to do):
<layer-list >
<item>
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/grey"/>
</shape>
</item>
<item android:bottom="2dp">
<shape android:shape="rectangle">
<corners android:radius="2dp"/>
<solid android:color="#color/green_light"/>
</shape>
</item>
</layer-list>
Key is android:bottom="2dp" that causes that the foreground layer is smaller than the background one.

One way to achieve your desired effect is using a Layer List Drawable. To get a Drawable similar to the image you've posted, try the following
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke android:width="1sp" android:color="#54d66a" />
</shape>
</item>
<item android:top="5dp" android:left="5dp" android:right="5dp" android:bottom="5dp">
<shape android:shape="oval">
<solid android:color="#54d66a" />
</shape>
</item>
</layer-list>

1.use two different images of radio on and off actually what you want and make a xml in drawable :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/check_off" />
<item android:state_checked="true" android:drawable="#drawable/checkbox_on" />
<item android:drawable="#drawable/checkbox_off" />
</selector>
2.and set this drawable as a background on your radio button.

Use an ImageButton:
<ImageButton android:src="#drawable/green_circle" />
The documentation also states how you can have different images depending on the state of the button.

put an image of green circle in drawable folder. then in xml just set background image for your button
<Button
android:id="#+id/Btn1"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#drawable/yourimage"
/>
this will work :)

Can I use multiple shapes in one Android drawable?

What I'm trying to do is define a common background for use in a LinearLayout which frequents my application on many of its Activitys. This particular layout is a header that shows on the top of each activity.
What I'm trying to do is create a drawable that fills the linearlayout with a gradient and has a horizontal line below the gradient.
Does anyone know if this is possible or do I have to do this sort of thing only with nested layouts.
My attemptat the drawable xml is
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#AA000000" android:endColor="#AA333333"
android:angle="270" />
</shape>
</item>
<item>
<shape android:shape="line">
<stroke android:width="3dp" android:color="#FFFFFFFF"
android:dashWidth="1dp" android:dashGap="2dp" />
<size android:height="5dp" />
</shape>
</item>
</selector>

Drawable accepts multiple shapes, (defined always in others files) if i understand your question maybe you can do a Layer drawable (this draws multiple underlying drawables on top of each other)
i write this here, so, i dont tested, but try this and read this fantastic documentation.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_7"/>
<item android:drawable="#drawable/shape_1"/>
</layer-list>
the android complete xml resources
cheers

Use gravity to set your items in layer-list.
for vertical orientation use:
android:gravity="top"
android:gravity="center"
android:gravity="bottom"
for horizontal orientation use:
android:gravity="left"
android:gravity="center"
android:gravity="right"
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap
android:src="#drawable/top_img"
android:gravity="top"/>
</item>
<item>
<bitmap
android:src="#drawable/center_img"
android:gravity="center"/>
</item>
<item>
<bitmap
android:src="#drawable/bottom_img"
android:gravity="bottom"/>
</item>
</layer-list>
Be sure that the parent element has enough space to hold all the items!
Otherwise they will overlap each other