SOME

Manejo de
RecyclerView II
dheeyi@gmail.com

Objetivo
Se tiene como objetivo mostrar un listado de items (elementos) utilizando el componente RECYCLERVIEW de android. Este elemento
nos permite mostrar listas con una excelente presentación al usuario.

Además es posible agregar colecciones desde la aplicación de manera local y también acceder y listar elementos que se encuentren
en INTERNET. Es decir es posible listar ítems que se encuentren localmente y otros que estén disponibles en Internet.
 Ver el vídeo de lanzamiento

Desarrollo del laboratorio

1. Agregar un nuevo Android Resource Directory (click derecho sobre el directorio res).

2. Agregamos el resource type RAW.

3. Copiar un audio cualesquiera al directorio creado previamente.
4. Modificar el .xml relacionado al activity..
a.

logotipo usado

<color name="colorPrimaryDark">#FB8620</color>
b. Debe tener la siguiente apariencia
5. Modificar el MainActivity.java (El activity que usa el xml modificado anteriormente).

public class Recorder extends AppCompatActivity implements View.OnClickListener {

MediaPlayer player;
Button btPlay, btPause, btStop;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recorder);
_initComponentes();
}

public void _initComponentes() {

btPlay = (Button)findViewById(R.id.btPlay);
btPause = (Button)findViewById(R.id.btPause);
btStop = (Button)findViewById(R.id.btStop);

btPlay.setOnClickListener(this);
btPause.setOnClickListener(this);
btStop.setOnClickListener(this);
}

public void _initSong() {

if (player == null) {
player = MediaPlayer.create(this, R.raw.helloworld);
}
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btPlay: _clickPlay(); break;
case R.id.btPause: _clickPause(); break;
case R.id.btStop: _clickStop(); break;
}
 }

public void _clickPlay() {

message("click Play");
_initSong();
player.start();

public void _clickPause() {

message("click Pause");
_initSong();
player.pause();
}

public void _clickStop() {

message("click Stop");
_initSong();
player.release();
player = null;
}

protected void onStop(){

super.onStop();
_clickStop();
}

public void message(String message) {

Toast.makeText(this, message, Toast.LENGTH_SHORT).show();
}
}

6. Hasta este punto siguiendo los pasos anteriores solo queda hacer correr la aplicación. El comportamiento esperado debería
ser los siguientes:
 a. Al presionar el button PLAY la canción empieza a sonar.
b. Al presionar el button PAUSE la canción se detiene.
c. Finalmente el button STOP termina la canción.

7. Iniciar la aplicación.

a. remove private.

8. Aplicación Corriendo en un Emulador Android.

Nombre Completo

1 Jose Luis - Erick

2 oel Arancibia

3 Raquel

4 Sandra - Julian

5 Jomar - Gabriela

6 Einar - Bernarda

7 Oscar I
9. Modificar el archivo .xml para que tenga la siguiente apariencia.

Nombre Completo

1 Jomar - Gabriela

2 Joel Arancibia

Nombre Completo
 1 Jose Luis - Erick

2 Esteban Pereira

3 Oscar I.

10. Agregar la funcionalidad de reproducir los archivos .mp3 en el recycler view. (Este ejercicio tiene un valor de 15 %)
a.

3 Esteban Pereira

