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>

When I create a 9 patch image for splash screens, it comes out way too small for larger devices

I've decided to use a 9 patch image for my splash screens.
The problem is, on larger devices, that the Splash Image is way too small, and I want my splash to take up the majority of the screen.
On smaller devices it is fine.
I don't think I am creating these 9 patch Images the correct way.
Can somebody point me to a some site, or GitHub repository that uses a 9 patch splash screen image that takes up most of the screen size on all devices?
I want to put this in my app and see what I'm doing wrong.
SplashTheme.xml
<resources>
<style name="SplashTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:windowBackground">#drawable/splashscreen</item>
<item name="android:windowNoTitle">true</item>
</style>
</resources>
splashscreen.xml
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle" > //This is so I can have a white background
<solid android:color="#FFFFFF" />
</shape>
</item>
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/splash"
android:tileMode="disabled"
android:gravity="center"
/>
</item>
</layer-list>

This
<item>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/splash"
android:tileMode="disabled"
android:gravity="center"
/>
</item>
must be changed to
<item>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/splash"
android:tileMode="disabled"
android:gravity="center"
/>
</item>
Reference: http://developer.android.com/guide/topics/resources/drawable-resource.html#NinePatch

Inbox SwitchCompat button

Today I saw the Inbox App.
(source: cbsistatic.com)
I'd like to know how can I make THAT switch button on the toolbar (left of searchButton).
I didn't find references to (Or I don't search a lot).
thanks ^^

This is an old question. But I'd like to answer to this question because I found a way of achieving the same thing without using any third party library.
1 - Add SwitchCompat to your layout
<android.support.v7.widget.SwitchCompat
style="#style/SwitchCompatStyle"
android:id="#+id/toolbar_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"/>
2 - Create an XML shape. switch_thumb_on.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<!--shadow color-->
<solid android:color="#color/colorGray2" />
</shape>
</item>
<!--padding to have shodow effect-->
<item
android:bottom="1dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<!--switch thumb color-->
<shape android:shape="oval">
<solid android:color="#color/colorWhite" />
</shape>
</item>
<item
android:bottom="1dp"
android:left="0.5dp"
android:right="0.5dp"
android:top="0.5dp">
<!--switch image-->
<!--NOTE: switch_color_selector is not a color but a selector-->
<bitmap
android:src="#drawable/ic_network_on"
android:tint="#color/switch_color_selector" />
</item>
</layer-list>
ic_network_on is icon that is shown on switch thumb. You can add states/selector here if you like. switch_color_selector tints the icon according to the state switch is in.
3 - Here's the color selector switch_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorAccent" android:state_checked="true" />
<item android:color="#color/colorGray1" />
</selector>
4 - Create a style to be applied on the Switch added in first step.
<style name="SwitchCompatStyle" parent="Widget.AppCompat.CompoundButton.Switch" >
<item name="android:thumb">#drawable/switch_thumb_on</item>
<item name="trackTint">#color/switch_color_selector</item>
</style>
And thats the result I got.
Cheers.

Here you go. https://android-arsenal.com/details/1/1985
You can find similar material in the same site. Its easy to reuse something that is already available. Cheers!! Happy coding!

How to make button style with xml definition shown correct on real android device instead of emulator?

