Tutorial: Aplicacion Android - Visor de imagenes copadas

  • Autor Autor Cicklow
  • Fecha de inicio Fecha de inicio
Cicklow

Cicklow

Admin
Épsilon
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Suscripción a IA
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:
Se agradece el aporte compañero. :encouragement:
 
Gracias \^o^/
 
Muchas Gracias. En este preciso momento voy a empezar hacer mi aplicación.🙂
 
Hey gracias muy bueno el tutorial. quizas con App inventor seria mas facil para todos los que no sabemos programar todo esos codigos.
 
Muy bueno! :encouragement: manos a la obra 😎
 
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.
 
Excelente tutorial cicklow
bang.gif.pagespeed.ce.BtOnLVStYW.gif
 
Buen aporte, hacen falta más tutoriales así y otros más básicos. :encouragement:
 
[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
 
[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:
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));
 
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.
 
Excelente aporte cicklow, ya me baje las herramientas ahora me pondré a trabajar en ello.

Gracias.
 
Esto es un señor aporte! :encouragement: Una motivación extra para aprender a programar! :drunk:
 
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.
 
Oiga joven. Y lo podrá subir a GitHub? Si es mucha molestia no hay pex... es solo que la costumbre del git clone.
 


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)
 
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
 

Temas similares

Atrás
Arriba