Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

[ Android Newbie ]
..:: Android Code Breaker Diary ::.. Home > About > Learning

> Of Diary > Applications > Libraries > Links

Home > Tutorials > Create a simple phone book

Create a simple phone book

June 11, 2011 Pete Houston Leave a comment Go to comments 3 Votes How about to create your own custom phone book displaying like this:

1 of 11

14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

Phone Book It isnt complicated, is it? As you see, every item in the list view contains an image and 3 lines of text indicating Name, Phone Number and Email Address. Ok, so lets start to create! A Create The Project Project Name: Phone Book Application Name: Phone Book Package Name: pete.android.study Create Activity: MainActivity Min SDK: 10 Click OK -> Done with creating project. B Sketching The Layout As you see in the image above, apparently, we need two layouts. + One layout for main screen display, which is the list view + One layout for each item in the list view, which will be set to list view
2 of 11 14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

First, we start with layout for each item in list view. 1. List Item Layout What we have in here? The profile avatar on the left of the list item, we will use a ImageView control to display. On the right, there are three lines of text, one is for Name, one for Mobile Number and the other for Email Address. Of course, we can use just one single TextView to display all three lines but in my opinion, it would be very inconvenient when we need to reset data text to display on one of these three lines. So, its better to use 3 TextView controls, one for each. For layout display, we need one layout container for 3 lines of text and one layout container for the ImageView and the other layout container (containing 3 TextView). Hence, the final layout will be like this:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" > <ImageView android:id="@+id/imgAvatar" android:layout_width="70dip" android:layout_height="70dip" android:scaleType="fitCenter" /> <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/tvName" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textStyle="bold" /> <TextView android:id="@+id/tvPhone" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <TextView android:id="@+id/tvEmail" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout>

3 of 11

14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

2. Main Layout Simply, just one ListView to display all items.

01 02 03 04 05 06 07 08 09 10 11 12 13 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/listPhone" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>

C Class Design: On the Idea

Class Diagram
4 of 11 14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

D From Design to Coding 1. PhoneBook: the entity class which holds the information: avatar bitmap, name, phone, email.
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 package pete.android.study; import android.graphics.Bitmap; public class PhoneBook { private Bitmap mAvatar; private String mName; private String mPhone; private String mEmail; public PhoneBook(Bitmap avatar, String name, String phone, String email) { mAvatar = avatar; mName = name; mPhone = phone; mEmail = email; } public void setAvatar(Bitmap avatar) { mAvatar = avatar; } public Bitmap getAvatar() { return mAvatar; } public void setName(String name) { mName = name; } public String getName() { return mName; } public void setPhone(String phone) { mPhone = phone; } public String getPhone() { return mPhone; } public void setEmail(String email) { mEmail = email; } public String getEmail() { return mEmail; } }

2. PhoneBookAdapter: the adapter used to handle data when it is changed. However, Ive just wanted to show how to create the custom list view, so I wont mention about handling list item data.
01 02 03 04 05 06 07 08 09 10 11 package pete.android.study; import java.util.List; import import import import import import import android.content.Context; android.view.LayoutInflater; android.view.View; android.view.ViewGroup; android.widget.BaseAdapter; android.widget.ImageView; android.widget.TextView;

5 of 11

14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

public class PhoneBookAdapter extends BaseAdapter { private Context mContext; private List<PhoneBook> mListPhoneBook; public PhoneBookAdapter(Context context, List<PhoneBook> list) { mContext = context; mListPhoneBook = list; } @Override public int getCount() { return mListPhoneBook.size(); } @Override public Object getItem(int pos) { return mListPhoneBook.get(pos); } @Override public long getItemId(int pos) { return pos; } @Override public View getView(int pos, View convertView, ViewGroup parent) { // get selected entry PhoneBook entry = mListPhoneBook.get(pos); // inflating list view layout if null if(convertView == null) { LayoutInflater inflater = LayoutInflater.from(mContext); convertView = inflater.inflate(R.layout.phonebook_row, null); } // set avatar ImageView ivAvatar = (ImageView)convertView.findViewById(R.id.imgAvatar); ivAvatar.setImageBitmap(entry.getAvatar()); // set name TextView tvName = (TextView)convertView.findViewById(R.id.tvName); tvName.setText(entry.getName()); // set phone TextView tvPhone = (TextView)convertView.findViewById(R.id.tvPhone); tvPhone.setText(entry.getPhone()); // set email TextView tvEmail = (TextView)convertView.findViewById(R.id.tvEmail); tvEmail.setText(entry.getEmail()); return convertView; } }

3. MainActivity: this is the entry point of application to create and display the list, which will use <<override>>onCreate() method.
01 02 03 04 package pete.android.study; import java.util.ArrayList; import java.util.List;

6 of 11

14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

import import import import

android.app.Activity; android.graphics.BitmapFactory; android.os.Bundle; android.widget.ListView;

public class MainActivity extends Activity { private ListView lvPhone; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); lvPhone = (ListView)findViewById(R.id.listPhone); List<PhoneBook> listPhoneBook = new ArrayList<PhoneBook>(); listPhoneBook.add(new PhoneBook( BitmapFactory.decodeResource(getResources(), R.drawable.avatar_pete), "Pete Houston", "010-9817-6331", "pete.houston.17187@gmail.com")); listPhoneBook.add(new PhoneBook( BitmapFactory.decodeResource(getResources(), R.drawable.avatar_lina), "Lina Cheng", "046-7764-1142", "lina.cheng011@sunny.com")); listPhoneBook.add(new PhoneBook( BitmapFactory.decodeResource(getResources(), R.drawable.avatar_jenny), "Jenny Nguyen", "0913-223-498", "jenny_in_love98@yahoo.com")); PhoneBookAdapter adapter = new PhoneBookAdapter(this, listPhoneBook); lvPhone.setAdapter(adapter); } }

E Note - The image display in the ImageView is scaled by setting in the layout, which uses dip unit. - Use BitmapFactory.decodeFromResource() to create a bitmap from resource. - Always use an adapter to use in the ListView to handle data change events (display, add, remove). However, I dont mention about it here. Just remember it!

F Get The Project Created by Pete Pick your favorite hosting server: Mediafire | Rapidshare | FreeFileHosting

G Final Words - Did you learn something from this? - Hope you enjoy it

Cheers,

7 of 11

14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

Pete Houston
Pete's Sharing Like this:
0

Be the first to like this post.

Categories: Tutorials Tags: phonebook, simple, tutorials Comments (1) Trackbacks (0) Leave a comment Trackback 1. Ismail Bhuiyan January 17, 2012 at 8:24 pm | #1 Reply | Quote 0 0 Rate This I want to make a website with wordpress, where my user can save their phonebook in my database and able to collect these phonebook when need. They can also able to add multiple or single number of phone number at any time. Please suggest me if you can. Thanks a lot. 1. No trackbacks yet.

Leave a Reply

Notify me of follow-up comments via email. Notify me of new posts via email.

Post Comment

Custom grid view of applications Add external libraries to use in Android project
8 of 11 14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

RSS feed Google Youdao Xian Guo Zhua Xia My Yahoo! newsgator Bloglines iNezha

My StackOverflow Profile

Calendar
June 2011 M T W T F S S 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 Jul

Categories
Home (1) Learning (125) Books & Materials (1) Design Patterns (2) PhoneGap (1) Tricks & Tips (57) Tutorials (64) Of Diary (14) Pete's Works (5) Applications (4) Publications (1) Tools (7)

Recent Posts
Weather sucks totally

9 of 11

14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

Android XML Adventure Parsing HTML using JSoup Android XML Adventure Parsing HTML using HtmlCleaner A new blog open up.. Happy New Year 2012 !!!

Most Popular
Create and use custom Content Provider Custom grid view of applications ViewHolder Pattern - Caching View Efficiently Create and use emulated SD Card Android XML Adventure - Create & Write XML Data

Recent Comments
AndroidResearch on Presentation Paper And Meerkhalid on Create an application auto rec r on Create and use custom Content Ramesh on Image Processing Rotat Pete Houston on A new blog open up..

Tag Cloud
activity

android application applications bitmap blog coding color content custom data database design device
secret showcase

diary document effect element emulator file filter houston image memory mp3 new parse parser pete phone

processing query screen

Archives
February 2012 (3) January 2012 (2) December 2011 (8) November 2011 (12) October 2011 (19) September 2011 (16) July 2011 (29) June 2011 (63)

sqlite tag text

tips tools tricks tutorials view xml xpath

10 of 11

14-Mar-12 10:57 AM

Create a simple phone book [ Android Newbie ]

http://xjaphx.wordpress.com/2011/06/11/create-a-simple-phone-book/

Statistics
108,999 View

Follow Me
Join 28 other followers

Top WordPress Blog at WordPress.com. Theme: INove by NeoEase.

11 of 11

14-Mar-12 10:57 AM