Programación en Android

Las Clases ProgressBar, SeekBar y RatingBar.

CONCEPTOS.
La clase ProgressBar.
Es un indicador visual de progreso para alguna operación. Muestra una barra para el usuario y representa la distancia que la
operación ha progresado; la aplicación puede cambiar la cantidad de progreso (modificación de la longitud de la barra) a
medida que avanza. También se dispone de un progreso secundario visible en una barra de progreso que es útil para mostrar
el progreso intermedio, similar al nivel de búfer durante una barra de progreso en la reproducción de streaming.

Una barra de progreso también se puede implantar en modo indeterminado. En el modo indeterminado, la barra de progreso
muestra una animación cíclica sin una indicación del progreso. Este modo se utiliza en algunas aplicaciones cuando se
desconoce la duración de la tarea. La barra de progreso indeterminada puede ser una rueda giratoria o una barra horizontal.

La jerarquía de clases de ProgressBar es la siguiente:

public class ProgressBar extends View

java.lang.Object > android.view.View > android.widget.ProgressBar

Las subclases directas de ProgressBar son:

AbsSeekBar, ContentLoadingProgressBar

Las subclases indirectas de ProgressBar son:

AppCompatRatingBar, AppCompatSeekBar, RatingBar, SeekBar

La clase SeekBar.
Un SeekBar es una extensión de ProgressBar que añade un segmento desplazable. El usuario puede tocar el segmento
y arrastrarlo hacia la izquierda o hacia la derecha para ajustar el nivel de progreso actual, o inclusive utilizar las teclas de
flecha. No se recomienda la colocación de los widgets enfocables a la izquierda o a la derecha de un SeekBar.

Los clientes del SeekBar pueden adjuntar un SeekBar.OnSeekBarChangeListener para que se le notifiquen las
acciones del usuario.

La jerarquía de clases de SeekBar es la siguiente:

public class SeekBar extends AbsSeekBar

java.lang.Object > android.view.View > android.widget.ProgressBar >

android.widget.AbsSeekBar > android.widget.SeekBar

La clase RatingBar.
Un RatingBar es una extensión de SeekBar y ProgressBar que muestra una clasificación en estrellas. Cuando se
utiliza el RatingBar de tamaño predeterminado, el usuario puede tocar, arrastrar o utilizar las teclas de flecha para definir
la clasificación. El estilo más pequeño de RatingBar (ratingBarStyleSmall) y el estilo mayor indicator-
only (ratingBarStyleIndicator) no son compatibles con la interacción del usuario y sólo deben utilizarse como
indicadores.

Cuando se utiliza un RatingBar que soporta la interacción del usuario, no se recomienda la colocación de widgets a la
izquierda o a la derecha del RatingBar.

1
M. en C. Alejandro Cifuentes A.
 Programación en Android

Se mostrará el número de estrellas establecidas (a través de setNumStars (int) o en una plantilla XML) cuando el
ancho de la plantilla se configure envolviendo al contenido (si se establece otro ancho de la plantilla, los resultados pueden
ser impredecibles).

El progreso secundario no debe ser modificado por el cliente, ya que se utiliza internamente como fondo de una estrella
fraccionadamente llena.

La jerarquía de clases de RatingBar es la siguiente:

public class RatingBar extends AbsSeekBar

java.lang.Object > android.view.View > android.widget.ProgressBar >

android.widget.AbsSeekBar > android.widget.RatingBar

Subclases directas:
AppCompatRatingBar

DESARROLLO
EJEMPLO 1.
Diseñar una aplicación que muestre una barra del tipo ProgressBar.
Paso 1. Crear un proyecto Barras. En la carpeta java/mipaquete del repositorio, modificar el archivo MainActivity.java
predeterminado, con el código siguiente:
import android.app.*;
import android.os.*;
import android.view.*;
import android.view.View.OnClickListener;
import android.widget.*;
public class MainActivity extends Activity implements OnClickListener{
ProgressBar jpb1, jpb2;
Button jbn1;
int i = 0;
@Override
public void onCreate(Bundle b) {
super.onCreate(b);
setContentView(R.layout.activity_main);
jpb1 = (ProgressBar) findViewById(R.id.xpb1);
jpb2 = (ProgressBar) findViewById(R.id.xpb2);
jbn1 = (Button) findViewById(R.id.xbn); jbn1.setOnClickListener(this);
}
public void onClick(View v){
if (i == 0 || i == 10) {
jpb1.setVisibility(View.VISIBLE); jpb1.setMax(200);
jpb2.setVisibility(View.VISIBLE);
}else if ( i< jpb1.getMax() ) {
jpb1.setProgress(i);
jpb1.setSecondaryProgress(i + 1);
}else {
jpb1.setProgress(0);
jpb1.setSecondaryProgress(0);
i = 0;
jpb1.setVisibility(View.GONE);
jpb2.setVisibility(View.GONE);
}
2
M. en C. Alejandro Cifuentes A.
 Programación en Android
i = i + 10;
}
}

