Two ways how to create custom list in Android.

Today I will show you two ways for creating lists in Android. In first, we will work with extended Adapter class, and in second we will work with attributes and SimpleAdapter.

Let’s start.

For each of our examples, we must to know, how does usually default adapter for default list works.

If we want to create default list, we need to do two steps:

1. Create in our layout file ListView.
2. Create default adapter and set it to our list

Simple list element in list_view_example:

<ListView 
xmlns:android=”http://schemas.android.com/apk/res/android"
android:id=”@+id/listview”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”

/>

Code:

public class ListViewExampleActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.list_view_example);
final ListView listview = (ListView) findViewById(R.id.listview);
final ArrayList<String> list = new ArrayList<String>();
list.add(“Android”);
list.add(“iPhone”);
list.add(“WindowsMobile”);
final ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, list);
​ listview.setAdapter(adapter);
}
}

And we will get default list with default adapter.


But what if we want to get list, where each list item has image and text? What if we want much more elements in our list item?

We need fallow next steps:
​1. Create in our layout file ListView.
2. Create custom layout file for our list item
3. Implement custom Adapter class or create method for initialize new adapter by attributes.

First step like in default list.

Second step is very easy. We need to create in our layout folder (in project) new layout file with name like “my_custom_list_item”. And create there a layout for item list, which we want. Like this:

<?xml version=”1.0" encoding=”utf-8"?> 
<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”?android:attr/listPreferredItemHeight”
android:paddingLeft=”@dimen/activity_horizontal_margin”
android:paddingRight=”@dimen/activity_horizontal_margin”
android:paddingTop=”@dimen/activity_vertical_margin”>
<ImageView android:id=”@+id/main_menu_item_image” 
android:contentDescription=”@string/list_item_image”
android:layout_width=”30dp”
android:layout_height=”30dp”
android:layout_marginRight=”15dp”
android:layout_marginEnd=”15dp”
android:src=”@drawable/some_image”/>
<TextView android:id=”@+id/main_menu_item_text” 
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:gravity=”center_vertical”
android:paddingTop=”5dp”
android:textAppearance=”?android:attr/textAppearanceMedium”
android:text=”@string/some_text”
android:layout_toRightOf=”@id/main_menu_item_image”
android:layout_toEndOf=”@id/main_menu_item_image”/>
</RelativeLayout>

And third step we split into two different ways. 
1) We create our own adapter
2) We create a method for initialize our data with help of attributes

So, first way, we create custom adapter implementations:

public class MySimpleArrayAdapter extends ArrayAdapter<String> {
private final Context context;
private final String[] values;
public MySimpleArrayAdapter(Context context, String[] values) {
super(context, -1, values);
this.context = context;
this.values = values;
}
@Override
public View getView(int position, View convertView, ViewGroup
parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.my_custom_list_item, 
parent, false);
TextView textView = (TextView) rowView.findViewById(R.id.
main_menu_item_text);
ImageView imageView = (ImageView)
rowView.findViewById(R.id.main_menu_item_image);
textView.setText(values[position]);
// change the icon for Windows and iPhone
String s = values[position];
if (s.startsWith(“iPhone”)) {
imageView.setImageResource(R.drawable.no);
} else {
imageView.setImageResource(R.drawable.ok);
}
return rowView;
}
​}

After it, we just need to create our custom adapter near our list, as at default example:


final MySimpleArrayAdapter adapter = new MySimpleArrayAdapter
(this, list);
​ listview.setAdapter(adapter);

That’s all in first way.


Second way is creating special method:

private void setupAdapter() { 
/*Where list is ArrayAdapter<SomeObject>, where SomeObject has
String text and int image*/
ArrayList<Map<String, Object>> data = new ArrayList<>(list.size());
Map<String, Object> map;
for (int i = 0; i < list.size(); i++) {
map = new HashMap<>();

//ATTRIBUTE_TEXT and ATTRIBUTE_IMAGE are just string constants

map.put(ATTRIBUTE_TEXT, list.get(i).getText());
map.put(ATTRIBUTE_IMAGE, list.get(i).getImage());
data.add(map);
}
String[] from = {ATTRIBUTE_TEXT, ATTRIBUTE_IMAGE};
int[] to = { R.id.main_menu_item_text, R.id.main_menu_item_image};
SimpleAdapter adapter = new SimpleAdapter(this, data, 
R.layout.my_custom_list_item, from, to);
 //listview — is our list view from default example
listview.setAdapter(adapter);
}

Ok, after that you can call this method in OnCreate. That’s all!

Hope it helps.

Kind regards.


Originally published at junior-freelancer.weebly.com.