[Tutorial] insertar animaciones en la cortina de notificaciones

[ffalete]

Bueno, siguiendo el concepto de android y el afan de compartir, voy a explicaros como se insertan unas sencillas animaciones en la cortina de notificaciones, aunque el proceso no es muy complicado si es un poco lioso si no sabes como hacerlo.
Bien dicho esto y presuponiendo que todo el que va ha hacerlo tiene conocimientos basicos en descompilar y compilar apks empezamos.

Primero, no me hago responsable de bricks, perdida de datos, etc etc. El tutorial lo haces bajo tu entera responsabilidad.

Este tutorial esta echo sobre una version 4.1.2 . Sobre otras Bases no esta comprobado
Lo primero que tenemos que hacer es descompilar el SystemUi y meter dentro del drawable xhdpi las imagenes que queramos para hacer la animacion. En este caso voy ha hacer 4 animaciones, que serian para el fondo de los toggles, el fondo del boton de ajustes y los botones de abajo de la cortina donde salen la operadora. Yo he metido 20 animaciones para los toggles y los ajustes y 40 para los botones de abajo, aunque podeis meter las que querais(no me seais brutos y no metais 200 o 300 que igual se tuesta el telefono)

(Click para mostrar/ocultar)

Dibujo1.jpg

Una vez las imagenes dentro del drawable xhdpi y sin hacer nada mas, compilamos la apk.
Acto seguido el unsignedsystemui resultante lo descompilamos y borramos el systemui original para no liarnos.
Ahora ya tenemos reconocidos por android las imagenes, podeis verlo en el values/public,algo asi

(Click para mostrar/ocultar)

Dibujo2.jpg

Ahora hay que hacer los xml que haran las animaciones. mejor os dejo por aqui un xml como lo tengo yo y lo usais de plantilla, o os lo haceis nuevo

(Click para mostrar/ocultar)

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false" android:repeatMode="reverse"
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="150" android:drawable="@drawable/anim_falete1" />
    <item android:duration="150" android:drawable="@drawable/anim_falete2" />
    <item android:duration="150" android:drawable="@drawable/anim_falete3" />
    <item android:duration="150" android:drawable="@drawable/anim_falete4" />
    <item android:duration="150" android:drawable="@drawable/anim_falete5" />
    <item android:duration="150" android:drawable="@drawable/anim_falete6" />
    <item android:duration="150" android:drawable="@drawable/anim_falete7" />
    <item android:duration="150" android:drawable="@drawable/anim_falete8" />
    <item android:duration="150" android:drawable="@drawable/anim_falete9" />
    <item android:duration="150" android:drawable="@drawable/anim_falete10" />
    <item android:duration="150" android:drawable="@drawable/anim_falete11" />
    <item android:duration="150" android:drawable="@drawable/anim_falete12" />
    <item android:duration="150" android:drawable="@drawable/anim_falete13" />
    <item android:duration="150" android:drawable="@drawable/anim_falete14" />
    <item android:duration="150" android:drawable="@drawable/anim_falete15" />
    <item android:duration="150" android:drawable="@drawable/anim_falete16" />
    <item android:duration="150" android:drawable="@drawable/anim_falete17" />
    <item android:duration="150" android:drawable="@drawable/anim_falete18" />
    <item android:duration="150" android:drawable="@drawable/anim_falete19" />
    <item android:duration="150" android:drawable="@drawable/anim_falete20" />
    <item android:duration="150" android:drawable="@drawable/anim_falete19" />
    <item android:duration="150" android:drawable="@drawable/anim_falete18" />
    <item android:duration="150" android:drawable="@drawable/anim_falete17" />
    <item android:duration="150" android:drawable="@drawable/anim_falete16" />
    <item android:duration="150" android:drawable="@drawable/anim_falete15" />
    <item android:duration="150" android:drawable="@drawable/anim_falete14" />
    <item android:duration="150" android:drawable="@drawable/anim_falete13" />
    <item android:duration="150" android:drawable="@drawable/anim_falete12" />
    <item android:duration="150" android:drawable="@drawable/anim_falete11" />
    <item android:duration="150" android:drawable="@drawable/anim_falete10" />
    <item android:duration="150" android:drawable="@drawable/anim_falete9" />
    <item android:duration="150" android:drawable="@drawable/anim_falete8" />
    <item android:duration="150" android:drawable="@drawable/anim_falete7" />
    <item android:duration="150" android:drawable="@drawable/anim_falete6" />
    <item android:duration="150" android:drawable="@drawable/anim_falete5" />
    <item android:duration="150" android:drawable="@drawable/anim_falete4" />
    <item android:duration="150" android:drawable="@drawable/anim_falete3" />
    <item android:duration="150" android:drawable="@drawable/anim_falete2" />
    <item android:duration="150" android:drawable="@drawable/anim_falete1" />
