How to create ListView with CustomAdapter in Android Studio


Default ListView layout let you display single piece of information while a customised list view layout let you design your own components. All you need is a separate layout file

1

and a adaptor which extends BaseAdpter or ArrayAdapter.

Lets Build a simple Android App with Android studio, which have following layouts. [ our app will display customer balance along with  due days]

activity_main.xml File look like

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.design.widget.CoordinatorLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
tools:context=”.MainActivity”>
<android.support.design.widget.AppBarLayout
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:theme=”@style/AppTheme.AppBarOverlay”>
<android.support.v7.widget.Toolbar
android:id=”@+id/toolbar”
android:layout_width=”match_parent”
android:layout_height=”?attr/actionBarSize”
android:background=”?attr/colorPrimary”
app:popupTheme=”@style/AppTheme.PopupOverlay” />
</android.support.design.widget.AppBarLayout>
<include layout=”@layout/content_main” />
<android.support.design.widget.FloatingActionButton
android:id=”@+id/fab”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_gravity=”bottom|end”
android:layout_margin=”@dimen/fab_margin”
app:srcCompat=”@android:drawable/ic_dialog_email” /></android.support.design.widget.CoordinatorLayout>

content_main.xml

<?xml version=”1.0″ encoding=”utf-8″?>
<android.support.constraint.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
android:layout_width=”match_parent”
android:layout_height=”match_parent”
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
tools:context=”.MainActivity”
tools:showIn=”@layout/activity_main”>
<ListView
android:id=”@+id/customerbalanceList”
android:layout_width=”368dp”
android:layout_height=”495dp”
tools:layout_editor_absoluteX=”8dp”
tools:layout_editor_absoluteY=”8dp” />
</android.support.constraint.ConstraintLayout>

listitems_layout.xml – hold place holder for each row in ListView

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="67dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Customer"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textViewCustomer"
        android:layout_width="199dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text=" "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.088"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="32dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="8dp"
        android:text="Balnce"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textViewBalance"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text=" "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.106"
        app:layout_constraintStart_toEndOf="@+id/textView3"
        app:layout_constraintTop_toBottomOf="@+id/textViewCustomer" />

    <TextView
        android:id="@+id/textView5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:text="Due Days"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3" />

    <TextView
        android:id="@+id/textViewDue"
        android:layout_width="79dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text=" "
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.041"
        app:layout_constraintStart_toEndOf="@+id/textView5"
        app:layout_constraintTop_toBottomOf="@+id/textViewBalance" />
</android.support.constraint.ConstraintLayout>

AdapterClass

Now we need to inherit the Base adopter class and customise as the layout required. The CustomAdapter.Java class look like

package com.example.codehat79.myapplication;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
public class CustomAdapter extends BaseAdapter {
Context context;
LayoutInflater inflter;
String []Cust;
String []Bal;
String []Dues;

public CustomAdapter(Context c,String [] C,String [] B,String [] D)
{
this.context=c;
this.Cust=C;
this.Bal = B;
this.Dues=D;
inflter = (LayoutInflater.from(c));
}
@Override

public int getCount() {
return Cust.length;
}
@Override
public Object getItem(int position) {
return null;
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View view, ViewGroup parent) {
view = inflter.inflate(R.layout.listitems_layout, null);
TextView cname=view.findViewById(R.id.textViewCustomer);
TextView cbal=view.findViewById(R.id.textViewBalance);
TextView cdue=view.findViewById(R.id.textViewDue);
cname.setText(Cust[position]);
cbal.setText(Bal[position]);
cdue.setText(Dues[position]);
return view;
}
}

The GetView() method will fill the data from the collection variable, in addition you can also use Model class to hold data instead of arrays.

mainActivity.java – the heart of the app will look like

package com.example.codehat79.myapplication;import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

//Data as array, you can build custom Model class if you need

String [] customers={“MODERN MEDICALS”,”MEDCO MEDICALS”,”NADANA MEDICALS”};
String [] balances={“1400.00″,”4000.00″,”1000”};
String [] dues={“15 Days”,”140 Days”,”0 Days”};

ListView listView=findViewById(R.id.customerbalanceList);
CustomAdapter customAdapter=new CustomAdapter(getApplicationContext(),customers,balances,dues);
listView.setAdapter(customAdapter);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, “Replace with your own action”, Snackbar.LENGTH_LONG)
.setAction(“Action”, null).show();
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}
}

Grab the source code from GitHub

Watch the Youtube video for futher referrence

1 thought on “How to create ListView with CustomAdapter in Android Studio

  1. Pingback: Create aggregate function using lambda expressions on collectionView in C# | Manoj's Developer Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.