Crear una animación similar a un corazón de Instagram/Twitter en Android

En este artículo, aprendamos cómo crear una animación Me gusta de corazón de Instagram/Twitter en Android. La animación Me gusta de Twitter es bastante buena y atractiva. Supongamos que uno quiere hacer una aplicación como Twitter, Instagram o Facebook donde a los usuarios les pueden gustar las publicaciones, allí uno puede usar esta vista. También se pueden usar Leonids en lugar de esto, pero es muy fácil de usar en comparación con Leonids . Esta es una biblioteca de animaciones y las animaciones ayudan a llamar la atención del usuario, por lo que es mejor aprenderlas.

Acercarse

Agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias.

implementation 'pub.hanks:smallbang:1.2.2'
Cree un nuevo Directorio de recursos de Android y, para ello, haga clic con el botón derecho en la carpeta res -> Directorio de recursos de Android , asegúrese de seleccionar el tipo de recurso como color .

Ahora cree un nuevo archivo text_selector.xml en el directorio de color y agregue el siguiente código. Este archivo se usa para seleccionar TextColor según el estado de TextView .

selector_texto.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorPrimary"
          android:state_selected="true"/>
    <item android:color="#D6D6D6"/>
</selector>

Ahora cree un nuevo archivo ic_heart.xml en el directorio dibujable y agregue el siguiente código o puede descargar la imagen vectorial de este enlace y pegarla en la carpeta dibujable.

ic_corazón.xml

<vector android:height="32dp" 
    android:viewportHeight="412.735"
    android:viewportWidth="412.735" 
    android:width="32dp" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FF000000" 
     android:pathData="M295.706,35.522C295.706,35.522 295.706,
          35.522 295.706,35.522c-34.43,-0.184 -67.161,14.937 
          -89.339,41.273c-22.039,-26.516 -54.861,-41.68 -89.339,
          -41.273C52.395,35.522 0,87.917 0,152.55C0,263.31 193.306,
          371.456 201.143,375.636c3.162,2.113 7.286,2.113 10.449,
          0c7.837,-4.18 201.143,-110.759 201.143,-223.086C412.735,
          87.917 360.339,35.522 295.706,35.522zM206.367,
          354.738C176.065,336.975 20.898,242.412 20.898,152.55c0,
          -53.091 43.039,-96.131 96.131,-96.131c32.512,-0.427 
          62.938,15.972 80.457,43.363c3.557, 4.905 10.418,5.998
          15.323,2.44c0.937,-0.68 1.761,-1.503 2.44,
          -2.44c29.055,-44.435 88.631,-56.903 133.066,-27.848c27.202,
          17.787 43.575,48.114 43.521,80.615C391.837,243.456 236.669,
          337.497 206.367,354.738z"/>
</vector>

Ahora cree un nuevo archivo ic_heart_red.xml en el directorio dibujable y agregue el siguiente código o puede descargar la imagen vectorial de este enlace y pegarla en la carpeta dibujable.

ic_corazón_rojo.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="391.837dp"
    android:height="391.837dp"
    android:viewportWidth="391.837"
    android:viewportHeight="391.837">
  <path
      android:pathData="M285.257,35.528c58.743,0.286 106.294,
              47.836 106.58,106.58c0,107.624 -195.918,214.204
             -195.918,214.204S0,248.165 0,142.108c0,
             -58.862 47.717,-106.58 106.58,-106.58l0,0c36.032,
             -0.281 69.718,17.842 89.339,48.065C215.674,53.517 
              249.273,35.441 285.257,35.528z"
      android:fillColor="#D7443E"/>
</vector>

Ahora cree un nuevo archivo heart_selector.xml en drawable y agregue el siguiente código. Este archivo se utiliza para seleccionar la imagen en función del estado de ImageView .

selector_corazon.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_heart_red"
          android:state_selected="true"/>
    <item android:drawable="@drawable/ic_heart"/>
</selector>

Agregue el siguiente código en el archivo activity_main.xml . En este archivo, agregamos ImageView y TextView como childView al diseño de SmallBangView . Agregue heart_selector en la etiqueta src de imageView y text_Selector en la etiqueta textColor de TextView.

actividad_principal.xml

<?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"
    android:gravity="center">
  
    <xyz.hanks.library.bang.SmallBangView
        android:layout_margin="20dp"
        android:id="@+id/imageViewAnimation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/heart_selector"
           />
  
    </xyz.hanks.library.bang.SmallBangView>
  
    <xyz.hanks.library.bang.SmallBangView
  
        android:id="@+id/textViewAnimation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
  
        <TextView
            android:textColor="@color/text_selector"
            android:textAlignment="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="GeeksForGeeks"
            android:textSize="25sp"
            android:textStyle="bold" />
    </xyz.hanks.library.bang.SmallBangView>
</LinearLayout>

Agregue el siguiente código en el archivo MainActivity.java . En este archivo, agregamos OnClickListner a ImageView y TextView , que se invocarán automáticamente cada vez que el usuario toque la vista. Si el estado es verdadero, es decir, ImageView o textView ya están seleccionados, llamamos setSelected a falso; de lo contrario, llamamos a LikeAnimation en la vista.

MainActivity.java

package org.geeksforgeeks.twitterLikeAnimaton;          
  
import android.os.Bundle;
import android.view.View;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import xyz.hanks.library.bang.SmallBangView;
  
public class MainActivity extends AppCompatActivity {
  
    SmallBangView imageView,textView;
  
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        textView = findViewById(R.id.textViewAnimation);
        imageView = findViewById(R.id.imageViewAnimation);
  
        textView.setOnClickListener(
                 new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (textView.isSelected()) {
                    textView.setSelected(false);
                } else {
                    // if not selected only 
                    // then show animation.
                    textView.setSelected(true);
                    textView.likeAnimation();
                }
            }
        });
  
        imageView.setOnClickListener(
                  new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (imageView.isSelected()) {
                    imageView.setSelected(false);
                } else {
                    // if not selected only 
                    // then show animation.
                    imageView.setSelected(true);
                    imageView.likeAnimation();
                }
            }
        });
    }
}

Ejecutar como emulador

Publicación traducida automáticamente

Artículo escrito por madhavmaheshwarimm20 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA