Después de estar buscando diferentes formas de animar vistas con Android Studio he encontrado unas cuantas librerías muy útiles a la hora de implementar y dar vida a nuestra aplicación con algunas animaciones y así darle un toque más «Material Design» a todos los eventos.
Cambio de imágenes mediante una animación
Este efecto es muy útil para cambiar un drawable por otro con una pequeña animación basada en curvas como se puede ver en la imagen. Se basa en un porcentaje de animación por lo cuál se puede jugar para conseguir un efecto deseado en dicho cambio.
La librería escogida para esta tarea es ToggleDrawable.
Para implementar la librería tan solo tenemos que añadir lo siguiente al archivo build.gradle:
allprojects { repositories { ... maven { url "https://jitpack.io" } } } ... dependencies { compile 'com.github.renaudcerrato:ToggleDrawable:1.0.1' }
El uso detallado lo podéis encontrar en el Github del autor.
Animación estilo Twitter de botones, textos e imágenes
Este tipo de animación nos da menos posibilidades que las anteriores pero también nos puede venir bien para otros proyectos. Con la nueva actualización de Favoritos a Me Gusta de Twitter se introdujo una nueva animación en el corazón cuando se pulsa, eso es exactamente lo que podremos recrear en nuestra aplicación.
La librería es SmallBang de un desarrollador chino de cuál nombre no quiero ser partícipe de pronunciar (张玉涵).
Para empezar tenemos que importar la librería a nuestro proyecto añadiéndolo a nuestro archivo build.gradle
de la siguiente manera:
dependencies { compile 'hanks.xyz:smallbang-library:0.1.2' }
Luego solo tenemos que implementarlo de la siguiente manera, el ejemplo completo lo podéis encontrar en el Github del autor como proyecto de Android Studio.
MainActivity.java
public class MainActivity extends AppCompatActivity { private SmallBang mSmallBang; private ImageView mImage; private Button mButton; private TextView mText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mSmallBang = SmallBang.attach2Window(this); mImage = (ImageView)findViewById(R.id.image); mImage.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { like(v); } }); mButton = (Button) findViewById(R.id.button); mButton.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { addNumber(v); } }); mText = (TextView) findViewById(R.id.text); mText.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { redText(v); } }); } public void addNumber(View view){ mSmallBang.bang(view,new SmallBangListener() { @Override public void onAnimationStart() { } @Override public void onAnimationEnd() { toast("button +1"); } }); } public void redText(View view){ mText.setTextColor(0xFFCD8BF8); mSmallBang.bang(view,50,new SmallBangListener() { @Override public void onAnimationStart() { } @Override public void onAnimationEnd() { toast("text+1"); } }); } public void like(View view){ mImage.setImageResource(R.drawable.heart_red); mSmallBang.bang(view); mSmallBang.setmListener(new SmallBangListener() { @Override public void onAnimationStart() { } @Override public void onAnimationEnd() { toast("heart+1"); } }); } private void toast(String text) { Toast.makeText(this,text,Toast.LENGTH_SHORT).show(); } }
activity_main.xml
Otra alternativa a SmallBang es LikeButton la cuál nos permite hacer básicamente lo mismo pero de una forma más sencilla y con unos iconos ya predefinidos.
A good blog! I will bookmark a few of these..
Disculpa como hago para q funcione por q sigo los pasos de lo q hicieron y nada
Donde te has quedado o que es lo que te sale?
Una pregunta. Me salió perfecto todo pero tengo un problema.
¿Si por ejemplo yo quiero ir a otra activity despues de que termine la animación como tendria que hacer?
Me sale darle una acción pero no termina la animación.
———————————————–
Por ejemplo: Esto es para que me abra esta página con el Chrome Custom Tab.
final CustomTabsIntent intent = new CustomTabsIntent.Builder() .build();
final String url=»http://store.steampowered.com/search/?specials=1&os=win»;
intent.launchUrl(this, Uri.parse(url));
———————————————–
public void addNumber(View view){
(Si yo pongo acá, se abre la página pero la animación no termina :c )
mSmallBang.bang(view,new SmallBangListener() {
@Override
public void onAnimationStart() {
}
@Override
public void onAnimationEnd() {
(Y si pongo acá me salta error en (this, Uri.parse(url))
Ya solucioné el problema. Gracias c:
Lo que hice fué sustituir el «Toast por un Onclick»
@Override
public void onAnimationEnd() {
toast(«heart+1»); <—————– Ejemplo: Noticias (view);
}
});
}
Ingeniosa solución! Un saludo!
Como se usa en un fragment?
Puedes usarlo de igual manera en el método onCreate de un Fragment
La dependencia de SmallBang por alguna razón ha cambiado a implementation ‘pub.hanks:smallbang:1.2.2’
por si alguien nuevo entra y se encuentra con el error del gradle «404 not found» xd
el efecto del botón esta muy lindo…. en vez de darle clic al botón y muestre el efecto…. como seria en el botón tenga el efecto sin pulsarlo (efecto activado por defecto) y cuando lo pulse se realice una transición a otra actividad