Custom SeekBar with Zoom-In and Zoom-Out Feature

1. Gradle :- (build.gradle):implementation 'com.android.support:design:27.1.1'
2.  activity_main.xml :-

<?xml version="1.0" encoding="utf-8"?>

<HorizontalScrollView xmlns:android="http://schemas.android.com/apk/res/android"    

xmlns:app="http://schemas.android.com/apk/res-auto"   

 android:id="@+id/horiontal"   

 android:layout_width="match_parent"   

 android:layout_height="wrap_content"   

 android:background="@color/greay_bg"   

 android:fillViewport="true"  

  android:orientation="horizontal"   

 android:padding="10dp"   

 android:scaleType="matrix"   

 android:scrollbars="horizontal">

    <LinearLayout        

android:id="@+id/mainView"        

android:layout_width="match_parent"        

android:layout_height="wrap_content"       

 android:layout_marginLeft="5dp"        

android:gravity="center"       

 android:orientation="vertical">
        <ProgressBar           

 style="?android:attr/progressBarStyleHorizontal"           

 android:layout_width="match_parent"            

android:layout_height="wrap_content"           

 android:id="@+id/progress"           

 android:layout_centerHorizontal="true"            

android:layout_centerVertical="true"            

android:max="100"            

android:layout_marginBottom="30dp"            

android:progress="45"/>

        <com.warkiz.tickseekbar.TickSeekBar            

android:id="@+id/seekbar_video"            

android:layout_width="match_parent"            

android:layout_height="wrap_content"            

app:tsb_show_tick_marks_type="square"            

app:tsb_show_tick_texts="below"            

android:padding="4dp"            

app:tsb_thumb_color="@color/colorAccent"            

app:tsb_thumb_drawable="@drawable/ic_launcher_background"           

 app:tsb_thumb_size="9dp"            

app:tsb_tick_marks_color="@color/colorAccent"            

app:tsb_tick_marks_drawable="@drawable/ic_launcher_background"           

 app:tsb_tick_marks_size="3dp"            

app:tsb_tick_texts_color="@color/white_seekbar"           

 app:tsb_tick_texts_size="13sp"            

app:tsb_ticks_count="7"            

app:tsb_max="24"            

app:tsb_min="0"            

app:tsb_progress="0"            

android:scrollbars="horizontal"           

 app:tsb_track_background_color="@color/white_seekbar"           

 app:tsb_track_background_size="2dp"            

app:tsb_track_progress_color="@color/white_seekbar"           

 app:tsb_track_progress_size="1dp" />
    </LinearLayout>
</HorizontalScrollView>

3.  MainActivity.java:-

public class MainActivity extends AppCompatActivity {
    private TickSeekBar tickSeekBar;
    private float oldDist = 1f;
    private static float newDist;
    private String[] seekText = {"1.00", "2.00", "3.00", "4.00", "5.00", "6.00", "7.00", "8.00", "9.00",
            "10.00", "11.00", "12.00", "13.00", "14.00", "15.00", "16.00", "17.00", "18.00", "19.00", "20.00",
            "21.00", "22.00", "23.00", "24.00"};
    private String[] seekText2 = {"1.00", "3.00", "5.00", "7.00", "9.00", "11.00", "13.00", "15.00", "17.00", "19.00",
            "21.00", "23.00"};
    private String[] seekText4 = {"1.00", "5.00", "9.00", "13.00", "17.00", "24.00"};

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tickSeekBar = findViewById(R.id.seekbar_video);
        tickSeekBar.setMax(24);
        tickSeekBar.setMin(0);
        tickSeekBar.setScrollContainer(true);
        tickSeekBar.computeScroll();
        tickSeekBar.getScrollX();
        //tickSeekBar.customTickTexts(seekText);        tickSeekBar.setOnTouchListener(new View.OnTouchListener() {
            @Override            public boolean onTouch(View view, MotionEvent motionEvent) {
                Log.d(view.getTransitionName() + "ActionMove ", " onTouch");
                handleTouch(motionEvent);
                return true;
            }
        });
    }

    void handleTouch(MotionEvent m) {

        int action = m.getActionMasked();
        switch (action) {
            case MotionEvent.ACTION_POINTER_DOWN:
                Log.d("ActionMove ", " ACTION_POINTER_DOWN");
                oldDist = spacing(m);
                break;
            case MotionEvent.ACTION_POINTER_UP:
                Log.d("ActionMove ", " ACTION_POINTER_UP :: ");
                if (m.getPointerCount() == 2) {
                    if (newDist > oldDist) {
                        Log.d("ActionMove ", "ZOOM IN ");
                        if (tickSeekBar.getTickCount() == 7) {
                            tickSeekBar.setTickCount(12);
                        } else if (tickSeekBar.getTickCount() == 12) {
                            tickSeekBar.setTickCount(24);
                        }
                    } else if (newDist < oldDist) {
                        Log.d("ActionMove ", "ZOOM OUT  ");
                        if (tickSeekBar.getTickCount() == 24) {
                            tickSeekBar.setTickCount(12);
                        } else if (tickSeekBar.getTickCount() == 12) {
                            tickSeekBar.setTickCount(7);
                        }
                    }
                }
                break;
            case MotionEvent.ACTION_MOVE:
                // Log.d("ActionMove ", " ACTION_MOVE");                if (m.getPointerCount() == 2)
                    newDist = spacing(m);
                break;
            default:
        }
    }

    /**     * Determine the space between the first two fingers     */    private float spacing(MotionEvent event) {
        float x = event.getX(0) - event.getX(1);
        float y = event.getY(0) - event.getY(1);
        return (float) Math.sqrt(x * x + y * y);
    }
}

4. drawable:-

line.xml:-

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">
    <stroke        android:width="1dp"        android:color="@color/white_seekbar" />
    <size        android:width="1dp"        android:height="200dp" />
</shape>

circle.xml:-
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"    android:shape="rectangle">
    <stroke        android:width="1dp"        android:color="@color/white_seekbar" />
    <size        android:width="1dp"        android:height="200dp" />
</shape>