SPINNERS

Spinner allows you to select an item from a drop down menu

For example. When you are using Gmail application you would get drop
down menu as shown below, you need to select an item from a drop
down menu.

SPINNER EXAMPLE

Example
This example demonstrates the category of computers, you need to
select a category from the category.

To experiment with this example, you need to run this on an actual device
on after developing the application according to the steps below.

Steps Description

1 You will use Android studio to create an Android application and name it
as AndroidSpinnerExample under a package com.example.spinner. While
creating this project, make sure you Target SDK and Compile With at the
latest version of Android SDK to use higher levels of APIs.

2 Modify src/AndroidSpinnerExampleActivity.java file to create a simple list

view with items which are showing as spinner items
 3 Modify res/layout/activity_main.xml file to add respective XML code.

4 No need to define default string constants. Android studio takes care of

default string constants at string.xml

5 Run the application and choose a running android device and install the
application on it and verify the results.

Following is the content of the modified main activity

filesrc/com.example.spinner/AndroidSpinnerExampleActivity.ja
va.

package com.example.spinner;

import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;
import android.widget.AdapterView.OnItemSelectedListener;

public class AndroidSpinnerExampleActivity extends Activity implements

OnItemSelectedListener{
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

// Spinner element
Spinner spinner = (Spinner) findViewById(R.id.spinner);
 // Spinner click listener
spinner.setOnItemSelectedListener(this);

// Spinner Drop down elements

List<String> categories = new ArrayList<String>();
categories.add("Automobile");
categories.add("Business Services");
categories.add("Computers");
categories.add("Education");
categories.add("Personal");
categories.add("Travel");

// Creating adapter for spinner

ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, categories);

// Drop down layout style - list view with radio button

dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_ite
m);

// attaching data adapter to spinner

spinner.setAdapter(dataAdapter);
}

@Override
public void onItemSelected(AdapterView<?> parent, View view, int position,
long id) {
// On selecting a spinner item
String item = parent.getItemAtPosition(position).toString();

// Showing selected spinner item

Toast.makeText(parent.getContext(), "Selected: " + item,
Toast.LENGTH_LONG).show();
 }
public void onNothingSelected(AdapterView<?> arg0) {
// TODO Auto-generated method stub
}
}

Modify the content of res/layout/activity_main.xml to the following

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:padding="10dip"
android:layout_width="fill_parent"
android:layout_height="wrap_content">

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:text="Category:"
android:layout_marginBottom="5dp"/>

<Spinner
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:prompt="@string/spinner_title"/>

</LinearLayout>

Modify the res/values/string.xml to the following

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

<resources>
<string name="app_name">AndroidSpinnerExample</string>
 <string name="action_settings">Settings</string>
</resources>

This is the default AndroidManifest.xml

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.spinner"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="22" />

<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >

<activity
android:name="com.example.spinner.AndroidSpinnerExampleActivity"
android:label="@string/app_name" >

<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

</activity>

</application>
</manifest>
Let's try to run your AndroidSpinnerExample application. I assume you
have connected your actual Android Mobile device with your computer.
To run the app from Android studio, open one of your project's activity
files and click Run icon from the toolbar. Before starting your
application,Android studio will display following window to select an
option where you want to run your Android application.

If you click on spinner button, It will a drop down menu as shown below
 Hello, Android developers

In the last article, we have learned how to

create AutoCompleteTextView in Android Project.
We have already created Spinner (Drop-Down List) example in
Eclipse. But, today we are going to create a simple Spinner (Drop-
Down List) example in Android Studio 2.0.
What is Spinner in Android?
Spinner is a widget similar to a drop down list for selecting
items. Spinner allows you to select an item from a drop down menu. It
provides an easy way to select the value from a list. Clicking spinner
will display a drop-down list with the available values.

You can use android.widget.Spinner class to render a dropdown box

selection. It provides a quick way to select one value from a set. In the default
state, a spinner shows its currently selected value.

In this tutorial, we will create a simple android application which will

demonstrate two ways of assigning values to the spinner.

First spinner (Country Spinner) will get value from a string.xml file and
another spinner (Business Type) will get value dynamically.
1. Using XML layout: Render a Spinner in XML, and load the spinner items
via XML file.
2. Programmatically or Dynamically: Render another Spinner in XML, and
load the spinner items programmatically.
Attach a listener to both Spinner to show the selected items to the
user.
 Android Spinner (DropDown List)
