I want to create listeview like the image below

Question

I want a listview like the image so that i can have an image that is the entire item and has a button on it

i think you should use cards and recyclerview. Checkout my project where i used them https://github.com/codephillip/Fit-Racer — Phillip Kigenyi, Jul 27 '16 at 14:11
You need to create a custom adapter for that ListView. Here you can see some code for that : http://stackoverflow.com/a/8166802/5519005 — Lubomir Babev, Jul 27 '16 at 13:48

score 2 · Accepted Answer · answered Jul 27 '16 at 14:02

The images that you want to be in your listview i.e. the items in the listview are nothing but a layout. you can design your own layout for that in which you can put the image and button as you like.

You need to implement your own Adapter for this in which you can create each new item in the listview with its own defined Image Path and the Button text or the TextView text.

You can define separate images and text for each item in the listview by using your own adapter.

For Example:

ArrayAdapter:

public class UsersAdapter extends ArrayAdapter<User> {
    public UsersAdapter(Context context, ArrayList<User> users) {
       super(context, 0, users);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
       // Get the data item for this position
       User user = getItem(position);    
       // Check if an existing view is being reused, otherwise inflate the view
       if (convertView == null) {
          convertView = LayoutInflater.from(getContext()).inflate(R.layout.item_user, parent, false);
       }
       // Lookup view for data population
       TextView tvName = (TextView) convertView.findViewById(R.id.tvName);
       TextView tvHome = (TextView) convertView.findViewById(R.id.tvHome);
       // Populate the data into the template view using the data object
       tvName.setText(user.name);
       tvHome.setText(user.hometown);
       // Return the completed view to render on screen
       return convertView;
   }
}

User class:

public class User {
    public String name;
    public String hometown;

    public User(String name, String hometown) {
       this.name = name;
       this.hometown = hometown;
    }
}

For more info : https://github.com/codepath/android_guides/wiki/Using-an-ArrayAdapter-with-ListView

Phillip Kigenyi · Answer 2 · 2016-07-27T14:35:23.793

Use cardview and recyclerview

Create a cardAdapter

CardAdapter.class

public class CardAdapter extends RecyclerView.Adapter<CardAdapter.ViewHolder> {
    private static Context context;
    View cardview;
    Cursor dataCursor;
    public static class ViewHolder extends RecyclerView.ViewHolder {
        public View view;
        public TextView title;
        public ImageView imageView;
        public ViewHolder(View v) {
            super(v);
            view = v;
            title = (TextView) v.findViewById(R.id.topic);
            imageView = (ImageView) v.findViewById(R.id.image);

            v.setOnClickListener(new View.OnClickListener() {

                @Override
                public void onClick(View v) {
                    Log.d("RECYCLER", "CLICK");

                }
            });
        }
    }
    public CardAdapter(Context context, Cursor cursor) {
        CardAdapter.context = context;
        dataCursor = cursor;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        cardview = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.cardview, parent, false);
        return new ViewHolder(cardview);
    }

    public Cursor swapCursor(Cursor cursor) {
        if (dataCursor == cursor) {
            return null;
        }
        Cursor oldCursor = dataCursor;
        this.dataCursor = cursor;
        if (cursor != null) {
            this.notifyDataSetChanged();
        }
        return oldCursor;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        dataCursor.moveToPosition(position);

      //handle database queries using the dataCursor
    }
    @Override
    public int getItemCount() {
        //replace 8 with 0 when you pass a cursor into the recycler in DemosFragment
        return (dataCursor == null) ? 8 : dataCursor.getCount();
    }
}

Design the card layout

cardview.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginLeft="@dimen/card_margin"
    android:layout_marginRight="@dimen/card_margin"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:clickable="true"
    android:orientation="vertical"
    android:foreground="?attr/selectableItemBackground">
    <LinearLayout android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:orientation="vertical">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_weight="2"
            android:layout_height= "0dp">

            <ImageView
                android:id="@+id/image"
                android:scaleType="centerCrop"
                android:src="@drawable/nav_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"/>

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="New Button"
                android:id="@+id/button"
                android:layout_gravity="right|center_vertical" />

        </FrameLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="left"
                android:layout_marginBottom="@dimen/activity_vertical_margin"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:layout_marginLeft="@dimen/card_text_margin"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/topic"
                    android:text="@string/topic"/>
            </LinearLayout>
    </LinearLayout>

</android.support.v7.widget.CardView>

Add a fragment/activity

DemosFragment

public class DemosFragment extends Fragment {
    private RecyclerView recyclerView;
    CardAdapter adapter;

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View rootView = inflater.inflate(R.layout.Demos_layout, container, false);
        recyclerView = (RecyclerView) rootView.findViewById(R.id.recycler_view_record);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(getContext()));
        adapter = new CardAdapter(getActivity(), null);
        recyclerView.setAdapter(adapter);
        return rootView;
    }
}

Finally don't forget the imports

 compile 'com.android.support:design:23.1.1'

 compile 'com.android.support:cardview-v7:23.1.1'

 compile 'com.android.support:recyclerview-v7:23.1.1'

A full sample of my project with the concept

I want to create listeview like the image below

2 Answers2