如何在Android中制作类似Google io 2014应用的列表视图？

Question

I want to create a list view layout with a image and title in it. I want a layout like listview in google io 2014 app. It should be a tiled listview with some colour till the image gets loaded, after the image is loaded it should be shown in the upper half of the listview and title should be shown below with some background colour. I am attaching the screenshot of google io app here.

Updated: If somebody can point me some template custom layout for this listview it would be helpful!

Answer 1

Create a custom list with all the needed controls in separate layout and inflate it using a custom adapter you can find a small example here

you could create a custom layout something like this

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="match_parent"
            android:background="@drawable/images"
            android:layout_height="match_parent"
           />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" 
        android:background="#862c10">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="15sp"
            android:layout_marginLeft="10dip"
            android:textStyle="bold"
            android:text="HTML5 everywhere how and why android users use the webplatform" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="15sp"
            android:layout_marginLeft="10dip"
            android:layout_marginTop="10dip"
            android:text="Wed 5 2001" />

         <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@android:color/white"
            android:textSize="15sp"
            android:layout_marginLeft="10dip"
            android:layout_marginTop="10dip"
            android:text="Steven roberts and mark robinson " />

    </LinearLayout>

</LinearLayout>

Answer 2

(this should not be the answer, but forgive me I could not add a comment, and actually I hope this will give him the answer).

First of all I guess you didn't get on well with using ListView and Adapter in Android. So I suggest you to read the following article first:

ListView tutorial 1

ListView tutorial 2

They will teach you how to use xml to define your custom row view. Then you will know how to use George Thomas's xml. Try how to implement the getView() method.