how to fix seekbar-bar-thumb-centering-issues
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="wr开发者_如何学Goap_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
精彩评论