Comment utiliser le véritable bouton d'action flottante (FAB) étendu?

Question

Pour lever tout doute ou pensée sur la duplication: on Material Design définit ce qui est "étendu".

Mais la plupart des gens confondent "étendu" avec " Type de transition: numéro abrégé ", ce qui rend difficile la recherche de solutions. Comme ici

Question Ce que j’attends donc, c’est l’installation du FAB avec du texte et une taille étendue.

Aujourd'hui, mon code est comme ça:

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/maps_main_distance_btn"
    Android:layout_width="0dp"
    Android:layout_height="wrap_content"
    Android:layout_marginBottom="8dp"
    Android:text="@string/str_distance_btn"
    app:elevation="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

Mais mon bouton ressemble à ceci: 

Pas de texte et pas de bon format. Je l'utilise dans une mise en page de contrainte.

Answer 1

 

Vous pouvez créer une classe utilitaire qui anime une MaterialButton en une FloatingActionButton étendue à l'aide d'une ConstraintLayout. Vous devez d’abord déclarer les deux états de la MaterialButton en xml, puis utiliser la TransitionManager pour animer les deux.

Vous pouvez lire un article sur le sujet à ce sujet ici , dans l’intervalle, je vais ajouter un peu de code pertinent ici.

État FAB effondré:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout Android:id="@+id/extend_fab_container"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:background="@drawable/bg_fab"
    Android:elevation="8dp">

    <Android.support.design.button.MaterialButton
        Android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        Android:layout_width="56dp"
        Android:layout_height="56dp"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</Android.support.constraint.ConstraintLayout>

Etat FAB étendu:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout Android:id="@+id/extend_fab_container"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:elevation="8dp"
    Android:background="@drawable/bg_fab">

    <Android.support.design.button.MaterialButton
        Android:id="@+id/fab"
        style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        app:cornerRadius="56dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</Android.support.constraint.ConstraintLayout>

Fond dessinable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <solid Android:color="@color/colorAccent" />
    <corners Android:radius="56dp" />
</shape>

Et le code Java Expansion correspondant:

private void setExtended(boolean extended, boolean force) {
    if (isAnimating || (extended && isExtended() && !force)) return;

    ConstraintSet set = new ConstraintSet();
    set.clone(container.getContext(), extended ? R.layout.fab_extended : R.layout.fab_collapsed);

    TransitionManager.beginDelayedTransition(container, new AutoTransition()
            .addListener(listener).setDuration(150));

    if (extended) button.setText(currentText);
    else button.setText("");

    set.applyTo(container);
}

Answer 2

Vous pouvez utiliser cette bibliothèque pour le faire. (J'ai utilisé un autre moyen) Mais j'ai utilisé un FancyButton pour créer un bouton rond et génial dans la disposition du coordinateur comme ci-dessous:

    <mehdi.sakout.fancybuttons.FancyButton
    Android:id="@+id/actMain_btnCompare"
    app:layout_behavior="@string/fab_transformation_sheet_behavior"
    Android:layout_width="125dp"
    Android:layout_height="38dp"
    Android:layout_gravity="bottom|center"
    Android:layout_margin="20dp"
    Android:elevation="3dp"
    Android:padding="2dp"
    fancy:fb_borderColor="@color/white"
    fancy:fb_borderWidth="3dp"
    fancy:fb_defaultColor="@color/colorPrimaryDark"
    fancy:fb_radius="20dp"
    fancy:fb_text="مقایسه محصول"
    fancy:fb_textColor="@color/white"
    fancy:fb_textGravity="center"
    fancy:fb_textSize="13sp" />

et le résultat est:

 

Cela peut avoir une icône dedans (voir FancyButton ).

avec app:layout_behavior="@string/fab_transformation_sheet_behavior" il agit comme fab comme ci-dessous:

 

Bonne chance.