Develop Reference

Create circle button with custom background image

So I have a background texture (image) that I put on all of my buttons. I want to create a circular button with an icon that retains this background texture.
So far, I have noticed it isn't supported to do this on the shape side:
<shape android:shape="rectangle">
<solid android:color="#drawable/myTexture" /> <!-- this isn't supported -->
</shape>
Lastly I would otherwise try to use <layer-list>, however as I stated above, I need to still crop the texture to my shape I'm creating.
Is the only way to do this to make my own circular images that combine the background texture and the button icon? This seems a bit excessive, as I would think there should be a programmatic way to accomplish this, but I could be wrong.
Here is an example of what I mean above:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/myTexture" />
<item>
<shape android:shape="rectangle">
<corners android:radius="40dp" />
<size
android:height="80dp"
android:width="80dp" />
<solid android:color="#color/black" />
</shape>
</item>
</layer-list>
In the picture bellow: black is the circle shape, silver is the texture/image (black for contrast)

I haven't solved the programmatic way, but I did end up creating new graphics that combined the icon and the background texture. Using this singular image, I was able to create circular ImageButton's.

Android 4 does not accept negative inset

I have an ImageView with a layer-list as source. The layer-list consists of an image and a frame. The frame has a negative inset of -4dp. This works great on Android 5 and above, but not on any Android 4 versions (tested on actual devices with 4.3 and 4.4.2).
On Android 5 and above devices, the frame is outside the actual image (the frame width is 4dp) but on Android 4 devices, the frame is inside the image.
layer list xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/image_id">
<bitmap
android:src="#drawable/checker_bmp"
android:antialias="true"/>
</item>
<item android:id="#+id/shadow">
<inset
android:antialias="true"
android:inset="-4dp">
<nine-patch android:src="#drawable/green_shadow"/>
</inset>
</item>
</layer-list>
InsetDrawable exists since API version 1.
I can not use the standard android:src and android:background for image and frame because I have to rotate the image and the background isn't capable of rotating with the ImageView.
Here is the result: The red and black checkerboard is the actual image. The transparent green frame shows the result of the xml on different Android versions. the negative inset should put the green frame around the checkerboard, like it does on Android 5+. On Android 4 it is inside the image, like it is ignored. How to achieve the correct result on Android 4?
EDIT: I found out that android:inset is only available from API level 21 (Android 5). There must be a way to get the same result on API levels below 21... Important is that the image must be able to scale and rotate and that the frame is a nine patch drawable.
EDIT2: Giving the imageview a positive inset instead gives the same result. This is the code I used:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/image_id">
<inset
android:antialias="true"
android:inset="4dp">
<bitmap
android:src="#drawable/checker_bmp"
android:antialias="true"/>
</inset>
</item>
<item android:id="#+id/shadow" >
<nine-patch android:src="#drawable/green_shadow"/>
</item>
</layer-list>
Setting 4dp padding on the image makes the whole image offset by 4dp:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/canvas_image_layer_id" android:top="4dp" android:bottom="4dp" android:left="4dp" android:right="4dp">
<bitmap
android:src="#drawable/canvas_shadow"
android:antialias="true"/>
</item>
<item android:id="#+id/background_shadow" >
<nine-patch android:src="#drawable/canvas_shadow"/>
</item>
</layer-list>

Rather than use a negative inset, put the frame first as a solid color, then put the image as a positive inset into that.

Is it ok to use png as a button background?

Is there is any drawback of using png as a background for a Button or EditText. Or should I write a code for XML for background of Button or EditText. I want to know which is the better way.

You can use color,drawable file or image as background
Color
android:background="#2F6699"
Drawable
android:background="#drawable/edittext_background"
Image
android:background="#drawable/ic_launcher"
Drawable file
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:thickness="0dp"
android:shape="rectangle">
<stroke android:width="2dp"
android:color="#2F6699"/>
<corners android:radius="3dp" />
<gradient android:startColor="#C8C8C8"
android:endColor="#FFFFFF"
android:type="linear"
android:angle="270"/>
</shape>

I think you can try 9 patch image for button and edittext background.
9 Patch:
9-Patch images are stretchable, repeatable images reduced to their
smallest size; users draw a right and bottom, solid black 1 pixel
border to tell the system how to place the content within the image.
For more information visit this post:
Utility of android nine patch

just put png image into drawable, and than set it in xml via android:background="#drawable/image.png"

Use it in button properties
android:background="#drawable/imageName"

How to center vector drawable in layer-list without scaling

I am attempting to use a VectorDrawable in a LayerList without scaling the vector. For example:
<layer-list>
<item android:drawable="#color/grid_item_activated"/>
<item android:gravity="center" android:drawable="#drawable/ic_check_white_48dp"/>
</layer-list>
The drawable ic_check_white_48dp id defined as:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFFFF"
android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>
The desired effect is for the check icon to be centered in the layer drawable, without scaling. The issue is, the layer-list above causes the check icon to be scaled to fit the layer size.
I can produce the desired effect if I replace the vector drawable with PNGs for each density and modify the layer-list as such:
<layer-list>
<item android:drawable="#color/grid_item_activated"/>
<item>
<bitmap android:gravity="center" android:src="#drawable/ic_check_white_48dp"/>
</item>
</layer-list>
Is there any way I can do this using a VectorDrawable?

I ran into the same problem trying to center vectors drawables on a layered list.
I have a workaround, its not exactly the same but it works, you need to set a size for the entire drawable and add padding to the vector item:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<size android:height="120dp" android:width="120dp"/>
<solid android:color="#color/grid_item_activated"/>
</shape>
</item>
<item android:top="24dp"
android:bottom="24dp"
android:left="24dp"
android:right="24dp"
android:drawable="#drawable/ic_check_white_48dp"/>
</layer-list>
The size of the shape above sets the size of the entire drawable, 120dp in this example, the padding on the second item, 24dp in this example, centers the vector image.
Its not the same as using the gravity="center" but its working way of using vectors in API 21 and 22.

