Learn How To Display Group of Related Items In a List With Android ListView Example

android-listview-example

Did it ever occurred to you?

To make a list of related items?

Displaying a specific list is essential for any app at some point or another.

Take a chat app for example. It queries app’s database to find your friends, and then display them in a list. In fact, if you need to display vast amount of data that is also easy to navigate, the Android Listview is the right class.

In today’s Android app tutorial, you’ll learn how to make a list with Android Listview Example.

Let’s Get Started

create a new project under file menu and modify project details.

imagepicker1

Select Mini SDK Version in the next tab.

imagepicker2

In the next tab, Add an Empty Activity.

imagepicker3

Lastly, customize the app activity.

imagepicker4

Start Code Integration

MainActivity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Button btnNListView, btnCListView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initControls();
}
private void initControls() {
btnNListView = (Button) findViewById(R.id.btnNListView);
btnNListView.setOnClickListener(this);
btnCListView = (Button) findViewById(R.id.btnCListView);
btnCListView.setOnClickListener(this);
}
@Override
public void onClick(View view) {
Intent intent = null;
switch (view.getId()) {
case R.id.btnNListView:
intent = new Intent(this, ListViewActivity.class);
intent.putExtra("isNormalList", true);
startActivity(intent);
break;
case R.id.btnCListView:
intent = new Intent(this, ListViewActivity.class);
intent.putExtra("isNormalList", false);
startActivity(intent);
break;
default:
break;
}
}
}

ListView Activity

public class ListViewActivity extends AppCompatActivity {
private ListView listView;
private ListNormalAdapter listNormalAdapter;
private ListCustomizedAdapter listCustomizedAdapter;
private String[] mobileArray = {"Samsung", "Apple", "Microsoft", "Nokia", "Sony", "LG", "HTC", "Motorola", "Lava", "Oppo", "Asus", "Ericsson", "Haier", "Intex", "Micromax"};
private int[] mobileIconArray = {R.drawable.img_samsung, R.drawable.img_apple, R.drawable.img_microsoft, R.drawable.img_nokia, R.drawable.img_sony, R.drawable.img_lg, R.drawable.img_htc, R.drawable.img_moto, R.drawable.img_lava, R.drawable.img_oppo, R.drawable.img_asus, R.drawable.img_ericsson, R.drawable.img_haier, R.drawable.img_intex, R.drawable.img_micromax};
private int selectedPosition = -1;
private boolean isCustomizedList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view);
initControls();
}
private void initControls() {
listView = (ListView) findViewById(R.id.listView);
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
if (isCustomizedList) {
selectedPosition = i;
listCustomizedAdapter.notifyDataSetChanged();
}
Toast.makeText(ListViewActivity.this, "You have selected [" + mobileArray[i] + "]", Toast.LENGTH_SHORT).show();
}
});
listNormalAdapter = new ListNormalAdapter(mobileArray);
listCustomizedAdapter = new ListCustomizedAdapter(mobileArray);
Bundle bundle = getIntent().getExtras();
if (bundle != null) {
if (bundle.getBoolean("isNormalList")) {
listView.setAdapter(listNormalAdapter);
isCustomizedList = false;
} else {
isCustomizedList = true;
listView.setAdapter(listCustomizedAdapter);
}
}
}
public class ListNormalAdapter extends BaseAdapter {
private final String[] mobileNames;
private LayoutInflater inflater;
public ListNormalAdapter(String[] strings) {
this.mobileNames = strings;
inflater = getLayoutInflater();
}
@Override
public int getCount() {
return mobileNames.length;
}
@Override
public Object getItem(int i) {
return null;
}
@Override
public long getItemId(int i) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup viewGroup) {
ViewHolder holder;
if (convertView == null) {
holder = new ViewHolder();
convertView = inflater.inflate(R.layout.row_normal_list, null);
holder.textName = (TextView) convertView.findViewById(R.id.textName);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.textName.setText(mobileNames[position]);
return convertView;
}
public class ViewHolder {
private TextView textName;
}
}
// Customized List
public class ListCustomizedAdapter extends BaseAdapter {
private final String[] mobileNames;
private LayoutInflater inflater;
public ListCustomizedAdapter(String[] strings) {
this.mobileNames = strings;
inflater = getLayoutInflater();
}
@Override
public int getCount() {
return mobileNames.length;
}
@Override
public Object getItem(int i) {
return null;
}
@Override
public long getItemId(int i) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup viewGroup) {
ViewHolder holder;
if (convertView == null) {
holder = new ViewHolder();
convertView = inflater.inflate(R.layout.row_customized_list, null);
holder.textName = (TextView) convertView.findViewById(R.id.textName);
holder.imgCheck = (ImageView) convertView.findViewById(R.id.imgCheck);
holder.imgLogo = (ImageView) convertView.findViewById(R.id.imgLogo);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.textName.setText(mobileNames[position]);
holder.imgLogo.setImageResource(mobileIconArray[position]);
if (selectedPosition == position) {
holder.imgCheck.setVisibility(View.VISIBLE);
} else {
holder.imgCheck.setVisibility(View.GONE);
}
return convertView;
}
public class ViewHolder {
private TextView textName;
private ImageView imgCheck, imgLogo;
}
}
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="com.imagebuttondemo.MainActivity">

<ImageButton
android:id="@+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img_android_one" />
</LinearLayout>

Activity_list_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.listviewdemo.ListViewActivity">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

row_normal_list.xml

<?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">
<TextView
android:id="@+id/textName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/dimen_16dp"
android:textSize="18sp" />
</LinearLayout>

Row_customized_list.xml

<?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="wrap_content">
<ImageView
android:id="@+id/imgLogo"
android:layout_width="@dimen/dimen_50dp"
android:layout_height="@dimen/dimen_50dp"
android:layout_margin="@dimen/dimen_8dp"
android:layout_gravity="center" />
<TextView
android:id="@+id/textName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:layout_marginLeft="@dimen/dimen_8dp"
android:textSize="18sp" />
<ImageView
android:id="@+id/imgCheck"
android:layout_width="@dimen/dimen_50dp"
android:layout_height="@dimen/dimen_50dp"
android:layout_gravity="center"
android:src="@drawable/img_check" />
</LinearLayout>

Strings.xml

<string name="normal_list_view">Normal List View</string>
<string name="customized_list_view">Customized List View</string>

Dimens.xml

<dimen name="dimen_8dp">8dp</dimen>
<dimen name="dimen_16dp">16dp</dimen>
<dimen name="dimen_50dp">50dp</dimen>

And done!

Now when you run the demo, it should look like this:

imagepicker5

imagepicker6

imagepicker8

However, when you develop an Android app, remember to use Android Listview in your mobile app or hire Android app development company to create strategic plan to develop your mobile app.

Grab a free copy of Listview Android example demo from Github.

This page was last edited on June 19th, 2018, at 3:45.
 
 

Want to Develop Android App From Scratch? Contact Us Now

Get your free consultation now