Custom ListView with image, text and add item button

Question

I am quite new to Android and can't achieve this, been searching all day.

Layout I'm trying to create.

I have created the custom xml layout, I have found ways to add items on create, but I need the list to be empty and than when the button is pressed to add from a list.

This is the layout:

<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/info_img_view"
android:layout_width="30dp"
        android:layout_height="30dp" />

    <TextView
        android:id="@+id/info_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center" />

    <TextView
        android:id="@+id/info_time_text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="right"
        />

</TableRow>

I have a ListView in the main activity:

<ListView
            android:id="@+id/list_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

How do I go about this? I would appreciate it if someone can point me to a resource where I can learn what the code is actually doing, not the tutorials I find where I just copy and paste...

Thanks!

Edit, a bit more explanation of what I'm trying to achieve

I have 6 buttons. When a button is pressed it should add a list item with two textviews, and one image out of total three images.

So for instance if Button1 is pressed: Add list item > "Text one" "Text one" "imageTwoOfThree".

Than, if Button2 is pressed: Add list item on top > "Text two" "Text two" "imageTwoOfThree"

And so on... The text is hardcoded.

Answer 1

Here use this: I have created a list with dummydata you can change the text and Image according to you

First create a class Data:

public class Data {

    private String name,price;
    private int imageId;
    public Data(){}

    public Data(String name,String price,int imageId){
        this.name = name;
        this.price = price;
        this.imageId = imageId;
    }

    public String getPrice() {
        return price;
    }

    public void setPrice(String price) {
        this.price = price;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }
}

Then create a ListView Adapter to handle your data:

public class ListViewAdaptor extends RecyclerView.Adapter<ListViewAdaptor.MyViewHolder> {
    private List<Data> mDataList;

    public class MyViewHolder extends RecyclerView.ViewHolder{
        public TextView name,price;
        public ImageView imageView;

        public MyViewHolder(View view){
            super(view);
            name = (TextView) view.findViewById(R.id.name);
            price= (TextView) view.findViewById(R.id.price);
            imageView = (ImageView) view.findViewById(R.id.image);
        }
    }

    public ListViewAdaptor(List<Data> dataList){
        this.mDataList = dataList;
    }


    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_view_item, parent, false);

        return new MyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        Data data = mDataList.get(position);
        holder.name.setText(data.getName());
        holder.price.setText(data.getPrice());
        holder.imageView.setImageResource(data.getImageId());
    }

    @Override
    public int getItemCount() {
        return mDataList.size();
    }
}

layout for your list view items name it list_view_item:

<?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="wrap_content">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:id="@+id/image"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/name"
        android:text="name"
        android:gravity="center"
        android:textSize="26sp"
        android:layout_weight="1"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/price"
        android:text="price"
        android:gravity="center"
        android:textSize="26sp"
        android:layout_weight="1"/>

</LinearLayout>

Then from your activity where you want to add listView add recyclerView in layout:

<android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/recycler_view">

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

Then use this recyclerview like this: //I have called it from my MainActivity you can use it in whatever activity you'll like

public class MainActivity extends AppCompatActivity {


    private RecyclerView mRecyclerView;
    private ListViewAdaptor mAdapter;
    private List<Data> mDataList = new ArrayList<>();

    private static final String TAG = "MainActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view);

        mAdapter = new ListViewAdaptor(mDataList);
        RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
        mRecyclerView.setLayoutManager(mLayoutManager);
        mRecyclerView.setItemAnimator(new DefaultItemAnimator());
        mRecyclerView.setHasFixedSize(true);
        mRecyclerView.setAdapter(mAdapter);
        prepareList();
    }

    public void prepareList(){
       Data data = new Data("Item1","Price1",R.drawable.star);
        mDataList.add(data);
        data = new Data("Item2","Price2",R.drawable.star);
        mDataList.add(data);
        data = new Data("Item3","Price3",R.drawable.star);
        mDataList.add(data);
        data = new Data("Item4","Price4",R.drawable.star);
        mDataList.add(data);
        data = new Data("Item5","Price5",R.drawable.star);
        mDataList.add(data);
    }

}

Hope this helps!!!

Answer 2

You will find lots of online resources for this. But let me put it in a brief way. Assuming you want to store 2 textviews in one single row. 1. For each layout of the row, you will need to make a custom layout xml file and design your layout there.

2. Next, make a class which stores the data and returns the data through getters.

   class Category {
   private String categoryName;
   private String categoryImageURL;
   
   Category (String categoryName, String categoryImageUrl) {
       this.categoryName = categoryName;
       this.categoryImageURL = categoryImageUrl;
   }
   String getCategoryName () {
       return categoryName;
   }
   String getCategoryImageURL () {
       return categoryImageURL;
   }
   }
   

3. Now make a custom arrayadapter which will link the data and the layout. Extend the arrayadapter class with the class you defined above.

   private class categoryArrayAdapter extends ArrayAdapter<Category> {
   private Context context;
   private List<Category> categories;
   
   public categoryArrayAdapter (Context context, int resource, ArrayList<Category> objects) {
       super(context, resource, objects);
   
       this.context = context;
       this.categories = objects;
   }
   
   public View getView (int position, View convertView, ViewGroup parent) {
       Category category = categories.get(position);
   
       LayoutInflater inflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
       View           view     = inflater.inflate(R.layout.category_row_view, null);
   
       TextView  categoryListRowText  = (TextView) view.findViewById(R.id.categoryListRowText);
       TextView  categoryListRowImage    = (TextView) view.findViewById(R.id.categoryListRowImage);
   
       categoryListRowText.setText(category.getCategoryName());
       categoryListRowImage.setText(category.getCategoryImageURL());
   
       return view;
   }
   }
   

4. Finally link the adapter to your listview

   ArrayAdapter<Category> adapter = new categoryArrayAdapter(this, 0, categories);
   categoryListView.setAdapter(adapter);
   

Hope this answered you question.