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

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" ... />

Related

Want to add an indicator when a button is focused

I am currently developing an android TV app and have configured a basic button on the main fragment. At the current time there is no way of indicating wether you are focusing on, or knowing you can click on this button. I created a view with a drawable background, to use as the indicator; then wrote some code (Kotlin). At first I wrote: indicator.isVisible=button.isFocused to no avail, I also tried earlier in the code to set (as a test) button.isFocused = true this also did not work. After, some research I realised that you could set the button to focused by default. After inserting this into the code, there was of course an issue with the API usage (26 or above); mine being API 22. So, I'd like to know for an API below 26 (in my case 22) how can I make the indicator visible when the button is focused? Once again, so the user knows what they're currently hovering over (especially in rows with many selectable views)
Update:
Well, looking at the View documentation, I found out there is a setOnHoverListener method and a OnHoverListener interface. I haven't tried it but I think this one is what you are looking for.
Old answer:
You can create a new xml drawable with different background colors for each state (hover, pressed, default) and set that drawable as the button's background.
The new drawable would look like this, i.e :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/blue" />
<item android:state_focused="true" android:drawable="#color/gold" />
<item android:drawable="#color/grey" />
</selector>

How to get glow on the buttons like ipod/ipad in Android

On Android application How can I get the glow effect on button when touched; I am looking for exact similar effect like ipod/iphone buttons
Use a StateListDrawable. Type this into a file and store it as res/drawable/button_bg.xml. Then create 4 images button_press.png, button_focus.png, button_disabled.png and button.png and last set your background to button_bg. If you want your button glow when touch you can add an image of your glowing button to state press. So when you press the system will get glowing_button.png and display it.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_press" android:state_pressed="true" />
<item android:drawable="#drawable/button_focus" android:state_focused="true" />
<item android:drawable="#drawable/button_disabled" android:state_enabled="false" />
<item android:drawable="#drawable/button" />
</selector>
The "magic" behind this is that android will go from the top to bottom and use the first one matching your buttons state.
In these links you can find some snippets to get exactly the same TabBar as iOS applications
iPhone Tab in Android
TabHost For Android
iTabs

Selector tag in android

I am working on the home screen application, where I am trying to do some changes to existing one. I downloaded code from Mydroid folder. And when analyzing that I found that they used selector tag in XML file, but I couldn't understand where exactly they used that to achieve its functionality.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/ic_launcher_allshow" />
<item android:state_checked="true" android:drawable="#drawable/ic_launcher_allhide" />
</selector>
It is present in res/drawable folder.
A selector tag basically looks for the state of the UI at the time and displays the appropriate image.
This particular drawable is for a check box, when the checkbox is in the state
android:state_checked="false"
(i.e. when the checkbox is not checked)
it uses this image:
#drawable/ic_launcher_allshow
Therefore , checked:
android:state_checked="true"
uses
#drawable/ic_launcher_allhide
See here:
http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
&
http://developer.android.com/reference/android/graphics/drawable/StateListDrawable.html

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".

Default Eclipse Theme for Android Development Spinners?

The color of my Spinner widgets change from phone to phone based on there settings,I would like to keep them the same between all phones and I would like to have it be the default eclipse uses in its emulators the color is silverish. Can you please let me know how to apply this specific theme to my Spinner in xml. Thanks in advance.
download the images used in for the spinner from the android source code: spinner_press.9.png, spinner_select.9.png, spinner_normal.9.png then create selector using those.
this is the default selector:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/spinner_press" />
<item android:state_pressed="false" android:state_focused="true"
android:drawable="#drawable/spinner_select" />
<item android:drawable="#drawable/spinner_normal" />
</selector>
You don't need to create a theme. Just apply a background of your choice to the spinner, as with any other View.
If you want to have different backgrounds you can use a (See here for more info)
For an example of an implementation, nothing better than the android source: https://android.googlesource.com/platform/frameworks/base/+/froyo-release/core/res/res/drawable/spinner_background.xml
You can get the actual 9-patch files from there also (and choose which version you would like to use).

Categories

Resources