Add a image in Listview Android

Question

I am creating a student details application in android.I need to display student's photo at the top and display name,roll number,address etc as a table.I added a imageview at the top and listview just below the image view.Can i add the image inside the list view ( Now image is not scrollable ).

activity.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/def"
        android:layout_centerHorizontal="true"
        android:layout_gravity="center_horizontal"/>

    <ListView
        android:id="@id/list"
        android:layout_above="@+id/ad_view"
        android:layout_width="fill_parent"
        android:layout_height="match_parent" >
    </ListView>

</LinearLayout>

Activity.java

        list = (ListView) findViewById(R.id.list);
ArrayList<HashMap<String, String>> productsList;
productsList = new ArrayList<HashMap<String, String>>();


/*
adding data from database to productsList

*/



    ListAdapter adapter =
            new SimpleAdapter(this, productsList, R.layout.full, new String[]{"left", "right"},
                    new int[]{R.id.left, R.id.right});

    list.setAdapter(adapter);

full.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:background="@drawable/background_border"
    android:padding="15dp"
    >
<TextView
    android:id="@+id/left"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="cnsdsdsf:"
    android:layout_weight="1"
    android:gravity="center"
    />
    <TextView
    android:id="@+id/right"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="TextView"
    android:layout_weight="1"
    android:gravity="center"
    />
</LinearLayout>

Answer 1

You can also modify your item list layout file (full.xml) and create a custom listview adapter. This method will give you more freedom in terms of design. You can play around with this full.xml

full.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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="64dp"
    android:paddingRight="32dp"
    android:paddingTop="4dp"
    android:paddingBottom="4dp"
    tools:background="#ffaa00">

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/studentPicture"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:src="@drawable/student_picture"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/left"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/studentPicture"
    android:layout_toEndOf="@+id/studentPicture"
    android:textColor="#ffffffff"
    android:textSize="20sp"
    android:paddingLeft="10dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/right"
    android:layout_centerVertical="true"
    android:layout_toRightOf="@+id/left"
    android:layout_toEndOf="@+id/left"
    android:textColor="#ffffffff"
    android:textSize="20sp"
    android:paddingLeft="10dp" />
</RelativeLayout>

Then you create a adapter that will use this list item layout file:

StudentsAdapter.java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class StudentsAdapter extends BaseAdapter{

    private Context mContext;
    private String[] mNames;
    private String[] mOtherInfo;

    public StudentsAdapter (Context context, String[] mNames, String[] mOtherInfo) {
        mContext = context;
        mNames = students;
        mOtherInfo = mOtherInfo;
    }

    @Override
    public int getCount() {
        return mNames.length;
    }

    @Override
    public Object getItem(int position) {
        return mNames[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;

        if (convertView == null) {
            //brand new
            convertView = LayoutInflater.from(mContext).inflate(R.layout.full, null);
            holder = new ViewHolder();
            holder.studentImageView = (ImageView) convertView.findViewById(R.id.studentPicture);
            holder.left= (TextView) convertView.findViewById(R.id.left);
            holder.right= (TextView) convertView.findViewById(R.id.right);

            convertView.setTag(holder);
        }
        else {
            holder = (ViewHolder) convertView.getTag();
        }

        //here you set the picture, name, etc.
        holder.studentImageView.setImageResource(/* your method to find specific image view */);
        holder.left.setText(mNames[position]);
        holder.right.setText(mOtherInfo[position]);

        return convertView;
    }

    private static class ViewHolder {
        ImageView studentImageView;
        TextView left;
        TextView right;
    }
}

Your activity.xml

<?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="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin">

<ListView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@android:id/list"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@android:id/empty"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:text="No data to display"
    android:textColor="#ffffffff"/>
</RelativeLayout>

And now implement this adapter in your Activity.java

import android.app.Activity;
import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.TextView;

import java.util.Arrays;

public class Activity extends Activity {

    //you will need to set this data
    private String[] mNames;
    private String[] mOtherInfo;

    ListView mListView;
    TextView mEmptyTextView;

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

        mListView = (ListView) findViewById(android.R.id.list);
        mEmptyTextView = (TextView) findViewById(android.R.id.empty);

        DayAdapter adapter = new DayAdapter(this, mNames, mOtherInfo);
        mListView.setAdapter(adapter);
        mListView.setEmptyView(mEmptyTextView);
    }
}

Answer 2

You can treat the top row or any other row as special for the image. in getView() inflate with separate layout for that image according to position.

Answer 3

you can use ImageView imageView = new ImageView(this); listView.addHeaderView(imageView); to add a imageView on the head of listview