Paso 2. En la carpeta res/layout, abrir y modificar el archivo activity_main.xml con el siguiente código:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Digitar en Inicio:"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Barra de Progreso Horizontal"
/>
<ProgressBar
android:id="@+id/xpb1"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:visibility="gone"
style="?android:attr/progressBarStyleHorizontal"
/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Barra de Progreso Circular"
/>
<ProgressBar
android:id="@+id/xpb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
style="?android:attr/progressBarStyle"
/>
<Button
android:id="@+id/xbn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Inicio"/>
</LinearLayout>

Paso 3. Por último, ejecutar la aplicación:

El estudiante deberá agregar aquí las pantallas de ejecución de esta aplicación.

EJEMPLO 2.
Diseñar una aplicación que muestre una barra del tipo SeekBar.
3
M. en C. Alejandro Cifuentes A.
 Programación en Android
Paso 1. Crear un proyecto Barras. En la carpeta java/mipaquete del repositorio, modificar el archivo MainActivity.java
predeterminado, con el código siguiente:
import android.app.*;
import android.os.*;
import android.widget.SeekBar.*;
import android.widget.*;
public class MainActivity extends Activity {
private SeekBar sb = null;
@Override
protected void onCreate(Bundle b) {
super.onCreate(b);
setContentView(R.layout.activity_main);
sb = (SeekBar) findViewById(R.id.xsb2);
sb.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
int i = 0;
public void onProgressChanged(SeekBar sb, int n, boolean b){
i = n;
}
public void onStartTrackingTouch(SeekBar sb) { }
public void onStopTrackingTouch(SeekBar sb) {
Toast.makeText(MainActivity.this,"Volumen:"+i, Toast.LENGTH_SHORT).show();
}
});
}
}

Paso 2. En la carpeta res/layout, abrir y modificar el archivo activity_main.xml con el siguiente código:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#F0F0F0" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical"
android:visibility="visible" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:text="Seekbar:"
android:textSize="20sp" />
<SeekBar
android:id="@+id/xsb1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:progress="20"
android:secondaryProgress="20" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"

4
M. en C. Alejandro Cifuentes A.
 Programación en Android
android:text="Seekbar tipo Volumen:"
android:textSize="20sp" />
<SeekBar
android:id="@+id/xsb2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:max="100"
android:progress="0"
android:secondaryProgress="0" />
</LinearLayout>
</RelativeLayout>

Paso 3. Por último, ejecutar la aplicación:

El estudiante deberá agregar aquí las pantallas de ejecución de esta aplicación.

EJEMPLO 3.
Diseñar una aplicación que muestre una barra del tipo RatingBar.
Paso 1. Crear un proyecto Barras. En la carpeta java/mipaquete del repositorio, modificar el archivo MainActivity.java
predeterminado, con el código siguiente:
import android.app.*;
import android.os.*;
import android.view.*;
import android.view.View.*;
import android.widget.*;
import android.widget.RatingBar.*;
public class MainActivity extends Activity {
RatingBar jrb1;
TextView jtv3;
Button jbn1;
@Override
public void onCreate(Bundle b) {
super.onCreate(b);
setContentView(R.layout.activity_main);
addListenerOnRatingBar();
addListenerOnButton();
}
public void addListenerOnRatingBar() {
jrb1 = (RatingBar) findViewById(R.id.xrb1);
jtv3 = (TextView) findViewById(R.id.xtv3);
jrb1.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
public void onRatingChanged(RatingBar rb, float f, boolean bo) {
jtv3.setText(String.valueOf(f));
}
});
}
public void addListenerOnButton() {
jrb1 = (RatingBar) findViewById(R.id.xrb1);
jbn1 = (Button) findViewById(R.id.xbn1); jbn1.setOnClickListener(new
OnClickListener() {
@Override
public void onClick(View v) {

5
M. en C. Alejandro Cifuentes A.
 Programación en Android
Toast.makeText(MainActivity.this, "Evaluación: " + jrb1.getRating(),
Toast.LENGTH_SHORT).show();
}
});
}
}

Paso 2. En la carpeta res/layout, abrir y modificar el archivo activity_main.xml con el siguiente código:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/xtv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tu calificación?:" />
<RatingBar
android:id="@+id/xrb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="4"
android:stepSize="1.0"
android:rating="2.0" />
<Button
android:id="@+id/xbn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Enviar" />
<LinearLayout
android:id="@+id/xll2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:id="@+id/xtv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Resultado: " />
<TextView
android:id="@+id/xtv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
</LinearLayout>
</LinearLayout>

Paso 3. Por último, ejecutar la aplicación:

El estudiante deberá agregar aquí las pantallas de ejecución de esta aplicación.

6
M. en C. Alejandro Cifuentes A.