Been struggling with the same problem. The only way I found to fix this and avoid the drawable to scale up was to set the drawable size and using gravity to align it:
<layer-list>
<item android:drawable="#color/grid_item_activated"/>
<item
android:gravity="center"
android:width="48dp"
android:height="48dp"
android:drawable="#drawable/ic_check_white_48dp"/>
</layer-list>
Hope it helps!

Edited solution that will make your SplashScreen look great on all APIs including API21 to API23
First of all read this article and follow the GOOD way of making a splash screen.
If your logo is distorted or wont fit and you are only targeting APIs24+ you can simply scale down your vector drawable directly in its xml file like so:
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="640"
android:viewportHeight="640"
android:width="240dp"
android:height="240dp">
<path
android:pathData="M320.96 55.9L477.14 345L161.67 345L320.96 55.9Z"
android:strokeColor="#292929"
android:strokeWidth="24" />
</vector>
in the code above I am rescaling a drawable I drew on a 640x640 canvas to be 240x240. then i just put it in my splash screen drawable like so and it works great:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque"
android:paddingBottom="20dp" android:paddingRight="20dp" android:paddingLeft="20dp" android:paddingTop="20dp">
<!-- The background color, preferably the same as your normal theme -->
<item>
<shape>
<size android:height="120dp" android:width="120dp"/>
<solid android:color="#android:color/white"/>
</shape>
</item>
<!-- Your product logo - 144dp color version of your app icon -->
<item
android:drawable="#drawable/logo_vect"
android:gravity="center">
</item>
</layer-list>
my code is actually only drawing the triangle in the picture at the bottom but here you see what you can achieve with this. Resolution is finally great as opposed to the pixelated edges I was getting when using bitmap. so use a vector drawable by all means (there is a site called vectr that I used to create mine without the hasle of downloading specialized software).
EDIT in order to make it work also on API21-22-23
While the solution above works for devices runing API24+ I got really disappointed after installing my app a device running API22. I noticed that the splashscreen was again trying to fill the entire view and looking like shit. After tearing my eyebrows out for half a day I finally brute-forced a solution by sheer willpower.
you need to create a second file named exactly like the splashscreen xml (lets say splash_screen.xml) and place it into 2 folders called drawable-v22 and drawable-v21 that you will create in the res/ folder (in order to see them you have to change your project view from Android to Project). This serves to tell your phone to redirect to files placed in those folders whenever the relevant device runs an API corresponding to the -vXX suffix in the drawable folder, see this link. place the following code in the Layer-list of the splash_screen.xml file that you create in these folders:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:opacity="opaque">
<!-- The background color, preferably the same as your normal theme -->
<item
android:gravity="center">
<shape android:shape="rectangle">
<solid android:color="#android:color/white"/>
</shape>
</item>
<!-- Your product logo - 144dp color version of your app icon -->
<item
android:gravity="center">
<bitmap
android:gravity="center"
android:src="#drawable/logo_vect"/>
</item>
</layer-list>
For some reason for these APIs you have to wrap your drawable in a bitmap in order to make it work and jet the final result looks the same. The issue is that you have to use the aproach with the aditional drawable folders as the second version of the splash_screen.xml file will lead to your splash screen not being shown at all on devices running APIs higher than 23. You might also have to place the first version of the splash_screen.xml into drawable-v24 as android defaults to the closest drawable-vXX folder it can find for resources.

I'm currently working on a splash screen with a vector drawable centered both horizontally and vertically. Here is what I got on API level 25:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
<!-- background color, same as theme -->
<item android:drawable="#android:color/white"/>
<!-- app logo -->
<item
android:drawable="#drawable/my_app_logo"
android:gravity="center_horizontal|center_vertical"
android:width="200dp"
android:height="200dp"
/>
</layer-list>
If you want to adjust the vector drawable's dimension, modify android:width and android:height attributes above, not necessarily modify the original drawable.
In addition, my experience is DO NOT put the vector drawable in a bitmap tag, which never works for me. Bitmap is for .png, .jpg and .gif format file, not for vector drawable.
Reference
https://developer.android.com/guide/topics/resources/drawable-resource#LayerList
https://developer.android.com/guide/topics/resources/more-resources.html#Dimension

Layout Background partially transparent

I want to set a transparent background. Maybe 20% of gray
but i also want to have a small part of the background being completely transparent (a rectangle or a circle in the layout):
Is that possible? later i want the rectangle (or the circle) to be moveable and scaleable.

This is easily achievable with a custom drawable like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="0dp"
android:shape="rectangle"
android:thicknessRatio="1.9"
android:useLevel="false">
<solid android:color="#android:color/transparent"/>
<stroke
android:width="125dp"
android:color="#CC000000"/>
</shape>
When you overlay that drawable on top of an image the results would looks something like this:
By creating that drawable dynamically in code you can adjust it at runtime. For example:
ShapeDrawable drawable = new ShapeDrawable(new RectShape());
drawable.getPaint().setColor(0xCC000000);
drawable.getPaint().setStyle(Paint.Style.STROKE);
drawable.getPaint().setStrokeWidth(dpToPixel(125.0f));
someView.setBackground(drawable);
You can influence the shape of the hole in the middle by combining multiple layers in a LayerDrawable.
You can also influence the general shape of the hole by setting the android:shape tag of the <shape /> element in the custom drawable.