Align tick marks to an Android SeekBar

Question

SeekBar

I'm attempting to put some tick mark indicators to a SeekBar on Android. I am able to generate a background with the tick marks just fine, however I can't figure out a way to align the tick marks with the actual SeekBar line. As you can see from the screenshot, the tick marks actually start before the SeekBar line does.

I could find the distance by trial and error, but I doubt it's going to remain the same on every device. I also noticed the space between the line and the edge of the background is the same as the radius of the thumb slider. But I can't find a way to determine what that radius is, and again, am not sure it'll work on every device.

I know there are custom seekbars available, but I'm trying to avoid adding a 3rd party dependency.

It's created programmatically Bitmap b= Bitmap.createBitmap(w, h, Bitmap.Config.RGB_565); Canvas c=new Canvas(b); Paint p=new Paint(); p.setColor(Color.WHITE); int offset=this.getThumb().getMinimumWidth(); float interval=(float)((width-offset*1.0)/24); for(int i=0;i<25;i++){ float x=i*interval+offset/2; c.drawLine(x,0,x,height,p); c.drawText(Integer.toString(i),x,height,p); } return b; — Greg Miller, May 26 '15 at 15:27
That didn't format well, but the above is the code I'm currently using, which isn't what generated the screenshot above. It uses getThumb().getMinimumWidth() to change the offset to start with the seek line. Just not sure it'll always work. — Greg Miller, May 26 '15 at 15:30

Greg Miller · Accepted Answer · 2016-02-13T18:28:15.267

4

enter image description here

This uses getThumb().getMinimumWidth() to approximate the offset to the start of the SeekBar's line. It seems to work, but not sure it will on every device.

UPDATE: This code does work for the default case, but will break if you change the padding. It is better to use getPaddingLeft() and getPaddingRight() to determine the length and position of the slider. These functions will usually return getThumb().getMinimumWidth()/2, unless the padding or thumbnail has been changed. getPaddlingLeft() and getPaddingRight() will always work.

        Bitmap b= Bitmap.createBitmap(w, h, Bitmap.Config.RGB_565);

        Canvas c=new Canvas(b);
        Paint p=new Paint();
        p.setColor(Color.WHITE);

        int offset=this.getThumb().getMinimumWidth();
        float interval=(float)((width-offset*1.0)/24);
        for(int i=0;i<25;i++){
            float x=i*interval+offset/2;
            c.drawLine(x,0,x,height,p);
            c.drawText(Integer.toString(i),x,height,p);

        }

edited Feb 13 '16 at 18:28

answered May 26 '15 at 15:35

Greg Miller

469
4
11

Please add this to your question and not as an answer :) – Ed Holloway-George May 26 '15 at 16:10
1

This is a possible answer to my question, if it turns out to work on other devices, I'll accept it as the answer. – Greg Miller May 26 '15 at 18:34
Could you go into more detail about your code? It seems like you're doing all this inside a subclass of SeekBar....what is the difference between w and width and h and height? I'm doing something similar but my ticks look all messed up. – Ethan Nov 25 '15 at 04:40
This is a function inside of a subclass, w and h are equivalent to the view's width and height properties. The code above does work in the default case, but I have a better answer now, which I'll post now. – Greg Miller Feb 13 '16 at 18:24

Align tick marks to an Android SeekBar

1 Answers1

Linked