Android / Asteroides

Bienvenidos sean a este post, hoy haremos la base de unas de las apps que utilizaremos para aprender las bases de Android para este caso utilizaremos el mitico juego llamado Asteroides y hoy solo haremos el diseño base y una modificacion como vimos en este post, para que se modifique la vista dependiendo de la ubicacion del dispositivo, empecemos con el caso.

Abramos Android Studio y elegimos Start a new Android Studio project

En el siguiente cuadro pondremos en Application Name el valor de Asteroides, en Company Domain pueden utilizar example.org o si tienen uno propio como se ve en mi caso, despues dejan el resto como se ve en la siguiente imagen

Despues pulsan Next y aparecera el siguiente cuadro

Aca tambien les recomiendo dejarlo como aparece, o seleccionar la version mas baja disponible, en los dispositivos moviles y en caso de necesitar de mas de una adaptacion de dispositivos pueden tildar el resto de las opciones pero por ahora manejemoslo asi, por ultimo pulsen Next y pasemos al siguiente cuadro

Aca deben seleccionar Empty Activity y pulsar Next para pasar a la ultima ventana

Como ven debe quedar Activity Name como MainActivity y Layout Name como activity_main, y las opciones tildadas como se ven, si todo esta bien pulsamos Finish y se creara nuestra app, una vez finalizada la creacion se abrira nuestro IDE de Android Studio y debera quedarnos algo asi

Ahora vamos a empezar por la creacion de nuestro layout, para eso debemos ir al archivo activity_main.xml como se ve en la imagen anterior. En este caso vamos a utilizar para facilitar nuestra tarea un layout de tipo LinearLayout, un elemento TextView y cuatro elementos de tipo Button, comencemos con la conversion. Tendremos el siguiente layout

Como pueden ver ya tenemos uno de los elementos disponibles, en este caso TextView, pero primero vamos a cambiar el layout, hacemos click con el boton derecho sobre ConstraintLayout y elegimos Convert View como se ve en la siguiente imagen

Una vez elegido nos aparecera el siguiente cuadro

Aca debemos seleccionar LinearLayout y pulsar el boton Apply, una vez hecho desaparecera el cuadro y se habra convertido nuestro layout, luego deberemos hacer click con el boton derecho sobre el nuevo layout y seleccionaremos LinearLayout -> Convert orientation to vertical

Con esto, ya establecimos la base del layout ahora solo nos resta agregar el resto de los elementos y las modificaciones pertinentes.
Primero vamos a agregar un elemento Button solamente seleccionando y presionando Enter

Este procedimiento lo debemos hacer tres veces mas para que nos queden cuatro botones como se ve en la siguiente imagen

Ahora procederemos a modificar y ubicar nuestros elementos en base a los archivos XML, tanto para la informacion a mostrar como la ubicacion de los mismos, empecemos con strings.xml ubicado en res/values/strings.xml, primero veamos el codigo de este archivo:

<resources>
    <string name="app_name">Asteroides</string>
</resources>

Ahora lo modificaremos por el siguiente:

<resources>
    <string name="app_name">Asteroides</string>
    <string name="tituloJuego">Asteroides</string>
    <string name="botonJugar">Jugar</string>
    <string name="botonConf">Configurar</string>
    <string name="botonAcerca">Acerca de</string>
    <string name="botonSalir">Salir</string>
</resources>

Como ven en este archivo guardaremos todas las etiquetas de nuestros elementos, ahora pasaremos al archivo activity_main.xml, ubicado en res/layout/activity_main.xml, el codigo de este archivo es el siguiente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     tools:context=".MainActivity">

    <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Hello World!" />

    <Button
         android:id="@+id/button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Button" />

    <Button
         android:id="@+id/button2"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Button" />

    <Button
         android:id="@+id/button3"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Button" />

    <Button
         android:id="@+id/button4"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="Button" />

</LinearLayout>

Ahora lo modificaremos por el siguiente codigo fuente:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:gravity="center"
     android:padding="30dp"
     tools:context=".MainActivity">

    <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/tituloJuego"
         android:gravity="center"
         android:layout_marginBottom="20dp"
         android:textSize="25sp"
         />

    <Button
         android:id="@+id/botJugar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/botonJugar"
         />

    <Button
         android:id="@+id/botConf"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/botonConf"
         />

    <Button
         android:id="@+id/botAcerca"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/botonAcerca"
         />

    <Button
         android:id="@+id/botSalir"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/botonSalir"
         />

</LinearLayout>

Vamos a analizar las modificaciones en nuestro codigo, la primera modificacion la vamos a realizar en el layout, LinearLayout, donde vamos a agregar las siguientes lineas:

android:gravity="center"
android:padding="30dp"

Nuestra primera linea, se encargara de ubicar todos los elementos dentro de la misma en el centro, y luego le diremos que tenga un relleno de 30dp, los dp son un tipo de unidad disponible en Android, les recomiendo este post para saber mas, ahora pasaremos al siguiente elemento, TextView, donde agregaremos las siguientes lineas:

android:text="@string/tituloJuego"
android:gravity="center"
android:layout_marginBottom="20dp"
android:textSize="25sp"

En la primera linea, le asignaremos el texto por medio del archivo strings.xml (@string) y utilizara el elemento titulo contenido en el archivo para asignarselo a la propiedad text del elemento TextView, la siguiente linea se encargara de ubicarlo en el centro, la siguiente linea se encargara de subirla 20dp con respecto al fondo y por ultimo le pondremos un tamaño de 25sp a la fuente del texto, si quieren saber de dp o sp miren este post. Por ultimo, veremos un solo caso porque es el mismo para el resto de los botones, el primer boton, en este caso solamente se modificara doslineas:

android:id="@+id/botJugar"
android:text="@string/boton01"

En este caso, la primera linea sera el nuevo identificador del elemento, la siguiente linea al igual que el TextView la utilizaremos para asignarle un texto por medio del archivo strings.xml (@string) y le diremos que tome el valor del elemento boton01 y lo asigne a la propiedad text del elemento button, es lo mismo para el resto salvo que vamos a utilizar los otros elementos del archivo strings.xml y tambien vamos a cambiar los identificadores para cuando volvamos a este codigo recordemos que accion hacia cada uno. Si todo fue hecho de forma correcta deberemos tener una app de la siguiente forma

Si llegaron hasta aca, Felicitaciones!!! Ya tenemos la base de nuestra futura app pero ahora probemos de girar nuestra app para ver como queda

Como pueden ver, quedo bastante mal pero como vimos en este post, lo bueno de Android es que ofrece recursos alternativos y para este caso vamos a aplicar uno, en este caso el layout para la vista apaisada (landscape), vamos de vuelta a nuestra app en la IDE de Android Studio, debemos hacer click con el boton derecho sobre el recurso layout y elegiremos New -> Layout resource file

Una vez seleccionado nos aparecera el siguiente cuadro

Aca debemos asignarle a File Name el valor activity_main, no se preocupen por el nombre, y dentro de Available qualifiers busquen y seleccionen Orientation, una vez seleccionado presionen el boton >> y este nos mostrara el siguiente cuadro

Aca deben seleccionar en Screen orientation el valor Landscape, una vez hecho pulsen Ok y se nos generara el archivo correspondiente como se ve en la siguiente imagen

Ahora si lo vemos nos aparecera de la siguiente forma

Nuestro siguiente paso sera convertir el layout a tipo LinearLayout, para esto hacemos click con el boton derecho y seleccionamos Convert View

Una vez seleccionado nos aparecera el siguiente cuadro

Aca debemos seleccionar LinearLayout y pulsar Apply, una vez hecho esto desaparecera el cuadro y deberemos convertirlo de horizontal a vertical, por medio de la opcion LinearLayout -> Convert orientation to vertical

Una vez realizado esto vamos a agregar los cinco elementos necesarios, estos van a ser

• TextView
• TableLayout
• 4 botones (Button)

Una vez agregado deberemos dejarlo de la siguiente forma:

Si nosotros ejecutamos nuestra app en este momento nos quedara de la siguiente forma

Como pueden ver recien estamos a mitad de camino, ahora vamos a modificar el codigo fuente para lograr un mejor orden de nuestros elementos, veamos el codigo XML actual de activity_main.xml (land):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">

    <TextView
         android:id="@+id/textView"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="TextView" />

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

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

            <Button
                 android:id="@+id/button6"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Button" />

            <Button
                 android:id="@+id/button5"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Button" />
        </TableRow>

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

            <Button
                 android:id="@+id/button7"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Button" />

            <Button
                 android:id="@+id/button8"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Button" />
        </TableRow>

        <TableRow
             android:layout_width="match_parent"
             android:layout_height="match_parent" />

        <TableRow
             android:layout_width="match_parent"
             android:layout_height="match_parent" />
    </TableLayout>

