Creating a custom listview layout like in the Play store app

Question

Play store image

Hi all, I want to create a listview item/row like this. I understand how to create a custom listview and adapter but getting one where each list item/row is kinda "standing on its own" I haven't been able to figure out.

How would one go about creating something like this?

Edit: On dcharms advice, I tried this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray" >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_marginRight="10dp"
    android:background="@android:color/white"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:contentDescription="@string/none"
        android:src="@drawable/logo" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:minHeight="?android:attr/listPreferredItemHeight"
        android:text="@string/none" />
</LinearLayout>

</RelativeLayout>

But it's nowhere even near what I want. I'm just not really sure how I would do this. Any help would be great.

You can achieve this with a gray RelativeLayout with a smaller white layout centered inside. Make sure you also turn off dividers. If you want a shadow, that is another view under the white layout. — Dan Harms, Apr 23 '14 at 14:56
How do you get the list selector to only highlight the smaller inner white layout when an item is clicked? — Nii Laryea, Apr 23 '14 at 15:04
Create a selector for background color of the white layout. Have it change to blue for `state_pressed` and `state_selected`. The list selector is not visible when a background has been applied to the row's view. — Dan Harms, Apr 23 '14 at 15:07
dcharms, can you please give an instance of how the xml layout for what you described will look like? — Nii Laryea, Apr 24 '14 at 17:41
Sure, give me a couple minutes and I'll post an answer with some xml for you. — Dan Harms, Apr 24 '14 at 18:22

Dan Harms · Accepted Answer · 2014-04-24T18:41:28.757

Hopefully this will give you a good starting point for what you are looking for.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainContainer"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="#dddddd" >

    <View
        android:id="@+id/shadowView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="3dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:background="#cccccc" />

    <RelativeLayout
        android:id="@+id/innerContainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="5dp"
        android:background="#ffffff" >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:src="@drawable/logo"
            android:contentDescription="@string/none"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:layout_toRightOf="@+id/icon"
            android:text="@string/none" />

    </RelativeLayout>

</RelativeLayout>

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Check my answer here :

Android List view layout Similar to Google play

I have given a brief explanation with the working code.

edited May 23 '17 at 12:14

Community

1
1

answered Apr 24 '14 at 18:47

mike20132013

5,357
3
31
41

I believe the OP is more concerned about the aesthetics being similar to Google Play Store rather than the functionality. Specifically the separated rows. – Dan Harms Apr 24 '14 at 19:02
Maybe your right. I just gave like a full solution with the layout and the working of it. Anyways.. thanks for noticing. – mike20132013 Apr 24 '14 at 21:26

Creating a custom listview layout like in the Play store app

2 Answers2