Si vous avez besoin d'implémenter un bouton "like", "love" ou "favorite", ce tutoriel est pour vous. Nous allons explorer quelques solutions open source qui peuvent vous permettre d'y parvenir. Nous le faisons d'une manière pas à pas en utilisant des exemples de code.

(a). LikeButton

LikeButton est une bibliothèque qui vous permet de créer un bouton avec des effets d'animation similaires au cœur de Twitter lorsque vous aimez quelque chose.

Voici la démonstration :

Android LikeButton

Étape 1 : Installation

Dépôt

Commencez par enregistrer le Repository :

Ajoutez ceci dans votre fichier build.gradle racine (pas votre fichier build.gradle module) :

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Dépendance

Ensuite, ajoutez le statut implementation suivant dans le fichier build.gradle de votre module :

    implementation 'com.github.jd-alexander:LikeButton:0.2.3'

Par défaut, vous obtiendrez le bouton coeur avec le code ci-dessus.

Étape 2 : Ajouter à la mise en page

L'étape suivante consiste à ajouter le LikeButton dans votre layout xml :

<com.like.LikeButton
            app:icon_type="heart"
            app:icon_size="25dp"
            android:id="@+id/star_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

Explorez ci-dessous les attributs que vous pouvez utiliser avec cette bibliothèque :

<com.like.LikeButton
app:icon_type="Star"
app:circle_start_color="@color/colorPrimary"
app:like_drawable="@drawable/thumb_on"
app:unlike_drawable="@drawable/thumb_off"
app:dots_primary_color="@color/colorAccent"
app:dots_secondary_color="@color/colorPrimary"
app:circle_end_color="@color/colorAccent"
app:icon_size="25dp"
app:liked="true"
app:anim_scale_factor="2"
app:is_enabled="false"
/>

Voici comment vous pouvez, par exemple, définir un type de ressource icône de manière déclarative :

app:icon_type="heart"

Étape 3 : Écouter les événements

Vous pouvez maintenant attacher par programmation un gestionnaire d'événements au bouton dans votre code, et écouter les événements de type "like/unlike" :

likeButton.setOnLikeListener(new OnLikeListener() {
            @Override
            public void liked(LikeButton likeButton) {

            }

            @Override
            public void unLiked(LikeButton likeButton) {

            }
        });

Vous pouvez également définir par programme un type d'icône comme ci-dessous :

likeButton.setIcon(IconType.Star);

Et pour définir la taille de l'icône :

likeButton.setIconSizePx(40);
likeButton.setIconSizeDp(20);

Référence

Vous trouverez ci-dessous le lien de téléchargement du projet d'exemple.

Numéro Lien
1. Lire la suite
2. Télécharger)
3. Suivre l'auteur du code

(b). MaterialFavoriteButton

Un bouton favori/étoile/amour animé pour android.

Voici la démonstration de cette bibliothèque :

MaterialFavoriteButton

Voyons comment utiliser ce paquet.

Etape 1 : L'installer

Commencez par l'installer. Ajoutez la déclaration d'implémentation suivante dans votre build.gradle au niveau du module :

implementation 'com.github.ivbaranov:materialfavoritebutton:0.1.5'

Puis sync pour le télécharger.

Étape 2 : Ajouter à la mise en page

Ensuite, vous devez ajouter MaterialFavoriteButton à votre modèle xml :

<com.github.ivbaranov.mfb.MaterialFavoriteButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Voici les attributs xml qui peuvent être utilisés :

app:mfb_state="false"                            // default button state
app:mfb_animate_favorite="true"                  // to animate favoriting
app:mfb_animate_unfavorite="false"               // to animate unfavoriting
app:mfb_padding="12"                             // image padding
app:mfb_favorite_image="@drawable/ic_fav"        // custom favorite resource
app:mfb_not_favorite_image="@drawable/ic_not_fav"// custom not favorite resource
app:mfb_rotation_duration="400"                  // rotation duration
app:mfb_rotation_angle="360"                     // rotation angle
app:mfb_bounce_duration="300"                    // bounce duration
app:mfb_color="black"                            // black or white default resources (enum)
app:mfb_type="star"                              // star or heart shapes (enum)
app:mfb_size="48"                                // button size