</LinearLayout>

Ahora pasaremos a modificarlo de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:gravity="center"
     android:padding="30dp"
     android:orientation="vertical"
     tools:context=".MainActivity">

    <TextView
         android:id="@+id/textView"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="@string/tituloJuego"
         android:gravity="center"
         android:textSize="25sp"
         android:layout_marginBottom="20dp"/>

    <TableLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:gravity="center"
         android:stretchColumns="*">

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

            <Button
                 android:id="@+id/botJugar"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/botonJugar" />

            <Button
                 android:id="@+id/botConf"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/botonConf" />
        </TableRow>

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

            <Button
                 android:id="@+id/botAcerca"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/botonAcerca" />

            <Button
                 android:id="@+id/botSalir"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="@string/botonSalir" />
        </TableRow>

    </TableLayout>

</LinearLayout>

Vamos a analizar este nuevo codigo, en el primer bloque vamos a agregar las siguiente lienas:

xmlns:tools="http://schemas.android.com/tools"
android:gravity="center"
android:padding="30dp"
tools:context=".MainActivity"

La primera y ultima linea se encargaran de decirle al programa como configurar el elemento tools y en que contexto debe usarlo, la segunda linea le dira que debe ubicar todo el contenido del layout en el centro y el relleno tal como vimos en la vista anterior. Ahora pasemos al siguiente bloque, en este caso el de TextView donde agregamos las siguiente lineas:

android:text="@string/titulo"
android:gravity="center"
android:textSize="25sp"
android:layout_marginBottom="20dp"

En la primera le indicamos que el texto a mostrar debe sacarlo del archivo strings.xml, luego diremos que lo ubique en el centro, la siguiente linea definira el tamaño de la fuente y por ultimo a cuanto debe estar separado del proximo elemento del layout, ahora veremos el siguiente bloque. En este caso va a ser un layout del tipo TableLayout, al cula le agregamos las siguientes lineas:

android:layout_height="wrap_content"
android:gravity="center"
android:stretchColumns="*"

En realidad a la primera linea no la agregamos solamente la modificamos para pasar de match_parent a wrap_content pero la segunda linea si la agregamos para que quede ubicado en el centro y con la ultima linea le decimos que se asigne la anchura sobrante a todas las columnas, este comando tambien puede especificar a cual columna le deseamos asignar todo el espacio sobrante por ejemplo, si hubieramos puesto: android:stretcColumns=»0″; el programa entiende que todo el ancho sobrante debe ir a la primera columna, en cambio si hubieramos puesto el valor 1 le hubieramos indicado que asigne todo el espacio sobrante a la segunda columna y asi sucesivamente, pasemos a ver el siguiente bloque. En este caso va a ser el de los elementos Button (boton), donde solo haremos dos modificaciones, una es el identificador y la otra del texto  mostrar:

android:id="@+id/botJugar"
android:text="@string/botonJugar"

Nuestro primer boton va a ser el utilizado para jugar, por eso lo llamaremos botJugar y luego en la siguiente linea le pondremos el texto del archivo strings.xml para que muestre el indicador correspondiente, con el resto haremos lo mismo donde utilizaremos esos nombres para saber a que funcion corresponden, tal como hicimos en la vista anterior, y por ultimo eliminamos los dos ultimos TableRow porque al estar vacios no era necesaria su utilizacion y puede traer confusion a la larga, pero como pueden ver si necesitan mas filas, solo basta con agregar esos campos nuevamente, con todo esto concluimos las modificaciones en nuestro layout si todo salio correcto y probamos la app ahora deberia verse de la siguiente forma

La cual da una mejor presentacion a nuestra app, con respecto a la anterior. Si lograron todo lo mostrado hasta ahora, vamos por el buen camino. En los proximos posts donde utilizaremos esta app iremos agregando la verdadera magia por ahora esto va a ser solamente el esqueleto de la misma.

En resumen, hoy hemos comenzado los cimientos de nuestra segunda app, hemos hecho la vista para las dos posibilidades posibles, hemos aprendido (o respasado si vieron este post) como se puede crear un layout alternativo para ciertos eventos en nuestro dispositivos y como pronto esto se va a poner mas divertido. Espero les haya gustado, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.