Vertical SeekBar in Android

A SeekBar in Android is an extension of ProgressBar that includes a movable thumb to change the progress in real-time. Android ProgressBar is a user interface control that indicates the progress of an operation. These SeekBars and ProgressBars are generally displayed horizontally. However, the orientation can be changed as the user needs.

So in this article, we will show you how you could implement a vertical SeekBar in Android. Follow the below steps once the IDE is ready.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. We demonstrated the application in Kotlin, so make sure you select Kotlin as the primary language while creating a New Project.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. Add a TextView to display the progress and a Seekbar as shown below. Note to add rotation attribute to the SeekBar at 270 degrees to make it exactly vertical.

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/text_view_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="50sp"
        android:textSize="50sp"/>

    <SeekBar
        android:id="@+id/seek_bar_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:rotation="270"/>

</RelativeLayout>

Step 3: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to 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

package org.geeksforgeeks.verticalseekbar

import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.SeekBar
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Declaring and initializing
        // the elements from the layout
        val mTextView = findViewById<TextView>(R.id.text_view_1)
        val mSeekBar = findViewById<SeekBar>(R.id.seek_bar_1)

        // Set the min, max and current
        // values to the SeekBar
        var mMin = 0
        var mMax = 100
        var mCurrent = 20
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            mSeekBar.min = mMin
            mSeekBar.max = mMax
        }

        // Set the current to progress
        // and display in the TextView
        mSeekBar.progress = mCurrent
        mTextView.text = mCurrent.toString()

        // On Change Listener to change
        // current values as drag
        mSeekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(p0: SeekBar?, p1: Int, p2: Boolean) {
                mCurrent = p1
                mTextView.text = mCurrent.toString()
            }

            override fun onStartTrackingTouch(p0: SeekBar?) {}
            override fun onStopTrackingTouch(p0: SeekBar?) {}
        })
    }
}

Output:

You can see that the SeekBar is rotated to 270 degrees and progress changes as dragged by the user.