Vfrdtyky

I solve a typical task for image: try to centerCrop() it and make circular like in How to round an image with Glide library?, but a result seems like Glide circular image gets cropped or

(not circular).

I think Glide (v.4) doesn't correctly crop the image. I tried many variants like GlideApp.with(photo).load(url).circleCrop().into(photo). Probably better would be first to create a square from a rectangle and then make it circular.

This is a part of XML:

<?xml version="1.0" encoding="utf-8"?>

<android.support.constraint.ConstraintLayout 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="wrap_content"

    >



    <ImageView

        android:id="@+id/photo"

        android:layout_width="50dp"

        android:layout_height="50dp"

        android:layout_marginStart="15dp"

        android:layout_marginLeft="15dp"

        android:layout_marginTop="20dp"

        android:adjustViewBounds="true"

        android:scaleType="fitCenter"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        tools:src="@drawable/image_1"

        />



    <TextView

        android:id="@+id/name"

        android:layout_width="0dp"

        android:layout_height="wrap_content"

        android:layout_alignParentTop="true"

        android:layout_alignParentBottom="true"

        android:layout_marginStart="7dp"

        android:layout_marginLeft="7dp"

        android:lineSpacingExtra="1sp"

        android:textColor="@color/black"

        android:textSize="20sp"

        app:layout_constraintEnd_toStartOf="parent"

        app:layout_constraintHorizontal_weight="1"

        app:layout_constraintStart_toEndOf="@+id/photo"

        app:layout_constraintTop_toTopOf="@+id/photo"

        tools:text="Name"

        />



</android.support.constraint.ConstraintLayout>

UPDATE

Sorry, a problem was in a source image. I didn't think it was this (lines are added):

you can try this way xml after taking the picture

   <de.hdodenhof.circleimageview.CircleImageView

   xmlns:app="http://schemas.android.com/apk/res-auto"

   />



    dependencies {

    ...

    implementation 'de.hdodenhof:circleimageview:2.2.0'}

Please check below answer :

Try it and let me know if any question regarding it.

private RequestOptions circleOptions = new RequestOptions()

            .centerCrop()

            .circleCrop()      // responsible for circle crop

            .placeholder(R.color.color_gray)    // replace with your placeholder image or remove if don't want to set

            .error(R.color.color_gray)     // replace with your placeholder image or remove if don't want to set

            .diskCacheStrategy(DiskCacheStrategy.RESOURCE);



public void loadImageCircle(String url, ImageView view) {

        Glide.with(context)

                .load(url)

                .apply(circleOptions)

                .into(view);

    }

Call method as :

loadImageCircle(imafgeURL,imageView);

Use RequestOptions.circleCropTransform()

Like this :

    Glide.with(this).load(url)

            .apply(RequestOptions.circleCropTransform())

            .into((ImageView) photo);

Plus, make sure the ImageView is a square. If you are using ConstraintLayout, use app:layout_constraintDimensionRatio="1:1"

Doc : https://bumptech.github.io/glide/javadocs/400/com/bumptech/glide/request/RequestOptions.html