Jason Toms Jason Toms - 2 months ago 19
Android Question

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

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:this imagefrom 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

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>