Android can drag Seekbar custom progress values _android

Source: Internet
Author: User

Recently received a project which is needed to implement this feature: Seekbar needs to display the leftmost and most right values, and the progress will follow the progress block movement. The following image shows you the effect, perhaps more clearly than the text description.

In fact, the realization is very simple, mainly the idea. The custom control is also not difficult, before my blog has a special introduction, here will not say more.

Implementation scenarios

This is the fastest way to customize the control by inheriting Seekbar. The main difficulty is the progress of the show, in fact, I was the most stupid way, is to use a popwindow display in the progress bar above, and then move the slider in real time to change the horizontal axis it shows. See the core code for the progress display:

private void Inithintpopup () { 
String popuptext = null;
if (mprogresschangelistener!=null) {
Popuptext = mprogresschangelistener.onhinttextchanged (This, cuclaProcess ( Lefttext));
Layoutinflater Inflater = (layoutinflater) getcontext (). Getsystemservice (Context.layout_inflater_service);
Final View Undoview = inflater.inflate (r.layout.popup, null);
Mpopuptextview = (TextView) Undoview.findviewbyid (;
Mpopuptextview.settext (Popuptext!=null popupText:String.valueOf (cuclaprocess (Lefttext)));
Mpopup.dismiss ();
if (Mpopup = = null)
Mpopup = new Popupwindow (Undoview, Mpopupwidth, ViewGroup.LayoutParams.WRAP_CONTENT, false); c12/>else{
Mpopup.dismiss ();
Mpopup = new Popupwindow (Undoview, Mpopupwidth, ViewGroup.LayoutParams.WRAP_CONTENT, false);

The layout is simple, just a textview.

<linearlayout xmlns:android= ""
android:layout_width= "Wrap_ Content "
android:layout_height=" wrap_content "
android:orientation=" Horizontal "
android:background= "#0fff"
android:gravity= "center" >
<textview android:id= "@+id/text"
android:padding= "8DP
" Android:textsize= "16SP"
android:singleline= "true"
android:ellipsize= "End"
android:textcolor= "@ Color/green "
android:layout_width=" wrap_content "
android:layout_height=" wrap_content "/>
< /linearlayout>

The left and right display value principle is the same, look at the following code:

private void Initrighttext () {
Layoutinflater inflater = (layoutinflater) getcontext (). Getsystemservice ( Context.layout_inflater_service);
Final View Undoview = inflater.inflate (R.layout.rightpop, null);
Mpopuprightview = (TextView) Undoview.findviewbyid (;
Mpopuprightview.settext (righttext+ "");
Mrightpopup = new Popupwindow (Undoview, Mpopupwidth, ViewGroup.LayoutParams.WRAP_CONTENT, false);
Mrightpopup.setanimationstyle (;

So how do you let the text above the slider slide along. Just rewrite the onprogresschanged.

public void onprogresschanged (SeekBar SeekBar, int progress, Boolean B) {
String popuptext = null;
if (mprogresschangelistener!=null) {
Popuptext = mprogresschangelistener.onhinttextchanged (This, cuclaProcess ( Lefttext));
if (Mexternallistener!=null) {
mexternallistener.onprogresschanged (SeekBar, progress, b);
Step = cuclaprocess (lefttext);
Mpopuptextview.settext (popuptext!=null popupText:String.valueOf (step));
if (mpopupstyle==popup_follow) {
mpopup.update (int) (THIS.GETX () + (int) getxposition (SeekBar)), (int) ( This.gety () +2*mylocationoffset+this.getheight ()),-1,-1);

In fact, the most important thing is to calculate the position of X getxposition. Look at the above code:

Private float getxposition (SeekBar SeekBar) {
float val = (((float) seekbar.getprogress () * (float) (seekbar.getwidth ()-2 * Seekbar.getthumboffset ()))/Seekbar.getmax ());
float offset = seekbar.getthumboffset () *2;
int textWidth = mpopupwidth;
float Textcenter = (textwidth/2.0f);
float newx = val+offset-textcenter;
return newx;

Get progress by getprogress to calculate the distance x moves. This enables the movement of text. Finally will give the source code to download.

How to use it, as with normal custom controls, as follows:

android:id= "@+id/seekbar"
android:layout_width= "Match_ Parent "
android:layout_height=" wrap_content "
android:layout_centerinparent=" true "
Android: layout_margintop= "40DP"
android:progress= "5"
hint:popupwidth= "40DP"
hint:yoffset= "10DP"
hint:popupstyle= "fixed"/>

Now, of course, the native style is implemented, and here's how to customize the Seekbar style.

Custom Style

Seekbar to change the style to prepare three pictures, the left side of the choice of sliding bar picture, the right not selected slider picture and slider picture, slider to 9.png format the best. Here for convenience, directly use layer-list to handle the slider section. Define the XML file in drawable.

<?xml version= "1.0" encoding= "Utf-8"?> <layer-list xmlns:android=
"Http://" /android ">
<item android:id=" @android: Id/background ">
<shape >
<corners android: radius= "10dip"/>
android:angle= "180"
android:centercolor= "#F5F5F5"
android: centery= "0.2"
android:endcolor= "#F5F5F5"
android:startcolor= "#F5F5F5"/>
<item android:id= "@android: id/progress" >
<clip >
<shape >
<corners android:radius= "10dip" 
android:angle= "180"
android: Centercolor= "#39ac69"
android:centery= "0.45"
android:endcolor= "#39ac69"
android:startcolor= " 39ac69 "/>

This enables overlapping pictures to be achieved. The picture that sets the slider is set directly in Seekhint:

android:thumb= "@drawable/bt_seekbar"

The seekbar that can be dragged to this progress value is implemented. We all see understand, have any questions welcome to cloud Habitat Community small make up a message, small series will give everyone back in time. For more information, please continue to pay attention to the cloud Habitat community website, thank you!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.