Clever Geek Handbook

Android height - same values ​​of different shadow

I am facing strange error while setting elevations on items in recycler view. I have two types of elements in the adapter, at first it is a kind of complex layout dashboard with three maps. The second is a classic data list item, where each item has a cardview as root. each map view in both layouts is defined as follows

First element type:

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

    <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="4dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="8dp"
            app:cardCornerRadius="2dp"
            app:cardElevation="3dp"
            >

        ....

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

    ....

</LinearLayout>

Second type of element:

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginBottom="8dp"
        app:cardCornerRadius="2dp"
        app:cardElevation="3dp"
        >

    ....

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

As you can see, both maps have the same height set, but when I unfold this layout they have different shadows, any idea what could be causing this?

I cut out a portion of the screen and placed the cuts next to each other so you can see the problem ... enter image description here

EDIT

The layout for the first element is quite complex, but all three kinds of cards in this type have the same shadow (the one on the left in the image above). The second type of root map has a shadow that appears on the right side of the image.

default_elevation = 3dp 
default_corner_radius = 2dp
margins are 16dp, 8dp, 4dp etc ...

First element type:

<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_and_half"
            android:layout_marginLeft="@dimen/default_padding"/>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_quarter"
            android:layout_marginLeft="@dimen/margin_half"
            android:layout_marginRight="@dimen/margin_half"
            android:layout_marginBottom="@dimen/margin_half"
            app:cardCornerRadius="@dimen/default_corner_radius"
            app:cardElevation="@dimen/default_elevation"
            >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingLeft="@dimen/default_padding"
                android:paddingRight="@dimen/default_padding"
                android:paddingTop="@dimen/margin_and_half"
                android:paddingBottom="@dimen/margin_and_half"
                android:gravity="center_vertical">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="bottom"
                    android:orientation="horizontal">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/black"
                        android:textSize="48sp"

                        />

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/black"
                        android:textSize="24sp"/>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="@dimen/default_padding"
                    android:gravity="center">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingRight="@dimen/margin_half"
                        android:textColor="@color/green"
                        />

                    <ImageView
                        android:layout_width="@dimen/default_size"
                        android:layout_height="@dimen/default_size"/>

                </LinearLayout>

            </LinearLayout>

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/default_padding"
            android:layout_marginLeft="@dimen/default_padding"
            android:layout_marginBottom="@dimen/margin_quarter"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"/>

            <TextView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/margin_quarter"/>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/margin_half"
            android:paddingRight="@dimen/margin_half"
            android:paddingBottom="@dimen/margin_default"
            android:clipChildren="false"
            android:clipToPadding="false"
            android:orientation="horizontal">

            <android.support.v7.widget.CardView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"
                android:layout_marginRight="@dimen/margin_quarter"
                app:cardCornerRadius="@dimen/default_corner_radius"
                app:cardElevation="@dimen/default_elevation">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="@dimen/margin_double"
                        android:paddingBottom="@dimen/margin_double"
                        android:layout_centerInParent="true"/>

                </RelativeLayout>

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

            <android.support.v7.widget.CardView
                android:layout_width="0dp"
                android:layout_weight="0.5"
                android:layout_height="wrap_content"
                app:cardCornerRadius="@dimen/default_corner_radius"
                app:cardElevation="@dimen/default_elevation">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:paddingTop="@dimen/margin_double"
                        android:paddingBottom="@dimen/margin_double"
                        android:layout_centerInParent="true"/>

                </RelativeLayout>

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

        </LinearLayout>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margin_half"
            android:layout_marginLeft="@dimen/default_padding"
            android:layout_marginBottom="@dimen/margin_quarter"/>

    </LinearLayout>

</layout>

Second type of element:

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.CardView
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:layout_marginLeft="@dimen/margin_half"
        android:layout_marginRight="@dimen/margin_half"
        android:layout_marginBottom="@dimen/margin_half"
        app:cardCornerRadius="@dimen/default_corner_radius"
        app:cardElevation="@dimen/default_elevation"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="@dimen/default_padding">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="@dimen/margin_quarter"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textview1"
                    android:layout_width="0dp"
                    android:layout_weight="1"
                    android:layout_height="wrap_content"/>

                <TextView
                    android:id="@+id/textview2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"/>

            </LinearLayout>

            <TextView
                android:id="@+id/textview3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="@color/black"
                android:textAppearance="..(Too Long)"/>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</layout>
+3


source to share


1 answer


There was the same problem, after some further research wanted to leave this here:

It seems to me that the height is more focused on giving a sense of depth than just "just" casting a shadow. So depending on where your image is on the screen, the lighting is different, and the shadow is different, and the shadow is dependent on the outline of the view.

I recommend the following blog post regarding this issue: https://blog.usejournal.com/playing-with-elevation-in-android-91af4f3be596



Also very helpful is the height indicator app mentioned in the blog post: https://play.google.com/store/apps/details?id=me.seebrock3r.elevationtester&rdid=me.seebrock3r.elevationtester

But in conclusion, I have not yet been able to create a height-based shadow that is consistent for each view regardless of position on the screen :(

0


source






More articles:


All Articles