Example
Create New Android Project
1. Create a new project and fill the required details File New Android
Project
2. Open res/values/strings.xml file, define the list of items that will
display in Spinner (dropdown list).
File : res/values/strings.xml

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

<resources>

<string name="app_name">Pulse7 Demo</string>

<string name="business_prompt">Choose a Bussiness Type</string>
<string name="country_prompt">Choose a Country</string>
<string-array name="country_arrays">
<item>India</item>
<item>United States</item>
<item>United Kingdom</item>
<item>France</item>
<item>Italy</item>
<item>Singapore</item>
<item>New Zealand</item>
</string-array>
</resources>

3. Now open your main.xml and design a simple layout with text label and a
spinner.
01 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
02 android:orientation="vertical" android:layout_width="fill_parent"
03 android:layout_height="fill_parent">
04 <TextView android:layout_width="fill_parent"
05 android:layout_height="wrap_content" android:text="Pulse 7 - Spinner Demo"
android:textColor="#fff" android:textSize="20sp" />
06 <TextView android:layout_width="fill_parent"
07 android:layout_height="wrap_content" android:text="Select Country"
08 android:textColor="#fff" android:textSize="20sp" />
09
10 <Spinner android:layout_width="match_parent"
11 android:layout_height="wrap_content" android:id="@+id/spCountries"
android:prompt="@string/country_prompt" android:entries="@array/country_ar
12 <TextView android:layout_width="fill_parent"
13 android:layout_height="wrap_content" android:text="Select Business Type"
 14 android:textColor="#fff" android:textSize="20sp" />
15
16 <Spinner android:layout_width="match_parent"
android:layout_height="wrap_content" android:id="@+id/spBussinessType"
17 android:prompt="@string/business_prompt"></Spinner>
18
19 </LinearLayout>
20
21
22
23
4. Now open your Activity Class and put following code.
package com.vrs.pulse7;
01
02 import android.app.Activity;
03 import android.os.Bundle;
04 import android.view.View;
05 import android.widget.AdapterView;
06 import android.widget.AdapterView.OnItemSelectedListener;
import android.widget.ArrayAdapter;
07 import android.widget.Spinner;
08 import android.widget.Toast;
09
10 public class Pulse7DemoActivity extends Activity {
11
12 // Wigets - GUI
13 Spinner spCountries;
Spinner spBusinessType;
14
15 // Data Source
16 String businessType[] = { "Automobile", "Food", "Computers", "Education",
17 "Personal", "Travel" };
18
19 // Adapter
ArrayAdapter<String> adapterBusinessType;
20
21 /** Called when the activity is first created. */
22 @Override
23 public void onCreate(Bundle savedInstanceState) {
24 super.onCreate(savedInstanceState);
25 setContentView(R.layout.main);
26
// Initialize Spinners
27
28 spCountries = (Spinner) findViewById(R.id.spCountries);
29 spBusinessType = (Spinner) findViewById(R.id.spBussinessType);
30
31 // Initialize and set Adapter
32 adapterBusinessType = new ArrayAdapter<String>(this,
android.R.layout.simple_spinner_item, businessType);
33 spBusinessType.setAdapter(adapterBusinessType);
34
35 // Country Item Selected Listener
36 spCountries.setOnItemSelectedListener(new OnItemSelectedListener() {
37
38 @Override
public void onItemSelected(AdapterView<?> adapter, View v,
39 int position, long id) {
40 // On selecting a spinner item
41 String item = adapter.getItemAtPosition(position).toString();
42
43 // Showing selected spinner item
Toast.makeText(getApplicationContext(),
44 "Selected Country : " + item, Toast.LENGTH_LONG).show();
45 }
46
47 @Override
48 public void onNothingSelected(AdapterView<?> arg0) {
49 // TODO Auto-generated method stub
50
}
51 });
52 // Business Type Item Selected Listener
53 spBusinessType.setOnItemSelectedListener(new OnItemSelectedListener() {
54
55 @Override
public void onItemSelected(AdapterView<?> adapter, View v,
56 int position, long id) {
57 // On selecting a spinner item
58 String item = adapter.getItemAtPosition(position).toString();
59
60 // Showing selected spinner item
61 Toast.makeText(getApplicationContext(),
"Bussiness Type : " + item, Toast.LENGTH_LONG).show();
62 }
63
64 @Override
65 public void onNothingSelected(AdapterView<?> arg0) {
66 // TODO Auto-generated method stub
67
68 }
});
69 }
70 }
71
72
73
74
75
76
77
78
79
80
81
82
5. Now Execute the application

