Thursday 1 August 2019

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>