webentwicklung-frage-antwort-db.com.de

Bild kreisförmig mit weißer kreisförmiger Umrandung erstellen

Wie kann ich ein Bild kreisförmig machen und ihm einen weißen Kreisrahmen geben? Müssen zwei Bildansichten verwendet werden - eine für das Bild und eine für den weißen Rand? Gibt es eine andere Möglichkeit, dies zu tun?

10
user2875895

Versuche dies...

public static Bitmap getCircularBitmapWithWhiteBorder(Bitmap bitmap,
        int borderWidth) {
    if (bitmap == null || bitmap.isRecycled()) {
        return null;
    }

    final int width = bitmap.getWidth() + borderWidth;
    final int height = bitmap.getHeight() + borderWidth;

    Bitmap canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(bitmap, TileMode.CLAMP, TileMode.CLAMP);
    Paint paint = new Paint();
    Paint.setAntiAlias(true);
    Paint.setShader(shader);

    Canvas canvas = new Canvas(canvasBitmap);
    float radius = width > height ? ((float) height) / 2f : ((float) width) / 2f;
    canvas.drawCircle(width / 2, height / 2, radius, Paint);
    Paint.setShader(null);
    Paint.setStyle(Paint.Style.STROKE);
    Paint.setColor(Color.BLUE);
    Paint.setStrokeWidth(borderWidth);
    canvas.drawCircle(width / 2, height / 2, radius - borderWidth / 2, Paint);
    return canvasBitmap;
}
22
Gopal Gopi

Holen Sie sich zunächst ein Circulat-Image mit Ihrem Code. Dann wenden Sie dieses XML an: 

 <?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" Android:shape="oval" >
    <gradient Android:startColor="#333440" Android:endColor="#333440"
        Android:angle="270"/>
</shape>

Fügen Sie dann ein relatives Layout hinzu und fügen Sie eine Bildansicht hinzu. Ordnen Sie es in der Mitte des relativen Layouts an. Legen Sie diese Kreisform als Hintergrund für die Bildansicht fest. Platzieren Sie dann Ihre kreisförmige Bildansicht über der zuvor hinzugefügten Bildansicht imageview margin erhalten Sie den gewünschten Randeffekt. Hoffen Sie, dass Ihnen dies helfen wird.

4
SweetWisher ツ

Dies ist möglicherweise nicht der beste Weg und Sie können möglicherweise nicht viele Eigenschaften ändern, aber es ist sicherlich der einfachste Weg. Ich habe gerade this library benutzt und eine kreisförmige Bildansicht gemacht, die auch eine Grenze hat.


Das ist also meine Lösung:

Zuerst , ich füge dies in meinen build.grandle ein:

`compile 'com.github.siyamed:Android-shape-imageview:[email protected]'`

Zweitens , ich füge das in meine .xml Layoutdatei ein:

 <com.github.siyamed.shapeimageview.CircularImageView
                    Android:layout_width="150dp"
                    Android:layout_gravity="center_horizontal"
                    Android:layout_height="150dp"
                    Android:id="@+id/photo"
                    app:siBorderWidth="5dp"
                    app:siBorderColor="#ffffff"
                    Android:layout_alignParentTop="true"
                    Android:layout_centerHorizontal="true" />

In meiner .Java-Datei kann ich das Bild auf die CircularImageView setzen oder festlegen:

final com.github.siyamed.shapeimageview.CircularImageView photo = (com.github.siyamed.shapeimageview.CircularImageView) convertView.findViewById(R.id.photo);

photo.setBackgroundResource(R.drawable.female);

Das ist alles, was ich getan habe, um ein kreisförmiges Bild mit weißem Rand zu machen. 

4
Marialena

Fügen Sie zunächst die Zeile in die Datei build.gradle ein

implementation 'de.hdodenhof:circleimageview:2.2.0'

fügen Sie dannXMLcode zu xml file hinzu:

<de.hdodenhof.circleimageview.CircleImageView
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/profile_image"
    Android:layout_width="96dp"
    Android:layout_height="96dp"
    Android:src="@drawable/profile"
    app:civ_border_width="2dp"
    app:civ_border_color="#FF000000"/>

 enter image description here

2

Nein, es ist nicht erforderlich, dass Sie zwei Bildansichten für das Bild und für den weißen Rand verwenden müssen. Sie können wie unten beschrieben eine neue XML-Datei erstellen

border.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="#FFFFFF" />
<stroke Android:width="5dp" Android:color="#000000" />
<padding Android:left="5dp" Android:top="5dp" Android:right="5dp"
    Android:bottom="5dp" />
</shape>

und stellen Sie dann Ihre Bildansicht ein. Fügen Sie Ihrer Bildansicht die folgende Zeile hinzu.

Android:background="@drawable/border"
1
InnocentKiller

Hier ist ein Nizza Tutorial dafür.

in diesem Tutorial verwenden sie eine Methode: -

/* * Bild kreisförmig gestalten * /

public Bitmap getRoundedShape(Bitmap scaleBitmapImage) {
  // TODO Auto-generated method stub
  int targetWidth = 50;
  int targetHeight = 50;
  Bitmap targetBitmap = Bitmap.createBitmap(targetWidth, 
                            targetHeight,Bitmap.Config.ARGB_8888);

                Canvas canvas = new Canvas(targetBitmap);
  Path path = new Path();
  path.addCircle(((float) targetWidth - 1) / 2,
  ((float) targetHeight - 1) / 2,
  (Math.min(((float) targetWidth), 
                ((float) targetHeight)) / 2),
          Path.Direction.CCW);

                canvas.clipPath(path);
  Bitmap sourceBitmap = scaleBitmapImage;
  canvas.drawBitmap(sourceBitmap, 
                                new Rect(0, 0, sourceBitmap.getWidth(),
    sourceBitmap.getHeight()), 
                                new Rect(0, 0, targetWidth,
    targetHeight), null);
  return targetBitmap;
 }

Um einen Rahmen um Ihre imageView zu legen:

Fügen Sie diese XML-Datei in Ihren Ordner ein:

=> round.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android" >

    <solid Android:color="@Android:color/white" />

    <stroke
        Android:width="3dip"
        Android:color="#FF0000" />

    <corners Android:radius="10dp" />

    <padding
        Android:bottom="0dp"
        Android:left="0dp"
        Android:right="0dp"
        Android:top="0dp" />

</shape>

Hoffe, das wird helfen

1
praveen Sharma

 circular image view with rounded white border

Mit diesem link habe ich es erfolgreich gemacht, mit einer FrameLayout und two RoundedImageView. Die Logik hinter dem, was ich getan habe, ist eine Wrapper-Ansicht und eine ist die Ansicht mit dem Profilbild. Hier ist mein Code 

XML-Code:

    <FrameLayout
    Android:id="@+id/llImageProfile"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:layout_marginLeft="20dp"
    Android:layout_marginTop="40dp"
    Android:foregroundGravity="center">


    <com.pepperpk.frt.mallpk.custom.RoundedImageView
        Android:id="@+id/circleViewOverlay"
        Android:layout_width="100dp"
        Android:layout_height="100dp"
        Android:layout_gravity="center" />

    <com.pepperpk.frt.mallpk.custom.RoundedImageView
        Android:id="@+id/circleView"
        Android:layout_width="95dp"
        Android:layout_height="95dp"
        Android:layout_gravity="center" />
</FrameLayout>

Java-Code:

profileWrapper.setImageResource(R.drawable.white_background);
profile.setImageResource(R.drawable.profile);

ich hoffe es hilft, wenn Sie irgendwelche Verwirrung haben, kommentieren Sie bitte unten.

0
Syed Raza Mehdi

Ich habe versucht, ImageView in CardView zu halten und den Radius von CardView entsprechend anzupassen.

NetworkImageView ist das von Volley Library. Dasselbe sollte auch mit ImageView funktionieren.

<Android.support.v7.widget.CardView
            Android:layout_width="105dp"
            Android:layout_height="105dp"
            Android:layout_margin="5dp"
            Android:elevation="0dp"
            Android:id="@+id/card_image_view"
            app:cardCornerRadius="53dp"
            Android:innerRadius="0dp"
            Android:background="@color/reco_widget_search_background"
            Android:shape="ring"
            Android:thicknessRatio="1">

            <NetworkImageView
                Android:id="@+id/circle_networkImageViewProduct"
                Android:layout_width="105dp"
                Android:layout_height="105dp"
                Android:backgroundTint="@color/white"
                Android:tint="@color/white"
                Android:scaleType="fitXY"
                Android:layout_gravity="center"
                Android:visibility="gone"
                />
        </Android.support.v7.widget.CardView>
0
Max Droid
Try This
    public static Bitmap createRoundImage(Bitmap loadedImage) {
    System.out.println("loadbitmap" + loadedImage);
    loadedImage = Bitmap.createScaledBitmap(loadedImage, 100, 100, true);
    Bitmap circleBitmap = Bitmap.createBitmap(loadedImage.getWidth(),
            loadedImage.getHeight(), Bitmap.Config.ARGB_8888);
    BitmapShader shader = new BitmapShader(loadedImage,
            Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
    Paint paint = new Paint();
    Paint.setAntiAlias(true);
    Paint.setShader(shader);

    Canvas c = new Canvas(circleBitmap);
    c.drawCircle(loadedImage.getWidth() / 2, loadedImage.getHeight() / 2,
            loadedImage.getWidth() / 2, Paint);
    return circleBitmap;
}
0
Palak