ListView: customizing item view

In this tutorial we will make custom ITEM of the ListView

Step 1: create a custom layout for the List ITEM, to fit your needs: list_item_book.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:drawSelectorOnTop="false"
              android:background="@drawable/selector_item_gradient"
              android:layout_margin="15dp"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <ImageView android:id="@+id/cover"
               android:layout_margin="5dp"
               android:padding="5dp"
               android:layout_width="70dp"
               android:layout_height="70dp"
               android:background="@drawable/image_background"/>
    <LinearLayout
            android:layout_margin="5dp"
            android:orientation="vertical"
            android:layout_gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        <TextView android:id="@+id/author"
                  android:text="author"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"/>
        <TextView android:id="@+id/title"
                  android:text="title"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"/>
        <TextView android:id="@+id/isbn"
                  android:text="isbn"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"/>
    </LinearLayout>
</LinearLayout>

Step 2: Create res/drawable for "image_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!-- light gray frame -->
            <stroke android:width="1dp" android:color="#ffd3d3d4"/>
            <!-- white center -->
            <solid android:color="#FFFFFF"/>
        </shape>
    </item>
</layer-list>

Step 3: Write a custom BaseAdapter

public class BookListAdapter extends BaseAdapter {
   private static final String TAG = BookListAdapter.class.getSimpleName();
   private List<Book> bookList;
   private LayoutInflater inflater;
   private Book book;
   public ImageLoader imageLoader;
   public BookListAdapter(Context context, List<Book> books) {
      bookList = books;
      // inflater = LayoutInflater.from(context);
      inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
      imageLoader = new ImageLoader(context.getApplicationContext(), "BookCovers");
   }
   @Override
   public View getView(int position, View convertView, ViewGroup listView) {
      String tag = TAG + ".getView() " + position;
      View listItem = convertView;
      if (convertView == null) {
         Log.i(tag, "convertView is null @" + position);
         boolean attachToListView = false;
         listItem = inflater.inflate(R.layout.list_item_book, listView, attachToListView);
      }
      else {
         Log.i(tag, "convertView is not null @" + position);
      }
      ImageView coverImage = (ImageView) listItem.findViewById(R.id.cover);
      TextView author = (TextView) listItem.findViewById(R.id.author);
      TextView title = (TextView) listItem.findViewById(R.id.title);
      TextView isbn = (TextView) listItem.findViewById(R.id.isbn);
      book = bookList.get(position);
      author.setText(book.getAuthor());
      title.setText(book.getTitle());
      isbn.setText(book.getIsbn());
      imageLoader.displayImage(coverImage, book.getCoverUrl());
      return listItem;
   }
   @Override
   public int getCount() {
      Log.v(TAG + ".getCount() ", "" + bookList.size());
      return bookList.size();
   }
   @Override
   public Object getItem(int position) {
      Log.i(TAG + ".getItem() ", "" + position);
      return bookList.get(position);
   }
   @Override
   public long getItemId(int position) {
      return position;
   }
}

Step 4: Implement your adapter in the MainActivity.java

     // final ArrayAdapter adapter = new ArrayAdapter(this, R.layout.list_item_book, resultList);
      final BookListAdapter adapter = new BookListAdapter(this, bookList);
      booksListView.setAdapter(adapter);