Create your own Cards

V3

Due to the big refactoring made in MaterialList V3, there are a few changes that you should take into account. This is a complete guide about how to create your own custom Card.

In the example, the card will be named MyCard, and will consist on a single TextView.

Layout

You first need to define your custom layout in an xml file.

The root element of the card must be com.dexafree.materialList.card.CardLayout, with orientation:vertical. Then, you can add the CardView and design your cards however you want.

Important note

The CardView should have the id cardView in order for MaterialList to be able to change its background.

It should look like this:

<?xml version="1.0" encoding="utf-8"?>
<com.dexafree.materialList.card.CardLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cardView"
        android:layout_margin="2dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="2dp">
        
        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/my_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />
            
        </LinearLayout>

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

</com.dexafree.materialList.card.CardLayout>

Code

After defining your custom layout, its time to create your Card.

One of the main differences between v3 and v2 is that now you don't create a Card extension, you create a CardProvider. In this example, it will be named MyCardProvider.

Let's see how it's done:

Extend CardProvider

Your Provider must extend CardProvider<MyCardProvider>. The <> part is necessary for the Builder pattern.

Implement the getLayout() method

You must implement the int getLayout() method, that must return your R.layout.my_card_layout.

Create your Builder setters

All the setter methods you crate should return the Provider instance. That way, you will be able to chain them while creating your cards thanks to the native Builder pattern implemented.

Also, you should call notifyDataSetChanged() in order to trigger the Observable notifications.

The setText method of your Provider should look like that:

public MyCardProvider setText(String text){
    this.text = text;
    notifyDataSetChanged();
    return this;
}

Implement the render method

The only remaining part is to implement the render(final View view, final Card card) method. In this method, you will get the inflated view, and you will be able to fill any UI content you need.

In our example, it should look like this:

@Override
public void render(@NonNull View view, @NonNull Card card) {
    super.render(view, card);

    TextView textView = (TextView)view.findViewById(R.id.my_text);
    textView.setText(text);
}

And that's all. You have created your own card!

Using it

Now, in order to use it and add it to your MaterialList, you only need to do the following:

Card card = new Card.Builder(this)
                .setTag("MY_CARD")
                .withProvider(MyCardProvider.class)
                .setText("MY TEXT")
                .endConfig()
                .build();

Pre-made Providers

There are a couple of providers that are already made, so you don't have to start from scratch. Check them here:

• IN PROGRESS
• IN PROGRESS

---

V2 (deprecated)

The base Card class

By default, Card (which all Card classes inherit from) includes:

• String title
• String description
• Bitmap bitmap
• int layout

It also will convert Drawables and resourceIds to Bitmaps if assigned.

Feel free to add any extra elements you'll need.

How to create new cards

In order to provide an extensible library, in order to create your own Cards you'll need to do 3 things:

1. Declare your Card class
2. Declare your ItemView Class
3. Declare your Layout

Card class

The first thing you'll need to do is declaring your Card class (a class which will extend SimpleCard), and override its getLayout() method:

public class CustomCard extends SimpleCard {
    @Override
    public int getLayout(){
        return R.layout.my_custom_layout;
    }
}

If you need more things like a callback, a String for extra textviews... you should declare it here.

Also, if you wanted this kind of card always to be dismissable (or not), you could override the canDismiss() method and make it return whatever you want.

ItemView class

After having your CustomCard class, you'll need to define a class which will render its content. In order to be consistent with the system (and being able to attach it to the MaterialAdapter), you'll need to extend GridItemView and provide a configureView(CustomCard card). Here you have an example of how to implement it:

public class CustomCardItemView extends CardItemView<CustomCard> {

    TextView mTitle;
    TextView mDescription;

    // Default constructors
    public CustomCardItemView(Context context) {
        super(context);
    }

    public CustomCardItemView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomCardItemView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void build(CustomCard card) {
        setTitle(card.getTitle());
        setDescription(card.getDescription());
    }

    public void setTitle(String title){
        mTitle = (TextView)findViewById(R.id.titleTextView);
        mTitle.setText(title);
    }

    public void setDescription(String description){
        mDescription = (TextView)findViewById(R.id.descriptionTextView);
        mDescription.setText(description);
    }
}

Layout

Finally you'll have to declare your own layout (feel free to take a look at the layouts provided in order to look for inspiration or taking a starting point). The most important thing is that you must provide a CustomCardItemView element as the root of the view:

<?xml version="1.0" encoding="utf-8"?>

<your_package.CustomCardItemView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    style="@style/MainLayout">

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cardView"
        style="@style/MainCardView"
        card_view:cardCornerRadius="@dimen/card_corner_radius">

        <!--YOUR UI ELEMENTS.-->

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

</your_package.CustomCardItemView>

After that, you'll be able to use your new custom card just by creating it, setting its content and inserting it in a CardList.