Bienvenidos sean a este post, hoy vamos a volver a nuestra app Asteroides para poner en practica un poco lo visto en el post anterior y de paso vamos a hacer un par de modificaciones mas, para ello pongamos manos a la obra.
Primero abramos Android Studio, una vez dentro de la app Asteroides iremos primero al archivo styles.xml en res/values/styles.xml, y modificaremos la siguiente linea:

Anuncios
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">

Por esta linea, para eliminar la barra del inicio:

<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">

En este archivo sera solo esta modificacion, pasemos al archivo AndroidManifest.xml para agregar los siguiente temas para nuestras actividades, modificaremos las siguientes actividades:

<activity android:name=".Preferencias"
    android:label="@string/tituloPref" />
<activity android:name=".Puntuaciones"
    android:label="@string/botonSalir" />

Ahora lo modificaremos de esta forma:

<activity android:name=".Preferencias"
    android:label="@string/tituloPref"
    android:theme="@android:style/Theme.Black"/>
<activity android:name=".Puntuaciones"
    android:label="@string/botonSalir"
    android:theme="@android:style/Theme.Black"/>

Como pueden ver agregamos un par de estilos de color negro para cambiar un poco la imagen a nuestra app, por ultimo haremos una ultima modificacion a nuestra vista inicial para ello agregaremos la siguiente linea en activity_main.xml:

android:background="@drawable/fondo"

Esto ira en la parte de nuestro layout, es decir:

<?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"
    android:background="@drawable/fondo"
    tools:context=".MainActivity">
...
</LinearLayout>

Con esto estableceremos un fondo para nuestra vista inicial, procedamos a hacer la ultima modificacion agregando la siguiente linea dentro del elemento TextView:

android:textColor="#FFFFFF"

Quedando nuestro elemento de la siguiente forma:

<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"
    android:textColor="#FFFFFF"
    />

Si probamos nuestra app ahora obtendremos el siguiente resultado

android58
Anuncios

Recuerden hacer lo mismo para nuestra vista apaisada (landscape) porque sino al girar nuestro dispositivo no se vera el fondo de pantalla, si lo hacen cuando lo giren quedara de la siguiente manera

android59

Ahora vamos a hacer un simple efecto de animacion, para ello vamos a crear un nuevo recurso para nuestra animacion, para ello haremos click con el boton derecho sobre la raiz de nuestros recursos (res) y seleccionaremos New -> Android resouce file como se ve en la siguiente imagen

android60

Una vez seleccionado nos aparecera el siguiente cuadro

android61

En este cuadro modificaremos a File name por aparecer (o como se ve en la imagen aparecer.xml es indistinto), en Resouce type seleccionaremos Animation, en Root element dejen set (sino debe quedar ese) y el resto se deberia completar automaticamente, pulsen Ok para generar el archivo pertinente, en este caso vamos a hacer una animacion simple donde haremos una simple aparicion al abrir nuestra app, al archivo recien creado debemos cambiar su codigo por el actual por este:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="0"
        android:toAlpha="1" />
</set>

Con este codigo establecimos una transformacion de tipo alpha para que en dos segundos pase de cero a uno, ahora abriremos nuestra clase MainActivity y haremos la siguiente modificacion en el metodo onCreate():

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    LinearLayout jugar = (LinearLayout) findViewById(R.id.principio);
    Animation animacion = AnimationUtils.loadAnimation(this,
            R.anim.aparecer);
    jugar.startAnimation(animacion);
}

En este metodo agregamos una linea para crear un enlace entre el elemento LinearLayout del archivo activity_main.xml y nuestro codigo Java por medio de esta linea:

LinearLayout jugar = (LinearLayout) findViewById(R.id.principio);

Luego crearemos un objeto de la clase Animation, donde por medio de AnimationUtils asignaremos nuestra animacion creada, luego al objeto creado para enlazar nuestro elemento con el codigo le asignaremos el metodo startAnimation() para iniciar la animacion. Si todo sale bien deberan obtener un resultado como se ve en el siguiente video

En el video podremos ver todas nuestras modificaciones, como inicia la misma con el efecto de transparencia, como hemos cambiado algunos fondos y temas de nuestras opciones, dejando un aspecto mas parecido al resultado final, si lo desean pueden agregar mas opciones de trnasformacion o que los elementos individuales ejecuten su transformacion, esto es simplemente como base para entender un poco mas nuestra app y dejarla un poco mas “monona”.

Anuncios

En resumen, hoy hemos repasado un poco sobre lo visto en otros posts, hemos integrado lo visto en el post anterior y tambien hemos mejorado un poco nuestra app de estudio, espero les haya sido util, si)gueme 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.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00