How can I make a circular list icon on a material design list in Android?

Question

I am trying to make a list that looks like the list in the Material Design Guidelines. Google uses these round icons all over the place it seems like. I want to use a colored circle with a material design icon on it. Pretty much exactly like this image:from the guidelines page.

Do I need to create a circle drawable and then just set the icon on top of it, so I have two overlapping views? I feel like there must be a better solution than using two views for every icon.

Answer 1

Aspicas had the right answer, but I made a few changes and want to post my code just in case it helps in the future. And since I am using C# (Xamarin.Android) some methods look a little different.

My circle drawable:

    <?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
  <solid
      android:color="#33464d"/>
</shape>

My layout for the full list item. I am using vectors for icons so I have to use AppCompatImageView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/routines_rv_item"
    android:layout_width="match_parent"
    android:layout_height="72dp"
    android:orientation="horizontal">

  <FrameLayout
      android:id="@+id/icon_frame"
      android:layout_width="40dp"
      android:layout_height="40dp"
      android:layout_gravity="top"
      android:layout_margin="16dp"
      android:background="@drawable/circle_drawable">

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/list_icon"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        android:scaleType="fitCenter"/>
  </FrameLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:orientation="vertical">

    <TextView
        android:id="@+id/rv_main_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:paddingBottom="2dp"
        android:paddingRight="16dp"
        android:textColor="@color/primary_text_default_material_light"
        android:textSize="16sp" />

    <TextView
        android:id="@+id/rv_secondary_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:paddingRight="16dp"
        android:paddingTop="2dp"
        android:textColor="@color/secondary_text_default_material_light"
        android:textSize="14sp" />
  </LinearLayout>
</LinearLayout>

And the relevant code in my adapter where I change the color and set the icon image (note: have to pass in activity context to the adapter to access resources):

...
var vh = (ViewHolder)holder;
var drawable = ContextCompat.GetDrawable(_context, Resource.Drawable.circle_drawable);
string colorStr = _context.Resources.GetString(Resource.Color.primary).Substring(3);

drawable.SetColorFilter(Color.ParseColor("#"+colorStr), PorterDuff.Mode.SrcAtop);
vh.IconFrame.Background = drawable;

vh.ListIcon.SetImageResource(Resource.Drawable.ic_book_white_24px);
...

Answer 2

To create a circle drawable you can use this library https://github.com/hdodenhof/CircleImageView It's very good implementation.

add this to layout file

<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>

and for gradle dependencies

dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0'
}

for the images you can use picasso library

Answer 3

To make the custom circle drawable:

..drawable/circle_drawable.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners
        android:radius="100dip"/>
    <solid
        android:color="#ff4CAF50" />
    <stroke
        android:width="2dip"
        android:color="#FFF" />
    <padding
        android:left="6dip"
        android:right="6dip"
        android:top="5dip"
        android:bottom="5dip" />
</shape>

To change circle_drawable color programmatically on Activity:

  String hexColor = String.format("#%06X", (0xFFFFFF & intColor));

  Drawable drawable = ContextCompat.getDrawable(MyActivity.this, R.drawable.circle_drawable);
  drawable.setColorFilter(intColor, PorterDuff.Mode.SRC_ATOP);

  layoutWithCircleDrawable.setBackground(drawable);

Then now on you layout you must assign a new background using the new circle_drawable.xml and then just set the icon on top of it.

Layout

...........

      <FrameLayout
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:id="@+id/layoutWithCircleDrawable"
            android:layout_gravity="center_vertical"
            android:background="@drawable/circle_drawable">

                    <ImageView
                          android:layout_width="match_parent"
                          android:layout_height="match_parent"
                          android:id="@+id/imageView36"
                          android:src="@drawable/ic_folder"/>
       </FrameLayout>