How can I make a circular menu icon? Please see details

Question

I'm developing a material design app & I want that the menu icon on toolbar should appear as a circular image instead of rectangular image.

Here is the screenshot:

Look at the menu icon, it is appearing as a rectangle, but I want it to be circular.

How can I do this?

Answer 1

There is a library for android to make the photo circular .... https://github.com/hdodenhof/CircleImageView that's the link ....try it :)

Edit:
or you can use this library : https://github.com/Pkmmte/CircularImageView

Answer 2

You can use this websit to return the circle icon:

Android Asset Studio

And then include it in the project.

Answer 3

You can generate a circular icon using the icon generator tool (Android Asset Studio) in 2 steps.

1. Feed it the icon image with relevant options chosen and generate a circular launcher icon using the link below.

https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html

2. Then use the circular launcher icon generated above (xxxhdpi format) and feed it for the link below to generate an action bar icon.

https://romannurik.github.io/AndroidAssetStudio/icons-actionbar.html

Hope this helps you.

Answer 4

You can go through the tutorial from several different providers as follows which are recommended by SO

Android Developer
Vogella
AndroidHive

All of them have great examples and source code to help you out

Answer 5

There are 4 steps:

1. Create menu item

<menu xmlns:tools="http://schemas.android.com/tools"
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/profile_menu_item"
        android:icon="@drawable/prof"
        app:showAsAction="always"
        tools:ignore="MenuTitle"/>
</menu>

2. Retrieve menu item

private MenuItem mProfileMenuItem;
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.main, menu);
        mProfileMenuItem = menu.findItem(R.id.profile_menu_item);
        return true;
    }

3. Crop bitmap into round bitmap

public Bitmap getCroppedBitmap(Bitmap bitmap) {
    Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
            bitmap.getHeight(), Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xff424242;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());

    paint.setAntiAlias(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(color);
    // canvas.drawRoundRect(rectF, roundPx, roundPx, paint);
    canvas.drawCircle(bitmap.getWidth() / 2, bitmap.getHeight() / 2,
            bitmap.getWidth() / 2, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(bitmap, rect, rect, paint);
    //Bitmap _bmp = Bitmap.createScaledBitmap(output, 60, 60, false);
    //return _bmp;
    return output;
}

source

4. Download an url image as a bitmap, and crop

new Handler().post(() -> Glide.with(getApplicationContext()).asBitmap().load(url).into(new SimpleTarget<Bitmap>() {
        @Override
        public void onResourceReady(Bitmap resource, Transition<? super Bitmap> transition) {
            if (mProfileMenuItem == null) return;
            mProfileMenuItem.setIcon(new BitmapDrawable(getResources(), Utils.getCroppedBitmap(resource)));
        }
    }));

source