How to preserved the CardView (wrap by LinearLayout) elevation, without using margin or cardUseCompatPadding?

Question

I have the following xml layout that has two card views

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.elye.myapplication.MainActivity">

    <include layout="@layout/card_layout"
        android:layout_margin="16dp"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"/>

    <LinearLayout
        android:layout_margin="16dp"
        android:layout_height="wrap_content"
        android:layout_width="match_parent">
        <include layout="@layout/card_layout"/>
    </LinearLayout>

</LinearLayout>

The card view is as simple as

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_new_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="10dp">

        <TextView
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:text="MY TEXT"
            android:layout_width="wrap_content" />

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

My image as below. This is not good as the elevation of the second card is missing.

As I wanted the elevation in my second card view as well, so I add android:layout_margin="10dp" for my cardView as below. Note the 10dp to make this clearer that the size of both cardview now differs.

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_new_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:clickable="true"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="10dp">

        <TextView
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:text="MY TEXT"
            android:layout_width="wrap_content" />

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

Now the view look like below. Which is not good. My second card shrink.

So now I remove the android:layout_margin="10dp" with card_view:cardUseCompatPadding="true". And the view as below.

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_new_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardUseCompatPadding="true"
    android:clickable="true"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="10dp">

        <TextView
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:paddingTop="16dp"
            android:paddingBottom="16dp"
            android:text="MY TEXT"
            android:layout_width="wrap_content" />

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

This now have the elevation on both and consistent is size. But then it had an extreme in huge gap between the two cardview, which is not good for me. I want my original gap... as per the picture at the bottom.

Ideally I wanted something look like below, together with the second cardView is still wrap by something (in this case a LinearLayout). The margin, and cardUseCompatPadding is not solving my problem.

So my question is, how to preserved the CardView (wrap by LinearLayout) elevation, without using margin or cardUseCompatPadding, and still look the same as CardView by purely include only. (i.e. the first cardview of my diagram)

P/S: Don't ask me to remove the LinearLayout, as it is used as illustration. I need that wrapper for other reason (i.e. dynamic change the view within)

Answer 1

Try this, this will help you.

This is your first code, I have added width and height for 2nd include tag.

 <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context="com.example.elye.myapplication.MainActivity">

            <include
                layout="@layout/card_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_margin="16dp" />

            <LinearLayout
                android:id="@+id/card_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <!--<include-->
                <!--layout="@layout/card_layout"-->
                <!--android:layout_width="match_parent"-->
                <!--android:layout_height="wrap_content"-->
                <!--android:layout_margin="16dp" />-->
            </LinearLayout>

        </LinearLayout>

and cardview layout

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

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_new_search"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clickable="true"
    card_view:cardCornerRadius="2dp"
    card_view:cardElevation="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:paddingBottom="16dp"
        android:paddingTop="16dp"
        android:text="MY TEXT" />

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

Activity.java

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer);
        try {
            LinearLayout linearLayout = (LinearLayout)findViewById(R.id.card_layout);
            final LayoutInflater factory = getLayoutInflater();
            View view = factory.inflate(R.layout.card_layout, null);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            int x = (int) getResources().getDimension(R.dimen.margin_16);
            params.setMargins(x, x, x, x);
            view.setLayoutParams(params);
            linearLayout.addView(view);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

In res/values/dimens.xml add following line

 <dimen name="margin_16">16dp</dimen>