Nine-patch StateListDrawable rendering issue - android

After updating to SDK tools revision 15 from revision 12, my EditTexts and Buttons all appear distorted like so...
Now is this a bug with the revision? Because when I preview what the layout looks like with the "Graphical Layout" tab it appears normal. But as soon as it is compiled and put on my phone or the emulator, it is distorted.
Here is the StateListDrawable xml for the buttons. Each drawable referenced in this is a 9patch. The EditTexts are done in the same fashion.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_grey_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/button_grey_pressed" android:state_focused="true"></item>
<item android:drawable="#drawable/button_grey_pressed" android:state_selected="true"></item>
<item android:drawable="#drawable/button_grey_default"></item>
</selector>

This is an issue I've had too when I updated to SDK 14.
I found a solution in Window>Preferences>Android>Build by setting "Build output" on Normal and then Project>Clean>Clean All.

I've copied and pasted from here and it worked:
Disable auto-refresh, build automatically.
Full clean all projects.
Build all projects.
Clean the main project.
Build the main project.

Try wrapping those nine-patch drawables (I suppose #drawable/button_grey_pressed refers to /drawable/button_grey_pressed.9.png) into xml nine-patch drawables:
<?xml version="1.0" encoding="utf-8"?>
<nine-patch xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/button_grey_pressed"
android:dither="true" />
You will have to give this xml file the name which will be different from that of button_grey_pressed.9.png, let's say button_grey_pressed9.xml

Related

Migration of exisitng splashScreen to Android 12 + is giving distorted splash

We are trying to migrate (because of a crash, that seem related to this - Here's another question for my crash.
Our existing Splash-Screen which also serves as routing.
Previously we used a full screen vector as a theme of splash screen, after following the documentation -
https://developer.android.com/develop/ui/views/launch/splash-screen/migrate#prevent_the_custom_activity_from_displaying
and updated the theme like this -
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
<item name="windowSplashScreenAnimatedIcon">#drawable/ic_launcher</item>
<item name="background">#drawable/background_splash</item>
<item name="postSplashScreenTheme">#style/AppTheme</item>
</style>
background_splash is the drawable image that we want to have in full screen there. Its not working?
Splash screen is looking distorted, the windowSplashScreenAnimatedIcon is cropped and put into a small circle in the center.
Anyone has idea how to achieve this correctly? Thank you for your time!
Is it possible to provide a full screen drawable to splash in accordance with the new splash API for android 12+ with backward compatibility?
Searched for a solution working with Android-12 as well as with older versions and didn't like to create multiple resolution images. Android-12 changed the behaviour of the splash screen (migration guide) but this resulted in a well sized icon either for Android-12 or for earlier versions, but not for both.
Finally I ended up with a trick, to add two splash screen xml files, one for version 12 and higher, the other for all other versions. Give the item (parent of the image) a size in dp, and the bitmap a gravity="fill". The size differs for both splash_screen xml, I don't know if there is an official solution to this problem.
resources/values/styles.xml
<style name="Theme.App.Starting" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">#387aa8</item>
<item name="windowSplashScreenAnimatedIcon">#drawable/splash_screen</item>
<item name="postSplashScreenTheme">#style/MainTheme</item>
</style>
resources/drawable/splash_screen.xml
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="224dp" android:height="224dp" android:gravity="center">
<bitmap
android:src="#drawable/silent_notes_256"
android:gravity="fill"/>
</item>
</layer-list>
resources/drawable-v31/splash_screen.xml (Android-12 and higher)
<?xml version="1.0" encoding="utf-8" ?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:width="128dp" android:height="128dp" android:gravity="center">
<bitmap
android:src="#drawable/silent_notes_256"
android:gravity="fill"/>
</item>
</layer-list>
While I did tests with different resolutions, I don't know whether this works for all screen size/resolution combinations.

Android Studio 1.4.0 Drawable-v21 item ignored in favor of Drawable

I'm having a very similar problem as to what was described in this question, but the answer is hacky and not really a proper answer, although it works.
Android Studio 1.4: drawable-v21 ignored when using "File/New/Vector Asset" option
I have a button, that I want to apply a pressed color to on pre21 devices, and use the ripple on v21+ devices.
In the drawable folder I have button_primary_theme
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<shape>
<solid android:color="#color/themePimaryrOnePressed" />
</shape>
</item>
<item>
<shape>
<solid android:color="#color/themePrimaryOne" />
</shape>
</item>
</selector>
In the drawable-v21 folder I have
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?attr/colorControlHighlight">
<item android:drawable="?attr/colorPrimary"/>
</ripple>
No matter what I do, I can't get my layout to use the ripple effect from the v21 folder on my Lollipop device. It keeps using the pre lollipop drawable.
<Button
android:id="#+id/getting_started"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_primary_theme" />
In the other answer, he made a separately named file for v21 effect, but that means I need a new copy of the layout in addition to the new drawable, and that shouldn't be necessary to get this to work.
I've tried cleaning the project, but it still uses the non v21 drawable.
How do I get this to work without making copies of everything?
Looks like this was my fault. Hopefully this might help someone else.
My normal drawable was actually in the drawable-nodpi folder, not drawable. I guess that was somehow overriding the v21 folder version.

9-patch drawable shows different on android 2.+ and 4.+

I have selector for list which is based on 9-patch drawable but it looks different on android 2.+ and 4+ android based devices (LG Optimus Sol E730, Nexus 4, HTC One V):
Result for android 2+
Result for android 4+
Here is code of selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/row_widget_selected" android:state_selected="true"/>
<item android:drawable="#drawable/row_widget_selected" android:state_pressed="true"/>
<item android:drawable="#drawable/row_widget_disabled" android:state_enabled="false"/>
<item android:drawable="#drawable/row_widget"/>
</selector>
Use of selector:
<com.ssbs.sw.SWE.widget.SpinnerWidget
android:id="#+id/dialog_outlet_task_edit_spinner_type"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?listWidgetSelector"
And selector 9-patch drawable
Q: As you can see the same selector looks different on android 4+, it is a gradient why is it so?
I have found answer on my question here Android 4.2 9-patch background drawn differently than older OS versions
The easiest way to solve it is to follow the #CommonsWare proposal and move all my drawable to res/drawable-nodpi/ folder

Android ToggleButton indicator

I'm struggling with the Android ToggleButton because I try to change the green indicator light. In the Android SDK folder I've found the file drawable\btn_toggle_bg.xml where it says
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background" android:drawable="#android:drawable/btn_default_small" />
<item android:id="#+android:id/toggle" android:drawable="#android:drawable/btn_toggle" />
</layer-list>
I copied this file to the drawable folder of my project and changed the last item to
<item android:id="#+android:id/toggle" android:drawable="#drawable/btn_toggle" />
and then took the original btn_toggle.xml from the Android SDK, copied into the drawable folder, too. btn_toggle.xml is this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/btn_toggle_off" />
<item android:state_checked="true" android:drawable="#drawable/btn_toggle_on" />
</selector>
So then I asumed that it would be necessary to create btn_toggle_off.png and btn_toggle_on.png. At last I added the line
<ToggleButton
...
android:background="#drawable/btn_toggle_bg" />
but finally, the ToggleButton looks completely strange.
What I noticed are files called btn_toggle_off.9.png and btn_toggle_on.9.png in the SDK but I couldn't find a reference to these files although they look exactely like the original indicator.
Can you help me? :)
Without completely re-styling the toggle button widget, the resources you are trying to replace should probably be nine patch PNGs like the originals are.
Copy btn_toggle_off.9.png and btn_toggle_on.9.png into your project and modify them, or use the draw9patch tool to properly add the nine patch metadata to your own images.
Refer to the following documentation for an explaination of Android's nine patch drawables:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#nine-patch
http://developer.android.com/guide/developing/tools/draw9patch.html
The ".9" part of the filename must be retained, but is not referenced in XML resources. So btn_toggle_on.9.png is referred to as simply "#drawable/btn_toggle_on".

My radio button background is transparent, how do I make it opaque?

Update 1:
I followed the directions provided by Archimedes below. Problem is that my API 9 "drawable" folder already has an XML doc titled "btn_radio.xml" and the code inside is exactly the same as you presented above. Now, when I go back to eclipse and tell it:
`<RadioButton android:background="#drawable/btn_radio" ... />`
I get an error message in return saying Error: No resource found that matches the given name (at 'background' with value '#drawable/btn_radio_on').
So what I did instead is I went to the API 8 folder and looked found the drawable_hdpi and mdpi folders, did a search for btn_radio_off and btn_radio_on and copied those two images into the corresponding API 9 folders. This fixed the issue in Eclipse of radio button backgrounds not showing up. However, when I run my code, the virtual device still displays the old broken (transparent) image.*
Original Post:
Hi, I'm following a Gingerbread 2.3 (I'm running Win7/Eclipse) tutorial from this site and I'm looking at this image here: http://www.vogella.de/articles/Android/images/first50.gif
Each time I add a new radio button to my graphical layout in Main.xml the silver part of the radio button is transparent. So regardless of the background color of the main window, I will only see the outline of a radio button and that radio button will be filled in with the color of the entire background.
If I create a grouped item and put two radio buttons in a group, I can get toggle between the two and the green indicator showing which one is toggled is available but the buttons themselves are transparent.
How do I make my radio button look like the one in the image above? It seems that no matter how many times I start a "new" project, the problem persists. The only thing that affects it is toggling another "theme" but that's not really a solution once I run the app.
Thanks for your help.
This appears to be a new Gingerbread (2.3, API level 9) graphical style for the RadioButton drawable's constituent pngs.
The easiest fix is simply to not use Gingerbread... go to your project properties, select the "Android" tab, and change the "Project Build Target" to API Level 8 or lower.
This is a workaround I believe should work for you:
1). Find 'btn_radio_off.png', 'btn_radio_off_pressed.png', 'btn_radio_off_selected.png', 'btn_radio_on.png', 'btn_radio_on_pressed.png', 'btn_radio_on_selected.png' images at 2.2 sources. You can find them in your SDK subfolders. Note, there are several sets of the images (hdpi, mdpi, etc.). Recreate the file structure related to those files inside of your 'drawable' directory.
2). In your 'drawable' directory create the 'btn_radio.xml' file with the following content:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_window_focused="false"
android:drawable="#drawable/btn_radio_on" />
<item android:state_checked="false" android:state_window_focused="false"
android:drawable="#drawable/btn_radio_off" />
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/btn_radio_on_pressed" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/btn_radio_off_pressed" />
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/btn_radio_on_selected" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/btn_radio_off_selected" />
<item android:state_checked="false" android:drawable="#drawable/btn_radio_off" />
<item android:state_checked="true" android:drawable="#drawable/btn_radio_on" />
</selector>
This is actually the same state list that OS uses for radio buttons.
3). Then inside of your layout xml declare your custom radio button using the above state list drawable by using android:background attribute:
<RadioButton android:background="#drawable/btn_radio" ... />

Categories

Resources