Étape 3 : Écrire le code

Vous pouvez ensuite écrire votre code soit en kotlin soit en java. Par exemple, vous pouvez créer par programme le bouton MaterialFavoriteButton sans l'ajouter au layout. Vous faites cela comme suit :

MaterialFavoriteButton favorite = new MaterialFavoriteButton.Builder(this)
        .create();

Pour obtenir l'état favori/non favori ou aimé/non aimé, vous attachez un gestionnaire d'événement comme suit :

favorite.setOnFavoriteChangeListener(
        new MaterialFavoriteButton.OnFavoriteChangeListener() {
          @Override
          public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
            //
          }
        });

**Utilisation dans RecyclerView

Pour éviter de déclencher une animation lors du nouveau rendu de la vue de l'élément, assurez-vous de définir l'état du bouton favori dans le onBindViewHolder sans animation :

favoriteButton.setFavorite(isFavorite(data.get(position)));

Exemple complet

Voyons maintenant un exemple complet écrit en Java. Vous commencez par installer la bibliothèque comme nous l'avons vu précédemment.

Ensuite, vous créez un modèle xml :

contenu_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="none"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_main"
    tools:context=".MainActivity">

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/card_margin">

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="Basic"
            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="@string/ipsum_1" />

        <com.github.ivbaranov.mfb.MaterialFavoriteButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

      </LinearLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/card_margin">

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="Nice"
            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="@string/ipsum_en_1914_1" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

          <TextView
              android:id="@+id/counter_text"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:layout_centerVertical="true"
              android:layout_marginLeft="@dimen/starred_margin"
              android:text="@string/starred" />

          <TextView
              android:id="@+id/counter_value"
              android:layout_width="wrap_content"
              android:layout_height="match_parent"
              android:layout_centerVertical="true"
              android:layout_toRightOf="@+id/counter_text"
              android:layout_marginLeft="@dimen/counter_value_margin" />

          <com.github.ivbaranov.mfb.MaterialFavoriteButton
              android:id="@+id/favorite_nice"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentRight="true"
              app:mfb_rotation_duration="400"
              app:mfb_rotation_angle="216"
              app:mfb_bounce_duration="700" />

        </RelativeLayout>

      </LinearLayout>

    </android.support.v7.widget.CardView>

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/card_margin">

      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

          <TextView
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:padding="@dimen/text_padding"
              android:text="Custom"
              android:textAppearance="@style/TextAppearance.AppCompat.Title" />

          <com.github.ivbaranov.mfb.MaterialFavoriteButton
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_alignParentRight="true"
              app:mfb_rotation_duration="700"
              app:mfb_rotation_angle="360"
              app:mfb_favorite_image="@drawable/ic_event_available_black_24dp"
              app:mfb_not_favorite_image="@drawable/ic_event_busy_black_24dp"
              app:mfb_animate_unfavorite="true"
              app:mfb_bounce_duration="0" />

        </RelativeLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/text_padding"
            android:text="@string/ipsum_2" />

      </LinearLayout>

    </android.support.v7.widget.CardView>

  </LinearLayout>

</ScrollView>

Vous remplacez ensuite votre code MainActivity par ce qui suit :

MainActivity.java

public class MainActivity extends AppCompatActivity {
  private TextView niceCounter;
  private int niceCounterValue = 37;

