I have set thumb image of a seek bar but my thumb looks little below of seek bar. How to set thumb at proper position of a seekbar. Have a look on the attached image
<SeekBar android:id="#+id/PP_Player_SeekBar"
android:thumb="#drawable/music_player_playerhead"
android:paddingLeft="8dip"
android:paddingRight="8dip"
android:progressDrawable="#drawable/seekbar_drawable_xml_background"
android:layout_width="236dip"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_marginTop="47dip"></SeekBar>
Thanks
Sunil Kumar Saoo
Set minHeight and maxHeight same as the height of seekbar. eg
<SeekBar
android:id="#+id/PP_Player_SeekBar"
android:thumb="#drawable/music_player_playerhead"
android:paddingLeft="8dip"
android:paddingRight="8dip"
android:progressDrawable="#drawable/seekbar_drawable_xml_background"
android:layout_width="236dip"
android:layout_centerHorizontal="true"
android:layout_height="wrap_content"
android:layout_marginTop="47dip"
android:minHeight="11dip"
android:maxHeight="11dip" />
See the following url
http://qtcstation.com/2011/05/android-how-to-fix-seekbar-bar-thumb-centering-issues/
In fact, it is enough to define maxHeight to a big number like 1000dp.
This also has the benefit of working with height=wrap_content and height=match_parent.
For me, the issue is more related to the vertical centering of the background (track drawable). This is the flawed drawable code I used originally (which generated the problem), as suggested by Android developer and other StackOverflow entries:
<item
android:id="#android:id/background"
android:drawable="#drawable/seekbar_track"/>
<item android:id="#android:id/secondaryProgress">
<scale
android:drawable="#drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>
<item android:id="#android:id/progress">
<scale
android:drawable="#drawable/seekbar_progress"
android:scaleWidth="100%" />
</item>
The problem here is the first item, which relates to the background of the SeekBar. Many entries will tell you to set the layout_minHeight feature to some large value to avoid a vertical spatial disconnect between the thumb and its track. This was not the solution for me - when viewed on a tablet, the background was still drawing to its smaller phone-based size - so the track was consistently positioned well above the center of the SeekBar track. The solution is to remove this entry in the SeekBar drawable, so it now looks like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/secondaryProgress">
<scale
android:drawable="#drawable/seekbar_progress2"
android:scaleWidth="100%" />
</item>
<item android:id="#android:id/progress">
<scale
android:drawable="#drawable/seekbar_progress"
android:scaleWidth="100%" />
</item>
</layer-list>
Then, in the style definition of the SeekBar, set the layout_background to the the track drawable. Mine looks like this:
<style name="styleSeekBar" parent="#android:style/Widget.SeekBar">
<item name="android:padding">#dimen/base_0dp</item>
<item name="android:background">#drawable/seekbar_track</item>
<item name="android:progressDrawable">#drawable/abratingbar</item>
<item name="android:minHeight">#dimen/base_29dp</item>
<item name="android:maxHeight">#dimen/base_29dp</item>
<item name="android:layout_marginLeft">#dimen/base_10dp</item>
<item name="android:layout_marginRight">#dimen/base_10dp</item>
<item name="android:layout_marginTop">#dimen/base_10dp</item>
<item name="android:layout_marginBottom">#dimen/base_10dp</item>
<item name="android:scaleType">fitXY</item>
</style>
(Previously, the background setting here was just a color [white].).
This is the entry in my layout, which uses both the style and the drawables:
<SeekBar
android:id="#+id/seekbar_page_number"
style="#style/styleSeekBar"
android:layout_width="match_parent"
android:layout_height="#dimen/base_29dp"
android:minHeight="#dimen/base_29dp"
android:maxHeight="#dimen/base_29dp"
android:layout_marginLeft="#dimen/base_230dp"
android:layout_gravity="bottom|right"
android:progress="1"
android:max="20"
android:progressDrawable="#drawable/abseekbar"
android:thumb="#drawable/abseekbar_thumb"/>
So, to summarize, do not set the background (track) feature in your custom SeekBar drawable, set it in the layout_background feature of your custom SeekBar style. This ensures the track is always vertically centered in a horizontal SeekBar.
I simply resolved the misaligned horizontal seekbar thumb by setting layout_height of the seekbar to wrap_content instead of match_parent
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 made a customised seekbar that looks like this
the thing is that it is pretty hard to grab the slider. so what i wanted to to is to increase the hitbox of the thumb to make it easier. i tried a few things, but always messed up the seekbar look. any ideas how i could do that?
layout.xml
<SeekBar
android:id="#+id/xxx"
style="#style/SeekBar"
android:layout_width="#dimen/pixel_130dp"
android:layout_below="#+id/name_textview"
android:layout_centerHorizontal="true" />
styles.xml
<style name="SeekBar">
<item name="android:layout_height">#dimen/pixel_20dp</item>
<item name="android:maxHeight">#dimen/pixel_20dp</item>
<item name="android:minHeight">#dimen/pixel_20dp</item>
<item name="android:thumb">#drawable/seek_bar_thumb</item>
<item name="android:paddingLeft">#dimen/pixel_5dp</item>
<item name="android:paddingRight">#dimen/pixel_5dp</item>
<item name="android:paddingTop">#dimen/pixel_2dp</item>
<item name="android:paddingBottom">#dimen/pixel_2dp</item>
<item name="android:progressDrawable">#drawable/seek_bar_progress_drawable</item>
</style>
seek_bar_thumb.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item>
<shape>
<size
android:height="#dimen/pixel_16dp"
android:width="#dimen/pixel_25dp" />
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:drawable="#drawable/slider_thumb"/>
</layer-list>
Alright, since there are apparently no smarter ways to do that, here is what I did now; only solution I found was to add a transparent area around the thumb image. I doubled its size and added the thumbOffset parameter to the Seekbar. That doesn't seem to be the best solution, but at least it works in my case.
The TouchDelegate class seems to be a good place to start.
See this tutorial on how you can use it.
i have a trouble with custom seekBar .I used http://android-holo-colors.com/ to give images of seekBar .The problem is a vague beginning of seekBar . How can i solve this problem?!
ScreenShot:
this code (i check , images are the same as the default except for colors.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/scrubber_track_red" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/scrubber_secondary_red" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/scrubber_primary_red" />
</item>
</layer-list>
and SeekBar
<SeekBar
android:id="#+id/seekTrack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/scrubber_progress_red"
android:thumb="#drawable/scrubber_control_red"
android:indeterminate="false"
android:layout_weight="1"
style="?android:attr/progressBarStyleHorizontal"/>
Images i got from aforementioned service (android holo colors)
Check your drawables, there's probably a gradient in there somewhere as opposed to a solid color. I'd guess that the problem is in #drawable/scrubber_progress_red. Replace it temporarily with something like #android:color/holo_green_light. If the gradient goes away, we'll know that the scrubber_progress_red drawable is the problem.
Also, what is the name of the file that the layer-list is in?
I prefer if I could my the seekbar in my app looks Translucent, is this possible?
<SeekBar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/topBar"
android:layout_marginTop="26dip"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:paddingTop="10dip"
android:max="100"
android:background="#drawable/roundedcorner" >
</SeekBar>
Set the android:progressDrawable attribute to a custom layer-list drawable with translucent components. You can set the android:thumb property as well.
Here's a sample drawable xml from HoloEverywhere, you can reference that project for sample image assets, too:
<?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/progress_bg_holo_dark" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/progress_secondary_holo_dark" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/progress_primary_holo_dark" />
</item>
</layer-list>
Also - related question:
Custom Drawable for ProgressBar/ProgressDialog
In your XML, add this attribute :
android:alpha = "floatValue"
or, in the java code use
setAlpha(floatValue)
It enables you to change the alpha property of the view.
0 = completely transparent
1 = completely opaque
So, for translucent, you can set to 0.5 or any value according to the transparency you desire.
You can set opacity value using hex colors. You just need to add the right prefix.
I hid the seekBar using this code:
android:progressBackgroundTint="#00555555"
android:progressTint="#00555555"
Where the first two ciphers (i.e. "00") set opaqueness (alpha percentage) and the other six (i.e. "555555") set the color.
Check this post for more information and a list of hex opacity values:
Understanding colors on Android (six characters)
I have a 30px x 30px png file that i would like to use as an android:src rather than an android:background. By using it as the background, and mentioning "wrap_content" for both the height and the width, the final result looks more like a 45px x 45 px.
Ideally, what i need is a mix of ImageButton and ToggleButton. I would like to have the feature of setting an android:src of ImageButton and the feature of toggling where states are saved automatically for me.
Any solution or workaround?
TIA.
Hi, It does not seem to help creating another style. The src still appears much bigger that it's original 30px x 30px.
In main.xml:
<ToggleButton android:id="#+id/blah"
style="#style/myToggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ToggleButton>
In Styles.xml
<style name="myToggle">
<item name="android:textOn">""</item>
<item name="android:textOff">""</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
<item name="android:background">#drawable/my_btn_toggle_bg</item>
</style>
In my_btn_toggle_bg.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/myBackground" android:drawable="#android:drawable/btn_default_small" />
<item android:id="#+id/myToggle" android:drawable="#drawable/my_btn_toggle" />
</layer-list>
In my_btn_toggle.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="#drawable/pausebutton" />
<item android:state_checked="true" android:drawable="#drawable/playbutton" />
</selector>
playbutton.png and pausebutton.png are 30px x 30px each. But they appear much bigger when i see it laid out on the device
You can make the toggle button look like whatever you want. You just need to create a style. Have a look in the /platforms//data/res/values/styles.xml and search for Widget.Button.ToggleButton It looks like this:
<style name="Widget.Button.Toggle">
<item name="android:background">#android:drawable/btn_toggle_bg</item>
<item name="android:textOn">#android:string/capital_on</item>
<item name="android:textOff">#android:string/capital_off</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
So if you go find the btn_toggle_bg drawable you find this:
<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>
Which shows you that it uses the standard Button background and a drawable called btn_toggle for the src. btn_src.xml looks like 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>
Which are the two drawables that are used to show the state of the button. They are actually called btn_toggle_{on/off}.9.png since they are 9 Patch images so they stretch to match the button size.
I figured out how to do this (centering a smaller background image inside a large ToggleButton) using ScaleDrawable:
Set your ToggleButton to use a selector Drawable, as normal:
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:variablePadding="true">
<item android:drawable="#drawable/ic_star_selected_centered"
android:state_checked="true" />
<item android:drawable="#drawable/ic_star_default_white_centered"
android:state_pressed="true" />
<item android:drawable="#drawable/ic_star_default_black_centered" />
</selector>
Then, make a ScaledDrawable for each of the items' drawables above, which points to your ACTUAL image file. e.g. ic_star_selected_centered.xml:
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="#drawable/ic_star_selected"
android:scaleGravity="center"
android:scaleHeight="100%"
android:scaleWidth="100%"
/>
Finally, there is a bug in Android that makes any ScaledDrawables invisible at first, until you set their level. So when inflating your view, call setLevel() from 1-10000 (1 is smallest scale, 10000 is full-sized):
StateListDrawable star = (StateListDrawable) myToggleButton.getBackground();
star.setLevel(5000); // centers the image at half size. shame on Android for using magic numbers!
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
<inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
<bitmap android:src="#drawable/ic_star_selected_centered" />
</inset>
</item>
<item android:state_pressed="true" >
<inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
<bitmap android:src=" android:src="#drawable/ic_star_default_white_centered" />
</inset>
</item>
<item >
<inset android:insetLeft="15dp" android:insetRight="15dp" android:insetTop="15dp" android:insetBottom="15dp">
<bitmap android:src="#drawable/ic_star_default_black_centered" />
</inset>
</item>
</selector>
In addition to what #caseyB had to say (look at the comments), i had to change the theme of the activity to achieve the intended effect. I think this is an issue on HoneyComb Xoom and may not be seen on phones.
Thanks for everyone for looking at my question and helping.
"Quick and dirty" way of achieving this is to use relative layout and place your ImageView on top of the ToggleButton. Set android:layout_centerInParent="true" and set your onClick listener on the toggle
Said that - the other solution by CaseyB (customizing background files) is the right approach