Clever Geek Handbook

Shadow renders as a square on FloatingActionButton Glide V4

I recently updated Glide to version 4, which caused problems with the image I am showing in the floating action button. I tried 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:

2HiyI.jpg

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

Method result # 2: Results look different on Android 7.1.2 and 4.4

Android 7.1.2:

RfiU4.jpg

Android 4.4:

1lP98.jpg

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

+3


source to share


2 answers


Using it FloatingActionButton

, it is not possible to achieve the expected behavior for all versions of Android.

Instead, FloatingActionButton

use ImageView

with a third party library such as Picasso or Glide to download and convert your asset Image

. You can also use the CircleImageView library.

SOLUTION 1:

Using ImageView

c Picasso

.

Gradle:

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

Application:



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:

enter image description here

SOLUTION 2:

Using ImageView

c Glide

.

Gradle:

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

Application:



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:

enter image description here

SOLUTION 3:

Using the library CircleImageView

.

Gradle:

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

Application:



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:

enter image description here

Hope this helps ~

+2


source


FloatingActionButton

cannot accept arbitrary width / height values, use instead app:fabSize

to provide input size from 3 available sizes: auto, mini and normal.

Specify layout_width

and layout_height

FAB as wrap_content

and specify the required factory size using app:fabSize="normal"

(or another parameter from the list).



This question is similar to this one .

+3


source






More articles:


All Articles