Friday, 6 January 2017

Custom ListView in Android



Step 1 : Add nodata.png in drawable




Step 2 : Create activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout 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:background="@android:color/white"     android:paddingBottom="@dimen/activity_vertical_margin"     android:paddingLeft="@dimen/activity_horizontal_margin"     android:paddingRight="@dimen/activity_horizontal_margin"     android:paddingTop="@dimen/activity_vertical_margin"     tools:context="com.example.admin.customlistview.MainActivity">     <ListView         android:id="@+id/list"         android:layout_width="match_parent"         android:layout_height="match_parent" />     <ImageView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:visibility="gone"         android:id="@+id/im1"         android:src="@drawable/nodata"         android:gravity="center_horizontal|center_vertical|center"         android:layout_centerVertical="true"         android:layout_centerHorizontal="true" />
</RelativeLayout>

Step 3 : Create custom_list.xml

<?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent">     <TableRow>         <ImageView             android:id="@+id/img"             android:layout_width="60dp"             android:layout_height="60dp"             android:layout_marginBottom="7dp"             android:layout_marginLeft="10dp"             android:layout_marginStart="10dp"             android:layout_marginTop="7dp" />         <TextView             android:id="@+id/txt"             android:layout_width="wrap_content"             android:layout_height="60dp"             android:layout_marginLeft="20dp"             android:layout_marginTop="5dp"             android:gravity="center_vertical"             android:textSize="20dp" />     </TableRow> </TableLayout>

Step 4 : Create CustomList.java 

package com.example.admin.customlistview;

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomList extends ArrayAdapter<String> {

    private final Activity context;
    private final String[] web;
    private final Integer[] imageId;

    public CustomList(Activity context,
                      String[] web, Integer[] imageId) {
        super(context, R.layout.custom_list, web);
        this.context = context;
        this.web = web;
        this.imageId = imageId;

    }

    @Override
    public View getView(int position, View view, ViewGroup parent) {
        LayoutInflater inflater = context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.custom_list, null, true);
        TextView txtTitle = (TextView) rowView.findViewById(R.id.txt);

        ImageView imageView = (ImageView) rowView.findViewById(R.id.img);
        txtTitle.setText(web[position]);

        imageView.setImageResource(imageId[position]);
        return rowView;
    }
}


Step 5 : Create MainActivity.java

package com.example.admin.customlistview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;

public class MainActivity extends AppCompatActivity {

    ListView list;
    String[] mydata = {"Miraj Jungi", "Hemang Jungi", "Nenu Jungi"};
    Integer[] imgname = {R.drawable.name, R.drawable.name, R.drawable.name};
    CustomList adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        list = (ListView) findViewById(R.id.list);
        
        // Code to display nodata image if there is no data
        ImageView im1 = (ImageView) findViewById(R.id.im1);
        if (mydata.length < 1) {

            im1.setVisibility(View.VISIBLE);
        } else {
            im1.setVisibility(View.INVISIBLE);
        }

        // endsssssssssssssssssssssssssssssssssss

        adapter = new CustomList(MainActivity.this, mydata, imgname);
        list = (ListView) findViewById(R.id.list);
        list.setAdapter(adapter);

    }
}

Step 6 : Add background color of activity_main.xml to white so nodata image and background can match  

android:background="@android:color/white"
STEP 7 : Run the app



No comments:

Post a Comment