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?
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
You can use this websit to return the circle icon:
And then include it in the project.
You can generate a circular icon using the icon generator tool (Android Asset Studio) in 2 steps.
- 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
- 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.
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
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;
}
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)));
}
}));
来源:https://stackoverflow.com/questions/33188990/how-can-i-make-a-circular-menu-icon-please-see-details