Submitted by Manmath Ray as a part of the First Android Tutorial Contest.[/align]
What you learn: The basic idea behind this tutorial is to give a common way to add footer to Android application irrespective of Activity and view designed for a particular screen. .
Features:
- Defining a common footer for all screens
- Adding Footer to a List Activity
- Adding Footer to a Form
Difficulty: 2 of 5
What it will look like:
[align=center]
See the footer
Design:
A footer is a typical requirement for most of the Application. There may be footer in all type of screen or there may not be footer in some screens. So design should be in such a way that irrespective of screens we can add or remove the footer.
1. Footer view needs to be defined in separate xml file so that we can generate the footer view when we need for any of the screen.
2. The screen layout which requires the Footer needs to be defined inside the linear layout so that we can add the footer to the existing layout inside the Linear Layout. This additional External Linear Layout is used to wrap the Existing view and the footer view. (Why Linear Layout? This is a tested Result, no specific reason is known to me, if any one knows can explain?)
3. There should be common method which will return the Footer view with Layout defined on it. Each of the Activity can find the Linear Layout ID as discussed in step -2 in runtime and add the defined footer view inside it, We need to define the footer view in some java classes which can be accessible for any of the Activities.
Description with Example:
As shown in the screen shots, There are two screens one is Form another is Expandable list. The code below will show you how to add the footer in both the screens.
1. Defining footer View
[footer.xml]
Using xml Syntax Highlighting
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="horizontal"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_horizontal"
- >
- <ImageView android:id="@+id/mchek"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/logo"
- android:paddingRight="20px"
- android:clickable="false"
- />
- <ImageView android:id="@+id/visa"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/visa"
- android:clickable="false"
- />
- </LinearLayout>
Parsed in 0.003 seconds, using GeSHi 1.0.8.4
2. Defining sample Form and List
[FormDesgin.xml]
Using xml Syntax Highlighting
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ticketId"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/lite_blue">
- <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:scrollbars="vertical"
- android:layout_weight="1.0"
- >
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- >
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- >
- <TextView android:id="@+id/lableSrc"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_SRC"
- android:textColor="@color/black"/>
- <Spinner android:id="@+id/spSrc"
- android:layout_width="fill_parent"
- android:layout_height="40px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:gravity="center_vertical"
- android:textColor="@color/black"
- android:drawSelectorOnTop="true"
- />
- <requestFocus />
- <TextView android:id="@+id/lableDest"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_DEST"
- android:textColor="@color/black"/>
- <Spinner android:id="@+id/spDest"
- android:layout_width="fill_parent"
- android:layout_height="40px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:gravity="center_vertical"
- android:textColor="@color/black"
- android:drawSelectorOnTop="true"
- />
- </LinearLayout>
- <RelativeLayout android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content">
- <TextView android:id="@+id/lableTrain"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_TRAIN_NO"
- android:textColor="@color/black"/>
- <EditText android:id="@+id/trainNo"
- android:layout_width="fill_parent"
- android:layout_height="35px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:layout_below="@id/lableTrain"
- android:textSize="16px"
- android:textColor="@color/black"
- android:inputMethod="@string/digit_input"
- android:maxLength="4">
- </EditText>
- <TextView android:id="@+id/lableQty"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_TICK_QTY"
- android:layout_below="@id/trainNo"
- android:textColor="@color/black"/>
- <EditText android:id="@+id/Qty"
- android:layout_width="fill_parent"
- android:layout_height="40px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:layout_below="@id/lableQty"
- android:textSize="16px"
- android:textColor="@color/black"
- android:inputMethod="@string/digit_input"
- android:maxLength="3">
- </EditText>
- <Button android:id="@+id/btnDate"
- android:layout_marginTop="8px"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginLeft="10px"
- android:layout_below="@id/Qty"
- android:text="choose date"/>
- <TextView android:id="@+id/Date"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textSize="15px"
- android:text="MM/DD/YYYY"
- android:layout_marginTop="8px"
- android:layout_below="@id/Qty"
- android:layout_toRight="@id/btnDate"
- android:textColor="@color/black"
- android:textStyle="bold"/>
- </RelativeLayout>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linRad"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <RadioGroup android:layout_width="fill_parent" android:id="@+id/group1"
- android:layout_height="wrap_content"
- android:orientation="horizontal"
- android:paddingTop="10px"
- android:layout_marginLeft="10px">
- <RadioButton android:checked="false"
- android:text="Child" />
- <RadioButton android:checked="false"
- android:layout_marginLeft="10px"
- android:text="Adult" />
- </RadioGroup>
- </LinearLayout>
- </LinearLayout>
- </ScrollView>
- </LinearLayout>
Parsed in 0.018 seconds, using GeSHi 1.0.8.4
[ListDesgin.xml]
Using xml Syntax Highlighting
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listId"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- android:background="@drawable/grey">
- <ExpandableListView android:id="@+id/android:list"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_weight="1.0"
- android:selectAllOnFocus="true"/>
- </LinearLayout>
Parsed in 0.002 seconds, using GeSHi 1.0.8.4
The marked part on both the screen design are something related to adding footer and rest of the code is similar to designing a simple scrollable form. The points to be considered are…
1. Adding the External Linear Layout whose id is ticketId in case of Form and listId in case of Expandable List. This id can be used for adding the footer to it in runtime while creating the screen.
2. We need to scroll the window without including the footer and Footer will be added in runtime so it is required to specify some space for footer while designing the form or list. android:layout_weight="1.0" is used to specify the space for footer after scrolling space or the list view.
3. The highlighted point for the view after which footer will reside must have following properties.
Using xml Syntax Highlighting
- android:layout_height="wrap_content"
- android:layout_weight="1.0"
Parsed in 0.000 seconds, using GeSHi 1.0.8.4
3. Defining a method to get the footer view
Using java Syntax Highlighting
- public View getFooterView(Activity ctx){
- ViewInflate vif= (ViewInflate)ctx.getSystemService(Context.INFLATE_SERVICE);
- View fv=vif.inflate(R.layout.footer, null, null);
- LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams
- (LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
- lp.gravity=0x01;
- fv.setClickable(false);
- fv.setSelected(false);
- fv.setLayoutParams(lp);
- return fv;
- }
Parsed in 0.034 seconds, using GeSHi 1.0.8.4
This method needs to define in such a way that it can be accessible to All the Activities. This method is used to create a footer view with certain layout parameter and returns the footer view.
4. Adding Footer to Activities
Using java Syntax Highlighting
- LinearLayout lay = (LinearLayout) indViewById(R.id.ticketId);
Parsed in 0.034 seconds, using GeSHi 1.0.8.4
or
Using java Syntax Highlighting
- LinearLayout lay = (LinearLayout) indViewById(R.id.listId);
Parsed in 0.035 seconds, using GeSHi 1.0.8.4
then:
Using java Syntax Highlighting
- lay.addView(getFooterView(this));
Parsed in 0.035 seconds, using GeSHi 1.0.8.4
This is how footer is going to be added when an screen is created.
The Full Source:
res/layout/Form_Design.xml
Using xml Syntax Highlighting
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ticketId"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:background="@drawable/lite_blue">
- <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:scrollbars="vertical"
- android:layout_weight="1.0"
- >
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- >
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- >
- <TextView android:id="@+id/lableSrc"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_SRC"
- android:textColor="@color/black"/>
- <Spinner android:id="@+id/spSrc"
- android:layout_width="fill_parent"
- android:layout_height="40px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:gravity="center_vertical"
- android:textColor="@color/black"
- android:drawSelectorOnTop="true"
- />
- <requestFocus />
- <TextView android:id="@+id/lableDest"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_DEST"
- android:textColor="@color/black"/>
- <Spinner android:id="@+id/spDest"
- android:layout_width="fill_parent"
- android:layout_height="40px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:gravity="center_vertical"
- android:textColor="@color/black"
- android:drawSelectorOnTop="true"
- />
- </LinearLayout>
- <RelativeLayout android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content">
- <TextView android:id="@+id/lableTrain"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_TRAIN_NO"
- android:textColor="@color/black"/>
- <EditText android:id="@+id/trainNo"
- android:layout_width="fill_parent"
- android:layout_height="35px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:layout_below="@id/lableTrain"
- android:textSize="16px"
- android:textColor="@color/black"
- android:inputMethod="@string/digit_input"
- android:maxLength="4">
- </EditText>
- <TextView android:id="@+id/lableQty"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="8px"
- android:textSize="15px"
- android:text="@string/LAB_TICK_QTY"
- android:layout_below="@id/trainNo"
- android:textColor="@color/black"/>
- <EditText android:id="@+id/Qty"
- android:layout_width="fill_parent"
- android:layout_height="40px"
- android:layout_marginTop="8px"
- android:layout_marginLeft="10px"
- android:layout_marginRight="5px"
- android:layout_below="@id/lableQty"
- android:textSize="16px"
- android:textColor="@color/black"
- android:inputMethod="@string/digit_input"
- android:maxLength="3">
- </EditText>
- <Button android:id="@+id/btnDate"
- android:layout_marginTop="8px"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginLeft="10px"
- android:layout_below="@id/Qty"
- android:text="choose date"/>
- <TextView android:id="@+id/Date"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:textSize="15px"
- android:text="MM/DD/YYYY"
- android:layout_marginTop="8px"
- android:layout_below="@id/Qty"
- android:layout_toRight="@id/btnDate"
- android:textColor="@color/black"
- android:textStyle="bold"/>
- </RelativeLayout>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/linRad"
- android:orientation="vertical"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <RadioGroup android:layout_width="fill_parent" android:id="@+id/group1"
- android:layout_height="wrap_content"
- android:orientation="horizontal"
- android:paddingTop="10px"
- android:layout_marginLeft="10px">
- <RadioButton android:checked="false"
- android:text="Child" />
- <RadioButton android:checked="false"
- android:layout_marginLeft="10px"
- android:text="Adult" />
- </RadioGroup>
- </LinearLayout>
- </LinearLayout>
- </ScrollView>
- </LinearLayout>
Parsed in 0.020 seconds, using GeSHi 1.0.8.4
res/layout/footer.xml
Using xml Syntax Highlighting
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="horizontal"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center_horizontal"
- >
- <ImageView android:id="@+id/mchek"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/logo"
- android:paddingRight="20px"
- android:clickable="false"
- />
- <ImageView android:id="@+id/visa"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:src="@drawable/visa"
- android:clickable="false"
- />
- </LinearLayout>
Parsed in 0.003 seconds, using GeSHi 1.0.8.4
TicketOrderForm.java
Using java Syntax Highlighting
- public class TicketOrderForm extends Activity implements RadioGroup.OnCheckedChangeListener, View.OnClickListener {
- TextView mDateDisplay;
- String price [];
- private EditText et;
- protected static RadioGroup mRadioGroup;
- protected static int choice = -2;
- private String strVal;
- // date and time
- private int mYear;
- private int mMonth;
- private int mDay;
- @Override
- protected void onCreate(Bundle icicle) {
- super.onCreate(icicle);
- setContentView(R.layout.Form_Design);
- Bundle bndl=getIntent().getExtras();
- ProcessRailway.biller=bndl.getCharSequence("item").toString();
- Spinner sp = (Spinner) findViewById(R.id.spSrc);
- addSpinner(sp);
- sp = (Spinner) findViewById(R.id.spDest);
- addSpinner(sp);
- mRadioGroup = (RadioGroup) findViewById(R.id.group1);
- mRadioGroup.setOnCheckedChangeListener(this);
- et=(EditText)findViewById(R.id.Qty);
- mDateDisplay=(TextView)findViewById(R.id.Date);
- pr=ProcessRailway.getInstance();
- Button pickDate = (Button) findViewById(R.id.btnDate);
- pickDate.setOnClickListener(new View.OnClickListener() {
- public void onClick(View v) {
- new DatePickerDialog(TicketOrderForm.this,mDateSetListener,
- mYear, mMonth, mDay,
- Calendar.SUNDAY).show();
- }
- });
- final Calendar c = Calendar.getInstance();
- mYear = c.get(Calendar.YEAR);
- mMonth = c.get(Calendar.MONTH);
- mDay = c.get(Calendar.DAY_OF_MONTH);
- LinearLayout lay = (LinearLayout) findViewById(R.id.ticketId);
- lay.addView(pr.getFooterView());
- }
- private void addSpinner(Spinner sp) {
- ArrayAdapter<String> pizzaTyp =new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item,getResources().getStringArray(R.array.places));
- pizzaTyp.setDropDownViewResource(R.layout.drop_down_item);
- sp.setAdapter(pizzaTyp);
- sp.setOnItemSelectedListener(spnListener);
- }
- private Spinner.OnItemSelectedListener spnListener =new Spinner.OnItemSelectedListener() {
- public void onItemSelected(AdapterView parent, View v, int position, long id) {
- }
- public void onNothingSelected(AdapterView arg0) {
- // TODO Auto-generated method stub
- }
- };
- private void updateDisplay() {
- mDateDisplay.setText(
- new StringBuilder()
- .append(pad(mMonth)).append("/")
- .append(pad(mDay)).append("/")
- .append(mYear));
- }
- private DatePicker.OnDateSetListener mDateSetListener =new DatePicker.OnDateSetListener() {
- public void dateSet(DatePicker view, int year, int monthOfYear,int dayOfMonth) {
- mYear = year;
- mMonth = monthOfYear;
- mDay = dayOfMonth;
- updateDisplay();
- }
- };
- public void onClick(View arg0) {
- mRadioGroup.clearCheck();
- }
- public void onCheckedChanged(RadioGroup arg0, int checkedId) {
- choice = checkedId;
- }
- @Override
- public boolean onCreateOptionsMenu(Menu menu) {
- super.onCreateOptionsMenu(menu);
- menu.add(0, 0, getString(R.string.MENU_OK),R.drawable.ok);
- return true;
- }
- public boolean onOptionsItemSelected(Menu.Item item){
- Intent in =new Intent();
- switch (item.getId()) {
- case 0:
- try{
- int qty=Integer.valueOf(et.getText().toString());
- //int val=Integer.valueOf(strVal);
- ProcessRailway.amt=String.valueOf(1000*qty);
- pr.initService(this) ;
- }catch (NumberFormatException e) {
- showAlert( null, 0, "Validation Failure", "Please Check the Fields !!!", true );
- }
- break;
- }
- return false;
- }
- @Override
- protected void onDestroy() {
- super.onDestroy();
- }
- @Override
- protected void onResume() {
- // TODO Auto-generated method stub
- super.onResume();
- if(ProcessRailway.ppsStatus==true) {
- ProcessRailway.ppsStatus=false;
- try{
- if(ProcessRailway.conn!=null )
- pr.releaseService(this);
- finish();
- }catch (Exception e) {
- // TODO: handle exception
- }
- }
- }
- private static String pad(int c) {
- if (c >= 10)
- return String.valueOf(c);
- else
- return "0" + String.valueOf(c);
- }
- public View getFooterView(){
- ViewInflate vif= (ViewInflate)mchekCtx.getSystemService(Context.INFLATE_SERVICE);
- View fv=vif.inflate(R.layout.footer, null, null);
- LinearLayout.LayoutParams lp=new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT
- ,LayoutParams.WRAP_CONTENT);
- lp.gravity=0x01;
- fv.setClickable(false);
- fv.setSelected(false);
- fv.setLayoutParams(lp);
- return fv;
- }
- }
Parsed in 0.058 seconds, using GeSHi 1.0.8.4
About Author:
Manmath Ray (Senior Engineer)




