How to create drawable circle with below requireme

问题:

I'm trying create a circular shaped drawable to put as overlay for profile pictures(circular images) I wrote the below code for circular drawable overlay,

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape>
            <solid android:color="@color/light_blue_bg" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="2dp"
                android:color="@android:color/white" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
</layer-list>

Refer the output in the below screen image,

Known Issues: I'm creating a rectangle with @color/light_blue_color and it has inner oval shape with stroke color and inner solid transparent color, but due to outer rectangle color inner circle transparency not showing picture. If I remove outer rectangle color real square picture will come out of circular overlay.

Is there any way to give color to outer circular portion alone?

Any help ll be highly appreciated

回答1:

@Sreedhu Madhu .... you have to customize your imageview and work it on bitmap and canvas to achieve so..

although i suggest you to use one of the library posted by Henning Dodenhof on github and android-arsenal... CircleImageView

on the other side you can take a look how this is done..using this class..

Custom Class for Circular ImageView

the imp methods was setup() and onDraw()

回答2:

I don't think it is possible by doing it just in XML. But you can mask it out afterwards in code. For an example, see this tutorial.

回答3:

For rounded (Circled imageView)add this class to your source

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.ImageView;

public class RoundedImageView extends ImageView {

       public RoundedImageView(Context ctx, AttributeSet attrs) {
              super(ctx, attrs);
       }

       @Override
       protected void onDraw(Canvas canvas) {

              Drawable drawable = getDrawable();

              if (drawable == null) {
                     return;
              }

              if (getWidth() == 0 || getHeight() == 0) {
                     return;
              }
              Bitmap b = ((BitmapDrawable) drawable).getBitmap();
              Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

              int w = getWidth(), h = getHeight();

              Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
              canvas.drawBitmap(roundBitmap, 0, 0, null);

       }

       public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
              Bitmap finalBitmap;
              if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
                     finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                                  false);
              else
                     finalBitmap = bitmap;
              Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
                           finalBitmap.getHeight(), Config.ARGB_8888);
              Canvas canvas = new Canvas(output);

              final Paint paint = new Paint();
              final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
                           finalBitmap.getHeight());

              paint.setAntiAlias(true);
              paint.setFilterBitmap(true);
              paint.setDither(true);
              canvas.drawARGB(0, 0, 0, 0);
              paint.setColor(Color.parseColor("#BAB399"));
              canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
                           finalBitmap.getHeight() / 2 + 0.7f,
                           finalBitmap.getWidth() / 2 + 0.1f, paint);
              paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
              canvas.drawBitmap(finalBitmap, rect, rect, paint);

              return output;
       }

}

and then change your ImageView to your package name and class name (RoundedImageView) in your layout file such as

<com.mypackege.RoundedImageView
        android:id="@+id/imageView_round"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginTop="15dp"
        android:src="@drawable/my_image" />

Hope this will work.

回答4:

Try something like this, it worked for me!

in your xml place this custom RoundImage:

<com.example.hkh.learningandroid.RoundedImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@drawable/person"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/MyImageView" />

and create new class and name it RoundImageView:

public class RoundedImageView extends ImageView {

public RoundedImageView(Context ctx, AttributeSet attrs) {
    super(ctx, attrs);
}

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return;
    }
    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

    int w = getWidth(), h = getHeight();

    Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
    Bitmap finalBitmap;
    if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
        finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
                false);
    else
        finalBitmap = bitmap;
    Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
            finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
            finalBitmap.getHeight());

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,
            finalBitmap.getHeight() / 2 + 0.7f,
            finalBitmap.getWidth() / 2 + 0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
    canvas.drawBitmap(finalBitmap, rect, rect, paint);

    return output;

 }
}

And run, i hope it will help, it will give the expected rounded image as you wanted