Application Started

Click on Country Spinner

Select Spinner Option, It will display selected value
Si has creado algn sitio Web, es probable que alguna vez hayas tenido que usar unos elementos
llamados comboboxes, estos elementos son listas desplegables que nos permiten seleccionar algn
valor. Son muy tiles, ya que al tener que elegir el valor y no introducirlo manualmente, no habr
posibilidad de que el valor sea incorrecto.

Es muy comn el uso de comboboxes dinmicos, cuyo funcionamiento es el siguiente: Tenemos

un combobox A y otro B, dependiendo del valor seleccionado en A se cargarn unos valores
determinados en B. Un ejemplo muy claro es el que vamos a tratar hoy: Se mostrar en
elcombobox A la listas de provincias espaolas, y dependiendo de la provincia seleccionada
se cargar la lista de localidades en el combobox B.

Vamos a ver a continuacin como implementar este concepto en Android. En primer lugar,
especificar que los comboboxes se implementan con la etiqueta <select> en HTML y que en
android se utiliza el elemento Spinner.

Vamos a definir los recursos que vamos a utilizar en la aplicacin. En primer lugar vamos a mostrar
los textos que vamos a usar y que se encuentran almacenados en el fichero strings.xml:

res / values / strings.xml

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

4 <string name="app_name">Provincias y Localidades

Espaolas</string>
5
<string name="action_settings">Settings</string>
6
<string name="provincia">Provincia</string>
7 <string name="localidad">Localidad</string>
8 <string name="provincia_prompt">Elija una provincia</string>
9 <string name="localidad_prompt">Elija una localidad</string>

10 <string name="comprobar">Comprobar</string>

11 <string name="message">Ha seleccionado %1$s (%2$s)</string>

12
</resources>
13
Luego tendremos el fichero provincias_espana.xml donde se guarda toda la informacin acerca de
las provincias y localidades de Espaa que vamos a usar en la aplicacin. En este fichero hay que
diferenciar tres partes:

El elemento <string-array name="provincias"> : En este array se guardan la lista

de provincias espaolas por orden alfabtico. Es un elemento del tipo String Array.
Los elementos <string-array name="localidades_XXXXXX">. Donde XXXXXX se
corresponde con el nombre de alguna provincia espaola. Son elementos del tipo String
Array.
El elemento <array name="array_provincia_a_localidades">. Este array lo
utilizaremos para relacionar cada provincia con sus localidades. Es importante que el par
posicin/provincia del array array_provincia_a_localidades coincida con el del
arrayprovincias. Por ejemplo, la posicin 0 del array provincias se corresponde con
Albacete, y como podemos ver, la posicin 0 del
array array_provincia_a_localidadesapunta al
array localidades_albacete que contiene los nombres de las localidades de Albacete.
Es un elemento del tipo Typed Array.

Debido a la longitud del fichero no lo muestra aqu, dejo este enlace al fichero almacenado en mi
cuenta de Github.

Una vez definidos los recursos, vamos a ver como implementar los comboboxes. En primer lugar,
deberemos definir dos elementos Spinner en nuestro layout, uno para listar las provincias y otra
para las localidades:

res / layout / activity_main.xml

<LinearLayout
1 xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"

3 android:layout_width="match_parent"

4 android:layout_height="match_parent"

android:orientation="vertical"
5
android:padding="10dp"
6
tools:context=".MainActivity" >
7

8
<TextView
9
android:id="@+id/tv_provincia"
10 android:layout_width="wrap_content"

11 android:layout_height="wrap_content"

android:text="@string/provincia" />
12

13
<Spinner
14
android:id="@+id/sp_provincia"
15
android:layout_width="match_parent"
16
android:layout_height="wrap_content"
17 android:prompt="@string/provincia_prompt"
18 android:spinnerMode="dropdown" />
19

