달력

4

« 2024/4 »

  • 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
2012. 9. 1. 16:58

안드로이드 - Customizing AutoCompleteTextView to display images and text in the suggestion list using SimpleAdapter in Android 안드로이드 이야기2012. 9. 1. 16:58

728x90
반응형

안드로이드 - Customizing AutoCompleteTextView to display images and text in the suggestion list using SimpleAdapter in Android

August 26, 2012
By

In this article we will see a simple method to customize AutoCompleteTextView so that it can list images along with text when user input some characters in it. We will use SimpleAdapter to store both images and text which is displayed in the AutoCompeteTextView.

This application is developed in Eclipse Classic ( 4.2.0 ) with ADT plugin ( 20.0.3 ) and Android SDK ( R20.0.3 )

1. Create a new Android application project namely “AutoCompleteTextViewDemo”

New Android Application Project

Figure 1 : New Android Application Project

2. Design application launcher icon

Design Application Launcher Icon

Figure 2: Design Application Launcher Icon

3. Create a blank activity

Create a blank activity

Figure 3 : Create a blank activity

4. Enter MainActivity Details

Enter MainActivity Details

Figure 4 : Enter MainActivity Details

5. Remove Android Support Library if exists

By default Eclipse ( 4.2.0) adds Android Support Library to an Android application project. For this application, we don’t need to use this support library. So the library file libs/android-support-v4.jar may be removed manually via ProjectExplorer by simply right click on the file and then clicking the menu item “delete”.

6. Create a new folder namely drawable under the folder res

7. Download and extract the given below zip file to the drawable folder

8. Update the file res/values/strings.xml

1
2
3
4
5
6
7
8
9
10
<resources>
<string name="app_name">AutoCompleteTextViewDemo</string>
<string name="hello_world">Hello world!</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">AutoCompleteTextViewDemo</string>
<string name="str_hnt_autocomplete">Enter Country Name</string>
</resources>

9. Create a class namely CustomAutoCompleteTextView in the file src/in/wptrafficanalyzer/autocompletetextviewdemo/CustomAutoCompleteTextView.java to customize AutoCompleteTextView

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
package in.wptrafficanalyzer.autocompletetextviewdemo;
import java.util.HashMap;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.AutoCompleteTextView;
/** Customizing AutoCompleteTextView to return Country Name
* corresponding to the selected item
*/
public class CustomAutoCompleteTextView extends AutoCompleteTextView {
public CustomAutoCompleteTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
/** Returns the country name corresponding to the selected item */
@Override
protected CharSequence convertSelectionToString(Object selectedItem) {
/** Each item in the autocompetetextview suggestion list is a hashmap object */
HashMap<String, String> hm = (HashMap<String, String>) selectedItem;
return hm.get("txt");
}
}

10. Update the layout file res/layout/activity_main.xml

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
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<in.wptrafficanalyzer.autocompletetextviewdemo.CustomAutoCompleteTextView
android:id="@+id/autocomplete"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:textColor="@android:color/black"
android:hint="@string/str_hnt_autocomplete"
android:completionThreshold="1"
/>
<TextView
android:id="@+id/tv_currency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="@id/autocomplete"
/>
</RelativeLayout>

11. Create a layout file for CustomAutoCompleteTextView in the file res/layout/autocomplete_layout.xml

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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<ImageView
android:id="@+id/flag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="@string/hello_world"
android:padding="10dp"
/>
<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15dp"
android:padding="10dp"
/>
</LinearLayout>