Following code run correct on emulator. But wrong on real device.
I have 3 xml files for corresponding button status: button_default.xml\button_pressed.xml\button_selected.xml. Here is one of them. Others are same with it except for colors.
<?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="#FF484747" />
<corners
android:topLeftRadius="5px"
android:topRightRadius="5px"
android:bottomLeftRadius="5px"
android:bottomRightRadius="5px" />
</shape>
</item>
<item android:top="1px" android:bottom="1px" android:left="1px" android:right="1px">
<shape>
<gradient
android:startColor="#FF484747" android:endColor="#FF000000"
android:type="linear" android:angle="270"
android:centerX="0.5" android:centerY="0.5" />
<corners
android:topLeftRadius="5px"
android:topRightRadius="5px"
android:bottomLeftRadius="5px"
android:bottomRightRadius="5px" />
</shape>
</item>
</layer-list>
Then I wrote button.xml as following:
<?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/button_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/button_selected" />
<item android:drawable="#drawable/button_default" />
</selector>
Last is the styles.xml file:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="button" parent="android:Widget.Button">
<item name="android:background">#drawable/button</item>
</style>
</resources>
This is the view on emulator(it's same on emulator 2.3 and 4.0):
(I can't upload image now. you can find it here:http://i.stack.imgur.com/uVtd9.jpg)
But it will be a yellow background button when I install the *.apk to my android pad(with android 2.3).
Anyone can provide me any direction to solve it? Thanks in advance!!!

Maybe your button is getting Highlighted? Does your emulator have the same specs as your phone? (Touchscreen specially)
Try adding another one into your Activity (If you only have one) and play with it.

Your selector has the state "android:state_focused" which defines the color of the button when the button has a focus on it. Try to use "android:state_selected" and see if it helps.
Btw, I would recommend to replace all the "5px" in your xml files to "5dp" to make it suitable for different screen densities.

Is there a way to set drawable's Alpha using XML?

Easy like itself . I wanna make an alpha button , which would have a selected drawable this way:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:state_selected="false" android:drawable="#drawable/item" />
<item android:state_selected="true" android:drawable="#drawable/item" />
</selector>
I would wanna make something like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:alpha="125" android:state_selected="false" android:drawable="#drawable/item" />
<item android:alpha="255" android:state_selected="true" android:drawable="#drawable/item" />
</selector>
Thanks for all .

It's been a while since the OP, but personally found a solution that worked a lot better for me than the suggested answers. Creating a BitmapDrawable makes is easily possible to set the alpha:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_drawble"
android:alpha="77">
</bitmap>
Alpha can be any value between 0 and 255. Note that it is sort of the inverse of the HEX color value alpha, as for example 70% alpha would be B3 in HEX and 77 in the BitmapDrawable.

I achieved the same using a drawable
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#5000ddff" />
</shape>
Over here used the alpha 50, which sets the opacity level.

I have been looking for the same thing. Even though this is posted over four years ago, this is the top post when googling the issue, so I'll reply here.
This is my solution
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<bitmap android:alpha="#integer/not_pressed_alpha" android:src="#drawable/item"/>
</item>
<item android:state_pressed="true" android:drawable="#drawable/item" />
</selector>

For those who have the same problem as OP, AppCompat now allows you to set 'alpha' parameter, as he wished in his target code:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Play/Pause -->
<item android:alpha="125" android:state_selected="false" android:drawable="#drawable/item" />
<item android:alpha="255" android:state_selected="true" android:drawable="#drawable/item" />
</selector>
More info here.

My goal was to make a button have it's selected and pressed states at a different alpha - but using the same (png) resource and affecting as few files as possible.
My solution is similar to altering the alpha in a BitmapDrawable - but it does it from the selector so only one file is affected.
Use the tint function of Bitmap, remember that the tint will color the existing pixels so use a white color.
Eg, #80FFFFFF - to keep color as original but reduce alpha by 50%
This could also be used to change color of the icon when pressed.
This is my drawable XML file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true">
<bitmap
android:src="#drawable/ic_camera"
android:tint="#80FFFFFF">
</bitmap>
</item>
<item android:state_pressed="true">
<bitmap
android:src="#drawable/ic_camera"
android:tint="#80FFFFFF">
</bitmap>
</item>
<item>
<bitmap
android:src="#drawable/ic_camera">
</bitmap>
</item>
</selector>

I'm using the following for a custom radio button which should be diagonally strikethrough when it is disabled.
Example Image of 5 radio buttons where 4 of them are enabled
<item android:state_enabled="false">
<layer-list>
<item>
<shape android:shape="rectangle">
<size
android:height="35dp"
android:width="35dp"/>
<stroke
android:color="#color/someGrey"
android:width="1dp"/>
<corners android:radius="1dp"/>
</shape>
</item>
<item>
<rotate
android:fromDegrees="135"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="135">
<shape android:shape="line">
<stroke
android:color="#color/someGrey"
android:width="1dp"/>
</shape>
</rotate>
</item>
</layer-list>
</item>

I agree with Kasium sugest, so for some Android versions the especification to Alpha is in percent.
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/your_drawble"
android:alpha="0.5">
</bitmap>

i think you could create your own drawable which could take this argument as a parameter. i've never done such a thing though.
check out this link :
How to set alpha value for drawable in a StateListDrawable?
if that's not possible, you can always do it in code...
here are 2 links i've found about it, in case you wish to use bitmaps instead:
https://plus.google.com/+RomanNurik/posts/FZQcNW8G75K
https://gist.github.com/romannurik/5779875

Its not that simple but its possible:
First you have to define color in color folder of your resources like this:
color/inst_control_pressed_transp.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.5" android:color="?attr/inst_control_pressed" />
</selector>
Now you can reference that color from some shape:
drawable/background_clear_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="#color/inst_control_pressed_transp" />
</shape>
Tha you can use it in drawable:
drawable/background_bordered_clear_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/background_clear_pressed" android:state_pressed="true" android:state_selected="false" />
<item android:drawable="#drawable/background_clear_active" android:state_activated="true" />
<item android:drawable="#drawable/background_clear_selected" android:state_selected="true" />
<item android:drawable="#drawable/background_bordered_clear_round" />
</selector>