Material Design Two-Line List

Question

I'd like to achieve the Two-Line List item shown here, in the Material Design page .

First of all, my xml file, which represents the list item to be used in the adapter:

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

    <TextView
        android:text="Artist"
        android:textSize="16sp"
        android:typeface="sans"
        android:paddingLeft="16dp"
        android:paddingStart="16dp"
        android:id="@+id/textView_artist_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:text="10 Albumnes"
        android:textSize="14sp"
        android:typeface="sans"
        android:paddingLeft="16dp"
        android:paddingStart="16dp"
        android:id="@+id/textView_album_count"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

Now, my problem. I want both TextView to be centered, just like the link above. But I see them aligned at the top of the LinearLayout. This is: The first TextView is at the top of the LinearLayout, and the second one below it, and then there is all free space. What I want to do is to see both TextView centered the list item.

First Try

I used android:layout_gravity="center_vertical", but it does not work with the two TextViews. If I delete one of the TextView then the other is where I want, but not when I add the second one.

Second Try

I've tried with the XML atributes android:WeightSum="2" in the Layout and android:layout_weight="1" in the TextViews, but neither worked.

I'd like to know how could I manage to get the list item I linked here. Thanks in advance!

It would be easier if you supplied link to certain view... http://material-design.storage.googleapis.com/images/components-recommendedtwolinelists-2_large_mdpi.png — dominik4142, Oct 15 '14 at 19:30
Possible duplicate of [Material design suggestions for lists with avatar, text and icon](https://stackoverflow.com/questions/27661305/material-design-suggestions-for-lists-with-avatar-text-and-icon) — Zon, Apr 11 '18 at 10:32

score 1 · Accepted Answer · edited May 23 '17 at 12:14

This will keep them close and centered:

<LinearLayout

            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:id="@+id/message_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Title"/>

            <TextView
                android:id="@+id/message_subtitle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Subtitle"/>
        </LinearLayout>

There is a difference between layout_gravity and gravity: Gravity and layout_gravity on Android

Yeah! It was the android:gravity="center" in the Layout the solution. Thanks a lot! (For the link too). — Kashmir, Oct 15 '14 at 19:53

Material Design Two-Line List

First Try

Second Try

1 Answers1