Android ListView: Adding Quick ‘Add’ action bar to the List Page

0

What happened in the app till now?

Well…a little bit 🙂 I showed you how to display a welcome page as soon as the app is launched and how one can opt not to see the welcome page again in the next visit. If you want to go through my previous work click here.

Introduction

My next design would be a continuation to my previous articles. If you have not read them, you can still continue reading as the article stands on its own.

In the welcome page, clicking on next will take you to the list page. Now we need to start inserting data into the list page.
I will divide this into one or more articles. In the current article, I will design the layout first and add the listeners in the next article. You are going to learn about LinearLayout, and how layout-weight influences the layout.

What we would like to see?

Here is a mock-up of the ListView, with a text field to enter item description and an add button next to it. The item can be visualized as a task if you think of this as a todo application.

ListView Mock-Up

What are the components involved?

I see here three main components – the list, add item field and the add button.

Let’s first talk about the ListView.
It will be the first component in the layout. Initially the list will be empty in which case I should probably show some message like ‘You don’t have any items…’. or an image or a combination of both so ideally I need a separate layout if the list is empty and a separate component if the list had data.

Next component is the Add Item bar.
I will place the  Add Item field and the button at the bottom of the screen. It should remain there so one can add items quickly to the list. The Add button should occupy just enough space to display the image + and the remaining space should be occupied by the Add item text field.

What should be my parent layout?

Hmm..I guess LinearLayout with vertical orientation. List/empty view will be the first element and the Add action bar will be the second one.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/taskListParent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

    <!-- Empty View/List goes here -->

    <!-- Add layout goes here -->

</LinearLayout>

layout-width and layout-height properties are obvious here, should fill the entire screen so I have set their values as fill_parent.

Empty/List View components

<TextView android:id="@android:id/empty" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/no_items" />

<ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="fill_parent" />

Few points to observe.

  • Notice the ids start with @android. Empty list view is just a text field for now.
  • I wanted the height to be the size of the wrapped content so I have set layout-height to ‘wrap_content’.
  • The list view’s height should last till the reach of ‘Add’ action bar. For now, I am not sure about the height so I have set it to ‘fill-parent’.

What is @android:id/empty and @android:id/list?

The Android framework provides an in-built support to deal with ListViews in your UIs. Android provides a dedicated Activity – ListActivity. ListActivity automatically looks for a ListView with the identifier android.R.id.list and starts managing it. It also looks for a View with the identifier android.R.id.empty to handle the empty list case so you must provide a view whose id is @android:id/empty.

Let’s move on with the Add action bar.

  • We want the text field and the add button next to each other so we will use a LinearLayout horizontally oriented.
  • Neither the text field nor the add button will use fill-parent as the layout-width else the last one to use fill-parent will kick the other one out from the layout. We will use wrap-content so that both fields can share the horizontal space.
<LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal">

    <EditText android:id="@+id/quickAddText" android:layout_width="wrap_content" android:layout_height="wrap_content"
              android:hint="@string/add_hint"/>

    <ImageButton android:id="@+id/quickAddButton" android:layout_width="wrap_content"
                 android:layout_height="wrap_content" android:contentDescription="@string/add_hint"
                 android:src="@drawable/btn_add"/>

</LinearLayout>

 

First draft of the List layout

Layout mainly consists of a LinearLayout with two components. The ListView and the Add action bar. The Add action bar is again a horizontal LinearLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/taskListParent"
              android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">

    <TextView android:id="@android:id/empty" android:layout_width="fill_parent" android:layout_height="wrap_content"
              android:text="@string/no_items"/>

    <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="wrap_content"/>

    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
                  android:orientation="horizontal">

        <EditText android:id="@+id/quickAddText" android:layout_width="wrap_content"
                  android:layout_height="wrap_content" android:hint="@string/add_hint"/>

        <ImageButton android:id="@+id/quickAddButton" android:layout_width="wrap_content"
                     android:layout_height="wrap_content" android:contentDescription="@string/add_hint"
                     android:src="@drawable/btn_add"/>

    </LinearLayout>

</LinearLayout>

When run in emulator, I see the below screen:

Hmm…what went wrong?!

Corrections

  • The empty list message should be in the center.
  • The ‘Add’ field and the button must be in the bottom.
  • The ‘+’ button should be on the extreme right

Now its the time to use layout-weight. 

  • The empty list text needs to be in the center, so we will use gravity=”center”. This will position the content of the empty list view in the center.
  • layout-weight=”1″ will allow the empty/list to expand and occupy as much space as possible.
  • We need to let the android framework know whether the expansion will be across width or height, for which, we need to explicitly set layout-height= to “0dp”.
  • Likewise the ‘Add’ text field need to expand across the width, so set layout-weight to 1.
  • We can also get rid of the background around the + using android:background=”@android:color/transparent”

Here is the complete layout

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/taskListParent"
              android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">

    <TextView android:id="@android:id/empty" android:layout_width="fill_parent" android:layout_height="0dp"
              android:text="@string/no_items" android:layout_weight="1" android:gravity="center"/>

    <ListView android:id="@android:id/list" android:layout_width="fill_parent" android:layout_height="0dp"
              android:layout_weight="1"/>

    <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
                  android:orientation="horizontal">

        <EditText android:id="@+id/quickAddText" android:layout_width="0dp" android:layout_height="wrap_content"
                  android:hint="@string/add_hint" android:layout_weight="1"/>

        <ImageButton android:id="@+id/quickAddButton" android:layout_width="wrap_content"
                     android:layout_height="wrap_content" android:contentDescription="@string/add_hint"
                     android:src="@drawable/btn_add" android:onClick="add"/>

    </LinearLayout>

</LinearLayout>

Layout Hierarchy

Layout Hierarchy

Final List Page

ListView with quick add action

What did we learn?

Some of the attributes and values we came to know about;
layout attributes

Variations

The empty list view can look better. We can have separate layout for it with a combination of text and image. The empty list view and the list view can be put together under FrameLayout. This way we can avoid duplicating the layout-weight and layout-height attributes.
I will work on this in my next article.

Download the Source Code

You can download the source code here: sandboxListViewWithAdd.zip

Share.

Leave A Reply