Assumption
- You have already installed Android SDK
- You are using Eclipse IDE for development
I am currently running Eclipse Version 3.7.2 and Android 4.1
Create a new Android project
Create a new Android project
- In Eclipse, goto File > New > Project > Android Application Project (which is inside Android folder)
- Provide Application name - "FoodCounter", project name - "FoodCounter" and package name - com.counter.food. Click "Next"
- Configure Launcher Icon - You can Configure the attributes of the icon set, make changes to the foreground or the background color. For this tutorial, I have not set any of those. So click "Next" to proceed further.
- Create Activity as "Blank Activity" and click "Next"
- Provide Activity name - "FoodCounter", Layout name - "main" and title - "FoodCounter"
- Click "Finish" to complete the process of creating project.
Create two line list view
For creating a two line list view, first we need to define an array of data. Under src folder, you will find an activity file we created during project setup called "FoodCounter.java". Open that file and paste the following code just before the last closing bracket.
private String[][] FoodAndFlavors =
{{"Muffin","Chocolate"},
{"Cake","Blueberry"},
{"Cookies","Assorted"},
{"Croissant","Smoked Salmon"},
{"Patties","Vegetable"},
{"Muffin","Banana"},
{"Cake","Strawberry"},
{"Cookies","Plain"},
};
Create a HashMap to hold the string array
Iterate through the String Array created and store it in a HashMap. HashMap is required because it holds the key, value pairs. Since we have two types of data - one is the Food Type and the other is the Flavor associated with it, we require a hashmap so that the data goes to the correct view when displaying it on the list.
Declare an ArrayList of type HashMap on the top of the FoodCounter.java class.
ArrayList<hashmap<string,string>> list = new ArrayList<hashmap<string,string>>();
Inside the onCreate(Bundle savedInstanceState) function, paste the following code to iterate through the array and add it to hashmap.
HashMap<string,string> item;
for(int i=0;i<foodandflavors.length;i++){
item = new HashMap<string,string>();
item.put( "type", FoodAndFlavors[i][0]);
item.put( "flavor", FoodAndFlavors[i][1]);
list.add( item );
}
This will associate each food type with its corresponding flavor.
Now let us add values to the view by using SimpleAdapter. For this, we first require to declare SimpleAdapter on the top of the class.
private SimpleAdapter sa;
Now let us add values to the view using SimpleAdapter as follows:
sa = new SimpleAdapter(this, list,
android.R.layout.two_line_list_item,
new String[] { "type","flavor" },
new int[] {android.R.id.text1, android.R.id.text2});
We are using a default layout called "two_line_list_item" of android, which we will be replacing with our own custom layout. We are passing the view ids as text1 and text2 to be displayed on the view.
Now set the list adapter as the newly created adapter instance as follows:
setListAdapter(sa);
Also, extend the class from ListActivity() class rather than Activity() class. At this stage, the complete FoodCounter.java class should look as the following:
package com.counter.food;
import java.util.ArrayList;
import java.util.HashMap;
import android.app.ListActivity;
import android.os.Bundle;
import android.widget.SimpleAdapter;
public class FoodCounter extends ListActivity {
private SimpleAdapter sa;
ArrayList<hashmap<string,string>> list = new ArrayList<hashmap<string,string>>();
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
HashMap<string,string> item;
for(int i=0;i<foodandflavors.length;i++){
item = new HashMap<string,string>();
item.put( "type", FoodAndFlavors[i][0]);
item.put( "flavor", FoodAndFlavors[i][1]);
list.add( item );
}
sa = new SimpleAdapter(this, list,
android.R.layout.two_line_list_item,
new String[] { "flavor","type" },
new int[] {android.R.id.text1, android.R.id.text2});
setListAdapter(sa);
}
private String[][] FoodAndFlavors =
{{"Muffin","Chocolate"},
{"Cake","Blueberry"},
{"Cookies","Assorted"},
{"Croissant","Smoked Salmon"},
{"Patties","Vegetable"},
{"Muffin","Banana"},
{"Cake","Strawberry"},
{"Cookies","Plain"},
};
}
Now let us add list view to the current layout. Edit res/layout/main.xml as follows:
<?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" android:orientation="vertical" > <ListView android:layout_height="wrap_content" android:layout_width="fill_parent" android:id="@+id/android:list"/> </LinearLayout>
Running the project as android application will show a list with two lines.
Using android's two line layout will not give the flexibility to format the line content in the way we want. So now let us create our own two line layout so that we can use different format and color as desired.
For this, let us create a new xml file called listrow.xml inside /res/layout folder with the following content:
<?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" android:orientation="vertical"> <TextView android:id="@+id/type" android:textSize="14dp" android:textColor="#666666" android:textStyle="italic" android:layout_width="fill_parent" android:layout_height="wrap_content"/> <TextView android:id="@+id/flavor" android:textSize="12dp" android:textColor="#000000" android:layout_width="fill_parent" android:layout_height="wrap_content"/> </LinearLayout>
Now let us change the value we add to SimpleAdapter to match the layout we created:
sa = new SimpleAdapter(this, list,
R.layout.listrow,
new String[] { "flavor","type" },
new int[] {R.id.flavor, R.id.type});
setListAdapter(sa);
Running the application would show that the two lines are formatted in the way we have specified in the xml file.
Now let us add a red delete button at the end of each list row. For this, let us add a folder called "drawable" inside res folder and add an xml file called redButton.xml with the following content:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#ef4444" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" /> </shape> </item> <item> <shape> <gradient android:startColor="#ef4444" android:endColor="#992f2f" android:angle="270" /> <stroke android:width="1dp" android:color="#992f2f" /> <corners android:radius="3dp" /> <padding android:left="2dp" android:top="2dp" android:right="2dp" android:bottom="2dp" /> </shape> </item> </selector>
For styling the text inside the button edit /res/values/styles.xml file and add following:
<style name="ButtonText"> <item name="android:layout_width">fill_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#ffffff</item> <item name="android:gravity">center</item> <item name="android:layout_margin">3dp</item> <item name="android:textSize">12dp</item> <item name="android:textStyle">bold</item> <item name="android:shadowColor">#000000</item> <item name="android:shadowDx">1</item> <item name="android:shadowDy">1</item> <item name="android:shadowRadius">2</item> </style>
Let us specify a text that should go on the label of the button on res/values/strings.xml file as follows:
<string name="delBtn">Delete</string>
Now let us add a button control on the listrow.xml layout file:
<Button android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/delBtn" android:id="@+id/delete" android:background="@drawable/redbutton" style="@style/ButtonText"> </Button>
If you run the application, you will notice that the button will appear but it is not properly formatted. We require the button to be placed at the length of the list row. So for properly formatting the list view, let us modify the listrow.xml as follows:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="40dp"> <TextView android:id="@+id/flavor" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:textSize="10dp" android:textColor="#666666" android:textStyle="italic" /> <TextView android:id="@+id/type" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_above="@id/flavor" android:layout_alignWithParentIfMissing="true" android:textSize="14dp" android:textColor="#000000" /> <Button android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="fill_parent" android:text="@string/delBtn" android:id="@+id/delete" android:background="@drawable/redbutton" style="@style/ButtonText"> </Button> </RelativeLayout>
Note that we are using Relative Layout here instead of the linear. We first need to place the two text views vertically aligned with each other. Type should be aligned above Flavor. Type is aligned to the top with the parent and the flavor is aligned to the bottom with respect to the parent. Similarly, since we want to place the button by aligning to the right of the parent, we have added android:layout_alignParentRight as true.
Running the application will result in the following:
For more on how to add event listeners to the "Delete" button, stay tuned.
I would like to thank tekeye.biz for providing such a wonderful tutorial on creating two lines list view and dibbus.com for creating such a lovely red button. The sites that I referred to on creating this tutorial are as follows:
http://tekeye.biz/2012/two-line-lists-in-android
http://www.dibbus.com/2011/02/gradient-buttons-for-android/
http://developer.android.com/guide/topics/ui/layout/relative.html
