Tutorial: Aplicacion Android - Visor de imagenes copadas

Cicklow Seguir
Seguidores
20

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Buenas en este tutorial aprenderán como crear una aplicación Android (programando en java) para visualizar imágenes / memes / imágenes de amor / imágenes sexy, etc... y un laaargo etc... XD

Usaremos eclipse: https://www.eclipse.org/downloads/
SDK Android: https://developer.android.com/sdk/index.html?hl=sk
Google Play Service (AdMob): https://developers.google.com/mobile-ads-sdk/download (El viejo SDK de admob no sirve mas para nuevas apps)

Capturas:
device-2014-03-19-233958-4496e8f.png
device-2014-03-19-234026-4496e93.png
device-2014-03-19-234036-4496e95.png
device-2014-03-19-234040-4496e9a.png

Solo explicare como programar la aplicación, si ven el código de la misma van a ver que tiene 4 clases mas, que son para leer imágenes remotas, guardarlas como cache en el celular o la memoria.

Paso 1 - Crear proyecto
File->New->Project->Android Aplication Project
1-4496dd9.jpg


Configuramos nuestra aplicación para usar estos parámetros:
2-4496de5.jpg


Y la actividad (el diseño) sera en blanco:
3-4496ded.jpg


Paso 2 - Agregamos los objetos necesarios a nuestro diseño
Tenemos que agregar un TextView y un Button. El textview tendra la propiedad graviti: center_horizontal, esto hace que el texto se centre horizontalmente.
4-4496dfb.jpg


Creamos un nuevo diseño (layout), boton derecho arriba de nuestro proyecto->New->Other->Android Activity, y agregamos estos objetos:
5-4496dff.jpg

El imageview tendrá como imagen el objeto: loader
Los botones son para movernos entre imágenes y el textview sera para mostrar la imagen actual y cuantos son en total, ejemplo 1 de 4

Paso 3 - Programar
Editamos MainActivity.java
PHP:
package com.imagenescopadas;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.View;

public class MainActivity extends Activity {

  [MENTION=42437]over[/MENTION]ride
	protected void onCreate(Bundle savedInstanceState) {
		//Encargado de cargar el diseño a esta clase java
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

	//Funcion encargada de cargar el layout para ver las imagenes, al hacer click en el boton!
	public void CargarImagenes(View view){
		Intent intent = new Intent(this, VerImagenes.class);
		startActivity(intent);
	}
}

Editamos VerImagenes.java
PHP:
package com.imagenescopadas;

import java.io.IOException;

import org.apache.http.HttpEntity;
import org.apache.http.HttpResponse;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.HttpClient;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdView;

import android.os.AsyncTask;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.app.Activity;
import android.content.Context;

public class VerImagenes extends Activity {
	//Creamos nuestras variables
	HttpResponse response;
	String resultado;
	private AdView adView;
	String[] Imagenes;
	Context context;
	int loader = R.drawable.loader;
	int CantImg = 0;
	
  [MENTION=42437]over[/MENTION]ride
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.ver_imagenes);

	    context = getApplicationContext();
		
		// Cargamos la publicidad de AdMob y la mostramos
	    AdView adView = (AdView)this.findViewById(R.id.adView);
	    AdRequest adRequest = new AdRequest.Builder().build();
	    adView.loadAd(adRequest);
	    
	    //Cargamos listado de imagenes desde una url
	    new MyAsyncTask().execute("");
	}

	//Boton ir atras
	public void IrAtras(View view){
		CantImg--;
		if(CantImg<0) CantImg=0; else LoadImg();
	}

	//Boton ir adelante
	public void IrAdelante(View view){
		CantImg++;
		if(CantImg>(Imagenes.length-1)) CantImg--; else LoadImg();
	}	

	//Mostrar imagen en pantalla
	public void LoadImg(){
		Log.e("CantImg:",""+CantImg);
		//Cargamos el objeto imageview
		ImageView image = (ImageView) findViewById(R.id.imageView1);
		//Cargamos la imagen desde el indice
        	String image_url = Imagenes[CantImg];

		//Usamos la clase imageloader para cargar imagenes remotas y crear cache
	        ImageLoader imgLoader = new ImageLoader(context);
		//Mostramos la imagen
        	imgLoader.DisplayImage(image_url, loader, image);

		//Cargamos el objeto textview y le asignamos la imagen actual y la cantidad total        
	        TextView txt = (TextView) findViewById(R.id.textView1);
        	txt.setText((CantImg+1) + " de " + Imagenes.length);
	}
	
	//Cargar listado de imagenes
	private class MyAsyncTask extends AsyncTask<String, Integer, Double>{
	  [MENTION=42437]over[/MENTION]ride
		protected Double doInBackground(String... params) {
			// TODO Auto-generated method stub
			postData();
			return null;
		}
 
		protected void onPostExecute(Double result){
			//Toast.makeText(getApplicationContext(), "Cargando...", Toast.LENGTH_LONG).show();
			Log.e("Termino:","1");
		}
		
		protected void onProgressUpdate(Integer... progress){
			//Progreso
		}
 
		public void postData() {
			// Creamos un nuevo cliente htttp y leemos nuestra url
			HttpClient httpclient = new DefaultHttpClient();
			HttpGet httppost = new HttpGet("http://192.168.0.100/testandroid.php");

			try {
				// Ejecutamos la accion y obtenemos el resultado
				response = httpclient.execute(httppost);
				HttpEntity httpEntity = response.getEntity();
                resultado = EntityUtils.toString(httpEntity);
        	    Log.e("Resultado: ",""+resultado);
        	    
        	    Imagenes = resultado.split("#-#");
    			Log.e("Imagen:",""+ Imagenes[0]);
    			//Creamos un thread para no matar la aplicacion (la aplicacion esta tardando demaciado tiempo bla bla bla)
    			runOnUiThread(new Runnable() {
    			      [MENTION=42437]over[/MENTION]ride
    			     public void run() {
						//Cargamos la imagen numero 0, la 1 imagen 
    						ImageView image = (ImageView) findViewById(R.id.imageView1);
    				        String image_url = Imagenes[0];
    				         
    				        ImageLoader imgLoader = new ImageLoader(context);    	         
    				        imgLoader.DisplayImage(image_url, loader, image);
    				        
    				        TextView txt = (TextView) findViewById(R.id.textView1);
    				        txt.setText((CantImg+1) + " de " + Imagenes.length);
    			     }
    			});
			} catch (ClientProtocolException e) {
				// 	TODO Auto-generated catch block
			} catch (IOException e) {
				// 	TODO Auto-generated catch block
			}
		}
	}
	//Recargamos la ads
  [MENTION=42437]over[/MENTION]ride
	  public void onResume() {
	    super.onResume();
	    if (adView != null) {
	      adView.resume();
	    }
	  }
		//Pausamos las ads
	   [MENTION=42437]over[/MENTION]ride
	  public void onPause() {
	    if (adView != null) {
	      adView.pause();
	    }
	    super.onPause();
	  }

	  /** eliminamos las ads. */
	   [MENTION=42437]over[/MENTION]ride
	  public void onDestroy() {
	    // Destroy the AdView.
	    if (adView != null) {
	      adView.destroy();
	    }
	    super.onDestroy();
	  }
	
}

Paso 5 - Archivo Remoto
El archivo que contiene las imagenes se alojara en un server remoto y tiene estas caracteristicas:
Insertar CODE, HTML o PHP:
imagen url#-#imagen url#-#imagen url
Ejemplo:
Insertar CODE, HTML o PHP:
http://meme-lol.com/wp-content/uploads/2013/08/Can-you-see-it-meme.jpg#-#http://www.memegenerator.es/imagenes/memes/13/995238.jpg#-#http://cdn.memegenerator.net/instances/500x/43648499.jpg#-#http://weknowmemes.com/wp-content/uploads/2013/02/this-isnt-a-meme.jpg
Acá podrán agregar la cantidad de imágenes a mostrar!

Paso 6 - Sin Archivo Remoto
Si no tienen donde alojar este archivo, pueden editar la aplicación para que contenga el listado de imagenes a mostrar.
Buscan en VerImagenes.java:
PHP:
new MyAsyncTask().execute("");
Y lo cambian por:
PHP:
resultado = "http://meme-lol.com/wp-content/uploads/2013/08/Can-you-see-it-meme.jpg#-#http://www.memegenerator.es/imagenes/memes/13/995238.jpg#-#http://cdn.memegenerator.net/instances/500x/43648499.jpg#-#http://weknowmemes.com/wp-content/uploads/2013/02/this-isnt-a-meme.jpg";
Imagenes = resultado.split("#-#");
runOnUiThread(new Runnable() {
    			      [MENTION=42437]over[/MENTION]ride
    			     public void run() {
    						ImageView image = (ImageView) findViewById(R.id.imageView1);
    				        String image_url = Imagenes[0];
    				         
    				        ImageLoader imgLoader = new ImageLoader(context);    	         
    				        imgLoader.DisplayImage(image_url, loader, image);
    				        
    				        TextView txt = (TextView) findViewById(R.id.textView1);
    				        txt.setText((CantImg+1) + " de " + Imagenes.length);
    			     }
    			});
De esta forma no usan archivos externos, pero si quieren cambiar imagenes tendran que actualizar la aplicacion y enviarla nuevamente.

Paso 7 - TIPS
- Pueden hacer que cuendo vea X cantidad de imagenes mostrar un banner de admob a pantalla completa (ejemplo si vio 5 imágenes mostrar esa publicidad: InterstitialAd | Android Developers)
- Pueden crear varios layout mas y varios botones al inicio de la aplicacion, y que cada boton cargue un layout distinto y ese layout carga una url distinta, entonces pueden hacer una apps con varias tematicas de imagenes.
- Pueden cambiar todo el diseño para que sea mucho mas bonito, o cambiar de logares los botones, las publicidades mas grandes o no.
- Pueden usar un server free para alojar el archivo que contiene el listado de imagenes.

Descarga:
Insertar CODE, HTML o PHP:
http://test.cicklow.me/ImagenesCopadas.rar
(Tienen que ir a new->project->from existing project)
Git:
Insertar CODE, HTML o PHP:
https://github.com/cicklow/ImagenesCopadas

NO Citen el post... ya que si hay ediciones queda todo descujeringado y desactualizado en las citas.

PD: El ejemplo es basico cualquier mod y demas corren por cuenta de ustedes, pero no duden en preguntar cualquier cosa :)
Si hacen modificaciones también agregenla en este post para que otros usuarios vean :)
PD: Para editar el ID de publicidad solo tienen que editar res->values->strings.xml->idADS :encouragement: y crean su publicidad desde: https://apps.admob.com/#home


La idea de este tutorial es que aprendan! - Saludos! :encouragement:
 
Última edición:

Jesus Dugarte

1
Pi
Redactor
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
23 Sep 2012
Mensajes
5.453
Se agradece el aporte compañero. :encouragement:
 

jcarlos

Delta
Verificación en dos pasos activada
Desde
13 Nov 2011
Mensajes
622
Hey gracias muy bueno el tutorial. quizas con App inventor seria mas facil para todos los que no sabemos programar todo esos codigos.
 

Chinito

Préstamo
Iota
Domainer
Desde
24 May 2013
Mensajes
2.002
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
Muy bueno! :encouragement: manos a la obra :cool:
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Hey gracias muy bueno el tutorial. quizas con App inventor seria mas facil para todos los que no sabemos programar todo esos codigos.

sisi el proximo sera con appinventor. pero no tiene publicidad appinventor.
 

rayden

Dseda
Programador
Verificación en dos pasos activada
Desde
16 May 2011
Mensajes
1.121
[MENTION=9679]cicklow[/MENTION]
Mas que buenisimo el tutorial, sirve para iniciar esto de las app.

Como podemos hacer esto de guardar las imagenes:

ejemplo:
actual

device-2014-03-19-234026-4496e93.png


con el boton

jMwD1eL.png
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
[MENTION=9679]cicklow[/MENTION]
Mas que buenisimo el tutorial, sirve para iniciar esto de las app.

Como podemos hacer esto de guardar las imagenes:

ejemplo:
actual

device-2014-03-19-234026-4496e93.png


con el boton

jMwD1eL.png

las imagenes se guardan en la SD... por lo tanto tendrias que pasar esa img a donde quiera el user.
Move / Copy File Operations in Java - Stack Overflow
google: move file + android java

tambien podes buscr como colocar la imagen como wallpaper :)
 
Última edición:

rayden

Dseda
Programador
Verificación en dos pasos activada
Desde
16 May 2011
Mensajes
1.121
las imagenes se guardan en la SD... por lo tanto tendrias que pasar esa img a donde quiera el user.
Move / Copy File Operations in Java - Stack Overflow
google: move file + android java

tambien podes buscr como colocar la imagen como wallpaper :)

Siempre me da error

File sd=Environment.getExternalStorageDirectory();// File (or directory) to be moved
String sourcePath="/.Images/"+imageTitle;
File file = new File(sd,sourcePath);
// Destination directory boolean success = file.renameTo(new File(sd, imageTitle));
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Siempre me da error

la carpeta destino existe??¿¿ sino da error!... tmb tenes que ver bien donde guarda el cache la clase encargada de esto (yo no hable sobre esto, es cuestion de mirar bien).
Tendrias que ver si existe el directorio de destino, sino existe crearlo.
 

rafadizeosp

Mi
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Desde
19 Nov 2011
Mensajes
3.381
Excelente aporte cicklow, ya me baje las herramientas ahora me pondré a trabajar en ello.

Gracias.
 

Layonsz

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
2 Ene 2013
Mensajes
128
Esto es un señor aporte! :encouragement: Una motivación extra para aprender a programar! :drunk:
 

rayden

Dseda
Programador
Verificación en dos pasos activada
Desde
16 May 2011
Mensajes
1.121
la carpeta destino existe??¿¿ sino da error!... tmb tenes que ver bien donde guarda el cache la clase encargada de esto (yo no hable sobre esto, es cuestion de mirar bien).
Tendrias que ver si existe el directorio de destino, sino existe crearlo.

Trate dandole permisos y nada.

Manifest.permission | Android Developers

Voy a descompilar una apk que sea similar a la tuya, pero que tenga la opción de guardar a ver que pasa.
 

Galbatorix

Dseda
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 May 2013
Mensajes
1.231
Oiga joven. Y lo podrá subir a GitHub? Si es mucha molestia no hay pex... es solo que la costumbre del git clone.
 

rayden

Dseda
Programador
Verificación en dos pasos activada
Desde
16 May 2011
Mensajes
1.121


Al parecer esta es la ruta de la pc tuya jeje

Project 'ImagenesCopadas' is missing required library: 'C:\Program Files (x86)\Android\sdk\extras\google\google_play_services\libproject\google-play-services_lib\bin\google-play-services_lib.jar'

Por tanto a los que les tilda ese error, simplemente deben importar la ruta de su carpeta donde metieron la librería de google y listo (juro que la mayoria lo tiene en escritorio o carpeta descargar lol)
 

Cicklow

Admin
Dseda
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
Desde
30 May 2011
Mensajes
1.101
Al parecer esta es la ruta de la pc tuya jeje



Por tanto a los que les tilda ese error, simplemente deben importar la ruta de su carpeta donde metieron la librería de google y listo (juro que la mayoria lo tiene en escritorio o carpeta descargar lol)

sisis, boton derecho->pripedades->android->add->google play service o agregar el JAR desde la carpeta lib que acompaña al proyecto
 
Arriba