Ir al contenido principal

Spinner e ImegeView

Bueno el dia de ahora, voy a comenzar los tutoriales de Android, pero no con el famoso " Hello World", si se pregunta por que, es porque quiero resolver dudas de mi canal de youtube, y hace unas horas alguien me preguntaba lo siguiente:

"hola, gracias por los videos, yo quisiera q al desplegar un spinner y seleccionar algun item del spinner, me desplegara una imagen. sabes como podria hacerlos?"

Entonces como respuesta a esa duda dejo este tutorial, comencemos de una vez.

  1. Creamos un archivo llamado array_anime.xml en la carpeta res/values, dando clic derecho en values  y agregando un android xml file, le damos un nombre (el array_anime sin .xml)
  2.  Luego añadimos el sigueinte codigo al archivo recien creado
  3. Ahora abrimos en layout de nuestra app (res/layout/main.xml) y añadimos un spinner, le cambiamos sus propiedades y le agregamos el array que acabamos de crear, haciendo un simple cambio en la propiedad  android:entries  y quedadndo algo asi: android:entries="@array/anime", si se fijan @array/anime es el nombre del array en <string-array name="anime"> del archivo array_anime.xml
  4. Agregamos un ImageView y un TextView para dejarlo mas vistoso (el ImagenView es para las imagenes y se encuentra en la seccion de palette/images & media ), al final nos tiene que quedar algo asi
  5. Ahora hay que crear o agregar las imagenes a usar para este proyecto en res/drawable (sino existe la creamos haciendo clic derecho en res y agregando un nuevo folder llamado drawable), para ello yo he utilizado las siguientes imagenes



    Si se fijan hay un nombre correlativo similar a img01 ... img06, esto es porque hay que tener en cuenta el orden de como ira saliendo mas adelante, estas imagenes en nuestra app
    (clic en la imagen para agrandarla)





  6. Luego comenzamos el codeo de la app, quedando de la siguiente manera
    package com.nayosx.prueba;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemSelectedListener;
    import android.widget.ImageView;
    import android.widget.Spinner;
    
    public class Main extends Activity {
        /** Called when the activity is first created. */
     Spinner cambiar;//se crea el objeto spinner
     ImageView img;//tambien el imagenview
     
     
     // Con el sigueinte arreglo se tomara el numero 
     // entero que corresponde a cada una de las imagenes
     // este se encuentra en gen/R.java
     // esa clase no se toca para nada
     // es generada por el mismo proyecto 
    
    
     int[] imagenes = {R.drawable.img01, R.drawable.img02, R.drawable.img03, R.drawable.img04, R.drawable.img05, R.drawable.img06};
       
     @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            initialize();
        }
     
     /*
      * El siguente metod es usado para crear los objetos en concretos
      * asi como tambien los eventos que hara el spinner */
        private void initialize()
        {
         img = (ImageView) findViewById(R.id.imageView1); //busca el imagenview del main.xml
         cambiar = (Spinner) findViewById(R.id.getIma); //busca el spinner del main.xml
         cambiar.setOnItemSelectedListener(new OnItemSelectedListener(){ 
          //OnItemSelectedListener() se ejecuta al hacer clic en el spinner
    
       public void onItemSelected(AdapterView arg0, View arg1,
         int arg2, long arg3) {
        // TODO Auto-generated method stub
        //por medio de arg2 se obtiene un indice del array_anime.xml
        //y de esa forma lo pasa a img, para recuperar la imagen esperada
        img.setImageResource(imagenes[arg2]);
       }
    
       public void onNothingSelected(AdapterView arg0) {
        // TODO Auto-generated method stub
        
       }
          
         });
         
        }
    }
    
  7. Ahora ya tenemos una app en donde usamos un spinner para cambiar una imagen

Pues bueno no es para nada dificil hacer esto, solo es de sentarse y ver que pasa en uno 10 minutos (y como 3 horas aprendiendo a usar github para subir el codigo), espero le sirva a alguien.



Si quieren bajar el código se los dejo aqui

Entradas populares de este blog

Northwind para Mysql y otras

Supongamos que necesitamos una base de datos para comenzar a hacer pruebas y a la vez necesitamos que esa base de datos contenga mucha información con la cual trabajar. En mis tiempos de universidad existía una base de datos que utilizábamos en los laboratorios con SQL Server y c# para mostrar los datos en algún formulario. El nombre era Northwind. El problema es que era solo para SQL Server, pero alguien en se dio a la tarea de exportar esa base de datos a MySql y es justo lo que te vengo a mostrar acá. Hace un tiempo atrás clone de los repositorios de Google Code   esa información (que como algunos de ustedes sabrá dejara de estar al servicio de todos en un tiempo). Modifique un poco la DB de Mysql para que se pudiera ejecutar el script sin ningún problema. Lo interesante de todo esto es que puedes utilizar los demás script para diferentes gestores de base de datos Se advierte que para poder usarlas adecuadamente hay que modificar los campos de tipo longblob y qu...

How to upload File from form data POST in Android with Retrofit 2

 The last day I explain how to upload a simple CSV file using node . And now I teach how to upload from android device. Get source code here:  GitHub This article is write in java... later I'll add the method for kotlin. The logic is not changed, only the format code. 1) Is necessary add the dependencies in gradle: module implementation 'com.google.code.gson:gson:2.8.6' // RETROFIT // implementation 'com.squareup.retrofit2:retrofit:2.6.2' implementation 'com.squareup.retrofit2:converter-gson:2.6.2' implementation 'com.squareup.retrofit2:converter-scalars:2.5.0' 2) Add permissions in AndroidManifest.xml and modified the application for work with network security policy <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> in applitacion add ...

Como encriptar AES con Node JS

  Puedes descargar el proyecto desde este enlace El otro día surgió una necesidad para encriptar contenido bajo el algoritmo AES y es la que te vengo a mostrar a continuación en la cual use Node para solventar mi necesidad. Pude haber usando cualquier lenguaje que me viniera en gana pero no quería instalar nada mas. Dependencias: NodeJS >= 12 Crypto-JS Aplicaciones recomendadas: Git bash Visual Studio Code Lo primero que necesitamos es tener una clave única (KEY) y un vector de inicialización (IV). Este ultimo no es necesario pero agrega un extra de seguridad a nuestro contenido. Para lo cual usaremos el bash de git para utilizar openssl KEY openssl rand -base64 24 IV openssl rand -base64 12 Ahora que ya tenemos estas 2 cadenas únicas. Podemos proceder a escribir nuestro código. npm init -y Luego hacemos una modificación en el package.json para que admita módulos "type": "module", Instalamos la dependencia de Crypto-JS npm i crypto-js --save Ahora importamos l...