ListViewDemo with image

Here we are going to create ListView with Images.
First we have to create Project named as ListViewDemo
1. Create a new Project, ListViewDemo
2. Open the activity_main.xml
3. We have add the ListView in it.
activity.main.xml
<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"
    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.listviewdemo.MainActivity" >

    <TextView
        android:id="@+id/textYear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_car"
        android:textSize="20sp"
        android:textStyle="bold" />

    <ListView
        android:id="@+id/carsListView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/textYear"
        android:layout_below="@+id/textYear" >

    </ListView>

</RelativeLayout>

4. We have to create a class where we want the objects to be displayed. Here I'm taking an example to show the Cars with details making, year, icon and condition
5. Create a class Car.java
package com.example.listviewdemo;

public class Car {
    private String make;
    private int year;
    private int iconId;
    private String condition;   
   
    public Car(String make, int year, int iconId, String condition) {
        super();
        this.make = make;
        this.year = year;
        this.iconId = iconId;
        this.condition = condition;
    }
    public String getMake() {
        return make;
    }
    public int getYear() {
        return year;
    }
    public int getIconId() {
        return iconId;
    }
    public String getCondition() {
        return condition;
    }
   
}
6. Now we have to create a view to display the list item
7. Create a xml item_view.xml
<ImageView
        android:id="@+id/item_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:maxHeight="80dp"
        android:maxWidth="80dp"
        android:src="@drawable/audi" />
<TextView
        android:id="@+id/item_textMake"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/item_textYear"
        android:layout_alignParentTop="true"
        android:text="Make Shown Here"
        android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
        android:id="@+id/item_textYear"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/item_icon"
        android:layout_toRightOf="@+id/item_icon"
        android:text="2000"
        android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
        android:id="@+id/item_textCondition"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/item_icon"
        android:layout_alignParentRight="true"
        android:text="Condition Shown Here"
        android:textAppearance="?android:attr/textAppearanceMedium" />

8. Now we have to create a list in MainActivity.java class and call all the list item to show the cars
9. MainActivity.java
package com.example.listviewdemo;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends ActionBarActivity {
    private List<Car> myCars = new ArrayList<Car>();

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

        populateCarList();
        populateListView();
        registerClickCallBack();
    }
    private void populateCarList() {
        // TODO Auto-generated method stub
        myCars.add(new Car("Audi", 1950, R.drawable.audi, "needing work"));
        myCars.add(new Car("Farari", 2005, R.drawable.black_farari, "nice color"));
        myCars.add(new Car("BMW", 2010, R.drawable.bmw, "latest BMW"));
        myCars.add(new Car("Chervolet", 2012, R.drawable.chervolet, "my favorite"));
        myCars.add(new Car("Italia", 2014, R.drawable.italia, "latest car"));   
    }
    private void populateListView() {
        ArrayAdapter<Car> adapter = new MyListAdapter();
        ListView list = (ListView) findViewById(R.id.carsListView);
        list.setAdapter(adapter);           
    }

    private void registerClickCallBack() {
        ListView list = (ListView)findViewById(R.id.carsListView);
        list.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View viewClicked,
                    int position, long id) {

                Car clickedCar = myCars.get(position);
                String message = "You clicked position " + position
                        + " which is car make " + clickedCar.getMake();
                Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();
            }

        });

    }
    private class MyListAdapter extends ArrayAdapter<Car> {

        public MyListAdapter() {
            super(getApplicationContext(), R.layout.item_view, myCars);

        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            // Make sure we have the View to work with (may have been given null)
            View itemView = convertView;
            if(itemView == null){
                itemView = getLayoutInflater().inflate(R.layout.item_view, parent, false);
            }
            //Find the car to work with
            Car currentCar = myCars.get(position);

            //Fill the View
            ImageView imageVeiw = (ImageView)itemView.findViewById(R.id.item_icon);
            imageVeiw.setImageResource(currentCar.getIconId());

            //Make:
            TextView makeText = (TextView)itemView.findViewById(R.id.item_textMake);
            makeText.setText(currentCar.getMake());

            //Year:
            TextView yearText = (TextView)itemView.findViewById(R.id.item_textYear);
            yearText.setText(" " + currentCar.getYear());

            //Condition:
            TextView conditionText = (TextView)itemView.findViewById(R.id.item_textCondition);
            conditionText.setText(currentCar.getCondition());

            return itemView;
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.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();
        if (id == R.id.action_settings) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Read more...