I'm trying to give a custom background to my spinner. I've downloaded the HTC sense spinner design (Cf. following pictures) with the 9 patch format.
I've created a new XML file with the following code inside:
<?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/spinner_pressed" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/spinner_pressed" />
<item
android:drawable="#drawable/spinner_normal" />
</selector>
And I've added a spinner to my layout with this code:
<Spinner
android:id="#+id/my_spinner"
android:layout_width="180dp"
android:layout_height="50dp"
android:layout_marginLeft="20dp"
android:background="#drawable/custom_spinner" />
But whereas being correctly displayed, I got the following format:
Did I make something wrong?
I hope you'll can help me.
Regards.
V.
The stretchable areas defined on your 9-patch seem wrong, and that is why your 9-patch are stretched like this. Have a look at Nine-patch docs and notice that the left-border defines what area should be stretched. I think you should also define a stretchable area below the "arrow" if you want the "arrow" to be centered.
If you do not know how to edit 9-patch you should use draw9patch it is included in the AndroidSDK/tools.
Related
I am having a bit of a problem when setting a custom rating bar in android. I have followed this tutorial:
How to create Custom Ratings bar in Android
However I am experiencing an issue when changing/selecting more than 4 stars. The selected star image is misplaced a bit. Here is an image to show you what it looks like.
Here is my XML for creating the custom rating bar.
Main xml where the rating bar view is defined:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
android:gravity="center" >
<RatingBar
android:id="#+id/ratingBar"
android:layout_width="wrap_content"
android:layout_height="19dp"
android:numStars="50"
android:stepSize="1.0"
style="#style/AppCustomRatingBar"/>
Custom style for the RatingBar
<style name="AppCustomRatingBar"
parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/rating_stars_custom</item>
<item name="android:minHeight">19dp</item>
<item name="android:maxHeight">19dp</item>
</style>
rating_stars_custom.xml
<item
android:id="#android:id/background"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_stars_yellow_full" />
rating_stars_yellow_empty.xml
<?xml version="1.0" encoding="utf-8"?>
<item
android:id="#android:id/background"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item android:id="#android:id/secondaryProgress"
android:drawable="#drawable/rating_stars_yellow_empty" />
<item
android:id="#android:id/progress"
android:drawable="#drawable/rating_stars_yellow_full" />
rating_stars_yellow_full.xml
<item android:state_pressed="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:state_focused="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:state_selected="true"
android:state_window_focused="true"
android:drawable="#drawable/home_icon_star_fill_selected" />
<item android:drawable="#drawable/home_icon_star_fill_selected" />
What am I doing wrong to misplace the stars? The image sizes of the stars (both yellow and white) are the same.
I managed to fix it. If you look at the picture I provided in my post above the yellow stars are like off with 1pix compared to empty stars. So I took a look at my pictures I use and their sizes. After that it appeared that the yellow star was 1pix shorter (in width) compared to the image with the empty star. So this was my problem I got new pictures of stars and I made sure they are the same size. Now I have 2 pictures 30x30 and all is OK! This fixed my problem! So my advice for people who are facing the same issue is to take a vary careful look at the size of the pictures they are using (empty/full) and make sure they are the same size. This way you save time and unnecessary coding. GL&HF :)
well I had the same problem with the rating bar. after doing some research I've found a way to overcome the above issue.
first, you need 2 stars, one empty star and one colored star. and size should be the same. (in my case both are 25x25)
then put this code in styles xml
<style name="redbar" parent="#android:style/Widget.RatingBar">
<item name="android:progressDrawable">#drawable/ratingbar_red</item>
<item name="android:minHeight">25dip</item>
<item name="android:maxHeight">25dip</item>
</style>
create another xml file called ratingbar_red.xml inside the drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#+android:id/background"
android:drawable="#drawable/star_empty" />
<item android:id="#+android:id/secondaryProgress"
android:drawable="#drawable/star_empty" />
<item android:id="#+android:id/progress"
android:drawable="#drawable/star" />
</layer-list>
Finally crate your RatingBar like this.
<RatingBar
android:id="#+id/RatingBar05"
style="#style/redbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:isIndicator="false"
android:numStars="5"/>
this error || problem is actually related to the sizes of your images, Both have to be in the same size, the way I fixed this err is that I didn't remove the stoke or the border of the filled image, both images must have the same width and height
I have an ImageButton and I wanted to be able to see a color when I clicked on it. I added a background, and used the same listselector I use for all my listviews, but it doesn't show anything when I click the ImageButton.
Here is the ImageButton xml
<ImageButton
android:id="#+id/button_biomes"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/biome"
android:background="#drawable/listselector"/>
And this is the listselector drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_enabled="true"
android:state_pressed="true" android:drawable="#color/actionbar" />
<item android:state_enabled="true"
android:state_focused="true" android:drawable="#color/actionbar" />
<item
android:drawable="#color/android:transparent" />
</selector>
If anyone could help me It'd be greatly appreciated. Thanks!
It is possible that your image takes up entire space and doesn't show the background. Here, image and background are two different things, so do not expect the src image to be transparent.
I the following inside the xml layout for my ListView row:
<CheckBox
android:id="#+id/favbutton"
style="?android:attr/starStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
And it shows a blue star which can be checked to select a favourite. This is exactly the functionality that I need, but I just would like to customize the star icon that is shown. I would like to change the colour to yellow instead of blue and also make the star smaller if possible. Is it possible to make these changes by making changes to the theme applied to the application? What would I need to edit to change the look of the star icon?
I resolved this as follows. I created a file in res/drawable called btn_star_selector.xml and defined the selector as follows:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:state_pressed="true" android:drawable="#drawable/btn_star_on_pressed" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/btn_star_off_pressed" />
<item android:state_checked="true" android:drawable="#drawable/btn_star_on" />
<item android:state_checked="false" android:drawable="#drawable/btn_star_off" />
</selector>
With this selector defined I then replaced this line in the checkbox definition
style="?android:attr/starStyle"
with this
android:button="#drawable/btn_star_selector"
I then created four images to represent the different states of the checkbox, namely on, off, on pressed and off pressed and also placed these in res/drawables.
Hope this helps anyone else that is trying to figure out how to customize checkboxes.
I have a few buttons which I want to highlight only at the borders.
That is, I want the borders of the buttons to glow with a specific color on some action taken. How do I change the border programatically?
Is it possible with drawables? How?
You can have two drawables one for selected state and one for normal state, please go
through following link:
StateListDrawable
See here: http://developer.android.com/reference/android/widget/ImageButton.html
And also here: http://groups.google.com/group/android-developers/tree/browse_frm/thread/1906f24707594f67/17322a04f7af1a5b for Romain Guy's answer:
In res/drawable, create a file called for instance mybutton_background.xml
and put something like this inside:
<?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/button_background_focus" />
<item android:state_focused="true" android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:state_focused="false" android:state_pressed="true"
android:drawable="#drawable/button_background_pressed" />
<item android:drawable="#drawable/button_background_normal" />
</selector>
Then set this drawable as the background of your button with
android:background="#drawable/mybutton_background"
i am working custom button in android and i am set custom style and apply from back ground of button and my problem is image not stretch button background and i want to stretch background based on button size here' my custom button xml code:
custom_button.xml
<?xml version="1.0" encoding="UTF-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false"
android:drawable="#drawable/disable" />
<item android:state_enabled="true"
android:state_pressed="true" android:drawable="#drawable/pressed" />
<item android:state_enabled="true"
android:state_focused="true" android:drawable="#drawable/focused" />
<item android:state_enabled="true"
android:drawable="#drawable/normal" />
</selector>
here's my layout xml code refer button style xml code:
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="28dp"
android:text="Button"
android:background="#drawable/custom_button" />
here's my output below screen shot:
anyone can help me how to fix this issue with greatly appreciated!
Thanks in Advance!
use 9-patch images for selector images. this will help Android to stretch your images as you described in your 9-patch boundaries
Draw 9-patch
Draw 9-patch Tutorial
Another Android 9 Patch Image Tutorial
Use the draw9patch application found in android-sdk/tools. Check instructions how it works and backgrounds should be able to scale properly.