如何在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); 
...