Shadow affichage en tant que carré sur FloatingActionButton Glide V4

Question

J'ai récemment mis à niveau Glide vers la version 4, ce qui a causé des problèmes avec l'image que j'ai affichée dans un bouton d'action flottant. J'ai essayé 2 méthodes et j'utiliser le même XML pour les deux:

XML:

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/profilepic_fab" 
    android:layout_width="150dp" 
    android:layout_height="150dp" 
    android:scaleType="center" 
    app:layout_anchor="@id/appbar" 
    app:layout_anchorGravity="bottom|center_horizontal" 
    app:srcCompat="@mipmap/bookmark_checked_white" /> 

Méthode n ° 1:

  RequestOptions optionsCentre = new RequestOptions() 
        .placeholder(R.drawable.profilepic_placeholder) 
        error(R.drawable.profilepic_placeholder).dontTransform() 
        .dontAnimate().CircleCrop(); 

      Glide.with(context) 
        .load(userinfo.getprofilePic()) 
        .apply(optionsCentre) 
        .into(profilepic); 

Résultat de la Méthode n ° 1: Il semble bon sur Android 7.1 .2 mais 4.4, il ressemble à l'image ci-dessous:

Méthode n ° 2:

RequestOptions options = new RequestOptions() 
       .fitCenter() 
       .placeholder(R.drawable.profilepic_placeholder) 
       .error(R.drawable.profilepic_placeholder) 
       .priority(Priority.HIGH); 

    Glide.with(context) 
      .asBitmap() 
      .apply(options) 
      .load(url) 
      .into(new BitmapImageViewTarget(fab) { 
       @Override 
       protected void setResource(Bitmap resource) { 
        RoundedBitmapDrawable circularBitmapDrawable = 
          RoundedBitmapDrawableFactory.create(context.getResources(), resource); 
        circularBitmapDrawable.setCircular(true); 
        fab.setImageDrawable(circularBitmapDrawable); 
       } 
      }); 

Résultat de la Méthode n ° 2: Les résultats semblent différents sur Android 7.1.2 et 4.4

Android 7.1.2:

Android 4.4:

La méthode n ° 2 est ce qui fonctionnait avec Glide v3 ... Toute aide serait grandement appréciée!

Answer 1

En utilisant FloatingActionButton, ce ne est pas possible d'atteindre votre comportement attendu pour toutes les versions Android.

Au lieu de FloatingActionButton, utilisez ImageView avec bibliothèque 3ème partie comme Picasso ou Glide pour charger et transformer votre ressource Image. Vous pouvez également utiliser la bibliothèque CircleImageView.

SOLUTION 1:

En utilisant ImageView avec Picasso.

Gradle:

dependencies { 
    ......... 
    compile 'com.squareup.picasso:picasso:2.5.2' 
} 

Utilisation:

XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/image_header" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@drawable/dummy_background"/> 

    <ImageView 
     android:id="@+id/image_profile_pic" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_marginTop="125dp" 
     android:layout_centerHorizontal="true"/> 

</RelativeLayout> 

JAVA

ImageView imageProfilePic = (ImageView) findViewById(R.id.image_profile_pic); 
Picasso.with(this) 
     .load(R.drawable.dummy_profile_pic) 
     .resize(150, 150) 
     .centerCrop() 
     .transform(new CircleTransform()) 
     .into(imageProfilePic); 

SORTIE:

SOLUTION 2:

En utilisant ImageView avec Glide.

Gradle:

dependencies { 
    ......... 
    compile 'com.github.bumptech.glide:glide:4.0.0-RC1' 
} 

Utilisation:

XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/image_header" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@drawable/dummy_background"/> 

    <ImageView 
     android:id="@+id/image_profile_pic" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_marginTop="125dp" 
     android:layout_centerHorizontal="true"/> 

</RelativeLayout> 

JAVA

ImageView imageProfilePic = (ImageView) findViewById(R.id.image_profile_pic); 


Glide.with(this) 
     .load(R.drawable.dummy_profile_pic) 
     .apply(RequestOptions.circleCropTransform()) 
     .into(imageProfilePic); 

SORTIE:

SOLUTION 3:

Utilisation de la bibliothèque CircleImageView.

Gradle:

dependencies { 
    ......... 
    compile 'de.hdodenhof:circleimageview:2.1.0' 
} 

Utilisation:

XML

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/image_header" 
     android:layout_width="match_parent" 
     android:layout_height="200dp" 
     android:background="@drawable/dummy_background"/> 

    <de.hdodenhof.circleimageview.CircleImageView 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/image_profile_pic" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_marginTop="125dp" 
     android:layout_centerHorizontal="true"   
     app:civ_border_width="2dp" 
     app:civ_border_color="#FFFFFF"/> 

</RelativeLayout> 

JAVA

CircleImageView imageProfilePic = (CircleImageView) findViewById(R.id.image_profile_pic); 

Picasso.with(this) 
     .load(R.drawable.dummy_profile_pic) 
     .into(imageProfilePic); 

SORTIE:

Espérons que cela aidera ~

Answer 2

Impossible de prendre des valeurs de largeur/hauteur arbitraires, utilisez plutôt l'attribut pour fournir une taille d'entrée de 3 des tailles disponibles: auto, mini et normal.

Spécifier layout_width et layout_height de FAB comme wrap_content, et fournir la taille souhaitée en utilisant Fab app:fabSize="normal" (ou autre paramètre dans la liste).

^{Cette question ressemble à this one.}