CODEWITHSUNDEEP
androidandroid-layoutandroid-listviewmaterial-design
Kashmir
Kashmir

Reputation: 242

Material Design Two-Line List

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!

Upvotes: 1

Views: 4307

Answers (1)

dominik4142
dominik4142

Reputation: 576

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

Upvotes: 1

Related Questions