Android / Aplicando la publicidad en nuestra app

Bienvenidos sean a este post, hoy veremos como implementar lo visto en el post anterior, es decir el bloque de anuncios creado para nuestra aplicacion y la aplicacion elegida va a ser Nivel, la cual creamos en este post, para ello deberemos hacer unas pequeñas modificaciones en nuestra app, comencemos abriendo nuestro proyecto con Android Studio, una vez abierto debemos ir al Boton del SDK Manager

Este nos abrira una nueva ventana y en esta deberemos ir a Android SDK y elegir la pestaña SDK Tools, en ella deberemos verificar que Google Play Services y Google Repository esten tildadas, instaladas y de ser posible actualizadas, en caso de no cumplir ninguno de estos requisitos procedan a completar, es decir instalarlo o actualizarlo, debera estar como se ve en la siguiente imagen

Si esta todo hecho presionamos Ok para cerrar la ventana y pasar a nuestra siguiente accion, luego iremos a File->Project Structure… como se ve en la siguiente imagen

Una vez seleccionado nos aparecera el siguiente cuadro

En este cuadro Eligen Dependencies y una vez en la nueva ventana presionan el boton con el Signo de mas (+), aparece una nueva opcion y seleccionan Library Dependency donde aparecera el siguiente cuadro

En este caso deben buscar la libreria que vamos a agregar para ello escriban solamente play-services y presionen Search donde les traera esa coincidencia y siempre traten de seleccionar la ultima version, para evitar inconvenientes, una vez hecho esto presionan Ok para que quede agregado, luego volvemos a presionar Ok para finalizar la modificacion de la estructura del Proyecto, nuestro siguiente paso sera modificar el codigo para ello primero modificaremos al archivo activity_main.xml con el siguiente codigo:

<?xml version="1.0" encoding="utf-8"?>
<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"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
        android:id="@+id/texto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="0"
        android:textSize="100dp" />
    </LinearLayout>

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        ads:adSize="BANNER"
        ads:adUnitId="ca-app-pub-3940256099942544/6300978111" />

</RelativeLayout>

En este caso agregaremos unas simples modificaciones pero efectivas, la primera sera este bloque:

<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"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">

Este es un layout de tipo RelativeLayout donde pasaremos todos los encabezados para poder trabajar con el resto del layout y este envolvera al layout anterior (LinearLayout) donde esta el TextView que se encarga de mostrar el valor del sensor, por debajo de este layout agregaremos el siguiente bloque:

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        ads:adSize="BANNER"
        ads:adUnitId="ca-app-pub-3940256099942544/6300978111" />

Este es el elemento encargado de mostrar el bloque de anuncios, en este caso le asignaremos un id, su ancho, su alto, lo ubicaremos abajo (layout_alignParentBottom), luego a la derecha (alignParentLeft), despues al inicio (alignParentStart), luego utilizaremos a ads para designar el tamaño de nuestro aviso, en este caso seleccionamos BANNER como lo hicimos en el post anterior, por ultimo indicaremos el ID de nuestro bloque de anuncios pero para este primer caso tendremos uno generico.

Para poder probar tu codigo puedes utilizar dos IDs genericos para hacerlo mas rapido, los IDs genericos son:

• ID aplicacion
  ca-app-pub-3940256099942544~3347511713ID
• ID Bloque Anuncios
  ca-app-pub-3940256099942544/6300978111

Con esto ustedes podan probar con cualquier dominio, inclusive example.org y example.com, con esto hemos realizado la modificacion en nuestra actividad principal, nuestra siguiente modificacion sera en MainActivity y agregaremos las siguientes lineas en el metodo onCreate():

        MobileAds.initialize(this,"ca-app-pub-3940256099942544~3347511713");

        AdView adView = (AdView) findViewById(R.id.adView);
        AdRequest adRequest = new AdRequest.Builder().build();
        adView.loadAd(adRequest);

