What is the accurate way to customize cards with cardslib?

Question

I have a card declared in the file cardslib_item_card_view:

<it.gmariotti.cardslib.library.view.CardViewNative     
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card="http://schemas.android.com/apk/res-auto"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  card_view:cardCornerRadius="4dp"
  style="@style/native_recyclerview_card.base"
  android:id="@+id/carddemo"
  android:layout_width="match_parent" android:layout_height="wrap_content">

and set as content view within onCreate() method:

public class CardMariotti extends ActionBarActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.cardslib_item_card_view);
        //Create a Card
        Card card = new Card(this);
        CardViewNative cardView = (CardViewNative) this.findViewById(R.id.carddemo);
        cardView.setCard(card);

        card.setOnClickListener(new Card.OnCardClickListener() {
            @Override
            public void onClick(Card card, View view) {
                Toast.makeText(CardMariotti.this, "Clickable card", Toast.LENGTH_LONG).show();
            }
        });
}

Now, I'd like to customize it with my own layout, containing a narrow header and some information, as follows:

<RelativeLayout  android:id="@+id/cardlayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:background="?android:selectableItemBackground"    
    android:clickable="true">

    <!-- layout containing 3 TextView -->
</RelativeLayout> 

What is the canonic procedure for such a process? I've tried a good deal of adjustments, i.e.:

• creating a second xml file called cardslib_item_layout.xml and referencing it with the Card's constructor this way: Card card = new Card(this, R.layout.cardslib_item_layout); and then setting the setContentView(R.layout.cardslib_item_card_view)
• Appending the layout inside the card and then setting the setContentView(R.layout.cardslib_item_card_view).

This way; cardslib_item_card_view:

<it.gmariotti.cardslib.library.view.CardViewNative     
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:card="http://schemas.android.com/apk/res-auto" 
      xmlns:card_view="http://schemas.android.com/apk/res-auto"
      card_view:cardCornerRadius="4dp"
      android:id="@+id/carddemo"
      android:layout_width="match_parent" android:layout_height="wrap_content">

      <RelativeLayout>
          <!-- my layout containing a header and some TextViews -->
      </RelativeLayout>
</it.gmariotti.cardslib.library.view.CardViewNative>

In both tests I experience the following issues:

• The overall result is completely distorced
• most importantly, the RelativeLayout is placed ON TOP of the card, making any operation on the card impossible (for example, setting the Card.OnCardClickListener on the card itself won't work since the user will be clicking the RelativeLayout and not the card itself)

attempt 1: attempt 2:

What is the canonic procedure?

EDIT2: ANSWER

The contribution given by @Msk worked fine for me, although I discovered later that with some minor changes it is also possible to obtain the same results by using the original cardslib's Card class, without resorting to the creation of a new class DeviceCard extending the Card class.

I was able to adjust my layout (header and the rest of the card's layout overlapping with each other, as shown in the screenshots) with just some minor and trivial changes in the cardslib_item_layout.xml file (which I had overlooked before); at the same time I was able to eliminate the phantom padding that is automatically attached to every card, by applying Mariotti's answer to this question.

Answer 1

Try this
You can define your own layout for the cards-lib.

Create your custom XML:

Here is an example custom_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="8dp"
    android:paddingRight="6dp"
    android:paddingTop="7dp"
    android:paddingBottom="7dp"
    android:id="@+id/parentView">


    <TextView
        android:id="@+id/name"
        android:layout_height="wrap_content"
        android:layout_width="0dp"
        android:layout_weight="27"
        android:paddingRight="8dp"
        android:paddingLeft="8dp"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:text=""
        android:layout_gravity="center"
        android:editable="false"
       />

</LinearLayout>

In your JAVA code create a class for the custom card that you wish to use:

    import it.gmariotti.cardslib.library.internal.Card;
    import it.gmariotti.cardslib.library.internal.ViewToClickToExpand;

public class DeviceCard extends Card {

        private String IP;
        private String MAC;
        private String name;
        private Boolean reachable;
        private Boolean editable;
        Boolean markedFlag;

        public DeviceCard(Context context) {
            this(context, R.layout.custom_layout);
        }

        public DeviceCard(Context context,String param1,...,Type paramn) {

            this(context, R.layout.device_card);
            this.name = param1;
        }



        public DeviceCard(Context context, int innerLayout) {
            super(context, innerLayout);
            init();
            Log.d("myTag", "Init called");
        }


        private void init(){


        }

        @Override
        public void setupInnerViewElements(ViewGroup parent, final View view)          {
            Log.i("myTag","setupInnerView");

            final TextView nameBox = (TextView)view.findViewById(R.id.name);
          //edit name if required

        }
    }

Now in your JAVA code, when you need to use the card-list:

DeviceCard card = new DeviceCard(this, name);

This method has always worked for me