change the image to a circle inside menu

Question

how can I change this image into a circle

Click here

picasso

navigationDrawerHome.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                if(item.getItemId() == R.id.menu_facebook)
                {
                    navigationDrawerHome.getMenu().findItem(R.id.menu_login).setVisible(false);
                    navigationDrawerHome.getMenu().findItem(R.id.menu_logout).setVisible(true);
                    Picasso.with(Home.this).load("http-----").into(new Target() {
                        @Override
                        public void onBitmapLoaded(Bitmap bitmap, Picasso.LoadedFrom from) {
                            navigationDrawerHome.getMenu().findItem(R.id.menu_logout).setIcon(new BitmapDrawable(bitmap));
                            navigationDrawerHome.getMenu().findItem(R.id.menu_logout).setTitle("Taha Sami");
                        }

                        @Override
                        public void onBitmapFailed(Drawable errorDrawable) {

                        }

                        @Override
                        public void onPrepareLoad(Drawable placeHolderDrawable) {

                        }
                    });

                }
                return true;
            }
        });

how I could change the picture into a circle?

Answer 1

Create CircleImageView class and extends ImageView

public class CircleImageView extends ImageView {

//you can change the radius to modify the circlur shape into oval or rounded rectangle

    public static float radius = 1000.0f;

    public CircleImageView(Context context) {
        super(context);
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CircleImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {
//float radius = 36.0f;
        Path clipPath = new Path();
        RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
        clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
        canvas.clipPath(clipPath);
        super.onDraw(canvas);
    }
}

use it in your xml layout

<com.example.project.CircleImageView 
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:src="@drawable/you_image" />