I am following this tutorial on how to create custom spinners. Near the begining it instructs you to navigate to: *android.jar\res\drawable-finger* But for some reason I can't find the "drawable-finger" folder in my android.jar. I thought it may have to do with the API level so I changed it from 1.6 to 2.1 to no avail. I went around this and put them in the drawable folder thinking I could just work around it but then the spinner has the image stretched and malformed instead of repeating the image in the x direction. Any ideas?
Thanks!
EDIT: Here is the code
Spinner
<Spinner android:id="#+id/catspinner" android:layout_marginLeft="15dip" android:layout_marginRight="15dip"
android:layout_width="fill_parent" android:layout_centerHorizontal="true"
android:layout_height="wrap_content" android:layout_centerVertical="true"
android:drawSelectorOnTop="true" android:background="#drawable/spinnerbackground"/>
code for the spinner background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/myspinner_select" />
<item android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/myspinner_press" />
<item android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/myspinner_press" />
<item android:drawable="#drawable/myspinner_normal" />
</selector>
it looks like this
Sherif is correct. As far as following the tutorial, it doesn't (and shouldn't) suggest that you put the images back in android.jar/res/drawable-finger. You should put your versions of those images in your drawable folders (i.e. drawable-ldpi, drawable-mdpi, etc).
I suspect that the issue with the image being stretched and not repeated is a result of your code or image, not the location you put the images. You could post your code and we might be able to help with that.
I also noticed that the tutorial looks like it is based off of a pre-release Android SDK version. I'm guessing that the drawable-finger folder no longer exists. It's also possible that other elements of the tutorial are outdated.
Related
I have just begun creating Android apps using Eclipse and the ADT.
I have got the basic functionality working in a demo app, and would like to create a button that looks like a search field (there is no search functionality built in, I just want the user to press it and start a new activity).
My question is: what is the best practice for creating a button like the above (ignoring the 1px dark grey stroke around the outside)?
I have got as far as
Create the button in activity_main.xml
<Button
android:id="#+id/inputSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:hint="#string/hint_search"
android:background="#drawable/input_search"
style="#style/input_search"
android:onClick="findProducts" >
</Button>
Create a few styles
<style name="input_search" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">#color/light_grey</item>
<item name="android:background">#color/white</item>
</style>
Create the input_search_background.xml which has a light grey stroke, rounded corners
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<stroke
android:width="#dimen/stroke_width" android:color="#color/light_grey" />
<corners
android:radius="#dimen/corner_radius" />
<solid
android:color="#color/white" />
</shape>
Create input_search.xml for the states.
<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/input_search_background"
android:state_pressed="true" />
<item android:drawable="#drawable/input_search_background"
android:state_focused="true" />
<item android:drawable="#drawable/input_search_background" />
</selector>
I'm not sure how to create the orange block on the right. Should I define a shape which is orange and use a transparent png for the magnifying glass or should the png be the orange block with the magnifying glass all in one?
What tools do you use for creating the assets?
How do I know how big to create them?
I'll appreciate any words of wisdom or links that could help.
Thanks,
Andrew
You can simply use a 9 patch.
You can find a similar one, in your sdk platform graphics:
In Windows (install path may change),
C:\Program Files\adt-bundle-windows-x86_64-20130522\sdk\platforms\android-8\data\res\drawable-mdpi
You can find this:
With some (very little) work, you can make the perfect image that matches your needs.
Just add it as the background of your Button (I'd use a TextView, but it's a matter of tastes) and enjoy.
You see, no need for a custom style nor an extra xml drawable.
What I'm trying to do
I'm trying to use in my Layout the Android 4.0 styled togglebutton. For this I selected the Theme = Theme.Holo.Light . When I take the togglebutton from there its that square with the green line, if the button is enabled.
But I'd like to use the togglebutton like they got in there config on top (take a look at the printscreen).
Question
How can I use thise togglebutton? Some Codesnippets or a quick tutorial would be great!
Best Regards
safari
Picture
New Edit: I now did a full backport of the Switch back to API Level 8 and put in on github:
https://github.com/ankri/SwitchCompatLibrary
The old post with my custom implementation of the Switch:
I'm a bit late to the party but I had the same problem. I took the source code from the other post in this thred and made my own version of the switch.
You can find the source code and documentation on my website
This is what it looks like:
edit: Updated link and picture
UPDATE: New images work on both light and dark backgrounds. Original images still available.
Also, as someone points out in the comments, make sure to save them as "*.9.png", i.e. "switch_on_on_db.9.png", etc.
Ankri's answer is great, but alittle heavy. Also, he uses the 4.2 style switches as opposed to the older (and in my opinion, prettier) 4.1 style buttons. For a quick fix, I made a drawable so that you can style your togglebutton to look like a switch.
First, here is the button style:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/switch_on_on_db" android:state_checked="true" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_on_on_db" android:state_checked="true" android:state_focused="false"/>
<item android:drawable="#drawable/switch_off_off_db" android:state_checked="false" android:state_pressed="true"/>
<item android:drawable="#drawable/switch_off_off_db" android:state_checked="false" android:state_focused="false"/>
</selector>
which refer to these images:
Download the original images from here:
Old Off
Old On
Finally, you can style the togglebutton like so:
<ToggleButton
android:id="#+id/ParamToggleButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/toggletoswitch"
android:textOff=""
android:textOn=""/>
UPDATE:
Jelly Bean versions (though not identical) are now available:
Old Off
Old On
If your app targeting api level 14 or higher. Use Switch widget and make sure your application's theme is "Theme.Holo" or "Theme.Holo.Light"
However, if you want to target api level under 2.3 you have to make custom layout.
I think It's quite messy to explain about that, I'll give you an example.
You can find the "Switch" button's real implementaion in here.
Well, You can just get that source and put in your project. You'll have some error but it's not that difficult to resolve it.
Great solution above...thanks! (no name given?)
I thought someone might be able to use my xml that worked for me to make the togglebutton look like a switch:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right|center_vertical"
android:orientation="horizontal" >
<TextView
android:id="#+id/tv_switchToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_marginTop="0dip"
android:text="#string/shake_to_add"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#ffffff" />
<ToggleButton
android:id="#+id/switchToggle"
android:layout_width="75dp"
android:layout_height="20dp"
android:layout_margin="5dip"
android:background="#drawable/togglebutton"
android:textOff=""
android:textOn="" />
</LinearLayout>
#drawable/togglebutton refers to the selector described above. Thanks again!
I would like to know if we can customise a button to show like the Apple iOS button in Android?
The button that I would like to draw is
If this is possible, can someone give me the pointers to it.
Thanks.
Yes, it can be done. I'll leave the philosophy to others. The button background can be replaced with anything you choose. I saved your back icon above as iphoneback_normal.png.In photoshop I created two more states--focused and pressed
<Button
android:id="#+id/buttonNoThx3"
android:text="Back"
android:layout_height="fill_parent"
android:background="#drawable/iphonebackbutton"
/>
Create a state list iphonebackbutton drawable xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/iphoneback_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/iphoneback_focused" />
<item android:drawable="#drawable/iphoneback_normal" />
</selector>
You should take a look at 9-patch png.
But using iOS-oriented approach on Android may result in poor User Experience.
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".
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" ... />