How to Create a Unlock Slide-Bar in Android? - GeeksforGeeks

23 Feb, 2021
A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level or use the arrow keys. SeekBar is a useful user interface element in Android that allows the selection of integer values using a natural user interface. An example of SeekBar is your device’s brightness control and volume control. But did you knew a SeekBar could be implemented as an Unlock Slide Bar? Through this article, we want to share with you how one can implement an Unlock Slide Bar using a SeekBar.
SeekBar has the same attributes as a ProgressBar. But the only difference is the user determines the progress by moving a slider (thumb) in SeekBar. To add a SeekBar to a layout (XML) file, you can use the <SeekBar> element. Below is an example of the Unlock Slide Bar.
To unlock a screen, unlock an activity, go to an activity (what we discussed in this article).
Using a similar concept to build Games.
Confirming a checkout at Payment Gateways.
For Switching off the Alarms.
A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Kotlin language. 
Please refer to the following points that define the module for the application that we implemented:
The application has 2 Activities, MainActivity and MainActivity2, both have respective layout files activity_main and activity_main2.
The SeekBar is present in the First Activity, i.e., declared in the activity_main file.
We have programmed the SeekBar in such a way that when the user swipes it till the end, the user is taken to a new activity, i.e., MainActivity2. Else, the SeekBar sets its progress to 0 and displays a Toast message.
A textView is provided in the First Activity to show the progress of the SeekBar in real-time.
To create a Slide-Bar in Android, we follow the following steps:
Step 1: Create a New Project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.
Step 2: Working with the activity_main.xml file
Now go to the activity_main.xml file which represents the UI of the application. Create a SeekBar and TextView as shown. Below is the code for the activity_main.xml file.
XML
<?xml version="1.0" encoding="utf-8"?><RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity">      <!--Seek Bar, set max to 100 to view the progress with respect to 100-->    <!--progressDrawable is the color you want for your progress track-->    <!--thumb is the icon that user will slide over the track-->    <SeekBar        android:id="@+id/sbb"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:clickable="false"        android:max="100"        android:progressDrawable="@color/colorPrimaryDark"        android:thumb="@mipmap/ic_launcher"        tools:ignore="MissingConstraints" />      <!--This textView will display the progress of SeekBar-->    <TextView        android:id="@+id/tv"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true" />  </RelativeLayout>
Step 3: Working with the MainActivity.kt file
Go to the MainActivity.kt file, and refer the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.
Kotlin
import android.content.Intentimport android.os.Bundleimport android.widget.SeekBarimport android.widget.TextViewimport android.widget.Toastimport androidx.appcompat.app.AppCompatActivity  class MainActivity : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main)          // declare the textView from the layout file        val tv = findViewById<TextView>(R.id.tv)          // declare the SeekBar from the layout file        val sb = findViewById<SeekBar>(R.id.sbb)          // Action when SeekBar is used        sb.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {                // Member Implementation (Required)            // Keeps the track if touch was lifted off the SeekBar            override fun onStopTrackingTouch(seekBar: SeekBar) {                  // If touch was lifted before the SeekBar progress was 100                // Make a Toast message "Try Again" and set the progress to 0                if (seekBar.progress < 100) {                    Toast.makeText(applicationContext, "Try Again", Toast.LENGTH_SHORT).show()                    seekBar.progress = 0                }            }              // Member Implementation (Required)            override fun onStartTrackingTouch(seekBar: SeekBar) {                  // Do anything or Nothing              }              // Member Implementation (Required)            // Keeps the track of progress of the seekbar            override fun onProgressChanged(                seekBar: SeekBar, progress: Int,                fromUser: Boolean            ) {                // Show the progress when progress was less than 100                if (progress < 100) {                    tv.text = "Progress : $progress"                }                  // If the progress is 100, take the user to another activity                // Via Intent                if (progress == 100) {                    startActivity(                        Intent(                            applicationContext,                            MainActivity2::class.java                        )                    )                }            }        })    }}
Step 4: Create another activity
Create another activity with layout file by right-clicking on the app folder > New > Activity > Empty Activity. And refer to the following code. The only changes made to the activity_main2.xml file, no changes made to the MainActivity2.kt file. Below is the core for both activity_main2.xml and MainActivity2.kt file.
XML
Kotlin
<?xml version="1.0" encoding="utf-8"?><RelativeLayout     xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity2">      <!--activity_main2.xml file that shows        "New Activity" message in a textView-->    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerInParent="true"        android:text="New Activity"        android:textSize="50sp" />  </RelativeLayout>
// No Changes in this fileimport androidx.appcompat.app.AppCompatActivityimport android.os.Bundle  class MainActivity2 : AppCompatActivity() {    override fun onCreate(savedInstanceState: Bundle?) {        super.onCreate(savedInstanceState)        setContentView(R.layout.activity_main2)    }}
Android-Bars
Android
Kotlin
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create and Add Data to SQLite Database in Android?
Resource Raw Folder in Android Studio
Broadcast Receiver in Android With Example
Android RecyclerView in Kotlin
Content Providers in Android with Example
Broadcast Receiver in Android With Example
Kotlin Array
Android UI Layouts
Android RecyclerView in Kotlin
Content Providers in Android with Example