7
public class RecorderAdapter {
MediaPlayer player;
Context context;
Integer sound;

public RecorderAdapter(Context context, Integer sound) {

this.context = context;
this.sound = sound;
}

public void _initSong() {

if (player == null) {
player = MediaPlayer.create(context, sound);
}
}

public void _clickPlay() {

if (player != null && player.isPlaying()) {
player.stop();
player.reset();
player = null;
}
_initSong();
player.start();

public void _clickPause() {

_initSong();
player.pause();
}

public void _clickStop() {

 _initSong();
player.release();
player = null;
}
}

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rlListItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="4dp">

<TableLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:stretchColumns="*"
>
<TableRow>
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/civItem"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="@mipmap/ic_launcher"/>

<TextView
android:id="@+id/tvImage"
android:layout_width="90dp"
android:layout_height="wrap_content"
android:text="@string/bolivia"
android:layout_toRightOf="@id/civItem"
android:layout_centerVertical="true"
android:padding="8dp"
 android:textColor="@color/colorText"
android:textSize="16sp"
/>
<Button
android:id="@+id/btPlay1"
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="@string/play"
/>
<Button
android:id="@+id/btPause1"
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="@string/pause"
/>
<Button
android:id="@+id/btStop1"
android:layout_width="60dp"
android:layout_height="match_parent"
android:text="@string/stop"
/>
</TableRow>
</TableLayout>

</RelativeLayout>

package com.dheeyi.recyclerview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private static final String TAG = "MainActivity";

private ArrayList<String> names = new ArrayList<>();

private ArrayList<Integer> imageUrls = new ArrayList<>();
private ArrayList<Integer> sounds = new ArrayList<>();

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

private void _initImageBitmaps(){

Log.d(TAG, "initImageBitmaps: preparing bitmaps.");

imageUrls.add(R.drawable.sp);
names.add("Spotify");
sounds.add(R.raw.helloworld);

imageUrls.add(R.drawable.fb);
names.add("Facebook");
sounds.add(R.raw.bensoundsunny);

imageUrls.add(R.drawable.dl);
names.add("Duolingo");
sounds.add(R.raw.helloworld);
 imageUrls.add(R.drawable.mg);
names.add("Messenger");
sounds.add(R.raw.bensoundsunny);

imageUrls.add(R.drawable.sc);
names.add("Snapchat");
sounds.add(R.raw.helloworld);

imageUrls.add(R.drawable.tw);
names.add("Twitter");
sounds.add(R.raw.bensoundsunny);

private void _initRecyclerView(){

Log.d(TAG, "initRecyclerView: init recyclerview.");
RecyclerView recyclerView = findViewById(R.id.rvContainer);
RVAdapter adapter = new RVAdapter(this, names, imageUrls, sounds);
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new LinearLayoutManager(this));
}
}

RVADAPTER

package com.dheeyi.recyclerview;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.bumptech.glide.Glide;

import java.util.ArrayList;

public class RVAdapter extends RecyclerView.Adapter<ViewHolder> {

private static final String TAG = "RVAdapter";

private Context context;

RecorderAdapter recorderAdapter = null;
private ArrayList<String> imageNames = new ArrayList<>();
private ArrayList<Integer> images = new ArrayList<>();
private ArrayList<Integer> sounds = new ArrayList<>();

public RVAdapter(Context context, ArrayList<String> imageNames, ArrayList<Integer> images, ArrayList<Integer> sounds) {

this.context = context;
this.imageNames = imageNames;
this.images = images;
this.sounds = sounds;
}

@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
//accedemos al resource file RL_LIST_ITEM
View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.rl_list_item, viewGroup, false);
//utilizamos la clase ViewHolder
ViewHolder vHolder = new ViewHolder(view);
return vHolder;
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, final int position) {
Log.d(TAG,"onBindViewHolde... called!!!");
//para el loading de las imagenes
Glide.with(context)
.asBitmap()
.load(images.get(position))
.into(viewHolder.circleImage);

//seateamos el texto
viewHolder.tvTextImageName.setText(imageNames.get(position));

viewHolder.btPlay.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
recorderAdapter = new RecorderAdapter(context, sounds.get(position));
recorderAdapter._clickPlay();
}
});
viewHolder.btPause.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
recorderAdapter = new RecorderAdapter(context, sounds.get(position));
recorderAdapter._clickPause();
}
});
viewHolder.btStop.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
recorderAdapter = new RecorderAdapter(context, sounds.get(position));
recorderAdapter._clickStop();
}
});
 //toast al presionar sobre el texto
viewHolder.rlContainer.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Log.d(TAG, "Clicked on: " + imageNames.get(position));
message(imageNames.get(position));
}
});
}

@Override
public int getItemCount() {
return imageNames.size();
}

public void message(String message) {

Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
}
}

11. Cuando se presiona PLAY y se presiona nuevamente PLAY en otra canción. El audio debe detenerse (STOP) para que se
pueda ejecutar la canción actual.
a.

Nombre Completo

2
 3

4
b.
12. Deshabilitar el botón PAUSE cuando se presiona PLAY.
a.

Nombre Completo

13. Cargando imágenes desde INTERNET utilizando el RECYCLERVIEW previamente creado.

a.

Nombre Completo

4
b.

Nombre Completo