20 <TextView

21 android:id="@+id/tv_localidad"

22 android:layout_width="wrap_content"

android:layout_height="wrap_content"
23
android:text="@string/localidad" />
24

25
<Spinner
26
android:id="@+id/sp_localidad"
27
android:layout_width="match_parent"
28 android:layout_height="wrap_content"
29 android:prompt="@string/localidad_prompt"

30 android:spinnerMode="dropdown" />

31

32 <Button

33 android:layout_width="wrap_content"

android:layout_height="wrap_content"
34
android:onClick="showLocalidadSelected"
35
android:text="@string/comprobar" />
36

37
</LinearLayout>
38

39

40

41

A continuacin vamos a ver la manera en la que se van a sincronizar los comboboxes. En primer
lugar vamos a definir el mtodo onCreate(Bundle savedInstanceState) de nuestra actividad:

MainActivity.java
1
@Override
2 protected void onCreate(Bundle savedInstanceState) {
3 super.onCreate(savedInstanceState);
4 setContentView(R.layout.activity_main);

6 this.spProvincias = (Spinner) findViewById(R.id.sp_provincia);

7 this.spLocalidades = (Spinner) findViewById(R.id.sp_localidad);

8
loadSpinnerProvincias();
9

10
}
11

Como vemos a la hora de crear la actividad invocamos el

mtodo loadSpinnerProvincias() que definimos a continuacin:

MainActivity.java
/**
1
* Populate the Spinner.
2
*/
3
private void loadSpinnerProvincias() {
4

5
// Create an ArrayAdapter using the string array and a default spinner
6 // layout
7 ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(

8 this, R.array.provincias, android.R.layout.simple_spinner_item);

// Specify the layout to use when the list of choices appears

9
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
10
// Apply the adapter to the spinner
11
this.spProvincias.setAdapter(adapter);
12

13
// This activity implements the AdapterView.OnItemSelectedListener
14 this.spProvincias.setOnItemSelectedListener(this);
15 this.spLocalidades.setOnItemSelectedListener(this);
16

17}

18

19

En primer lugar creamos un Adapter para mostrar la lista de provincias que se encuentra en el
array R.array.provincias que hemos definido anteriormente y se lo asignamos al Spinner de
provincias. A continuacin deberemos hacer que nuestra actividad implemente el
interfazAdapterView.OnItemSelectedListener e implementar el
mtodoonItemSelected(AdapterView<?> parent, View view, int pos, long id) y
el mtodoonNothingSelected(AdapterView<?> parent) que dejaremos vaco:

1
public class MainActivity extends Activity implements OnItemSelectedListener {
2

3 @Override
4 public void onItemSelected(AdapterView<?> parent, View view, int pos,

5 long id) {

7 switch (parent.getId()) {

case R.id.sp_provincia:
8

9
// Retrieves an array
10
11 TypedArray arrayLocalidades = getResources().obtainTypedArray(

12 R.array.array_provincia_a_localidades);

CharSequence[] localidades = arrayLocalidades.getTextArray(pos);

13
arrayLocalidades.recycle();
14

15
// Create an ArrayAdapter using the string array and a default
16
// spinner layout
17
ArrayAdapter<CharSequence> adapter = new ArrayAdapter<CharSequence>(
18 this, android.R.layout.simple_spinner_item,
19 android.R.id.text1, localidades);
20

21 // Specify the layout to use when the list of choices appears

22 adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_i

23

24 // Apply the adapter to the spinner

this.spLocalidades.setAdapter(adapter);
25

26
break;
27

28
case R.id.sp_localidad:
29

30
break;
31
}
32 }
33

34 @Override

35 public void onNothingSelected(AdapterView<?> parent) {

36 // Callback method to be invoked when the selection disappears from this

37 // view. The selection can disappear for instance when touch is

// activated or when the adapter becomes empty.

38
}
39

40}

41

42

43

Este mtodo se llamar cuando se selecciona un elemento de alguno de los dos Spinners, ya que
lo indicamos en el mtodo onCreate(Bundle savedInstanceState).

Cuando seleccionemos un item de la lista de provincias cargamos el

