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.
Related
I use the new splashscreen api to add an evenly splashscreen to all android versions down to API Level 23.
Are there any requirements for the splash icon? Currently i try to use a svg and i thought it would be sized automatically on different screens. Does anyone experienced this aswell and has a workaround or knows those (hidden?) requirements?
I use the latest splashscreen api version (1.0.0-alpha02) and this is my theme:
<style name="SplashTheme" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">#color/colorPrimary</item>
<item name="windowSplashScreenAnimatedIcon">#drawable/ic_disney_wordmark</item>
<item name="postSplashScreenTheme">#style/AppTheme</item>
<item name="windowSplashScreenAnimationDuration">1000</item>
</style>
This is the ouput with the ic_disney_wordmark as example which is an svg:
Thanks for your help!
You must now size your icon layers using the following guidelines:
Both layers must be sized at 108 x 108 dp.
The inner 72 x 72 dp of the icon appears within the masked viewport.
The system reserves the outer 18 dp on each of the 4 sides to create interesting visual effects, such as parallax or pulsing.
Note:
As with adaptive icons, one-third of the foreground is masked (3).
The app icon (1) should be a vector drawable, and it can be static or
animated.
Source : Android Apaptive Icons , Android Splash Screen
Do what I did, create an icon as an image in Android Studio, a right-click on drawable then new/image asset, choose a source from your SVG, and then resize it to fit the circle (be visible), and that is all. Then point to the foreground part of the created file in your splash configuration.
You can also manually scale your SVG.
<vector>
<group
android:scaleY="0.5"
android:scaleX="0.5">
.
.
.
</group>
</vector>
PS: you also need to centre the icon using the "pivotX" and "pivotY"
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"
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
I have a ScrollView with some children inside.
For API 23, the ScrollView has a white background. But for API 22 and below, the background is gray. I didn't set background in xml or code. All remaining default. Activity and fragment also have default background in layout xml. Activity theme is Theme.Holo.Light.NoActionBar by default, and Theme.Material.Light.NoActionBar for v21.
I saw this on:
samsung note 5 with 6.0.0: white
android emulator Nexus 6P with 6.0.0: white
samsung s6 with 5.1.1: gray
android emulator Nexus 6P with 5.1.1: gray
Xiaomi 4 LTE with 4.4.4: gray
android emulator Nexus 6P with 4.4.4: gray
based on the above test, I guess the background related to API levels.
If I set background to white in xml, for API 22 and below, I can see white background.
Any ideas?
If you haven't provided an explicit color, it might take the color from the default theme of the device. It doesn't depend on the API level, but the device theme.
Therefore, its also possible that you might see different colors for the same API level on two different devices.
Hence, if you want to be consistent across all devices, its always recommended to set the color you want explicitly.
Try this in your styles for the same background in different android API:
<item name="android:windowBackground">#color/background</item>
in my app, I have buttons with icons. The icons are provided as PNG images in the three densities in drawable-ldpi-v4/, drawable/ and drawable-hdpi-v4/. Here's a sample:
Each icon is displayed in an ImageButton:
<ImageButton style="#style/Shortcut" android:id="#+id/open_button"
android:src="#drawable/shortcut_open" android:layout_marginRight="4dp"/>
Where the Shortcut style is:
<style name="Shortcut">
<item name="android:layout_width">65dp</item>
<item name="android:layout_height">45dp</item>
<item name="android:scaleType">center</item>
<item name="android:background">#drawable/shortcut_background</item>
</style>
However, on certain devices/platform versions, certain icons get altered, blurred or something. I'm not sure that it's scaling, it's more like a rendering bug I think. I have tried to disable anti aliasing on the BitmapDrawable, but that didn't help.
As shown on the image below, on Android 2.1 LDPI, one icon gets broken/cropped, and on both Android 1.6 MDPI and Android 2.1 HDPI an extra line seems to be randomly added at the bottom of the icon (look closely).
In the manifest, I have an empty <supports-screens /> as recommended in the docs about supporting multiple screens in legacy apps. Adding anyDensity="true" doesn't help.
Apparently, as of Froyo, things get better as you can see on the image above. But how can I solve this on Android <= 2.1?
I think you should not use explicit sizes (even when expressed as dip) for the buttons, but let the system do it for you.
Use
<ImageButton android:id="#+id/SpeakButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Also it may be that you are falling into the "dip" vs. "dp" trap that others have reported, where documentation says that they are synonymous, but using "dip" made stuff work as intended.
Not sure if this is the case but you can check if you are not running into the bugs mentioned in this Google I/O talk. I still have to wrap my head around it but I think it's worth having a look if you are targeting platforms from 1.5 to 2.0.