Как создать круговую фотографию профиля facebook

Я не могу не заметить, что большинство ответов просят вас использовать 2 библиотеки, 1 для загрузки изображения и 2 для его отображения. Ваша цель как разработчика всегда должна состоять в том, чтобы выполнить свою задачу с минимальным количеством библиотек, и вот решение, которое требует только 1 библиотеку. Я буду использовать Glide здесь, так как он кэширует изображения именно для нужного вам размера. Я не использовал Fresco, поэтому не могу комментировать его, но Вот что-то о Пикассо против Glide

Шаг 1

Создайте свой макет

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image_profile"
        android:layout_width="@dimen/profile_picture_size"
        android:layout_height="@dimen/profile_picture_size"
        android:background="@drawable/image_circle"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:src="@drawable/com_facebook_profile_picture_blank_square" />

    <TextView
        android:id="@+id/text_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="@string/placeholder_name"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1"
        android:textColor="@color/colorTextPrimary" />
</LinearLayout>


</RelativeLayout>

Вот как выглядит мой макет, обратите внимание, что я использовал простой простой ImageView вместо причудливой библиотеки. Не стесняйтесь настроить его в соответствии с вашими потребностями.

Шаг 2

Напишите пользовательское преобразование для преобразования квадратного изображения в круглое. Glide использует то, что называется трансформациями, чтобы вы могли манипулировать изображениями в соответствии с тем, что вам нужно. Прочитайте этот пост для каких преобразований и прочитайте этот пост, чтобы поиграть с некоторыми пользовательскими преобразованиями. В нашем случае класс трансформации выглядит следующим образом.

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.Transformation;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapResource;

public class CropCircleTransform implements Transformation<Bitmap> {

private BitmapPool mBitmapPool;

public CropCircleTransform(Context context) {
    this(Glide.get(context).getBitmapPool());
}

public CropCircleTransform(BitmapPool pool) {
    this.mBitmapPool = pool;
}

@Override
public Resource<Bitmap> transform(Resource<Bitmap> resource, int outWidth, int outHeight) {
    Bitmap source = resource.get();
    int size = Math.min(source.getWidth(), source.getHeight());

    int width = (source.getWidth() - size) / 2;
    int height = (source.getHeight() - size) / 2;

    Bitmap bitmap = mBitmapPool.get(size, size, Bitmap.Config.ARGB_8888);
    if (bitmap == null) {
        bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
    }

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    BitmapShader shader =
            new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
    if (width != 0 || height != 0) {
        // source isn't square, move viewport to center
        Matrix matrix = new Matrix();
        matrix.setTranslate(-width, -height);
        shader.setLocalMatrix(matrix);
    }
    paint.setShader(shader);
    paint.setAntiAlias(true);

    float r = size / 2f;
    canvas.drawCircle(r, r, r, paint);

    return BitmapResource.obtain(bitmap, mBitmapPool);
}

@Override public String getId() {
    return "CropCircleTransform()";
}
}

Шаг 3 Загружаем картинку в этот формат, используя скольжение. Admin-это объект, содержащий такие сведения, как имя, адрес электронной почты, url-адрес изображения профиля и т. д., mDrawer-это ссылка на NavigationView. Обратите внимание, как Glide использует преобразование, определенное на Шаге 2, для достижения эффекта кругового изображения.

public void addHeaderToDrawer(@NonNull Admin admin) {
    View headerView = mDrawer.inflateHeaderView(R.layout.nav_header_main);
    TextView textUserName = (TextView) headerView.findViewById(R.id.text_username);
    ImageView imageProfile = (ImageView) headerView.findViewById(R.id.image_profile);
    textUserName.setText(admin.getName());
    Glide.with(mContext)
            .load(admin.getUrl())
            .asBitmap()
            .transform(new CropCircleTransform(mContext))
            .into(imageProfile);
}

Шаг 4

Сядьте поудобнее и наслаждаться шоу. Я также загружаю данные из Facebook, дайте мне знать, если вы все еще сталкиваетесь с какими-либо проблемами :)

Я достигаю этого с помощью PICASSO library. Нет необходимости использовать CircularImageView Вот мой код:

Target target = new Target() {

        @Override
        public void onPrepareLoad(Drawable arg0) {
            // Toast.makeText(FragmentChatView.this, "message",
            // Toast.LENGTH_LONG).show();
        }

        @Override
        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom arg1) {
            bitmap = Bitmap.createScaledBitmap(bitmap, 40, 40, false);
            final Drawable drawImage = new BitmapDrawable(BaseActivity.this
                    .getBaseContext().getResources(), bitmap);
            // ((MaterialNavigationDrawer<Fragment>)
            // FragmentChatView.this).getToolbar().setLogo(drawImage);
            if (iv_logo != null)
                iv_logo.setImageDrawable(drawImage);
        }

        @Override
        public void onBitmapFailed(Drawable arg0) {

        }
    };

    public class CircleTransform implements Transformation {
        @Override
        public Bitmap transform(Bitmap source) {
            int size = Math.min(source.getWidth(), source.getHeight());

            int x = (source.getWidth() - size) / 2;
            int y = (source.getHeight() - size) / 2;

            Bitmap squaredBitmap = Bitmap
                    .createBitmap(source, x, y, size, size);
            if (squaredBitmap != source) {
                source.recycle();
            }

            Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

            Canvas canvas = new Canvas(bitmap);
            Paint paint = new Paint();
            BitmapShader shader = new BitmapShader(squaredBitmap,
                    BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
            paint.setShader(shader);
            paint.setAntiAlias(true);

            float r = size / 2f;
            canvas.drawCircle(r, r, r, paint);

            squaredBitmap.recycle();
            return bitmap;
        }

        @Override
        public String key() {
            return "circle";
        }
    }

Надеюсь, что это сработает для вас.

Попробуйте это

           <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:background="@drawable/shape"
            android:src="@drawable/User"
            android:id="@+id/imageView2" />

Форма.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<gradient
    android:angle="0"
    android:centerColor="#ffffff"
    android:centerX="35%"
    android:endColor="#ffffff"
    android:startColor="#ffffff"
    android:type="linear" />
<padding
    android:bottom="20dp"
    android:left="20dp"
    android:right="20dp"
    android:top="20dp" />
<size
    android:width="150dp"
    android:height="150dp" />
<stroke
    android:width="5dp"
    android:color="@color/allThemeBlue" />

</shape>

Out put

Попробуйте эту библиотеку: https://github.com/hdodenhof/CircleImageView я перепробовал несколько вариантов, и этот оказался удачливым победителем.