arrayarray_provincia_a_localidades que definimos anteriormente y que como dijimos se
encarga de relacionar cada provincia con su lista de localidades, para despus cargar la lista de
localidades correspondiente a la posicin del item seleccionado. La variable pos hace referencia a
la posicin de la provincia seleccionada en el array de provincias, esta posicin debe hacer referencia
al array de nombres de localidades de la provincia seleccionada en el
arrayarray_provincia_a_localidades. Una vez con la lista de localidades se crea un Adapter
y se le asigna al Spinner de localidades. Mostrando por pantalla la lista de localidades.
LISTVIEW

Como crear una lista con imgenes en

android studio?

El ListView estndar slo muestra una lista de elementos. si bien puede ser suficiente
cuando slo hay que mostrar una lista de texto, no es suficiente para las aplicaciones
con diseos mas elegantes. en este articulo, ver cmo va a ser capaz de personalizar
el ListView de modo que usted ser capaz de mostrar imgenes en las filas de su
lista.

As que para este tutorial daremos dos ejemplos de ListView con Imagenes:

1. Crear un ListView con las imgenes pegadas al costado del texto, Es muy sencillo,
pero la desventaja sera que solo podrs tener una imagen para todos los elementos
de nuestra lista.
2. Crear un ListView con sus respectivas imgenes para cada elemento de la lista.
Para eso tendremos que personalizar el adaptador.

1. Crear un ListView con las imgenes pegadas al costado del

texto
1. La primera cosa que usted aprender en este ejemplo es cmo mostrar una imagen
junto a cada elemento en el ListView. Para ello, cree un archivo XML en su
carpeta res / layout con el nombre, por ejemplo de fila_lista.xml.
2. Despus de verlo creado, abran el archivo res / layout / fila_lista.xml y pongan el
cdigo XML en el archivo.

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<ImageView

android:id="@+id/icon"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_marginBottom="4dp"

android:layout_marginLeft="4dp"

android:layout_marginRight="4dp"

android:layout_marginTop="4dp"
 android:src="@drawable/ic_launcher" />

<TextView

android:id="@+id/nombre_fila_lista"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="25sp"

android:paddingTop="6dp"/>

</LinearLayout>

view rawCrear un ListView con las imgenes - fila_lista.xml hosted with by GitHub

Este cdigo se mostrara para cada fila del ListView y contendr un ImageView y
un TextView.
Nota: El ic_launcher es la imagen que va a parecer en todos los elementos de la lista.
Puedes usar cualquier imagen, logo, o ico a tu busto pero tiene que estar dentro de la
carpeta res/drawable.

3. Para mostrar un ListView en su actividad, es necesario agregar el elemento

<ListView> en la interfaz de usuario "Layout", como por ejemplo en el archivo
activity_main.xml:
res / layout / activity_main.xml.

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">
 <ListView

android:id="@+id/android:list"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</RelativeLayout>

view rawCrear un ListView con las imgenes - activity_main.xml hosted with by GitHub

4. Abra el archivo "MainActivity.java" y aada el siguiente cdigo JAVA.

import android.app.ListActivity;

import android.os.Bundle;

import android.widget.ArrayAdapter;

