Android UI design

Question

I want give some style to each row of the following UI. It shows simply a list of songs searched in my app but all the rows shown in a the same page without any kind of separation or a kind of line between each row. My idea is to differentiate each song or each row. If there is a nice style or Theme that separate each row with different colors it would be awesome also.

This is my code;

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:descendantFocusability="blocksDescendants"
    android:background="@drawable/white_selector"
    android:paddingTop="20dp"
    android:paddingBottom="20dp"
    android:paddingRight="16dp"
    android:paddingLeft="16dp">

    <ImageView
        android:id="@+id/logo"
        android:layout_width="40dp"
        android:layout_height="30dp"
        android:layout_alignParentLeft="true"
        android:src="@mipmap/ic_launcher"
        android:contentDescription="@string/audio_play"/>


    <LinearLayout
        android:id="@+id/badges"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="4dp"
        android:layout_marginStart="4dp"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true">

        <ImageView
            android:id="@+id/play"
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:src="@drawable/ic_play"
            android:contentDescription="@string/audio_play"/>

        <TextView
            android:id="@+id/duration"
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:layout_marginLeft="5dp"
            android:layout_marginStart="5dp"
            android:textColor="@color/colorPrimaryDark"
            android:textSize="15sp"
            android:gravity="center"
            tools:text="3:05"/>
    </LinearLayout>

    <TextView
        android:id="@+id/name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/logo"
        android:layout_toEndOf="@id/logo"
        android:layout_toLeftOf="@+id/badges"
        android:layout_toStartOf="@+id/badges"
        android:textColor="@color/colorAccent"
        tools:text="Martin Garrix - Animals"/>
</RelativeLayout>

Answer 1

I would advise you tu use a listvew not only the design would be better but, as you said, you want to show a LIST of songs. You can still add images to the listview and add automatically a clicklistener to each of the items

Answer 2

You can use View to show a divider/line at the bottom of your row item view. Wrap your RelativeLayout with a new container LinearLayout and add a View inside LinearLayout to show line/divider. here I used RED(#FF0000) color for divider.

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:descendantFocusability="blocksDescendants"
        android:background="@drawable/white_selector"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:paddingRight="16dp"
        android:paddingLeft="16dp">

        <ImageView
            android:id="@+id/logo"
            android:layout_width="40dp"
            android:layout_height="30dp"
            android:layout_alignParentLeft="true"
            android:src="@mipmap/ic_launcher"
            android:contentDescription="@string/audio_play"/>


        <LinearLayout
            android:id="@+id/badges"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="4dp"
            android:layout_marginStart="4dp"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true">

            <ImageView
                android:id="@+id/play"
                android:layout_width="40dp"
                android:layout_height="30dp"
                android:src="@drawable/ic_play"
                android:contentDescription="@string/audio_play"/>

            <TextView
                android:id="@+id/duration"
                android:layout_width="40dp"
                android:layout_height="30dp"
                android:layout_marginLeft="5dp"
                android:layout_marginStart="5dp"
                android:textColor="@color/colorPrimaryDark"
                android:textSize="15sp"
                android:gravity="center"
                tools:text="3:05"/>
        </LinearLayout>

        <TextView
            android:id="@+id/name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/logo"
            android:layout_toEndOf="@id/logo"
            android:layout_toLeftOf="@+id/badges"
            android:layout_toStartOf="@+id/badges"
            android:textColor="@color/colorAccent"
            tools:text="Martin Garrix - Animals"/>

    </RelativeLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_alignParentBottom="true"
        android:background="#FF0000">

    </View>
</LinearLayout>

OUTPUT:

Answer 3

Create List dynamically

You can use RecyclerView to achieve this (It's better than ListView, as it reuse the cells while scrolling and other improvements over ListView).

The easy way to use it, is using android studio to create a Fragment with dummy data and you need then to change the data to your model and do some changes. Right click on your app module -> New -> Fragment -> Fragment (List)

Then in your activity you can show the fragment using getSupportFragmentManager().beginTransaction().replace(...) or if you want to use it directly in your activity, then take look at the generated Fragment and adapt your activity to use the RecyclerView.

Add divider between the items (reference for details)

DividerItemDecoration dividerItemDecoration = new DividerItemDecoration(recyclerView.getContext(),
    layoutManager.getOrientation());
recyclerView.addItemDecoration(dividerItemDecoration);