Wie erstellen Sie kreisförmige facebook-Profil-Bild

Kann ich nicht helfen, aber bemerken die meisten Antworten zu Fragen, Sie zu nutzen, 2 Bibliotheken, 1 für das laden der Bild und 2. für die Anzeige. Ihr Ziel als Entwickler sollte immer sein, um Ihre Aufgabe mit der minimalen Anzahl von Bibliotheken und hier ist eine Lösung, muss nur 1 Bibliothek. Ich werde Gleiten hier seit speichert es die Bilder, die genau für die Größe, die Sie brauchen. Ich habe nicht verwendet, Fresko, so kann nicht kommentieren es aber HIER etwas auf Picasso vs. Glide

Schritt 1

Erstellen Ihr layout

<?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>

Dies ist, was mein Layout aussieht, merke ich, verwendet ein schlichter Bildansicht anstelle einer schicken Bibliothek. Fühlen Sie sich frei, zu justieren, um Ihre Bedürfnisse anzupassen.

Schritt 2

Schreiben Sie eine benutzerdefinierte Transformation zu konvertieren, ein quadratisches Bild in ein Kreis-Bild. Glide verwendet so genannte Transformationen zu lassen, das Sie Bearbeiten die Bilder nach, was Sie brauchen. Lesen DIESE post für das, was Transformationen sind und Lesen DIESE post zu spielen mit einigen benutzerdefinierte Transformationen. In unserem Fall unsere transformation-Klasse sieht wie folgt aus.

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

Schritt 3
Laden Sie ein Bild in das layout mit der Glide. Admin ist ein Objekt, das enthält details wie z.B. name, E-Mail, Profilbild url etc, mDrawer ist ein Verweis auf die NavigationView. Beachten Sie, wie Glide verwendet die transformation in Schritt 2 definiert haben, zu erreichen das kreisförmige Bild-Effekt.

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

Schritt 4

Lehnen Sie sich zurück und genießen Sie die show. Ich bin auch das laden der Daten aus Facebook, lassen Sie mich wissen, wenn Sie noch immer Probleme 🙂

versuchen, diese

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

shape.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