Android - Linear gradient does not work as expected in emulator - android

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"

Related

Progress bar in android widget not animated in real terminals

I'm designing a widget that includes a ProgressBar with my own animation and style.
For that, I define a drawable with a layer-list:
refresh_animation_indeterminate.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:drawable="#mipmap/ic_refresh"
android:interpolator="#android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:fromDegrees="72"
android:toDegrees="1440"/>
</item>
</layer-list>
then a style using this drawable
<style name="WidgetProgressBarStyle" parent="#android:style/Widget.ProgressBar">
<item name="android:indeterminateDrawable">#drawable/refresh_animation_indeterminate</item>
</style>
and then I use the style in my ProgressBar within the widget
<ProgressBar
android:id="#+id/widgetProgressBar"
style="#style/WidgetProgressBarStyle"
android:layout_width="50dp"
android:layout_height="50dp" />
The problem I have is that though the ProgressBar is animated without issues in AVD simulated devices (I tried with a couple of emulated devices using APIs 30 and 24, Pixel 2 XL and Pixel 3a XL), in real terminals simulation does not progress beyond first frame; that is, the icon is stuck at 72 degrees (=fromDegrees). I have tried in two Samsung devices (one with API 30 and another old one with API 24) and a LG with API 28. It is the same in all of them. But working perfectly in emulators in the meantime.
Am I missing something here? Why does it work in emulators but not in real terminals? Is there something I should configure for real terminals? (either in my app or in the terminal)
Thanks a lot in advance! (And sorry if I didn't fill the right information, as this is the first time I post a question here)
I think I found the answer. I tried in a 4th terminal and there it worked. Issue is related with the windows manager that I use.
In the terminals where I have "Go Launcher", animations in widgets are not working properly, that's why they were not animated. If I use the default windows manager in the device, everything works perfectly and smooth

Background gradient result in color banding

I tried to do some linear gradient on my background for my app, and it resulted with color banding.
What I did:
I created a shape called window_background_app.xml
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="45"
android:endColor="#Fe005694"
android:startColor="#fe2D8ACC"
android:type="linear" />
</shape>
I used that shape in a style to apply to the background:
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#drawable/window_background_app</item>
</style>
</resources>
I used that style in the manifest of my app:
<application
android:allowBackup="true"
android:icon="#mipmap/ic_launcher"
android:label="#string/app_name"
android:name="generic_name"
android:supportsRtl="true"
android:theme="#style/AppTheme">
Problem
When starting my app, the background displayed some banding with the gradient background_with_banding
I found in similar questions, (for example this one) that I should:
Try to set dither to true for the background. Problem: use of dither is deprecated now.
To set the Pixelformat to PixelFormat.RGBA_8888. Problem: that did not change anything for me.
I got this problem on:
a OnePlus 5t Api 28 (real device)
Samsung S8, Api 28 (real device)
a Pixel 2 Api 24 (emulator)
a Pixel 2 Api 22 (emulator)
a Pixel C Api 27 (emulator)
The banding did not appear on:
Samsung Galaxy J3 Api 22 (real device)
Samsung SM-T533 Api 22 (real device)
Question
I'm not sure if the problem is due to updates on Android version or of from material (or both). And another problem I had is that a lot of solutions I could find online were quite old (most recent were around 2014).
So my question is:
Are there some new solutions for color banding on gradient since dither=true and pixelFormat=RGBA_8888 ?
I'm pretty sure dithering doesn't do anything if the pixel format is RGBA8888, and therefore cannot help with the banding between visually-adjacent 24bit RGB hues.
This is probably an Android limitation, which arises from the OpenGL limitation that dithering is only for lower bit depths than 32 bit. OpenGL is the backing implementation of Android's Views.
So, the solution might be using a PNG file for the gradient with dithering already built-in by your paint program.
Surprisingly, adding an alpha channel removed the banding completely in my case.
Just set the alpha value of all the colours to 99%, and this would completely remove the banding.
To set the alpha value, you can add FE to the beginning of the HEX value, like #FFFFFF to #FEFFFFFF
OR
Click on the little coloured square besides the line numbers in Android Studio, and then you can change the alpha value.

Background different than XML preview

I have a drawable that creates a gradient in the background:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="radial"
android:gradientRadius="75%p"
android:startColor="#252A32"
android:endColor="#0C0D10"
/>
</shape>
However it looks completely off when running on an emulator:
XML preview:
On emulator:
Why is it showing that ugly circle display?
it may be because of different screen density. Emulator and AS showing differently best you can do is trying on an actual device.

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.

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!

Categories

Resources