Develop Reference

Android - Linear gradient does not work as expected in emulator

I am testing gradients for an app and linear gradient does not work as expected for me in Pixel XL API 29 emulator, the gradient colors are not connected and looked like multiple solid color rectangles. is there a way to fix this?
Also radial gradient worked for me on the emulator (the buttons bellow)
I tried testing it on a different emulator (Nexus One API 29) and it worked. I also tested it on my phone and it worked.
I like the Pixel XL API 29 emulator and if it is possible I want to fix this so I will be able to continue working with it.
The first emulator is the nexus one API 29 and to second one is the pixel XL API 29
my gradient code (menu_background_gradient.xml)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<gradient
android:startColor="#091622"
android:centerColor="#04090E"
android:endColor="#0A1121"
android:type="linear"
/>
</shape>
</item>
</selector>
and in my activity_main.xml I apply the gradient to LinearLayout with android:background="#drawable/menu_background_gradient"

Using layer-list to display some drawable images

Android studio 2.0 Preview 3b
Hello,
I have created the following layout that I want to use for a background for my app. I am using the layer-list and I want to display a bowl of peas in 2 locations. Everything looks ok in the preview, but when I run on genymotion or some cheap Chinese devices the image stretches across the screen. However, on the Android AVD, everything looks fine and on my Nexus 5 (real device) everything works ok.
This is what I want and this is how it's displayed in the AVD and Nexus 5. As you can see there is no problem.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:centerX="0.5"
android:centerY="0.3"
android:endColor="#08e25b"
android:gradientRadius="300dp"
android:startColor="#b7e9c9"
android:type="radial" />
</shape>
</item>
<item
android:width="48dp"
android:height="48dp"
android:left="350dp"
android:top="400dp">
<bitmap android:src="#drawable/peas" />
</item>
<item
android:width="68dp"
android:height="68dp"
android:drawable="#drawable/peas"
android:left="-20dp"
android:top="480dp" />
</layer-list>
I have placed peas.png file in drawable-nodpi and just add the width and height in the layer-list
And when I run on the genymotion and some cheap smart devices I get the following:
Just quick summary.
Nexus 5 real device and AVD devices works ok
Genymotion and cheap smart devices doesn't display correctly
I am just confused in what I should believe. I have tried to use the bitmap as well to see if that would make any difference.
Many thanks for any suggestions.

Update your layer-list as follows
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:centerX="0.5"
android:centerY="0.1"
android:endColor="#08e25b"
android:gradientRadius="300dp"
android:startColor="#b7e9c9"
android:type="radial" />
</shape>
</item>
<item
android:width="48dp"
android:height="48dp"
android:bottom="68dp"
android:right="-20dp">
<bitmap
android:gravity="bottom|right"
android:src="#drawable/peas" />
</item>
<item
android:width="68dp"
android:height="68dp"
android:bottom="-20dp"
android:left="-20dp">
<bitmap
android:gravity="bottom|left"
android:src="#drawable/peas" />
</item>
</layer-list>

Place your images in all density folders (xxhdpi, xhdpi, hdpi).
The system picks image resources based on screen resolution.

Missing display of rounded corners in Android shape drawable (only on Samsung Galaxy Tab 7.0)

I'm just trying to display a stroked rectangle (stroke width 1dp) with rounded corners (radius 3dp). Everything looks fine on most devices, but the corners are not displayed correctly on Samsung Galaxy Tab 7.0 plus N.
Here's the code:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#00000000"/>
<stroke android:width="1dp" android:color="#color/borderGreen"/>
<corners android:radius="3dp" />
</shape>
And here are the results. It's looking good on Kindle Fire HD (for example), but not so good on the Galaxy Tab:
The Kindle has a higher screen resolution, but it also looks ok on devices with resolutions lower than the Galaxy Tab's. Do you have any ideas on how to circumvent this problem or will I just have to live with it?

This issue happened to me when I was adding two rectangle shapes - one containing the other one (to achieve a double-border background in my case).
I was however only applying a corner radius to the outer rectangles and not the inner one. This was causing the effect of cut out or missing rounded corners.

Designing an app for Android Phone and Tablet

I will start with very simple basic question, How do i keep an button image for tablet and phone,
I have an button which i want to use width as full_parent, which make my button good, Now what happen if I have different - 2 layout.
I am aware of multiple layout concept, but the how can i ensure that my button image will not stretch to fit into my screen
So I thought to use dpi, but dpi will not solve problem
if you view this image as Phone app, and button "Test this button" and about layout "test" is similiar in width,
Now what is best approach to achieve the same behavior in tablet also.
will it work for all size of devices? or do we need to go with different approach?
Most of the problem i am facing is because of static images, I tried to use different-2 dpi for this, but I think dpi is not device size dependent, because same width device can have different-2 dpi
I need to understand approach for implementing on one app for each device.

Add into the drawable folder name with xyz.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape android:shape="rectangle">
<gradient android:startColor="#000000" android:endColor="#333333" android:angle="90"/>
<corners android:radius="5dp"/>
</shape>
</item>
</layer-list>
And in your layout where you crate the button add into
android:background="#drawable/xyz"
You'll get what you want

Padding issue on Nexus 7 tablet

I'm noticing some issues with padding on the Nexus 7 tablet running Android 4.1. Specifically, I have a background drawable with padding that creates a outer stroke:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<stroke
android:width="1dp"
android:color="#59000000" />
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp" />
</shape>
This is supplemented with a 1dp white inner stroke. So it should be a square 2 dp border around the entire image:
I have tested it on the actual nexus device and on several other devices and the 7 inch jelly bean emulator:
First, here is the working version from the 4.1 7 inch emulator:
The border around the outside is even and goes around the entire image. This is how it works on all the other devices i have as well.
Nexus 7:
The gray is the background color, but you can see the right and bottom padding is not being respected. The border is being obscured by the the image now.
If it matters, these are children of a GridView. Wonder if anyone has seen these issues or has ideas on how to resolve them.

This appears to be a bug when generating the stroke in the XML drawable. After multiple attempts, I've narrowed it down to that; it seems to be making the stroke size incorrectly on the lower and right sides of the shape, even if specified in pixels. If I simply change the stroke width to 2dip instead of 1dip (all other things staying as they are), this is the result:
This is the border.xml I used for the background of the after image:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="2dp"
android:color="#59000000"/>
<padding
android:bottom="1dp"
android:left="1dp"
android:right="1dp"
android:top="1dp"/>
</shape>
Which, again, is just yours with the stroke width enlarged. The good thing is, this won't change the expected result at all since the padding remains the same. In fact, you can change the stroke tag to solid and still have the same result (however, if your images contain transparency you'd see the solid background in the transparent areas).
Give this a try; let me know how it works for you!