12. Update the class MainActivity in the file src/in/wptrafficanalyzer/autocompletetextviewdemo/MainActivity.java

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
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
package in.wptrafficanalyzer.autocompletetextviewdemo;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.SimpleAdapter;
import android.widget.TextView;
public class MainActivity extends Activity {
// Array of strings storing country names
String[] countries = new String[] {
"India",
"Pakistan",
"Sri Lanka",
"China",
"Bangladesh",
"Nepal",
"Afghanistan",
"North Korea",
"South Korea",
"Japan"
};
// Array of integers points to images stored in /res/drawable-ldpi/
int[] flags = new int[]{
R.drawable.india,
R.drawable.pakistan,
R.drawable.srilanka,
R.drawable.china,
R.drawable.bangladesh,
R.drawable.nepal,
R.drawable.afghanistan,
R.drawable.nkorea,
R.drawable.skorea,
R.drawable.japan
};
// Array of strings to store currencies
String[] currency = new String[]{
"Indian Rupee",
"Pakistani Rupee",
"Sri Lankan Rupee",
"Renminbi",
"Bangladeshi Taka",
"Nepalese Rupee",
"Afghani",
"North Korean Won",
"South Korean Won",
"Japanese Yen"
};
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Each row in the list stores country name, currency and flag
List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();
for(int i=0;i<10;i++){
HashMap<String, String> hm = new HashMap<String,String>();
hm.put("txt", countries[i]);
hm.put("flag", Integer.toString(flags[i]) );
hm.put("cur", currency[i]);
aList.add(hm);
}
// Keys used in Hashmap
String[] from = { "flag","txt"};
// Ids of views in listview_layout
int[] to = { R.id.flag,R.id.txt};
// Instantiating an adapter to store each items
// R.layout.listview_layout defines the layout of each item
SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList, R.layout.autocomplete_layout, from, to);
// Getting a reference to CustomAutoCompleteTextView of activity_main.xml layout file
CustomAutoCompleteTextView autoComplete = ( CustomAutoCompleteTextView) findViewById(R.id.autocomplete);
/** Defining an itemclick event listener for the autocompletetextview */
OnItemClickListener itemClickListener = new OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> arg0, View arg1, int position, long id) {
/** Each item in the adapter is a HashMap object.
* So this statement creates the currently clicked hashmap object
* */
HashMap<String, String> hm = (HashMap<String, String>) arg0.getAdapter().getItem(position);
/** Getting a reference to the TextView of the layout file activity_main to set Currency */
TextView tvCurrency = (TextView) findViewById(R.id.tv_currency) ;
/** Getting currency from the HashMap and setting it to the textview */
tvCurrency.setText("Currency : " + hm.get("cur"));
}
};
/** Setting the itemclick event listener */
autoComplete.setOnItemClickListener(itemClickListener);
/** Setting the adapter to the listView */
autoComplete.setAdapter(adapter);
}
/** A callback method, which is executed when this activity is about to be killed
* This is used to save the current state of the activity
* ( eg : Configuration changes : portrait -> landscape )
*/
@Override
protected void onSaveInstanceState(Bundle outState) {
TextView tvCurrency = (TextView) findViewById(R.id.tv_currency) ;
outState.putString("currency", tvCurrency.getText().toString());
super.onSaveInstanceState(outState);
}
/** A callback method, which is executed when the activity is recreated
* ( eg : Configuration changes : portrait -> landscape )
*/
@Override
protected void onRestoreInstanceState(Bundle savedInstanceState) {
TextView tvCurrency = (TextView) findViewById(R.id.tv_currency) ;
tvCurrency.setText(savedInstanceState.getString("currency"));
super.onRestoreInstanceState(savedInstanceState);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}
}

13. Screenshots of the application in execution

Selecting an item from the autocompletetextview

Figure 5 : Selecting an item from the autocompletetextview

Displays the currency corresponding to the country selected from the autocompletetextview

Figure 6 : Displays the currency corresponding to the country selected from the autocompletetextview

14. Download

15. Reference

http://developer.android.com/guide/index.html

 

728x90
반응형

'안드로이드 이야기' 카테고리의 다른 글

안드로이드 - SQLite 이용 예제  (0) 2012.09.01
안드로이드 - autocompletetextview 커스텀마이징  (0) 2012.09.01
안드로이드 - autocompletetextview customize  (0) 2012.09.01
Android - AlarmManager  (0) 2012.08.30
안드로이드 - 근접센서 간단 예제  (0) 2012.08.29
:
Posted by mapagilove

티스토리툴바