public class MainActivity extends ListActivity {

private String lenguajeProgramacion[]=new

String[]{"Java","PHP","Python","JavaScript","Ruby","C",

"Go","Perl","Pascal"};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

this.setListAdapter(new ArrayAdapter<String>(
 this, R.layout.fila_lista,

R.id.nombre_fila_lista,lenguajeProgramacion));

view rawCrear un ListView con las imgenes - MainActivity hosted with by GitHub

Tenga en cuenta que en lugar de utilizar uno de los tipos de diseo (Layout) por
defecto, usted est utilizando su propio diseo auto-definido:

2. Crear un ListView con sus respectivas imgenes para cada

elemento creando su adaptador personalizado.
Para una mejor comprensin Crear nuevo proyecto y seguir los siguientes pasos:

1. Cree un archivo XML en su res / layout, por ejemplo puede ser con el nombre
fila_lista.xml.
2. Ahora Abierto el layout res / layout / fila_lista.xml escribimos o copiamos y
pegamos el siguiente cdigo.
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

<ImageView

android:id="@+id/icon"

android:layout_width="60dp"

android:layout_height="60dp"

android:padding="5dp" />

<LinearLayout android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:orientation="vertical">

<TextView

android:id="@+id/texto_principal"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Medium Text"

android:textAppearance="?android:attr/textAppearanceMedium"

android:layout_marginLeft="10dp"

android:layout_marginTop="5dp"

android:padding="2dp"

android:textColor="#489e37" />

<TextView
 android:id="@+id/texto_secundario"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="TextView"

android:layout_marginLeft="10dp"/>

</LinearLayout>

</LinearLayout>

view rawCrear un ListView con sus respectivas imgenes - fila_lista.xml hosted with by GitHub

Este Layout contiene un ImageView y dos TextViews.

3. Creamos <ListView> en el layout de activity_main.xml para poderlo mostrarlo y

trabajarlo con el ListView en la actividad.

<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:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<ListView

android:id="@+id/mi_lista"

android:layout_width="match_parent"

android:layout_height="match_parent" />
 </RelativeLayout>

view rawCrear un ListView con sus respectivas imgenes hosted with by GitHub

4. Agregar las 9 imgenes de los logos del lenguaje de programacin. Puedes

encontrarlos al descargar el proyecto final en la capeta app\src\main\res\drawable.

Descargar imgenes aqu

5. Para rellenar cada fila usando este nuevo layout creado, es necesario crear un
nuevo adaptador personalizado. Para ello, agregue una nueva clase Java para el
proyecto con el nombre LenguajeListAdapter.java.

6. Abrir "El archivo LenguajeListAdapter.java" y aadir siguiente cdigo JAVA:

import android.app.Activity;

import android.view.LayoutInflater;

import android.view.View;
import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.TextView;

/**

* Created by Cesar on 12/10/2015.

*/

public class LenguajeListAdapter extends ArrayAdapter<String> {

private final Activity context;

private final String[] itemname;

private final Integer[] integers;

public LenguajeListAdapter(Activity context, String[] itemname, Integer[] integers)

{

super(context, R.layout.fila_lista, itemname);

// TODO Auto-generated constructor stub

this.context=context;

this.itemname=itemname;

this.integers=integers;

public View getView(int posicion,View view, ViewGroup parent){

 LayoutInflater inflater=context.getLayoutInflater();

View rowView=inflater.inflate(R.layout.fila_lista,null,true);

TextView txtTitle = (TextView) rowView.findViewById(R.id.texto_principal);

ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);

TextView etxDescripcion = (TextView)

rowView.findViewById(R.id.texto_secundario);

txtTitle.setText(itemname[posicion]);

imageView.setImageResource(integers[posicion]);

etxDescripcion.setText("Description "+itemname[posicion]);

return rowView;

view rawCrear un ListView con sus respectivas imgenes - LenguajeListAdapter hosted with
by GitHub

La clase LenguajeListAdapter extiende la clase base ArrayAdapter.

7. Para mostrar el ListView con el nuevo Layout, aadir el siguiente cdigo en el

archivo MainActivity.java :

import android.app.Activity;
import android.os.Bundle;

import android.view.View;

import android.widget.AdapterView;

import android.widget.ListView;

import android.widget.Toast;

public class MainActivity extends Activity {

private String lenguajeProgramacion[]=new

String[]{"Java","PHP","Python","JavaScript","Ruby","C",

"Go","Perl","Pascal"};

private Integer[] imgid={

R.drawable.java,

R.drawable.php,

R.drawable.python,

R.drawable.javascript,

R.drawable.ruby,

R.drawable.c,

R.drawable.go,

R.drawable.perl,

R.drawable.pascal

};

private ListView lista;

@Override
 protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

LenguajeListAdapter adapter=new
LenguajeListAdapter(this,lenguajeProgramacion,imgid);

lista=(ListView)findViewById(R.id.mi_lista);

lista.setAdapter(adapter);

lista.setOnItemClickListener(new AdapterView.OnItemClickListener() {

@Override

public void onItemClick(AdapterView<?> parent, View view, int position,

long id) {

String Slecteditem= lenguajeProgramacion[+position];

Toast.makeText(getApplicationContext(), Slecteditem,
Toast.LENGTH_SHORT).show();

});

view rawCrear un ListView con sus respectivas imgenes - MainActivity hosted with by GitHub

Y listo al ejecutarlo debe quedar como la imagen de abajo: