How to Create a Custom Intro Slider of an Android App?

How to Create a Unlock Slide-Bar in Android?

Last Updated : 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.

Difference Between a SeekBar and a ProgressBar

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.

An example of Unlock Slide Bar

Where can one use it?

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.

Sample GIF

Approach

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.Intent 
import android.os.Bundle 
import android.widget.SeekBar 
import android.widget.TextView 
import android.widget.Toast 
import 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

<?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>

Kotlin

// No Changes in this file 
import androidx.appcompat.app.AppCompatActivity 
import android.os.Bundle 
  
class MainActivity2 : AppCompatActivity() { 
    override fun onCreate(savedInstanceState: Bundle?) { 
        super.onCreate(savedInstanceState) 
        setContentView(R.layout.activity_main2) 
    } 
}

Output: Run on Emulator

How to Create a Custom Intro Slider of an Android App?

aashaypawar

Improve

Article Tags :

Similar Reads

How to Create a Basic Intro Slider of an Android App?

When we download any app and use that app for the very first time. Then we will get to see the intro slider inside our app. With the help of this slider, we educate our users on how they can use that app and it tells in detail about the app. In this article, we will take a look at the implementation

How to Create a Custom Intro Slider of an Android App?

Intro Slider in many apps is mostly used to educate the users about the app, the features of the app, and the services that our app will provide to us. In this article, we will take a look at the implementation of Custom Intro Slider in our app. What we are going to build in this Article? We will be

How to Create Shine Effect in Android?

Shine Effect is used to give an ImageView, Button, or a View a better animation look. It is very easy to implement. 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. Step by Step Imple

How to Create Marquee Text in Android?

In this article, we are going to create Marquee Text in Android Studio. Marquee is a scrolling piece of text that is displayed either horizontally or vertically. It is used to show some important notices or headlines. It makes the app UI much more attractive. Note that we are going to use Java as th

How to Generate Barcode in Android?

Barcodes are the graphical representation of data that enables effortless scanning. When we aim to incorporate this functionality for various purposes in Android applications it becomes crucial to understand the underlying principles and techniques involved in generating barcodes effectively. In thi

How to Create Swipe Navigation in Android?

When talking about Android Apps, the first thing that comes to mind is variety. There are so many varieties of Android apps providing the user with a beautiful dynamic UI. One such feature is to navigate our Android Apps using left and right swipes as opposed to clicking on buttons. Not only does it

How to Create a New Fragment in Android Studio?

Android Studio is the official integrated development environment for Google's Android operating system, built on JetBrains' IntelliJ IDEA software and designed specifically for Android development. You can Develop Android App using this. Here, We are going to learn how to create a new Fragment in A

How to Customise MDC Sliders in Android?

In the article of Material Design Components Sliders in Android, it's been discussed how to implement the Material Design Component sliders in android and also handled the click listener for all types of sliders. In this article, it's been discussed how to customize the Material Design Component sli

How to Create an Onboarding Screen in Android?

Hello geeks, today we are going to learn that how we can add Onboarding Screen to our android application in the android studio so that we can provide a better user experience to the user of the application. What is Onboarding Screen? The onboarding screen can be understood as a virtual unboxing of

How to Create a Custom Stepper Form in Android?

In this article, we are going to implement the multi-step form in modern Android apps. The basic working of that is when User Clicks on the Next Button then a new form comes with different input fields. Also, we have added a step indicator feature to track the user's progress through the steps. Also