La primera linea se encargara de cargar los avisos en nuestro bloque para estar disponibles a pesar de perder la conexion de internet y tambien mejora la performance del mismo, la segunda linea es la encargada de crear el vinculo entre el elemento del layout y nuestro codigo Java, luego crearemos un objeto llamado adRequest del tipo AdRequest el cual sera el encargado de recibir el aviso y lo creara, por ultimo tomaremos el vinculo antes creado y por medio de loadAd le cargaremos el anuncio almacenado en adRequest, nuestra siguiente modificacion sera en AndroidManifest.xml donde primero concederemos estos dos permisos:

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Esto permitira que la aplicacion tenga acceso a internet y sepa el estado de la red, esto es fundamental para el bloque de anuncios, despues deberemos agregar la siguiente etiqueta dentro de application

<meta-data
    android:name="com.google.android.gms.ads.ca-app-pub-3940256099942544~3347511713"
    android:value="ca-app-pub-3940256099942544/6300978111" />

En este caso utilizaremos un meta-data para poder identificar al ID de nuestra aplicacion, esto lo haremos en name y luego por medio de value le diremos el ID del bloque de anuncios, con esta ultima modificacion realizada ya tendremos nuestro bloque de anuncios funcionando, si lo prueban deberan tener una imagen como esta

Si lograron lo de la imagen Felicidades!!! Ya tienen publicidades en su aplicacion, nuestro siguiente paso sera agregar un escuchador de eventos para nuestro bloque de anuncios, para ello debemos hacer una serie de modificaciones en MainActivity, primero agregaremos la siguiente linea en el metodo onCreate():

adView.setAdListener(new miAdListener());

Luego agregaremos la clase miAdListener() en esta clase al final de la misma pero antes de la ultima llave (}), el codigo es el siguiente:

    class miAdListener extends AdListener{

        @Override
        public void onAdLoaded(){
            Toast.makeText(MainActivity.this,"onLoaded",
                    Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onAdOpened(){
            Toast.makeText(MainActivity.this,"onOpened",
                    Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onAdLeftApplication(){
            Toast.makeText(MainActivity.this,"onLeftApplication",
                    Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onAdClosed(){
            Toast.makeText(MainActivity.this,"onclosed",
                    Toast.LENGTH_SHORT).show();
        }

        @Override
        public void onAdFailedToLoad(int error){
            Toast.makeText(MainActivity.this,
                    "onAdFailedToLoad: " + error,Toast.LENGTH_SHORT).show();
        }
    }

Cada uno de estos metodos se encargaran de mostrar un mensaje por medio de Toast cada uno de los estados que puede tomar el bloque de anuncios, con esto podremos probar nuestra aplicacion y ver como agregar una accion dependiendo la accion que tome el bloque de anuncios en nuestra aplicacion.

Nota: Para probarlo es recomendable que utilicen un equipo real porque en los emuladores puede que tarde en aparecer o directamente no funcione

Pasemos a probar nuestra nueva modificacion en Nivel como se ve en el siguiente video

Como pueden ver en el video tenemos no solamente la propaganda, sino tambien vemos los distintos estados que tomara, por ejemplo cuando carga, cuando lo cliqueamos, cuando pasamos a una nueva direccion.

Para poder implementar sus anuncios deberan modificar las siguientes lineas:

En activity_main.xml:
ads:adUnitId="El ID del Bloque de Anuncio"

En MainActivity:
ads:adUnitId="El ID de la Aplicacion"

En AndroidManifest.xml:
android:name="com.google.android.gms.ads.ID_DE_LA_APP"
android:value="ID_DEL_BLOQUE"

En resumen, hoy hemos visto como se modifica una aplicacion para poder mostrar anuncios, hemos visto cuales son los ID de prueba para hacer un rapido chequeo, las modificaciones necesarias y cuales son las lineas donde debemos ingresar los ID generados por medio del post anterior, espero les haya sido util sigueme en Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.