</animation-list>

Este seria la animacion para el fondo de los toggles.Si solo quereis que haga la animacion una vez quitar el false y poner true, y si no quereis que vuelva hacia atras la animacion quitar lo que sale en azul. En esta animacion concretamente daria lo mismo tener el reverse ya que esta echo de tal manera que vuelve hacia atras, aun asi yo lo he dejado.
Una vez tenemos la animacion, guardamos el xml en la carpeta drawable con el nombre que queramos y hacemos lo mismo con las otras tres animaciones. (150, es la duracion de cada imagen. Podeis poner el valor que querais, pero acordaros que cuanto mas valor tenga ira mas rapido y cuanto menos pues eso.

(Click para mostrar/ocultar)

Dibujo3.jpg

Bueno, una vez aqui vamos a ver donde estan las imagenes originales para cambiarlas y que aparezcan en nuestra nueva animacion. Empezamos por los botones de abajo y vamos a la carpeta drawable y veremos que hay un xml que dice tw_status_bar_close.xml en este estan los botones tw_status_bar_close_off ytw_status_bar_close_on donde el off seria el que se ve cuando la bajas la cortina y el on la que se ve cuando pulsamos el boton pa cerrarla. Cogemos y el nombre que le hayamos puesto al xml de la animacion y lo pegamos en el tw_status_bar_close_off

(Click para mostrar/ocultar)

Dibujo4.jpg

Bien ya tenemos las dos primeras animaciones echas. ahora vamos con las otras dos. En la carpeta drawable tambien estan los fondos de los toggles y de los ajustes. serian tw_quick_panel_quick_setting_button_bg.xml para el fondo de los toggles y tw_quick_panel_setting_button_bg.xml para el fondo de los ajustes
Donde habria que cambiar los drawables por nuestras animaciones quedando tal que asi

(Click para mostrar/ocultar)

Dibujo5.jpg

(Click para mostrar/ocultar)

Dibujo6.jpg

ahora solo falta guardar todo y volver a compilar la apk
Si todo ha salido bien, solo falta meter la apk en un zip y flashearla por el recovery para ver algo tal que asi.

por aqui os dejo el systemUi modificado listo para flashear por recovery, aunque la gracia de esto es hacerselo uno mismo.

Por favor si colgais el tutorial por algun sitio acordaros de agradecer que no cuesta nada
saludos.

[ffalete]

Bueno, pues voy a explicaros como hacer una cortina animada en el note2., mas que explicar es aumentar el tuto de arriba.
Bien. Si habeis seguido el tutorial y habeis intentado hacerlo con la cortina habreis comprobado que no funciona. Para poder hacerlo, simplemente se meten las imagenes en el drawable-xhdpi y se compila. Acto seguido se descompila para crear los id en el public del values. y cuando lo tengamos podemos trabajar sobre ellos.
Nos vamos al tw_status_bar_expanded.xml y lo modificamos un poco para que quede tal que asi.
tw_status_bar_expanded.zip
Donde lo modificaremos para que el boton de abajo de cerrar la cortina haga las veces de fondo en la cortina. Si comparais el tw_satatus_bar_expanded con otro que tengais en algun proyecto vereis la diferencia. Podeis usar este y no complicaros la vida o modificar el vuestro.
una vez listo vamos a la carpeta drawable, en res, donde haremos un xml para el "boton/cortina" y lo dejaremos tal que asi como esta en el xml
king_falete.zip
Una vez tengamos la accion del boton fabricado solo nos falta la animacion para tenerlo todo. Por aqui os dejo el xml de la animacion para que trabajeis menos.
faletecortina.zip
Ya lo tenemos todo. ahora solo falta compilar y flashearlo en el movil.
Practicamente es el mismo metodo de el otro tutorial de arriba, lo unico que variaremos sera modificar el tw_status_bar_expanded y meter un xml nuevo para el fondo que en este caso sera la animacion.
Un consejo. La cortina no la hagais muy grande de medida ya que se tostara el telefono y aunque este bien todo dara fc y os volvereis locos hasta que os deis cuenta de lo que pasa jejej. 180x320 es una medida buena, o incluso un poco mas grande. olvidarse de meter imagenes de 720x1280 ya que se volvera loco jejeeejeej
Cualquier duda preguntar.

Dar las gracias al equipo equipo StoWes Team del foro del s2 ya que siguiendo sus pasos me di cuenta de como se hacia la cortina animada

aqui el video de como queda.
ya os explico otro dia los ajustes animados jejejejeje





Acuerdate de Agradecer si te gusto el tutorial, que aunque no te lo creas es lo unico que me hace seguir investigando

[lauri19david]

Gracias por el tuto makina.

[ffalete]

Originalmente Escrito por lauri19david

Gracias por el tuto makina.

David no he mirado el system del s4 pero imagino que la teoria sera la misma por si te atreves

[lauri19david]

Claro que si tío, luego lo pruebo.
Ya esta quedando guapo, gracias marcos.
Luego comento.

[Kazica]

Que guapo, muchas gracias

[BOBGAR]

YEAH luego le pego un ojo.

[fran_9]

Gracias, por tu aporte e iniciativas.

[bukote]

solo puedo rendirme a tus pies.

la verdad que es una pasada como quedan. muchas gracias

[KDNMA]

Estamos en ello, ffal, una chintetaza se mereze seguro
gracias crack

[david206206]

Buem trabajo si puedo ayudar en algo aqui me teneis un saludo y aprovechar biem lo que sabe el amigo ffalete que en esto de los xml es un maquina lo dicho pra dudas por aqui estare para echarle una mano.

[j3p]

eres el put*** amo muchas gracias ffalete por el tuto

[ffalete]

Mañana hago algunas animaciones con el systemui modificado para que podais instalar si tener que hacer todo el tuto.

[antiheroe09]

Originalmente Escrito por ffalete

Mañana hago algunas animaciones con el systemui modificado para que podais instalar si tener que hacer todo el tuto.

Yo estaba a punto de pedirte eso jeje, gracias
Un saludo.

[jay2079]

me apunto a este pedazo de hilo

[rolas8111]

Originalmente Escrito por ffalete

Mañana hago algunas animaciones con el systemui modificado para que podais instalar si tener que hacer todo el tuto.

No me gusta precionar pero me muero por probar ya una cortina animada a ver si tienes alguna por hay perdidilla ke nos pases kiero tenerla =)

[ffalete]

Originalmente Escrito por rolas8111

No me gusta precionar pero me muero por probar ya una cortina animada a ver si tienes alguna por hay perdidilla ke nos pases kiero tenerla =)

No rolas tranquilo. Esque he tenido un poco de lio y no he tenido tiempo
El zip del primer post tiene la animacion del video por si quieres probarla.
Taba pensando en meter algunos botones mas arriba para dejarlo curioso y subirlo todo a la vez. Jeje
Ara subo un video pa que lo veas


Edito.

https://www.box.com/s/ij6qdbd6rvb6fo90m1ae

[pavijomar]

Buenisimo tuto amigo!!!!!
Muchas gracias

[rolas8111]

Originalmente Escrito por ffalete

No rolas tranquilo. Esque he tenido un poco de lio y no he tenido tiempo
El zip del primer post tiene la animacion del video por si quieres probarla.
Taba pensando en meter algunos botones mas arriba para dejarlo curioso y subirlo todo a la vez. Jeje
Ara subo un video pa que lo veas


Edito.

https://www.box.com/s/ij6qdbd6rvb6fo90m1ae

Ya la traigo puesta y se ve.muy bien
GRACIAS

[rolas8111]

Ffalete molestando ya as echo otra cortinilla de esas sexys =)