如何在Android的材料设计列表上制作圆形列表图标？

Question

我正在尝试制作一个看起来像材料设计指南中的列表的列表。谷歌使用这些圆形图标到处都是。我想使用带有材质设计图标的彩色圆圈。非常像这张图片：从指南页面。

我是否需要创建一个可绘制的圆，然后在其上设置图标，所以我有两个重叠的视图？我觉得必须有比每个图标使用两个视图更好的解决方案。

Answer 1

为了使定制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> 

要改变circle_drawable color编程上的活动：

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); 

然后现在你布局您必须使用新的circle_drawable.xml指定一个新的背景，然后只需设置它上面的图标。

布局

...........

 <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> 

Answer 2

要创建一个圆圈绘制，你可以使用这个库https://github.com/hdodenhof/CircleImageView 这是很好的实现。

它添加到布局文件

<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"/> 

和gradle这个依赖

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

的图像，你可以使用picasso库

Answer 3

Aspicas有正确的答案，但我做了几更改并希望发布我的代码以防万一它在未来有所帮助。而且由于我使用C＃（Xamarin.Android），一些方法看起来有点不同。

我的圈子绘制：

<?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> 

我的完整的列表项的布局。我使用的矢量图标，所以我必须使用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> 

而且在我的适配器相关的代码，我改变颜色，并设置图标图像（注：在活动范围内传递到适配器访问资源）：

... 
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); 
...