Botones y Textos animados en Android Animaciones en Button, ImageView y TextView usando Android Studio

Android

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

Cambio de imagenes mediante animación en AndroidEste 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.

10 comentario

  1. 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))

  2. 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

  3. 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

Enviar un comentario