Android material design confusion in listview

Question

I was designing a 2 line text layout for a listview row as the material design specifies.

Primary text font: Roboto Regular 16sp
Secondary text font: Roboto Regular 14sp
Tile height: 72dp
Text padding, left: 16dp
Text padding, top and bottom: 20dp

it is showing ok in the display of android studio design view but when I run it on my 7inch samsung tab, its being cropped like this I know if u move some dp from here to there then this problem will be fixed, but before that I just want to know that If I am doing any wrong or does the guidline have any special chapter for DP value for tablets?

Answer 1

Material Design is not for programmers, but for designers. That's why the guidelines are hard to implement.

In your case you should remember that in guidelines they use a base line and an ascender line of the Roboto font. Using just two TextViews and simple paddings you can't really create a layout matching the specification.

I guess your layout should look like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#ffffffff"
    android:paddingLeft="16dp"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="72dp">

    <TextView
        android:layout_alignParentTop="true"
        android:layout_marginTop="20dp"
        android:paddingTop="11dp"
        android:id="@+id/topMarker"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:textSize="1dp" />

    <TextView
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:padding="0dp"
        android:gravity="center"
        android:id="@+id/bottomMarker"
        android:layout_width="1dp"
        android:layout_height="1dp"
        android:textSize="1dp" />

    <TextView
        android:layout_alignBaseline="@+id/topMarker"
        android:text="Primary text"
        android:textSize="16sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_alignBaseline="@+id/bottomMarker"
        android:text="Secondary text"
        android:textSize="14sp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

Aligning the secondary text is easy, but the primary one is really tricky, beacuse Android has no way of aligning to the ascender line. You can measure the ascent and offset the top marker or just make the top margin of the primary text smaller.

Edit:

I wrote an article about aligning text. It covers text aligning using marker views and nicely solves this thread's problem. It can be found here: https://androidreclib.wordpress.com/2016/03/10/aligning-text-on-android/