How to create Android Contact Book App : Part 1 : Setting up Interface

This example shows you how to setup Layouts for a simple Contact Book for android device.

This article covers how to use various widgets, components and layouts. i.e. LinearLayout, RelativeLayout, TableLayout, ScrollView, ListView, TextView, ImageView, Button and EditText. As well as covers how to setup Custome ListView Item appearance.


Table of content:

  1. Main (Contact List) Layout.Contact
  2. Custom ListView Item Layout And Appearance.
  3. Layout for New contact.
  4. Layout for Contact Details.
  5. Download Source.

1. Main (Contact List) Activity and Layout

Lets start with Main activity and Layout for it, where we can see all the contacts list when we will run the application.

Create a new android project named “Contact Book”. Take default activity name “Main” and default layout name “main.xml” with RelativeLayout as its.

Now open “main.xml” from res>layout. Add Button component and then ListView into main.xml and set its attributes.

If you notice, the Button is added before ListView, event we want the ListView before Button. see the complete main.xml and Image . It is because, when we set the ListView ‘layout_above ‘ attribute as Button id, the Button must be initialized before set ListView ‘layout_above’ attribute. Otherwise it cannot find the button. Some cases it may work.

main.xml

Image Screen Shot

main_xml

2. Contact Custom ListView Item Layout And Appearance.

So now lets create some UI for ListView Item. As you can see the image below, what exactly we want to create and what components we have to use for it.

listview_item_with_components

Before we start creating layout for Item. Lets create its background first, that is custom selector for it to give it highlight effect. In to the custom selector declare default state and its highlighting state. The file should be under resources/drawable/ folder and give it name “contact_item_selector.xml” .
contact_item_selector.xml

Default state will something look like this.

item_normal

Selected and Pressed state will look like this.

item_hover

Once finished with Item selector, then create a XML file for ListView Item named “contact_item.xml” under res>layout folder. Now setup all the necessary components into the XML. See below.
contact_item.xml

As you can see, Here I have used RelativeLayout and setup all the component with appropriate attributes and there values. Notice the RelativeLayout where i have set a background attribute value as “contect_item_selector”. Which mean, the background of the Item will follow all the states from that selector XML file.
The final screen should look like this.

MainScreen

3. Layout for New contact

Now let’s come to the New Contact. In this layout we will see how to use input component and ScrollView. See the Image below which is showing layout structure of screen.

NewContactStructure

In the above image you can see the blue box is indicated as ScrollView container and the child container will contain all the input components.
Low resolution devices doesn’t have enough height to show entire form and the lower input field goes down to the screen .So in that case we have to give the scroll functionality to user. So user can easily scroll the form and fill the entire information. May be in your device it will not show you the scroll, if your device will high dpi or resolution. But you can check on Android Lower dpi emulator.
Create the XML file under resources/layout folder.
new_contact.xml

The form will look like this.

NewContactForm

4. Layout for Contact Details.

After pressing on contact item, there should see contact details of that contact. So let’s start creating Contact details layout. This topic covers TableLayout and TableRow to show the contact label and its information side by side. See below the screenshot.

ContactDetails

And the XML File.
contact_details.xml

I hope, you enjoyed this part of Contact Book exmaple.

4 replies
  1. Nickson Dawson
    Nickson Dawson says:

    cool i love this, i am new in android , can i extend it to fetch contact details in the server api with gps lat and long?

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *