Android Shopper app, next steps #9

Welcome,

Time passes by and the android client’s getting bigger :) This post is about a few changes and new implemented functionalities on the shopper clientside.

Creating a group

When a user wants to create a group, which other members can join there is a need for an “authentication” so that not everyone can join a randomly group. For this purpose I introduced a group “root-password”. When the user taps the “new group” button he will be asked for a group name and additionally for a group password. Other users can only join this group by knowing about this root password. So the “groupcreator” has to personally tell them about the root password. This is the screen where a user can join a group:

While the network call is in progress the user is informed via a “loading” animation. What’s happening on the serverside? The responsible Rest-Resource handles the request, fetches the groupname and password informations out of the sent XML file and simply saves a “GroupPerference” Entity to the datastore. When a request for joining a group is made, the credentials are just compared to these datastore entries. If everything went fine the REST call gets back a xml file with the groupmembers (“buddies”) of the group and the user gets redirected to a screen where the buddies are listed…

Creating representational lists is a common task so i will explain the cornerstones of this work. In Android one has the possibility to define the UI layout in XML which is a very comfortable way for constructing complex UserInterface elements. A UI-List consists of the List itself and rows. We can create a xml layout for the rows and a seperate xml layout for the complete listview. So, related to the above ListView, A row consists of an image and a textview. I created a a xml-layout-file for the rows which looks like this:

<?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="wrap_content">
	<ImageView android:id="@+id/icon_member"
		android:layout_height="wrap_content" android:src="@drawable/join_group"
		android:layout_width="30px" android:layout_marginTop="1px"
		android:layout_marginRight="15px" android:layout_marginLeft="4px">
	</ImageView>
	<TextView android:text="@+id/txt_item" android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:id="@+id/lbl_membername"
		android:textSize="30px"></TextView>
</LinearLayout>

Android provides an abstract activity class called “ListActivity” which simplifies the construction of ListViews. So our class extends from “ListActivity”. To close the gap between our defined layout for the single rows and the ListActivity we set a ListAdapter to the Listactivity passing in the Row Layout file and the TextView Element which should hold the data which comes from yet implemented ArrayAdapter:

this.setListAdapter(new ArrayAdapter<String>(this,R.layout.join_group_success_row, R.id.lbl_membername, names));

Later i will show you how we will implement our own ArrayAdapter when it comes to represent the items of a purchase in a list. So at the time our simple ListActivity just works. A Listview spanning over the whole ActivityScreen is shown. When we want to customize the Layout of a ListActivity we can create a seperate, already mentioned XML Layoutfile for the ListActivity itself, which looks like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="match_parent"
	android:layout_height="match_parent" android:paddingLeft="8dp"
	android:paddingRight="8dp">
	<TextView android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="Your buddies"
		android:textSize="30px" android:gravity="center_horizontal"
		android:layout_marginBottom="20dp" />
	<ListView android:id="@id/android:list" android:layout_width="match_parent"
		android:layout_height="match_parent" android:layout_weight="1"
		android:drawSelectorOnTop="false" />

	<TextView android:id="@id/android:empty" android:layout_width="match_parent"
		android:layout_height="match_parent" android:text="No members yet" />
</LinearLayout>

Remember, this xml file is just needed if you want to customize the layout of a common ListActivity, so don’t forget to combine the xml-layout with the sourcecode via the usual “setContent()” method at the beginning of the “onCreate()” method of your activity. Another important thing when you define your own layout for an ListActivity is, that you have to provide a ListView and a TextView in your XML file. Moreover the ListView Element must have the id “android:list” . The TextView element is neccessary because we need something to show when the ArrayAdapter has no data which should be displayed. In this case, for example a simple message “no data”, or in our case “No members yet” should be desplayed. So you have to provide this TextView element which again must have the id “andorid:empty” so that the ListView can work with it.
So this is how you can implement a simple ListActivity which gets his data from a simple predefined ArrayAdapter. As already mentioned, I will show you in the next post how I implemented a custom Adapter for another Activity.

, , , ,
  • Delicious
  • Facebook
  • Digg
  • Reddit
  • StumbleUpon
  • Twitter

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>