Material design suggestions for lists with avatar,

问题:

I want to create Material Designed Android application and I try to follow all Google's suggestions about making nice layouts specially for the new RecylcerView. The RecyclerView has avatar ImageView, title and subtitle TextView and action icon ImageView.

What values should I put in ImageView's properites for width and height so it supports different screen sizes and densities, and what size of those drawables should I choose from the system icons pack?

material-design-icons-1.0.1

Suggestion for lists:

??? in xml code are the unknown things I don't know what to put there:

XML:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view_friend"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="4dp"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">???

        <ImageView
            android:id="@+id/friend_profile_picture"
            android:layout_width="40dp"???
            android:layout_height="40dp"???
            android:layout_alignParentLeft="true"
            android:layout_margin="16dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_person_grey600_48dp"/>???

        <TextView
            android:id="@+id/friend_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/friend_online_imageview"
            android:layout_toRightOf="@+id/friend_profile_picture"
            android:paddingTop="20dp"
            android:text="@string/plain_text_for_preview"
            android:textSize="16sp"/>

        <TextView
            android:id="@+id/friend_state"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/friend_name"
            android:layout_toLeftOf="@id/friend_online_imageview"
            android:layout_toRightOf="@+id/friend_profile_picture"
            android:paddingBottom="20dp"
            android:text="@string/plain_text_for_preview"
            android:textSize="14sp"/>

        <ImageView
            android:id="@+id/friend_online_imageview"
            android:layout_width="wrap_content"???
            android:layout_height="wrap_content"???
            android:layout_alignParentRight="true"
            android:layout_margin="16dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_messenger_grey600_18dp"/>???

    </RelativeLayout>

</android.support.v7.widget.CardView>

PREVIEW:

回答1:

#1 Two line items:

