Here’re some possibilities:
- Put ‘dot’ view just above
SeekBar
one. Will not explain it here in details, because it’s trivial android-layout task; -
Extend
SeekBar
, like the following (refer to this good explanation about custom views):/** * Seek bar with dots on it on specific time / percent */ public class DottedSeekBar extends SeekBar { /** Int values which corresponds to dots */ private int[] mDotsPositions = null; /** Drawable for dot */ private Bitmap mDotBitmap = null; public DottedSeekBar(final Context context) { super(context); init(null); } public DottedSeekBar(final Context context, final AttributeSet attrs) { super(context, attrs); init(attrs); } public DottedSeekBar(final Context context, final AttributeSet attrs, final int defStyle) { super(context, attrs, defStyle); init(attrs); } /** * Initializes Seek bar extended attributes from xml * * @param attributeSet {@link AttributeSet} */ private void init(final AttributeSet attributeSet) { final TypedArray attrsArray = getContext().obtainStyledAttributes(attributeSet, R.styleable.DottedSeekBar, 0, 0); final int dotsArrayResource = attrsArray.getResourceId(R.styleable.DottedSeekBar_dots_positions, 0); if (0 != dotsArrayResource) { mDotsPositions = getResources().getIntArray(dotsArrayResource); } final int dotDrawableId = attrsArray.getResourceId(R.styleable.DottedSeekBar_dots_drawable, 0); if (0 != dotDrawableId) { mDotBitmap = BitmapFactory.decodeResource(getResources(), dotDrawableId); } } /** * @param dots to be displayed on this SeekBar */ public void setDots(final int[] dots) { mDotsPositions = dots; invalidate(); } /** * @param dotsResource resource id to be used for dots drawing */ public void setDotsDrawable(final int dotsResource) { mDotBitmap = BitmapFactory.decodeResource(getResources(), dotsResource); invalidate(); } @Override protected synchronized void onDraw(final Canvas canvas) { super.onDraw(canvas); final int width = getMeasuredWidth(); final int step = width / getMax(); if (null != mDotsPositions && 0 != mDotsPositions.length && null != mDotBitmap) { // draw dots if we have ones for (int position : mDotsPositions) { canvas.drawBitmap(mDotBitmap, position * step, 0, null); } } } }
Don’t forget about custom attrs in
res/values/attrs.xml
:<resources> <declare-styleable name="DottedSeekBar"> <attr name="dots_positions" format="reference"/> <attr name="dots_drawable" format="reference"/> </declare-styleable> </resources>
And using the following code:
setContentView(R.layout.main); final DottedSeekBar bar = (DottedSeekBar) findViewById(R.id.seekBar); bar.setDots(new int[] {25, 50, 75}); bar.setDotsDrawable(R.drawable.dot);
with main.xml layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res/com.example.TestApp" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.TestApp.DottedSeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/seekBar" /> </LinearLayout>
or just single main.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res/com.example.TestApp" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <com.example.TestApp.DottedSeekBar android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/seekBar" custom:dots_positions="@array/dots" custom:dots_drawable="@drawable/dot" /> </LinearLayout>
You could obtain the following image:
-
Refer to this example for more ideas;
Regarding putting dots on specific ‘time’: SeekBar
is not about time, so it’s up to You to provide any time-related logic.