Skip to content

Instantly share code, notes, and snippets.

@Heroes84
Last active January 13, 2020 17:02
Show Gist options
  • Save Heroes84/63eefc75515fed16e07257b5a28b35a3 to your computer and use it in GitHub Desktop.
Save Heroes84/63eefc75515fed16e07257b5a28b35a3 to your computer and use it in GitHub Desktop.
Android material layout list http://stackoverflow.com/a/27661786/518179

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

Keylines

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.

<?xml version="1.0" encoding="utf-8"?><!-- Clickable and selectableItemBackground are optional -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:minHeight="72dp"
android:paddingStart="?listPreferredItemPaddingLeft"
android:paddingEnd="?listPreferredItemPaddingRight">
<ImageView
android:id="@+id/imageview_primary"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="16dp"
android:scaleType="centerInside"
android:src="@drawable/ic_primary" />
<LinearLayout
android:id="@+id/container_lines"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignWithParentIfMissing="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_toStartOf="@+id/imageview2"
android:layout_toEndOf="@+id/imageview_primary"
android:orientation="vertical"
android:paddingTop="16dp"
android:paddingBottom="16dp">
<TextView
android:id="@+id/textview_title"
style="@style/TextAppearance.AppCompat.Body2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
tools:text="First Line" />
<TextView
android:id="@+id/textview_description"
style="@style/TextAppearance.AppCompat.Body1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
tools:text="Second Line" />
</LinearLayout>
<ImageView
android:id="@+id/imageview2"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentEnd="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:scaleType="centerInside"
android:src="@drawable/ic_secondary" />
</RelativeLayout>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment