alert dialog

Button invokes an alert dialoguehttp://www.vogella.de/articles/Android/article.html#overview_android

The example show how to create an alert dialog when clicking a button.

AlertDialog is used to open a dialog from our activity. This modal dialog which gets the focus until the user closes it.

Use AlertDialog when you need:

A titleA text messageOne, two, or three buttonsA list of selectable items (with optional checkboxes or radio buttons)

An instance of this class can be created by the builder pattern, e.g. you can chain your method calls.

You should always open a dialog from the class onCreateDialog(int) as the Android system manages the dialog in this case for you. ‘onCreateDialog(int)’ is automatically called by Android if you call showDialog(int).

http://www.vogella.de/articles/Android/article.html#overview_android

Button invokes an alert dialoguehttp://www.vogella.de/articles/Android/article.html#overview_android

The example show how to create an alert dialog when clicking a button

http://www.vogella.de/articles/Android/article.html#overview_android

Project name, application name, Package name and Activity…

Finish

Res/layout/main.xml…

Copy the following to here;

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="fill_parent"android:layout_height="fill_parent">

<Button android:id="@+id/Button01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Show Simple Dialog" android:onClick="openMyDialog"></Button>

.java code…

Copy the following to here;package com.urlonging;

import android.app.Activity; import android.os.Bundle; import android.app.Activity; import android.app.AlertDialog;import android.app.AlertDialog.Builder; import android.app.Dialog; import android.content.DialogInterface;import android.os.Bundle; import android.view.View; import android.widget.Toast;public class ButtonAlert extends Activity {/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); } public void openMyDialog(View view) { showDialog(10); } @Override protected Dialog onCreateDialog(int id) { switch (id) { case 10: // Create our AlertDialog Builder builder = new AlertDialog.Builder(this); builder.setMessage("This will end the activity") .setCancelable(true) .setPositiveButton("I agree", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface dialog, Int which) { // Ends the activity ButtonAlert.this.finish(); }}).setNegativeButton("No, no", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog,int which) {Toast.makeText(getApplicationContext(),"Activity will continue",Toast.LENGTH_SHORT).show();}});AlertDialog dialog = builder.create();dialog.show();

}return super.onCreateDialog(id);}}

Save and run…

AlertDialogue - Style…

Righ-click

Select File

Type ‘style.xml’

AlertDialogue – item font, color…

Type the following style code

<?xml version="1.0" encoding="utf-8"?> <resources> <style name="AlertDialogCustom" parent="@android:style/AlertDialog">

<item name="android:textColor">#00FF00</item> <item name="android:typeface">monospace</item> <item name="android:textSize">10sp</item>

</style> </resources>


Type the following style code

final CharSequence[] items = {"India", "US", "UK", "Australia","Singapore"}; //AlertDialog.Builder builder = new AlertDialog.Builder(this);

AlertDialog.Builder builder = new AlertDialog.Builder(new ContextThemeWrapper(this, R.style.AlertDialogCustom));

builder.setTitle("Alert Dialog with ListView and Radio button"); builder.setIcon(R.drawable.icon); builder.setMultiChoiceItems(items, new boolean[]{false, true, true, true, false}, new DialogInterface.OnMultiChoiceClickListener() { public void onClick(DialogInterface dialog, int whichButton, boolean isChecked) { //public void onClick(DialogInterface dialog, int item) { // Toast.makeText(getApplicationContext(), items[item], Toast.LENGTH_SHORT).show(); } });

builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { // Toast.makeText(this, "Success", Toast.LENGTH_SHORT).show(); } }); builder.setNegativeButton("No", new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int id) { // Toast.makeText(this, "Fail", Toast.LENGTH_SHORT).show(); } }); AlertDialog alert = builder.create(); alert.show();

}

AlertDialogue – item font, color using layout…

Type selecteditem.xml

<?xml version="1.0" encoding="utf-8"?> <TextView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#FF0000" android:textSize="16dp"android:textStyle="bold" android:padding="2dip"> </TextView>

Righ-click

Select File

Type this layout code. Note: no need layout tagChange the color text style you want

final String[] items = {"India", "US", "UK", "Australia","Singapore"};

AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("Alert Dialog with ListView "); ArrayAdapter adapter = new ArrayAdapter(this, R.layout.selecteditem, items); builder.setAdapter(adapter, null); adapter.OnMultiChoiceClickListener() { builder.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) {


Reference the xml layout file

Now, All the listed item will have the text properties set up in ‘selecteditem.xml’

AlertDialogue – List item with icon…

Right-click

Select folder

AlertDialogue – List item with iconsTo create a list as shown below

List with image icon

http://www.anddev.org/code-snippets-for-android-f33/icon-list-in-alertdialog-t49975.html


Type: drawable


Drag this and drop to the ‘drawable’ foler

<?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="wrap_content"> <ImageView android:id="@+id/icon" android:layout_width="48px" android:layout_height="48px" android:layout_gravity="left" /> <TextView android:id="@+id/title" android:textColor="#0000FF" android:text="" android:paddingLeft="10dip" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>


Create ‘list_row.xml’

To crate list_row.xml:

Right-click on ‘layout’Select New>FileType ‘list_row.xml’ for the file name

Copy the xml code on your right and paste it.

Create a new xml layout called list_row.xml. This xml layout defines how the data in each row are displayed. Ie whether you want the data to display in columns horizontally (which is set up here) or vertically. You can define the type of data whether is text or image.

Data are display as column horizontally.

Two data displayed horizontally ie image icon and text.


android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/icon" android:layout_width="48px" android:layout_height="48px" android:layout_gravity="left" /> <TextView android:id="@+id/title" android:textColor="#0000FF" android:text="" android:paddingLeft="10dip" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>


Create ‘list_row.xml’

To crate list_row.xml:

Right-click on ‘layout’Select New>FileType ‘list_row.xml’ for the file name

Copy the xml code on your right and paste it.

Create a new xml layout called list_row.xml. This xml layout defines how the data in each row are displayed. Ie whether you want the data to display in columns horizontally (which is set up here) or vertically. You can define the type of data whether is text or image.

Data are display as column horizontally.

Data in each row are displayed vertically in you specify ‘vertical’There are 3 data here: Tick name and icArbitrary text

http://www.answers.com/topic/arbitrary

public class Ddd extends Activity {private TextView mTextView01;String[] items = {"airplanes", "animals", "cars", "colors", "flowers", "letters", "monsters", "numbers", "shapes", "smileys", "sports", "stars" };//ListAdapter adapter=null;

/** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); AlertDialog.Builder builder = new AlertDialog.Builder(this); builder.setTitle("Pick a tile set");

//---setup ListAdapter -----------------

ListAdapter adapter = new ArrayAdapter<String>(getApplicationContext(), R.layout.list_row, items) { private Bitmap mIcon1; ViewHolder holder;

class ViewHolder { ImageView icon; TextView title; }

Cont…


Copy this code

Create an Android proj with activity Ddd

Specify the layout that will format the appearance of each row.The layout should have a TextView to format the text AndAn ImageView to format the image icon

Cont…

public View getView(int position, View convertView, ViewGroup parent){ final LayoutInflater inflater = (LayoutInflater) getApplicationContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

if (convertView == null) { convertView = inflater.inflate(R.layout.list_row, null); holder = new ViewHolder(); holder.icon = (ImageView) convertView.findViewById(R.id.icon); holder.title = (TextView) convertView.findViewById(R.id.title); convertView.setTag(holder); } else { // view already defined, retrieve view holder holder = (ViewHolder) convertView.getTag(); }

holder.title.setText(items[position]); if((position % 2)==0){

holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick)); ); } return convertView; }

}; //---end listAdapter-----builder.setAdapter(adapter, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int item) { // Toast.makeText(this, "You selected: " + items[item],Toast.LENGTH_LONG).show(); dialog.dismiss(); } }); AlertDialog alert = builder.create(); alert.show(); }//----end onCreate()----}


This is how you display the image icon alternatively.

getView will be called multiple times.To understand how this works, visit:http://android.amberfog.com/?p=296

http://android.amberfog.com/?p=296

Cont…


if (convertView == null) { convertView = inflater.inflate(R.layout.list_row, null); holder = new ViewHolder(); holder.icon = (ImageView) convertView.findViewById(R.id.icon); holder.title = (TextView) convertView.findViewById(R.id.title); convertView.setTag(holder);

} else { // view already defined, retrieve view holder holder = (ViewHolder) convertView.getTag();

}

holder.title.setText(items[position]);

holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick));

return convertView; }

}; //---end listAdapter-----

Show list item with image icon when condition is met problem Assuming you plan to display a student list with tick image icon besides the names when they have been evaluated as shown on the spinner list on the right

Image tick is shown when a student has been evaluated.

Cont…




}

holder.title.setText(items[position]);

holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick));

return convertView; }

}; //---end listAdapter-----

Show list item with image icon when condition is met problem Assuming you have shared pref ‘sIcDone_N’ which tracks students IC that have completed evaluation, you are tempted to use this info to conditionally display the tick image as shown in the code below.res=defaultPrf.getString("sIcDone_"+s_n,"--") ; eg res =s1234567B

hldTxt=items[position]for (n=1;n<(i_numOfStudents+1);n++){

s_n=Integer.toString(n);res=defaultPrf.getString("sIcDone_"+s_n,"--"); if (hldTxt.indexOf(res)!=-1){ holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick)); }else holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.pending)); }

You may want to place the code to replace the single bold line.The code basically search for current completed ic on row text. If say s1234567B is found in row text then show a Tick.Logically is ok, but it may give you lots of problems because getView() will be called multiple times. So don’t create complex condition here.

The best solution is to mark the array text(items[]) with some marking to indicate that the line has been evaluated. Cont. Next slide

if (line.length()>5){ //---if the line has no 'name' && no 'pct‘ if (line.toLowerCase().indexOf("name")==-1 && line.toLowerCase().indexOf("pct")==-1){

//--is current line student's ic already evaluated ?// if yes put a tick (\u221a) into the first char// eg sIcDone_5=S1234567b

for (int nn=1; nn<(i_numOfStudents+1);nn++){ s_n=Integer.toString(nn);

res=defaultPrf.getString("sIcDone_"+s_n,null); if (res !=null){ //--found completed student ic, so put a tick-- if (line.indexOf(res)!=-1){

line=“ddd="+line;}

}}

aryList.add(line);}

}

Show list item with image icon when condition is met problem ..

The code here basically add ‘ddd=‘ in front of the aryList data for those evaluated students. The final aryList:

ddd=1 Tan AAA s1234567B2 Tan BBB s1234568B3 Tan CCC s12345679B

Ddd=4 Tan DDD s1234557D




}

// holder.title.setText(items[position]);

String hldTxt=items[sNum]; //int i_numOfStudents=Integer.parseInt(defaultPrf.getString("numOfStudents","0")); //i_curStudentCnt=Integer.parseInt(defaultPrf.getString("curStudentCnt","0")); String s_n=""; if (hldTxt.indexOf("ddd=")!=-1){

hldTxt=hldTxt.replace("ddd=", ""); holder.title.setText(hldTxt); holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick));

}else{ holder.title.setText(hldTxt); //holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.pending)); } return convertView; }

Show list item with image icon when condition is met problem ..

Now the conditional code is simpler. It just check for array data with ‘ddd=‘ if found then insert Tick image icon. ‘ddd=‘ will be removed before display it /

Show list item with image icon when condition is met problem The code seems to work fine, not until you scroll the list.

When you scroll up, you will find that 17 will be shown a Tick. This is because, when you scroll, getView() will be called again. Item 1 that disappeared will be shown in 17 when it appeared. Android do this to conserve memory usage by recycling View. For more details refer to: http://android.amberfog.com/?p=296

The next slide will show you how to resolve this.

http://android.amberfog.com/?p=296




}

// holder.title.setText(items[position]);

String hldTxt=items[sNum]; //int i_numOfStudents=Integer.parseInt(defaultPrf.getString("numOfStudents","0")); //i_curStudentCnt=Integer.parseInt(defaultPrf.getString("curStudentCnt","0")); String s_n=""; if (hldTxt.indexOf("ddd=")!=-1){

hldTxt=hldTxt.replace("ddd=", ""); holder.title.setText(hldTxt); holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick));


Show list item with image icon when condition is met problem …

The recycling use of view is initiated by this else code here.

Now if you do not wish to recycle view, just copy the top code and paste it here; ie else should have the following code;

convertView = inflater.inflate(R.layout.studentlist, null); holder = new ViewHolder(); holder.icon = (ImageView) onvertView.findViewById(R.id.icon); holder.title = (TextView) convertView.findViewById(R.id.title);



} else {convertView = inflater.inflate(R.layout.studentlist, null); holder = new ViewHolder(); holder.icon = (ImageView) convertView.findViewById(R.id.icon); holder.title = (TextView) convertView.findViewById(R.id.title); }

String hldTxt=items[sNum]; String s_n="";

if (hldTxt.indexOf("ddd=")!=-1){ hldTxt=hldTxt.replace("ddd=", ""); holder.title.setText(hldTxt); holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick));


Show list item with image icon when condition is met problem …

The recycling use of view is initiated by this else code here.

Now if you do not wish to recycle view, just copy the top code and paste it here; ie else should have the following code;

convertView = inflater.inflate(R.layout.studentlist, null); holder = new ViewHolder(); holder.icon = (ImageView) onvertView.findViewById(R.id.icon); holder.title = (TextView) convertView.findViewById(R.id.title);

Show list item with image icon, text1 and text2 in vertical orientation…


android:orientation=“vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/icon" android:layout_width="48px" android:layout_height="48px" android:layout_gravity="left" /> <TextView android:id="@+id/title" android:textColor="#0000FF" android:text="" android:paddingLeft="10dip" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/title2" android:textColor="#0000FF" android:text="" android:paddingLeft="10dip" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /></LinearLayout>

Xml with 3 views

Each row has 3 data:Image icontitletitle2

public View getView(int position, View convertView, ViewGroup parent){ final LayoutInflater inflater = (LayoutInflater) getApplicationContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); if (convertView == null) {

convertView = inflater.inflate(R.layout.list_row, null); holder = new ViewHolder(); holder.icon = (ImageView) convertView.findViewById(R.id.icon); holder.title = (TextView) convertView.findViewById(R.id.title); holder.title2 = (TextView) convertView.findViewById(R.id.title2); convertView.setTag(holder);

} else {convertView = inflater.inflate(R.layout.studentlist, null); holder = new ViewHolder(); holder.icon = (ImageView) convertView.findViewById(R.id.icon); holder.title = (TextView) convertView.findViewById(R.id.title); holder.title2 = (TextView) convertView.findViewById(R.id.title2); }

String hldTxt=items[sNum]; String s_n="";

if (hldTxt.indexOf("ddd=")!=-1){ hldTxt=hldTxt.replace("ddd=", ""); holder.title.setText(hldTxt); holder.icon.setImageDrawable(getResources().getDrawable(R.drawable.tick));


Show list item with image icon, text1 and text2 in vertical orientation…

Include third textview here

studentListAdapter = new ArrayAdapter<String>(getApplicationContext(), R.layout.studentlist, items) { ViewHolder holder; class ViewHolder {

ImageView icon; TextView title; TextView title2;

}

Include the third textview here

Include third textview here

When a user made a selection, it will be from the text data in this String array ‘items’. Which contain names and ic

When user made a selection, the selected item data will be ‘1 Aznijah….. s8400643B

Display two or more data in Spinner…

Go to spinner

Each row of the ‘Go to’ consists of Two data. The black data is the main data and the blue data is the secondary data.When user tap on it, the selected data is the black data.

<?xml version="1.0" encoding="utf-8"?><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/t1" android:textColor="#000000" android:paddingLeft="10dip" android:textStyle="bold" android:textSize="16dp" android:layout_gravity="left" android:layout_width="fill_parent" android:layout_height="fill_parent" /> <TextView android:id="@+id/t2" android:textColor="#FF0000FF" android:paddingLeft="8dip" android:layout_gravity="left" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>

 <Spinner android:id="@+id/gotorow" android:layout_below="@+id/pc" android:layout_toRightOf="@+id/camera" android:layout_width="200px" android:layout_height="60px" android:padding="5dip"> </Spinner>

Display two or more data in Spinner – Custom data format layout…

Spinner view in main.xml

This is the custom data format layout for each row in the spinner.

It contains TWO TextView.Later we will use ‘inflater’ to transform the layout here into our own View (component).

The black text is defined by TextView id ‘t1’

The blue text is defined by TextView id ‘t2’

Blue property definition

for (n=0;n<evaluationRow.size();n++){ aryList.add(evaluationRow.get(n));}

gotoAry=(String[]) aryList.toArray(new String[aryList.size()]);

pcAry=new String[n+1]; String s_nnn=""; for (nn=1;nn<(n+1+1);nn++){ s_nnn=Integer.toString(nn-1); // if nn=2, s_nnn=1 if (nn==1)pcAry[0]=""; else pcAry[nn-1]=defaultPrf.getString("pc_"+s_nnn,""); }

Display two or more data in Spinner – String array…

These codes are in populateGoto()

The two data are in array ‘gotoAry’ (black) and ‘pcAry’ (blue)

ArrayList

ArrayList converted to String array

private Spinner gotoRow=null;private gotoCustomAdapter gotoAclass=null;

gotoRow = (android.widget.Spinner) findViewById(R.id.gotorow);

gotoAclass= new gotoCustomAdapter(this, R.layout.gotolist, gotoAry,pcAry);

for (n=0;n<evaluationRow.size();n++){ aryList.add(evaluationRow.get(n));}

gotoAry=(String[]) aryList.toArray(new String[aryList.size()]);

pcAry=new String[n+1]; String s_nnn=""; for (nn=1;nn<(n+1+1);nn++){ s_nnn=Integer.toString(nn-1); // if nn=2, s_nnn=1 if (nn==1)pcAry[0]=""; else pcAry[nn-1]=defaultPrf.getString("pc_"+s_nnn,""); }

Display two or more data in Spinner – Adapter class…

private gotoCustomAdapter gotoAclass=null;

ArrayList

gotoRow is a spinner object declared at the top of the activity

Instance of Spinner adapter class (which will be shown later) called ‘gotoCustomAdapter’

Class gotoCustomAdapter has been created below the code (shown later)

This how you can include a second data into a spinner; by creating a custom class spinner adapter class.

This is the primary array. This the first array parameter. When user taps on the spinner row, the selected data will be from this array.

//----setup goto custom adapter for populateGoto

public class gotoCustomAdapter extends ArrayAdapter<String>{

public gotoCustomAdapter(Context context, int textViewResourceId, String[] objects, String[] obj) { super(context, textViewResourceId, objects); // TODO Auto-generated constructor stub }

@Override public View getDropDownView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub return getCustomView(position, convertView, parent); }

@Override public View getView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub return getCustomView(position, convertView, parent); }

Cont….

Display two or more data in Spinner – custom Adapter class…

To accommodate more than ONE data in each row of spinner, you need to create a spinner custom Adapter.

Spinner custom adapter allows you to create your own spinner row layout and turns them into your own View (component)

Cont….

public View getCustomView(int position, View convertView, ViewGroup parent) { // TODO Auto-generated method stub //return super.getView(position, convertView, parent); LayoutInflater inflater=getLayoutInflater(); View row=inflater.inflate(R.layout.gotolist, parent, false);

TextView label=(TextView)row.findViewById(R.id.t1); label.setText(gotoAry[position]); TextView label2=(TextView)row.findViewById(R.id.t2); label2.setText(pcAry[position]);// position is 0 based res=(label.getText()).toString(); if (res.indexOf("***") ==-1){ label2.setTextColor(0xff0000ff); } else { label2.setTextColor(0xffff0000); } return row; } }//---end class gotoCustomAdapter ------

Display two or more data in Spinner – custom Adapter class getView and inflater…

The inflater turns your xml layout for the row into your own custom component View called ‘row’


The two TextViews have been transformed into my own custom View called ‘row’ by the inflater.

Cont….


TextView label=(TextView)row.findViewById(R.id.t1); label.setText(gotoAry[position]); TextView label2=(TextView)row.findViewById(R.id.t2); label2.setText(pcAry[position]);// position is 0 based res=(label.getText()).toString(); if (res.indexOf("***") ==-1){ label2.setTextColor(0xff0000ff); } else { label2.setTextColor(0xffff0000); } return row; } }//---end class gotoCustomAdapter ------

Display two or more data in Spinner – custom Adapter class getView…


I can reference this using Row.findViewById(R.id.t1)

Cont….


TextView label=(TextView)row.findViewById(R.id.t1); label.setText(gotoAry[position]); TextView label2=(TextView)row.findViewById(R.id.t2); label2.setText(pcAry[position]);// position is 0 based res=(label.getText()).toString();

if (res.indexOf("***") ==-1){ label2.setTextColor(0xff0000ff); } else { label2.setTextColor(0xffff0000); } return row; } }//---end class gotoCustomAdapter ------

Display two or more data in Spinner – custom Adapter class getView…

Now I can assign data to each element of the row by instantiating its textview and then assign text to it.

gotoRow.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener(){ public void onItemSelected(AdapterView<?> parent, View view, int pos, long id) { selectedGoto=(String) gotoRow.getSelectedItem(); }

}//---end onItemSelected() --- public void onNothingSelected(AdapterView<?> parent) { } });

Display two or more data in Spinner – listening to user tap…

Listener to trap user selection

alert dialog

Documents