Layout minHeight is 72dp, layout_height is wrap_content. Icon size is 40dp (usually it's a circle bitmap). Icon has 16dp top margin and 16dp left margin, no other.

Both TextViews are in a vertically oriented and vertically centered LinearLayout. This layout has 16dp left margin and 16dp right margin. This will allow you to remove image and still have side margins intact. First line has typically textApperance="@style/TextAppearance.AppCompat.Body2" and second line has Body1. The text layout has 16dp top and 16dp bottom padding (it has to be padding here because the bottom margin is not respected for children of RelativeLayout - and it is useful other times). Now you can put multiple lines in the second TextView and the whole item will expand nicely.

Don't forget to set layout_toRightOf="@+id/icon" and layout_alignWithParentIfMissing="true" on the text layout. If you have another icon (or widget) to the right add layout_toLeftOf="@+id/right_icon". If not use layout_alignParentRight="true". This will stretch the layout to occupy all available space. Or you can use LinearLayout.

Put this in a list in your content area. The list does not have to have any padding at top or bottom, it will look good.

#2 Single line items in content

Same as number 1 with following differences: minHeight or layout_height is set to 56dp. Don't use any vertical margins or padding, just center everything vertically. Use only one line text.

Use this in a list with 8dp padding or 48dp header at the top and 8dp padding at the bottom. Otherwise it will look "cut off".

#3 Single line items in menus

Same as number 2 with following differences: The height is 48dp. The icon is 24dp. The icon should have the following attributes:

android:layout_width="40dp"
android:layout_height="wrap_content"
android:scaleType="fitStart"

This will allow you to put any icon from 1dp to 40dp without upsetting the balance (you don't have to change the spacing between icon and text because it stays 40dp as in previous cases).

I use this in a navigation drawer and menus.

EDIT: Note

The specs say that left and right item margins should be 24dp instead of 16dp for tablets (sw600dp). You can solve this by adding left and right item layout padding 8dp on tablets (use dynamic values).

The specs also say that the divider between items (if present) should be part of the item. You have to define the "total left margin dimen" of 72dp for phones and 80dp for tablets and use it as left margin for the divider view. Second problem is that on tablets you have an 8dp right padding. I say this: If you use ListView, screw the specs and set a custom divider, which will be painted between items. If you use RecyclerView, write a nice ItemDecorator which will add the divider over the item.

EDIT 2

?listPreferredPaddingLeft and ?listPreferredPaddingRight will expand to 16dp on phones and 24dp on tablets (honoring RTL settings). You can use these values for left and right padding in list items. Then 40dp reserved for the icon, 16dp spacing and finally content.

回答2:

Here is a ready-to-paste tile in material design for a three-line list:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
  xmlns:android = "http://schemas.android.com/apk/res/android"
  xmlns:tools = "http://schemas.android.com/tools"
  android:layout_width = "match_parent"
  android:layout_height = "88dp"
  android:layout_marginTop = "8dp"
  android:orientation = "vertical">

<ImageView
  android:id = "@+id/avatar"
  android:layout_width = "40dp"
  android:layout_height = "40dp"
  android:layout_marginBottom = "20dp"
  android:layout_marginLeft = "16dp"
  android:layout_marginRight = "16dp"
  android:layout_marginTop = "20dp"
  android:background = "@drawable/avatar"
  android:contentDescription = "Avatar"/>

<TextView
  android:id = "@+id/avatar_text"
  android:layout_width = "40dp"
  android:layout_height = "40dp"
  android:layout_marginBottom = "20dp"
  android:layout_marginLeft = "16dp"
  android:layout_marginRight = "16dp"
  android:layout_marginTop = "20dp"
  android:gravity = "center_vertical|center_horizontal"
  android:maxLines = "1"
  android:text = "AV"
  android:textColor = "@color/white_dark"
  android:textSize = "16sp"
  android:fontFamily="sans-serif"  
  android:textStyle = "bold"/>

<LinearLayout
  android:layout_width = "match_parent"
  android:layout_height = "match_parent"
  android:layout_marginBottom = "16dp"
  android:layout_marginEnd = "56dp"
  android:layout_marginStart = "72dp"
  android:layout_marginTop = "16dp"
  android:orientation = "vertical">

<LinearLayout
  android:layout_width = "match_parent"
  android:layout_height = "wrap_content"
  android:orientation = "horizontal">

  <TextView
    android:id = "@+id/first_line"
    android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:layout_marginEnd = "16dp"
    android:ellipsize="marquee"
    android:singleLine="true"
    android:text = "This is the title line"
    android:textColor = "@color/black_light"
    android:textSize = "16sp"
    android:fontFamily="sans-serif"/>

</LinearLayout>

<LinearLayout
  android:layout_width = "match_parent"
  android:layout_height = "wrap_content"
  android:orientation = "horizontal">

  <TextView
    android:id = "@+id/second_line"
    android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:ellipsize="marquee"
    android:singleLine="true"
    android:textColor = "@color/discreet_dark"
    android:textSize = "14sp"
    android:fontFamily="sans-serif"
    tools:text = "This is the second line"/>
</LinearLayout>

<LinearLayout
  android:layout_width = "match_parent"
  android:layout_height = "wrap_content"
  android:orientation = "horizontal">

  <TextView
    android:id = "@+id/third_line"
    android:layout_width = "wrap_content"
    android:layout_height = "wrap_content"
    android:ellipsize="marquee"
    android:singleLine="true"
    android:textColor = "@color/discreet_dark"
    android:textSize = "14sp"
    android:fontFamily="sans-serif"
    tools:text = "This is the third line"/>
</LinearLayout>

</LinearLayout>

<TextView
  android:id = "@+id/minor_info"
  android:layout_width = "wrap_content"
  android:layout_height = "wrap_content"
  android:layout_alignParentEnd = "true"
  android:layout_marginEnd = "16dp"
  android:layout_marginTop = "20dp"
  android:maxLines = "1"
  android:maxWidth = "40dp"
  android:text = "19 min"
  android:textColor = "@color/discreet_dark"
  android:textSize = "12sp"
  android:fontFamily="sans-serif"/>

<ImageView
  android:id = "@+id/favourite"
  android:layout_width = "24dp"
  android:layout_height = "24dp"
  android:layout_alignParentBottom = "true"
  android:layout_alignParentEnd = "true"
  android:layout_marginBottom = "16dp"
  android:layout_marginLeft = "16dp"
  android:layout_marginRight = "16dp"
  android:contentDescription = "Favourite"
  tools:src = "@drawable/favourite_checked"/>

<View
  android:layout_width = "match_parent"
  android:layout_height = "1dp"
  android:layout_alignParentBottom="true"
  android:layout_marginStart = "72dp"
  android:background = "@color/discreet_light"/>

</RelativeLayout>