Material Card with Cardslib library

Question

I am implementing the new Material Card design from Cardslib library from Github. Library Link : Cardslib Github But I am unable to implement multiple cards inside Recycler view. It would be really helpful if anyone has already implemented the new Cardslib v2 library.

The problem is that, the cards are coming but those does not have the background image and action buttons.

The Card layout that I am trying to implement is :

Here is the code for RecyclerView

<it.gmariotti.cardslib.library.recyclerview.view.CardRecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp"
        card:list_card_layout_resourceID="@layout/native_recyclerview_card_layout"
        android:id="@+id/card_recyclerview"/>

Here is the code for the Activity

public class AboutActivity extends ActionBarActivity {


    final int TOTAL_CARDS = 3;
    //private CardArrayAdapter
    private CardArrayRecyclerViewAdapter mCardArrayAdapter;
    private CardRecyclerView mRecyclerView;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.about_activity);
        ArrayList<Card> cards = new ArrayList<>();

        mCardArrayAdapter = new CardArrayRecyclerViewAdapter(this, cards);

        //Staggered grid view
        CardRecyclerView mRecyclerView = (CardRecyclerView) findViewById(R.id.card_recyclerview);
        mRecyclerView.setHasFixedSize(false);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

        //Set the empty view
        if (mRecyclerView != null) {
            mRecyclerView.setAdapter(mCardArrayAdapter);
        }

        //Load cards
        new LoaderAsyncTask().execute();
    }

    private ArrayList<Card> initCard() {

        ArrayList<Card> cards = new ArrayList<Card>();

        for (int i = 0; i < TOTAL_CARDS; i++) {


            MaterialLargeImageCard card = new MaterialLargeImageCard(this);
            //card.setInnerLayout(R.layout.native_material_largeimage_text_card);
            card.setTextOverImage("Italian Beaches");
            card.setDrawableIdCardThumbnail(R.drawable.card_background_01);

            //Set the title and subtitle in the card
            card.setTitle("This is my favorite local beach");
            card.setSubTitle("A wonderful place");

            // Set supplemental actions
            TextSupplementalAction t1 = new TextSupplementalAction(this, R.id.action1);
            t1.setOnActionClickListener(new BaseSupplementalAction.OnActionClickListener() {
                @Override
                public void onClick(Card card, View view) {
                    Toast.makeText(AboutActivity.this, " Click on Text SHARE ", Toast.LENGTH_SHORT).show();
                }
            });
            card.addSupplementalAction(t1);

            //Set the layout for supplemental actions
            card.setLayout_supplemental_actions_id(R.layout.about_card_supplemental_actions);

            //Very important call: build the card
            card.build();
            cards.add(card);

        }

        return cards;
    }

    private void updateAdapter(ArrayList<Card> cards) {
        if (cards != null) {
            mCardArrayAdapter.addAll(cards);
        }
    }

    class LoaderAsyncTask extends AsyncTask<Void, Void, ArrayList<Card>> {

        LoaderAsyncTask() {
        }

        @Override
        protected ArrayList<Card> doInBackground(Void... params) {
            //elaborate images
            //SystemClock.sleep(1000); //delay to simulate download, don't use it in a real app

            ArrayList<Card> cards = initCard();
            return cards;

        }

        @Override
        protected void onPostExecute(ArrayList<Card> cards) {
            //Update the adapter
            updateAdapter(cards);
            //displayList();
        }
    }
}

UPDATE :

material_card.xml :

<it.gmariotti.cardslib.library.view.CardViewNative
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card="http://schemas.android.com/apk/res-auto"
    android:id="@+id/list_cardId"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/native_recyclerview_card.base"
    card:card_layout_resourceID="@layout/native_material_largeimage_text_card"/>

In layout xml :

<it.gmariotti.cardslib.library.recyclerview.view.CardRecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/myCardList"
        card:list_card_layout_resourceID="@layout/material_card" />

Inside For loop :

ArrayList<BaseSupplementalAction> actions = new ArrayList<BaseSupplementalAction>();

            // Set supplemental actions
            TextSupplementalAction t1 = new TextSupplementalAction(this, R.id.action1);
            t1.setOnActionClickListener(new BaseSupplementalAction.OnActionClickListener() {
                @Override
                public void onClick(Card card, View view) {
                    Toast.makeText(AboutActivity.this," Click on Text SHARE "+card.getTitle(),Toast.LENGTH_SHORT).show();
                }
            });
            actions.add(t1);



            //Create a Card, set the title over the image and set the thumbnail
            MaterialLargeImageCard card =
                    MaterialLargeImageCard.with(this)
                            .setTextOverImage("Italian Beaches "+i)
                            .setTitle("This is my favorite local beach "+i)
                            .setSubTitle("A wonderful place")
                            .useDrawableId(R.drawable.card_background_01)
                            .setupSupplementalActions(R.layout.about_card_supplemental_actions, actions)
                            .build();

            card.setOnClickListener(new Card.OnCardClickListener() {
                @Override
                public void onClick(Card card, View view) {
                    Toast.makeText(AboutActivity.this," Click on ActionArea ",Toast.LENGTH_SHORT).show();
                }
            });

            card.build(); 
            cards.add(card);

UPDATE 2

After doing some experiments I am thinking that this might be the culprit

<it.gmariotti.cardslib.library.recyclerview.view.CardRecyclerView
        android:id="@+id/myCardList"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingTop="10dp"
        card:list_card_layout_resourceID="@layout/material_card" />

Here even if I rename material_card to something else it compiles just fine. I think "card:list_card_layout_resourceID="@layout/material_card"" is somehow not getting triggered.

UPDATE 3

Finally solved it. The problem was in xml declaration. By mistake I copied it wrong. xmlns:card="http://schemas.android.com/apk/res-auto" is correct one

Thanks a lot for the help @Gabriele. This library just rocks :)

Answer 1

You can find an example here:

https://github.com/gabrielemariotti/cardslib/blob/dev/demo/stock/src/main/java/it/gmariotti/cardslib/demo/fragment/nativeview/NativeRecyclerViewMaterialCardFragment.java

Your issue is the layout. Your RecyclerView use this card layout: card:list_card_layout_resourceID="@layout/native_recyclerview_card_layout"

You should use a card layout with the material_card_layout.

Example (the layout used in the example above): https://github.com/gabrielemariotti/cardslib/blob/dev/demo/stock/src/main/res/layout/native_recyclerview_material_card_layout.xml

Also I suggest you using the builder instead of the standard constructor for your card.

Pay attention. There is a bug that I am investigating: https://github.com/gabrielemariotti/cardslib/issues/361