Creación de SeekBar personalizada en Android

SeekBar puede entenderse como una extensión de ProgressBar en Android. Solo tiene que arrastrar el pulgar en SeekBar y arrastrarlo hacia atrás o hacia adelante y almacenar el valor actual del progreso cambiado. SeekBar se usa ampliamente en diferentes aplicaciones, por ejemplo, reproductor de audio, reproductor de video, etc. Puede implementar el SeekBar tradicional proporcionado por Android. En este artículo, veremos cómo podemos personalizar SeekBar de Android. Para crear una SeekBar personalizada, primero diseñaremos nuestra SeekBar y el pulgar de seekBar para esto agregaremos archivos de diseño en dibujables. También podemos usar imágenes como un pulgar para eso, en lugar de crear un diseño, solo tenemos que poner la imagen en el resto dibujable, las cosas serán iguales.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: 

Espere un momento. Después de que finalice la compilación, verá un archivo MainActivity.java y un archivo XML dentro de res -> diseño denominado activity_main.xml.  Crearemos nuestra SeekBar personalizada y la implementaremos en nuestro activity_main.xml.

Paso 3: 

Ahora haga clic con el botón derecho en dibujable -> nuevo -> archivo de recursos dibujable , nombre el archivo como custom_seekbar.xml y especifique el elemento raíz como lista de capas -> haga clic en Aceptar. se creará un nuevo archivo custom_seekbar.xml

Paso 4:  

Ahora, en custom_seekbar.xml dentro de la lista de capas, agregue un elemento y dele una forma. especifique el color, la altura y las esquinas de SeekBar. Además, agregue otro elemento de la misma forma y tamaño, pero puede cambiar el color, la parte izquierda del pulgar de SeekBar será de este color.

Paso 5:  

Ahora nuevamente haga clic en dibujable -> nuevo -> archivo de recurso dibujable , nombre el archivo como thumb.xml y especifique el elemento raíz como forma -> haga clic en Aceptar. se creará un nuevo archivo thumb.xml . Dentro de este archivo, proporcione la altura, el radio y el color del pulgar. estas cosas se pueden cambiar. Depende totalmente de cómo quieras diseñar.

Paso 6:  

Ahora vaya a la actividad_principal.xml cree un diseño y dentro del diseño agregue un SeekBar. Especifique el ancho de altura de SeekBar y el progreso máximo que desea utilizar para establecer el progreso en 0.

android:progressDrawable="@drawable/custom_seekbar"
android:thumb="@drawable/thumb" 
android:max="50"
android:progress="0"

Esto creará una barra de búsqueda personalizada dentro de activity_main.xml .

Paso 7: 

Ahora abra la clase MainActivity.java Declare objetos de SeekBar y TextView, dentro del método onCreate inicialice ambos objetos usando el método findViewById(). Realice un evento de detector de cambio de SeekBar que contendrá el valor de progreso y, al usar este evento, establezca el valor de progreso dentro de TextView .

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");

                
            }..

Paso 8

Compile y ejecute la aplicación. Coloque el pulgar en Seekbar y muévalo hacia adelante o hacia atrás para mostrar el proceso.

El código para la implementación anterior se proporciona a continuación:

A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.abhi.customseekbar;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.view.View;
import android.widget.SeekBar;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
     SeekBar seekBar;
     TextView value;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // initialize the seekBar object
        seekBar=findViewById(R.id.seekbar);
        value=findViewById(R.id.progress);
        // calling the seekbar event change listener
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            // increment or decrement on process changed
            // increase the textsize
            // with the value of progress
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                value.setText(progress+"/"+"50");            
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user touches the SeekBar
            }
 
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                // This method will automatically
                // called when the user
                // stops touching the SeekBar
            }
        });
    }
}

A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:orientation="vertical"
    android:background="#458C85"
    tools:context=".MainActivity">
 
    <RelativeLayout
        android:id="@+id/Relative_1"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:layout_weight="2">
 
        <TextView
            android:id="@+id/textViewSelectSizeOfArray"
            android:layout_width="273dp"
            android:layout_height="wrap_content"
            android:layout_above="@+id/seekbar"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
 
            android:layout_marginBottom="9dp"
            android:text="Custom Seek Bar"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="25dp" />
 
        <SeekBar
            android:id="@+id/seekbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="50"
            android:progress="0"
            android:progressDrawable="@drawable/custom_seekbar"
            android:thumb="@drawable/thumb" />
 
        <TextView
            android:id="@+id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="0dp"
            android:layout_marginRight="0dp"
            android:layout_marginBottom="199dp"
            android:padding="10dp"
            android:text="0"
            android:textAlignment="center"
            android:textColor="@color/white"
            android:textSize="30dp"
            android:textStyle="bold">
 
        </TextView>
 
    </RelativeLayout>
 
</LinearLayout>

A continuación se muestra el código para el archivo  custom_seekbar.xml .

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- color, size, shape height of seekbar -->
    <item android:gravity="center_vertical">
        <shape android:shape="rectangle">
            <solid android:color="#605A5C"/>
            <size android:height="30dp"/>
            <corners android:radius="9dp"/>
        </shape>
    </item>
    <!-- color, size, shape height of seekbar when u drag it-->
    <item android:gravity="center_vertical">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false"
                    android:drawable="@color/purple_200"/>
                <item>
                    <shape android:shape="rectangle">
                        <solid android:color="@color/black"/>
                        <size android:height="30dp"/>
                        <corners android:radius="9dp"/>
                    </shape>
                </item>
            </selector>
        </scale>
    </item>
</layer-list>

A continuación se muestra el código para el archivo thumb.xml . 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/purple_200"/>
    <size android:height="30dp" android:width="25dp"/>
    <corners android:radius="5dp"/>
</shape>

Producción:

Enlace del proyecto: Haga clic aquí