How to implement Material Design “Full-width text field”?

Question

I want to implement the "Full-width text field" from Material Design as seen here: https://www.google.com/design/spec/components/text-fields.html#text-fields-full-width-text-field

How do I do that using the Material Design library?

Available libraries are at least these in recent versions:

• com.android.support:design:23.0.1
• com.android.support:appcompat-v7:23.0.1
• com.android.support:support-v4:23.0.1

I started with an EditText as sollows:

<EditText
    android:id="@+id/receivers"
    android:layout_below="@+id/toolbar"
    android:layout_width="match_parent"
    android:padding="20sp"
    android:hint="Receivers"
    android:inputType="textMultiLine"
    android:gravity="top"
    android:layout_height="wrap_content" />

<EditText
    android:layout_height="match_parent"
    android:id="@+id/new_message_text"
    android:layout_below="@+id/receivers"
    android:layout_width="match_parent"
    android:padding="20sp"
    android:hint="@string/hint_new_message"
    android:inputType="textMultiLine"
    android:gravity="top" />

which looks like that

• Is there a way to get the padding (20sp) value from a library constant?
• How do I remove the line at the bottom of an EditText?
• Where do I get the horizontal separators from?

Answer 1

Values for the text field

<EditText
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
  android:background="@null"
  android:gravity="center_vertical|start"
  android:minHeight="?listPreferredItemHeight"
  android:paddingTop="20dp"
  android:paddingBottom="20dp"
  android:paddingLeft="?listPreferredItemPaddingLeft"
  android:paddingRight="?listPreferredItemPaddingRight" />

• android:background="@null" will remove the underline with implied 4dp padding.
• android:minHeight="?listPreferredItemHeight" expands to 56dp. The view will always be at least 56dp tall. And bacause of android:gravity="center_vertical|start" the text will always be vertically centered.
• android:paddingLeft="?listPreferredItemPaddingLeft" and android:paddingRight="?listPreferredItemPaddingRight" both expand to 16dp on phones and 24dp on tablets.
• Vertical padding is always the same - 16dp 20dp as specified in Material Design > Components > Text Fields > Full-width text field .

Values for the container

The container looks like a LinearLayout which has introduced divider support in API 14. Use these attributes on your LinearLayout:

android:divider="?listDivider"
android:showDividers="middle"

Instead of ?listDivider which is an attribute provided by your theme you can use any custom drawable reference.

Additional notes

1) There are some inconsistencies between Material Design specs and the actual values defined in appcompat-v7 library.

listPreferredItemHeight should return 56dp but instead it returns 64dp. Similarly listPreferredItemHeightLarge (unused in this case) returns 80dp instead of 72dp. You can fix this by redefining the attributes in your theme:

<item name="android:listPreferredItemHeight">56dp</item>

2) Do NOT use a color resource directly as a divider. It has implicit height and width equal to -1. You'll need a custom shape drawable.