How to make custom ListView

Question

I've got a TextView and it's getting a list in it.

public class Home extends ListActivity {
ListView listView;
static final String[] Liste = {"a", "b", "c"};

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setTitle("CalcPlus");
    listView = getListView();
    //Own row layout
    listView.setAdapter(new ArrayAdapter<String>(this,
                R.layout.activity_home, R.id.text, Liste));
    //listView.setOnItemClickListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.activity_home, menu);
    return true;
}

Now I want a small grey description of the list item, like here:

I read these tutorials: 1 and 2 but I have to admit, I don't understand what they say. Can someone explain how to use them? Do I have to remove my TextView/List I have now? Is there another way to make a little description, without using a custom ListView?

Here's my xml:

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

<ListView android:id="@android:id/list"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#b5b5b5"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/list_selector" />
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text=""
android:textAllCaps="false"
android:textSize="22dp"
android:textStyle="bold"
android:layout_marginBottom="50dp" 
android:layout_marginTop="50dp" 
android:layout_marginLeft="2dp"/>

I don't really use the listview "list", just for testing purposes.

Answer 1

First use the setContentView and call the layout.. From the layout call the LISTVIEW. then using the adapter put the LISTE inside the list view use your data.

Answer 2

You need to understand that the following line

listView.setAdapter(new ArrayAdapter<String>(this,
            R.layout.activity_home, R.id.text, Liste));

means that you want to use layout.activity_home.xml for each item's view of your list. So I don't see why there is a ListView inside it...

By default the ArrayAdapter uses one single text field per item. If you want a more complex item layout, you need to override the getView() method of your adapter.

Here is the simplest solution I can think of:

In Home.java:

public class Home extends ListActivity {
ListView listView;
static final String[] Liste = {"a", "b", "c"};

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setTitle("CalcPlus");

    listView = getListView();

    listView.setAdapter(new ArrayAdapter<String>(this, R.layout.list_item, R.id.text, Liste) {
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = super.getView(position, convertView, parent);

            String item = getItem(position);

            TextView subTitleView = (TextView) view.findViewById(R.id.subtitle);
            subTitleView.setText("Subtitle of " + item);

            return view;
        }
    });
}
}

And layout/list_item.xml:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp" >

<TextView
    android:id="@+id/text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text=""
    android:textAllCaps="false"
    android:textSize="22dp"
    android:textStyle="bold" />

<TextView
    android:id="@+id/subtitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text=""
    android:textAllCaps="false"
    android:textSize="16dp"
    android:textStyle="normal" />

</LinearLayout>