How to show a circular logo in action bar in Android?

Question

Just like the screenshot of Google Plus above, I want to show a circular avatar image in the action bar. What should I do?

Answer 1

You can do this programatically using a Bitmap:

First do this on your activity's onCreate():

getSupportActionBar().setDisplayShowHomeEnabled(true);
Drawable drawable = new BitmapDrawable(getResources(), createCircleBitmap(sourceBitmap));
getSupportActionBar().setIcon(drawable);

Here is the createCircleBitmap() method:

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

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

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawCircle(bitmapimg.getWidth() / 2,
                bitmapimg.getHeight() / 2, bitmapimg.getWidth() / 2, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmapimg, rect, rect, paint);
        return output;
    }

PS: If you don't have the Bitmap, you can use this to transform a Drawable into a Bitmap:

Bitmap sourceBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.your_drawable);

Answer 2

1. Create circular imageview.
2. Create custom view for actionbar using the circular imageview
3. Inflate the view and display custom view as action bar.

<RelativeLayout         xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/black_pattern" >

<TextView
 android:id="@+id/title_text"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_centerInParent="true"
 android:textAllCaps="true"
 android:textAppearance="?android:attr/textAppearanceLarge"
 android:textColor="#fff"
 android:textStyle="bold" />

<com.example.CircularImageView
 android:id="@+id/circularimageView1"
 android:layout_width="35dp"
 android:layout_height="35dp"
 android:layout_alignParentLeft="true"
 android:layout_centerVertical="true"
 android:layout_marginLeft="8dp"/>

</RelativeLayout> 

Activity.java

ActionBar mActionBar = getActionBar();
mActionBar.setDisplayShowHomeEnabled(false);
mActionBar.setDisplayShowTitleEnabled(false);
LayoutInflater mInflater = LayoutInflater.from(this);

View mCustomView = mInflater.inflate(R.layout.actionbar, null);

mActionBar.setCustomView(mCustomView);
mActionBar.setDisplayShowCustomEnabled(true);

Answer 3

when you Start Creating a Project (You Need to Follow the Third Step Below)

Step 1: New Android Project 

Step 2 : Configure Your Project 

Step 3 : Configure Launcher Icon

  You can Choose a shape as Circle 

I hope u needed this answer