How to create a layout with different types of cards?

Question

I'm trying to develop an application which will show stats. The data will be from multiple APIs and is returned as a JSONArray. I'm confused on, Should I create separate recyclerview (s) for each card, since the data is from different list/models OR shall I create one recyclerview/one adapter? What is the best way to achieve a layout which is given below. Kindly help me with a working code. I'm new to this. :

I thinkg this could help you: https://stackoverflow.com/a/26245463/4158832 — ali73, Oct 09 '19 at 06:10
Use scroll view, in the image all the views are different , recyclerview is used to re-use the views where number of view is dynamically changing — Rahul Mishra, Oct 06 '20 at 08:05

score 2 · Accepted Answer · answered Oct 09 '19 at 06:31

Recyclerview is used to display large number of similar items dynamically.

You have few cards with different view.

Best way to achieve this use Scroll view->Linear Layout -> Card View.

As mentioned by Md. Asaduzzaman

Visit https://stackoverflow.com/a/58298078/9186263

Jakir Hossain · Answer 2 · 2019-10-09T06:26:15.837

In your adapter class Override getItemViewType like the following.

@Override
    public int getItemViewType(int position) {

        if (position % 3 == 0) {
            return 1;
        } else if (position % 2 == 0) {
            return 2;
        } else {
            return 3;
        }
    }

And oncreateViewHolder method return view according to its view type. like below

@Override
    public CustomViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        switch (viewType) {
            case 1:
                View viewONE = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_one, parent, false);
                CustomViewHolder rowONE = new CustomViewHolder(viewONE);
                return rowONE;

            case 2:
                View viewTWO = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_two, parent, false);
                CustomViewHolder rowTWO = new CustomViewHolder(viewTWO);
                return rowTWO;

            case 3:
                View viewTHREE = LayoutInflater.from(parent.getContext()).inflate(R.layout.category_template_three, parent, false);
                CustomViewHolder rowTHREE = new CustomViewHolder(viewTHREE);
                return rowTHREE;

        }
        return null;
    }

See this for complete example.

score 1 · Answer 3 · answered Oct 09 '19 at 06:20

Why do you want to use RecyclerView for this simple view. RecyclerView is used to show list of data. You simply use ScrollView as parent and CardView for each child.

<ScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <!-- CardView -->
        <!-- CardView -->
        <!-- CardView -->
        <!-- CardView -->
    </LinearLayout>
</ScrollView>

score 1 · Answer 4 · answered Oct 09 '19 at 06:27

There are two things, firstly if you know the total count of items you need to display then don't use the RecyclerView, it would be more complex for you handle it because every child has different layout in your case. Secondly if the total count is not fixed, then for that check the follow link. https://www.journaldev.com/12372/android-recyclerview-example

score 1 · Answer 5 · answered Oct 09 '19 at 08:12

RecyclerView works great if you want to recycle views. It means to re-use pieces of views. But in your case, if the items are way too different between themselves, there is absolutely no point of doing so.

One approach, would be to have a hierarchy like suggested in other answers:

ScrollView:
A view group that enables you to organize the cards as you need
Your Cards.

You can use FlexBoxLayout as a container for your Cards, if you want some of them side-by-side. As FlexBox are really worth knowing and are quite flexible. If this is not the case, you can go with the good old LinearLayout as suggested by Md. Asaduzzaman.

How to create a layout with different types of cards?

5 Answers5