Shadow displaying as square on FloatingActionButton Glide V4

Question

I recently upgraded Glide to version 4 which has caused problems with the image I display in a floating action button. I have attempted 2 methods and I use the same XML for both:

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" />

Method #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);

Result of Method #1: It looks good on Android 7.1.2 but on 4.4 it looks like the image below:

Method #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);
                }
            });

Result of Method #2: The results look different on Android 7.1.2 and 4.4

Android 7.1.2:

Android 4.4:

Method #2 is what used to work with Glide v3... Any help would be greatly appreciated!

Answer 1

Using FloatingActionButton, its not possible to achieve your expected behavior for all Android versions.

Instead of FloatingActionButton, use ImageView with 3rd party library like Picasso or Glide to load and transform your Image resource. You can also use CircleImageView library.

SOLUTION 1:

Using ImageView with Picasso.

Gradle:

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

Usage:

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);

OUTPUT:

SOLUTION 2:

Using ImageView with Glide.

Gradle:

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

Usage:

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);

OUTPUT:

SOLUTION 3:

Using CircleImageView library.

Gradle:

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

Usage:

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);

OUTPUT:

Hope this will help~