• Privacy Policy
  • Contact us
  • Register
  • Log In
  • Facebook
  • Pinterest
  • YouTube
  • WhatsUp
Nulled Source Code - NSC
  • Home
  • Mobile Apps
  • PHP Scripts
  • Paid Projects
  • WordPress Theme
Nulled Source Code - NSC
  • Home
  • Mobile Apps
  • PHP Scripts
  • Paid Projects
  • WordPress Theme

Android Widgets

  • Android DatePicker Example And Tutorial
  • Android SeekBar Exmple and Tutorial
  • Android WebView Example and Tutorial
  • Android RatingBar Tutorial and Example
  • Android ListView Tutorial and Example
  • Android Spinner Tutorial and Examples
  • Android Alert Dialog Tutorial and Example
  • Android Radio Button Tutorials
  • Android CheckBox Tutorial
  • Android Toggle Buttons
  • Android Toast Example
  • Types of Android Button and Examples
  • About Android Studio Widgets

About Android

  • How to Setup Different Android Emulators?
  • What is Android Architecture?
  • History of Android Studio and Version
  • What is Android Studio and Installation
  • Home
  • Courses
  • Android Widgets
  • Android SeekBar Exmple and Tutorial

Android SeekBar Exmple and Tutorial

Custom Android SeekBar Example and Tutorial - NSC - Nulled Source Code - Free Android Studio Course

Android SeekBar is an alternative which has capability to draggable thumb moves right or left, an example of this is YouTube Player in which you drage the thumb to skip a part of video means using this you can move to video on any timing. That’s why we need a SeekBar.

Seekbar Example:

Lest’s start, create an Android Studio Project and the below code in your layout activity_main.xml file

<?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"
    android:gravity="center"
    android:layout_marginStart="20sp"
    android:layout_marginEnd="20sp"
    tools:context=".MainActivity">

  <SeekBar
      android:id="@+id/seek_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
</RelativeLayout>

And add the below code to your MainActivity.java file:

package com.nsc.seekbar;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.SeekBar;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);

                SeekBar seekBar = (SeekBar) findViewById(R.id.seek_bar);
                seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
                        @Override
                        public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                                Toast.makeText(MainActivity.this, "SeekBar Progrees is : "+i,Toast.LENGTH_SHORT).show();
                        }

                        @Override
                        public void onStartTrackingTouch(SeekBar seekBar) {
                                 Toast.makeText(MainActivity.this, "SeekBar Touched!",Toast.LENGTH_SHORT).show();
                        }

                        @Override
                        public void onStopTrackingTouch(SeekBar seekBar) {
                                Toast.makeText(MainActivity.this, "SeekBar Stopped! ",Toast.LENGTH_SHORT).show();
                        }
                });
        }
}

Output of SeekBar is:

Android Defauld SeekBar Example - NSC - Nulled Source Code - Android Course Step by step free tutorials
Android Defauld SeekBar Example

Custom Android SeekBar:

To make a custo seekbar you will need to create some drawable files so first of create a SeekBar Thumb Drawable file name it as “seekbar_thumb” and add the below code to it:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" >

    <gradient
        android:angle="90"
        android:endColor="#00C853"
        android:startColor="#64DD17" />

    <size
        android:height="30dp"
        android:width="30dp" />

</shape>

Now create one more drawable file for our custom seekbar background and position and name it as “custom_seekbar” then add given code to this file:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background"
        android:gravity="center_vertical|fill_horizontal">
        <shape android:shape="rectangle"
            android:tint="#DCDDDC">
            <corners android:radius="8dp"/>
            <size android:height="20dp" />
            <solid android:color="#DCDDDC" />
        </shape>
    </item>
    <item android:id="@android:id/progress"
        android:gravity="center_vertical|fill_horizontal">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false"
                    android:drawable="@android:color/transparent" />
                <item>
                    <shape android:shape="rectangle"
                        android:tint="#00C853">
                        <corners android:radius="8dp"/>
                        <size android:height="20sp" />
                        <solid android:color="#00C853" />
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

Finally replace you activity_main.xml file with below code:

<?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"
    android:gravity="center"
    tools:context=".MainActivity">

  <SeekBar
      android:id="@+id/seek_bar"
      android:splitTrack="false"
      android:layout_marginStart="20sp"
      android:layout_marginEnd="20sp"
      android:progressDrawable="@drawable/border_seekbar"
      android:thumb="@drawable/seekbar_thumb"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>
</RelativeLayout>

Now run the project it will looks like the below screenshot:

Custom Android SeekBar Example and Tutorial - NSC - Nulled Source Code - Free Android Studio Course
Custom Android SeekBar Example and Tutorial

Click Here to Download Source Code

Android SeekBar
What are your Feelings
What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Updated on April 27, 2021
Android WebView Example and TutorialAndroid DatePicker Example And Tutorial

Leave a Comment X

You must be logged in to post a comment.

Copyright © 2022.Nuled Source Code.

  • Native Android
  • Paid Projects
  • Flutter
  • My Tickets
  • Register
  • Log In
  • Register
 

Loading Comments...
 

You must be logged in to post a comment.