  @Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    //in the toolbar
    MaterialFavoriteButton toolbarFavorite = new MaterialFavoriteButton.Builder(this) //
        .favorite(true)
        .color(MaterialFavoriteButton.STYLE_WHITE)
        .type(MaterialFavoriteButton.STYLE_HEART)
        .rotationDuration(400)
        .create();
    toolbar.addView(toolbarFavorite);
    toolbarFavorite.setOnFavoriteChangeListener(
        new MaterialFavoriteButton.OnFavoriteChangeListener() {
          @Override
          public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
            Snackbar.make(buttonView, getString(R.string.toolbar_favorite_snack) + favorite,
                Snackbar.LENGTH_SHORT).show();
          }
        });

    //nice cardview
    niceCounter = (TextView) findViewById(R.id.counter_value);
    niceCounter.setText(String.valueOf(niceCounterValue));
    MaterialFavoriteButton materialFavoriteButtonNice =
        (MaterialFavoriteButton) findViewById(R.id.favorite_nice);
    materialFavoriteButtonNice.setFavorite(true, false);
    materialFavoriteButtonNice.setOnFavoriteChangeListener(
        new MaterialFavoriteButton.OnFavoriteChangeListener() {
          @Override
          public void onFavoriteChanged(MaterialFavoriteButton buttonView, boolean favorite) {
            if (favorite) {
              niceCounterValue++;
            } else {
              niceCounterValue--;
            }
          }
        });
    materialFavoriteButtonNice.setOnFavoriteAnimationEndListener(
        new MaterialFavoriteButton.OnFavoriteAnimationEndListener() {
          @Override
          public void onAnimationEnd(MaterialFavoriteButton buttonView, boolean favorite) {
            niceCounter.setText(String.valueOf(niceCounterValue));
          }
        });
  }

  @Override public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
  }

  @Override public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
      return true;
    }

    return super.onOptionsItemSelected(item);
  }
}

Référence

Trouvez le lien de téléchargement ci-dessous :

Numéro Lien
1. Lire la suite
2. Télécharger
3. Suivre l'auteur du code

(c). SparkButton

Bibliothèque Android permettant de créer des boutons avec l'animation de type cœur de Twitter.

Cette bibliothèque supporte l'API 14+.

Voici une démo de son utilisation :

SparkButton Example Android

Pour l'utiliser :

Etape 1 : L'installer

Vous devez d'abord l'installer. Comme il est hébergé dans jitpack, enregistrez jitpack comme suit dans votre fichier build.gradle à la racine :

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

Puis ajoutez votre déclaration d'implémentation :

    implementation 'com.github.varunest:sparkbutton:1.0.6'

Synchronisez pour le télécharger.

Etape 2 : Ajouter au layout

Maintenant vous devez ajouter SparkButton à votre layout xml :

        <com.varunest.sparkbutton.SparkButton
            android:id="@+id/spark_button"
            android:layout_width="40dp"
            android:layout_height="40dp"
            app:sparkbutton_activeImage="@drawable/active_image"
            app:sparkbutton_inActiveImage="@drawable/inactive_image"
            app:sparkbutton_iconSize="40dp"
            app:sparkbutton_primaryColor="@color/primary_color"
            app:sparkbutton_secondaryColor="@color/secondary_color" />

Voici les attributs applicables :

<attr name="sparkbutton_iconSize" format="dimension|reference" />
<attr name="sparkbutton_activeImage" format="reference" />
<attr name="sparkbutton_disabledImage" format="reference" />
<attr name="sparkbutton_primaryColor" format="reference" />
<attr name="sparkbutton_secondaryColor" format="reference" />
<attr name="sparkbutton_pressOnTouch" format="boolean" />
<attr name="sparkbutton_animationSpeed" format="float" />

Étape 3 : écrire le code

Vous pouvez également créer le bouton de manière programmatique et définir les attributs via java :

            SparkButton button  = new SparkButtonBuilder(context)
                .setActiveImage(R.drawable.active_image)
                .setInActiveImage(R.drawable.inactive_image)
                .setDisabledImage(R.drawable.disabled_image)
                .setImageSizePx(getResources().getDimensionPixelOffset(R.dimen.button_size))
                .setPrimaryColor(ContextCompat.getColor(context, R.color.primary_color))
                .setSecondaryColor(ContextCompat.getColor(context, R.color.secondary_color))
                .build();

Référence

Trouvez le lien de téléchargement ci-dessous :

Numéro Lien
1. Lire la suite
2. Télécharger
3. Suivre l'auteur du code

Passez une bonne journée.

Catégorisé:

BoutonFrench