Cutsomise the text in ListView Android

Question

Firstly new doing Android. Be patient. That said it's doing my head in. 6 different examples of how to customize your ListView and so far none of them work. Clearly it's me. This should be so simple I must be missing a vital step. I have watched numerous videos and read tutorials all seem to claim to get it working.

So This is what happen:

1) I have an Activity.

2) This has an StringArray of say mammals.

3) I populate the ListView with the fruit array.

4) It comes up perfectly except it has a black background, and I wanted a white background with black text.

5) Add the relevant image to the animal i.e. rabbit has a thumbnail of a rabbit (Note I didn't even get to this step)

So this is what I did after reviewing other peoples suggestions;

1) Created a custom layout called "list_row.xml"

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:padding="5dp" >

    <ImageView
            android:id="@+id/logo"
            android:layout_width="50px"
            android:layout_height="50px"
            android:layout_marginLeft="5px"
            android:layout_marginRight="20px"
            android:layout_marginTop="5px"
             >
    </ImageView>

    <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@+id/label"
            android:textSize="30px" >
    </TextView>

</LinearLayout>

2) Left my original ListView item on the visible page called "mammals.xml" This has the ListView in it.

<ListView android:id="@+id/list"
          android:layout_height="300dp"
          android:layout_width="300dp"
          android:layout_centerHorizontal="true"
          android:layout_alignParentTop="true"
          android:layout_marginTop="114dp"
          android:divider="#b5b5b5"
          android:dividerHeight="1dp"
          android:background="#FFFFFF"/>

3) On the "onCreate()"I added the list and applied it.

     static final String[] MammalList = new String[] { "Rabbit", "Bear", "Deer","Kangaroo", "Emu", "Leopard" };

     private ListView m_listview;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        super.onCreate(savedInstanceState);
        setContentView(R.layout.mammals);

        m_listview = (ListView) findViewById(R.id.list);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list_row, MammalList);


        m_listview.setAdapter(adapter); 

I know that in order to change HOW the row is to look you change the android.R.layout.simple_list_item_1 to R.layout.list_row. At this point I run the application and it fails.

Can someone please point me in the right direction on how to achieve this?

Also not sure if Stack Overflow has captured all the code. I tried two different browsers both of which were having issues rendering.

ERROR BELOW

04-02 17:53:37.621: ERROR/AndroidRuntime(30020): FATAL EXCEPTION: main
        java.lang.NullPointerException
        at android.widget.ArrayAdapter.createViewFromResource(ArrayAdapter.java:392)
        at android.widget.ArrayAdapter.getView(ArrayAdapter.java:362)
        at android.widget.AbsListView.obtainView(AbsListView.java:2159)
        at android.widget.ListView.measureHeightOfChildren(ListView.java:1246)
        at android.widget.ListView.onMeasure(ListView.java:1158)
        at android.view.View.measure(View.java:15518)
        at android.widget.RelativeLayout.measureChildHorizontal(RelativeLayout.java:681)
        at android.widget.RelativeLayout.onMeasure(RelativeLayout.java:461)
        at android.view.View.measure(View.java:15518)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:4825)
        at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
        at android.view.View.measure(View.java:15518)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:4825)
        at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
        at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
        at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
        at android.view.View.measure(View.java:15518)
        at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:4825)
        at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
        at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2176)
        at android.view.View.measure(View.java:15518)
        at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1874)
        at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1089)
        at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1265)
        at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:989)
        at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:4351)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:749)
        at android.view.Choreographer.doCallbacks(Choreographer.java:562)
        at android.view.Choreographer.doFrame(Choreographer.java:532)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:735)
        at android.os.Handler.handleCallback(Handler.java:725)
        at android.os.Handler.dispatchMessage(Handler.java:92)
        at android.os.Looper.loop(Looper.java:137)
        at android.app.ActivityThread.main(ActivityThread.java:5041)
        at java.lang.reflect.Method.invokeNative(Native Method)
        at java.lang.reflect.Method.invoke(Method.java:511)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:793)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:560)
        at dalvik.system.NativeStart.main(Native Method)

Answer 1

You have to tell the ArrayAdapter the id of the TextView to use:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list_row, R.id.label, MammalList);

In order to display more complex layouts, such as a picture, you'll have to override getView of ArrayAdapter.

I'm not sure if what you have posted for list_row.xml is the entire xml file, but if it is, all layouts must be enclosed in some ViewGroup (ex: RelativeLayout, LinearLayout, FrameLayout, etc). This is as simple as doing:

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

      .... // existing list_row.xml code here
</LinearLayout>