En este Ejemplo Realizaremos una Actividad que Muestra un listado Horizontal de productos Almacenados en una Base de Datos.
Paso 1: Crearemos un nuevo Proyecto Android el cual yo llame EjemploListView en el cual crearemos una actividad del tipo EmptyActivity que llamaremos MainActivity
Paso 2: ahora para poder crear la lista horizontal necesitaremos un objeto pero antes de eso necesitaremos agregar unas dependencias.
En la Seccion de nuestro Proyecto llamada Gradle Script que se encuentra en la parte inferior, encontraremos una función que se llama build.gradle(Module:app) la cual Abriremos y en la seccion donde dice dependencies agregaremos:
compile 'com.android.support:recyclerview-v7:24.0.0' compile 'com.android.support:cardview-v7:24.0.0'
Nota: si en tu versión de android studio en vez de existir la palabra «compile» en tus dependencia existe include entonce quedaría:
include 'com.android.support:recyclerview-v7:24.0.0' include 'com.android.support:cardview-v7:24.0.0'
una vez insertadas en la parte superior aparecerá una barra amarilla en la cual aparecerá una opción que dirá sync now a la cual le daremos clic
Paso 3: una vez agregadas las dependencias anteriores En nuestra ventana xml activity_main.xml agregaremos un componente RecyclerView el cual llamaremos Lista. quedando el código de la siguiente manera:
<ScrollView 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="com.profeluismitre.ejemplolistviewhorizontal.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center|top">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Primer Lista de Productos"
android:textSize="25dp"
android:layout_marginTop="20dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="10dp">
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/listaHorizontal">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</LinearLayout>
</ScrollView>
Paso 4: crearemos un archivo xml que sera el cual insertaremos a la lista con la imagen e información de cada producto el archivo lo llamaremos elementos_lista.xml, en el cual implementaremos un Layout llamada CardView el cual semejara una carta, para crearlo daremos Clic derecho sobre la carpeta layout NEW>XML>LAYOUT XML el codigo quedario de la siguiente manera:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@android:color/holo_green_light">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/imgProductoH"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"/>
<TextView
android:id="@+id/CodigoProductoH"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/transparent"
android:text="menu"
android:layout_gravity="center"
android:textColor="@android:color/black"
android:textSize="15dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
Paso 5: Ahora creamos nuestra clase de MiBaseDatos que sera la encargada de crear la base de datos y por consiguiente almacenar la información.
public class MiBaseDatos extends SQLiteOpenHelper {
private static final String TABLA_PRODUCTO =
"CREATE TABLE productos (codigo TEXT PRIMARY KEY, descripcion TEXT, precio TEXT, cantidad TEXT, imagen INTEGER)";
private static final String SQL_DELETE_PRODUCTOS =
"DROP TABLE IF EXISTS productos";
public static final String NOMBRE_BD = "EjemploListView.sqlite";
public MiBaseDatos(Context contexto){
super(contexto, NOMBRE_BD, null, 1);
}
@Override
public void onCreate(SQLiteDatabase db) {
db.execSQL(TABLA_PRODUCTO);
}
@Override
public void onUpgrade(SQLiteDatabase db, int i, int i1) {
db.execSQL(SQL_DELETE_PRODUCTOS);
onCreate(db);
}
}
Paso 6: Crearemos nuestra clase que almacenara la información del producto para poder armar el listado la cual llamaremos Productos:
public class Productos {
private String codigo;
private String descripcion;
private String precio;
private String cantidad;
private int imagen;
public Productos(){}
public Productos(String codigo, String descripcion, String precio, String cantidad, int imagen) {
this.codigo = codigo;
this.descripcion = descripcion;
this.precio = precio;
this.cantidad = cantidad;
this.imagen = imagen;
}
public String getCodigo() {
return codigo;
}
public void setCodigo(String codigo) {
this.codigo = codigo;
}
public String getDescripcion() {
return descripcion;
}
public void setDescripcion(String descripcion) {
this.descripcion = descripcion;
}
public String getPrecio() {
return precio;
}
public void setPrecio(String precio) {
this.precio = precio;
}
public String getCantidad() {
return cantidad;
}
public void setCantidad(String cantidad) {
this.cantidad = cantidad;
}
public int getImagen() {
return imagen;
}
public void setImagen(int imagen) {
this.imagen = imagen;
}
}
Paso 7: Ahora dentro de la Actividad MainActivity creamos los siguiente objetos:
MiBaseDatos baseDatos; ArrayList<Productos>listaProductos=new ArrayList<Productos>(); RecyclerView Lista1;
los cuales necesitaremos para mostrar los productos.
Paso 8: Inicializamos el objeto Lista1 dentro del método onCreate y posteriormente mandaremos llamar a dos métodos que vamos a crear que son grabarBaseDatos() para almacenar productos en caso de que no tengamos, y el metodo cargarDatos() que sera el encargado de leer la base de datos y meterlos en el ArrayList.
Lista1 = (RecyclerView) findViewById(R.id.listaHorizontal); grabarBaseDatos(); cargarDatos(); Lista1.setLayoutManager(new LinearLayoutManager(MainActivity.this,LinearLayoutManager.HORIZONTAL,false)); Lista1.setAdapter(new HorizontalAdapter(listaProductos));
Paso 9: Ahora creamos los métodos antes mencionados.
Método grabarBaseDatos()
public void grabarBaseDatos(){
int imagenes[]={R.drawable.cereal1,R.drawable.cereal2,R.drawable.cereal3,
R.drawable.fruta1,R.drawable.fruta2,R.drawable.fruta3,R.drawable.refresco1,
R.drawable.refresco2,R.drawable.refresco3};
String descripcion[]={"ChocoCrispy","Frostie","Froot Loop","Naranja","Fruta Estrella","Platano","Coca-cola","Mundet","Coca-Light"};
String precio[]={"10.5","25","20","12.99","25.4","12.3","24","23.5","19.5"};
String cantidad[]={"10","10","10","10","10","10","10","10","10"};
String codigo[]={"123","456","789","987","654","321","759","258","369"};
baseDatos=new MiBaseDatos(getApplicationContext());
SQLiteDatabase sql=baseDatos.getWritableDatabase();
for (int x=0;x<imagenes.length;x++){
ContentValues valores=new ContentValues();
valores.put("codigo",codigo[x]);
valores.put("descripcion",descripcion[x]);
valores.put("precio",precio[x]);
valores.put("cantidad",cantidad[x]);
valores.put("imagen",imagenes[x]);
sql.insertWithOnConflict("productos",null,valores,SQLiteDatabase.CONFLICT_IGNORE);
}
sql.close();
}
Método cargarDatos()
public void cargarDatos(){
baseDatos=new MiBaseDatos(getApplicationContext());
SQLiteDatabase sql=baseDatos.getReadableDatabase();
String[] columnas={"codigo","descripcion","precio","cantidad","imagen"};
Cursor cursor=sql.query("productos",columnas,null,null,null,null,null);
Log.d("CAntidad de Productos",String.valueOf(cursor.getColumnCount()));
while(cursor.moveToNext()){
listaProductos.add(new Productos(
cursor.getString(cursor.getColumnIndex("codigo")),
cursor.getString(cursor.getColumnIndex("descripcion")),
cursor.getString(cursor.getColumnIndex("precio")),
cursor.getString(cursor.getColumnIndex("cantidad")),
cursor.getInt(cursor.getColumnIndex("imagen"))
));
}
sql.close();
}
Paso 10: ahora para que se pueda mostrar la lista crearemos el adaptador en nuestra actividad:
public class HorizontalAdapter extends RecyclerView.Adapter<HorizontalAdapter.HorizontalViewHolder> {
private ArrayList<Productos> productos;
public HorizontalAdapter(ArrayList<Productos> productos) {
this.productos=productos;
}
@Override
public HorizontalViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View view = inflater.inflate(R.layout.elementos_lista, parent, false);
return new HorizontalViewHolder(view);
}
@Override
public void onBindViewHolder(final HorizontalViewHolder holder, final int position) {
holder.imagen.setImageResource(productos.get(position).getImagen());
holder.codigo.setText(productos.get(position).getCodigo());
holder.imagen.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// custom dialog
final Dialog dialog = new Dialog(MainActivity.this);
dialog.setContentView(R.layout.mostrar_producto);
dialog.setTitle("Detalles de Producto.");
// set the custom dialog components - text, image and button
TextView txtCodigo = (TextView) dialog.findViewById(R.id.txtCodigoM);
txtCodigo.setText(productos.get(position).getCodigo());
TextView txtDescripcion = (TextView) dialog.findViewById(R.id.txtDescripcionM);
txtDescripcion.setText(productos.get(position).getDescripcion());
TextView txtPrecio = (TextView) dialog.findViewById(R.id.txtPrecioM);
txtPrecio.setText("$"+productos.get(position).getPrecio());
TextView txtCantidad = (TextView) dialog.findViewById(R.id.txtCantidadM);
txtCantidad.setText(productos.get(position).getCantidad());
ImageView image = (ImageView) dialog.findViewById(R.id.imgProdM);
image.setImageResource(productos.get(position).getImagen());
Button dialogButton = (Button) dialog.findViewById(R.id.btnAceptarM);
// if button is clicked, close the custom dialog
dialogButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
});
}
@Override
public int getItemCount() {
return productos.size();
}
public class HorizontalViewHolder extends RecyclerView.ViewHolder {
ImageView imagen;
TextView codigo;
TextView descripcion;
TextView precio;
TextView cantidad;
public HorizontalViewHolder(View itemView) {
super(itemView);
imagen = itemView.findViewById(R.id.imgProductoH);
codigo=itemView.findViewById(R.id.CodigoProductoH);
}
}
}
el código total de la actividad quedaría de la siguiente manera:
import android.app.Dialog;
import android.content.ContentValues;
import android.content.DialogInterface;
import android.database.Cursor;
import android.database.sqlite.SQLiteDatabase;
import android.support.v7.app.AlertDialog;
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 android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
MiBaseDatos baseDatos;
ArrayList<Productos>listaProductos=new ArrayList<Productos>();
RecyclerView Lista1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Lista1 = (RecyclerView) findViewById(R.id.listaHorizontal);
grabarBaseDatos();
cargarDatos();
Lista1.setLayoutManager(new LinearLayoutManager(MainActivity.this,LinearLayoutManager.HORIZONTAL,false));
Lista1.setAdapter(new HorizontalAdapter(listaProductos));
}
public void grabarBaseDatos(){
int imagenes[]={R.drawable.cereal1,R.drawable.cereal2,R.drawable.cereal3,
R.drawable.fruta1,R.drawable.fruta2,R.drawable.fruta3,R.drawable.refresco1,
R.drawable.refresco2,R.drawable.refresco3};
String descripcion[]={"ChocoCrispy","Frostie","Froot Loop","Naranja","Fruta Estrella","Platano","Coca-cola","Mundet","Coca-Light"};
String precio[]={"10.5","25","20","12.99","25.4","12.3","24","23.5","19.5"};
String cantidad[]={"10","10","10","10","10","10","10","10","10"};
String codigo[]={"123","456","789","987","654","321","759","258","369"};
baseDatos=new MiBaseDatos(getApplicationContext());
SQLiteDatabase sql=baseDatos.getWritableDatabase();
for (int x=0;x<imagenes.length;x++){
ContentValues valores=new ContentValues();
valores.put("codigo",codigo[x]);
valores.put("descripcion",descripcion[x]);
valores.put("precio",precio[x]);
valores.put("cantidad",cantidad[x]);
valores.put("imagen",imagenes[x]);
sql.insertWithOnConflict("productos",null,valores,SQLiteDatabase.CONFLICT_IGNORE);
}
sql.close();
}
public void cargarDatos(){
baseDatos=new MiBaseDatos(getApplicationContext());
SQLiteDatabase sql=baseDatos.getReadableDatabase();
String[] columnas={"codigo","descripcion","precio","cantidad","imagen"};
Cursor cursor=sql.query("productos",columnas,null,null,null,null,null);
Log.d("CAntidad de Productos",String.valueOf(cursor.getColumnCount()));
while(cursor.moveToNext()){
listaProductos.add(new Productos(
cursor.getString(cursor.getColumnIndex("codigo")),
cursor.getString(cursor.getColumnIndex("descripcion")),
cursor.getString(cursor.getColumnIndex("precio")),
cursor.getString(cursor.getColumnIndex("cantidad")),
cursor.getInt(cursor.getColumnIndex("imagen"))
));
}
sql.close();
}
public class HorizontalAdapter extends RecyclerView.Adapter<HorizontalAdapter.HorizontalViewHolder> {
private ArrayList<Productos> productos;
public HorizontalAdapter(ArrayList<Productos> productos) {
this.productos=productos;
}
@Override
public HorizontalViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
LayoutInflater inflater = LayoutInflater.from(parent.getContext());
View view = inflater.inflate(R.layout.elementos_lista, parent, false);
return new HorizontalViewHolder(view);
}
@Override
public void onBindViewHolder(final HorizontalViewHolder holder, final int position) {
holder.imagen.setImageResource(productos.get(position).getImagen());
holder.codigo.setText(productos.get(position).getCodigo());
holder.imagen.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// custom dialog
final Dialog dialog = new Dialog(MainActivity.this);
dialog.setContentView(R.layout.mostrar_producto);
dialog.setTitle("Detalles de Producto.");
// set the custom dialog components - text, image and button
TextView txtCodigo = (TextView) dialog.findViewById(R.id.txtCodigoM);
txtCodigo.setText(productos.get(position).getCodigo());
TextView txtDescripcion = (TextView) dialog.findViewById(R.id.txtDescripcionM);
txtDescripcion.setText(productos.get(position).getDescripcion());
TextView txtPrecio = (TextView) dialog.findViewById(R.id.txtPrecioM);
txtPrecio.setText("$"+productos.get(position).getPrecio());
TextView txtCantidad = (TextView) dialog.findViewById(R.id.txtCantidadM);
txtCantidad.setText(productos.get(position).getCantidad());
ImageView image = (ImageView) dialog.findViewById(R.id.imgProdM);
image.setImageResource(productos.get(position).getImagen());
Button dialogButton = (Button) dialog.findViewById(R.id.btnAceptarM);
// if button is clicked, close the custom dialog
dialogButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
dialog.dismiss();
}
});
dialog.show();
}
});
}
@Override
public int getItemCount() {
return productos.size();
}
public class HorizontalViewHolder extends RecyclerView.ViewHolder {
ImageView imagen;
TextView codigo;
TextView descripcion;
TextView precio;
TextView cantidad;
public HorizontalViewHolder(View itemView) {
super(itemView);
imagen = itemView.findViewById(R.id.imgProductoH);
codigo=itemView.findViewById(R.id.CodigoProductoH);
}
}
}
}
Bueno esto seria todo, si hiciste todo de manera correcta tendrías que ver una aplicación parecida a lo siguiente:
