How to set elevation color below the view in Android?

Question

I am creating below design in Android Studio. But I stuck in how I can add color in elevation as seen in the picture below. A greenish color is shown below each button. I don't know how I can achieve this.

I have even set the

android:outlineSpotShadowColor

and also this

android:outlineAmbientShadowColor

But still, I did not achieve what I was trying to achieve.

This is my XML for the layout in case you need it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".views.CreateActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:elevation="5dp"
        android:background="@drawable/white"
        android:id="@id/rel1">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_back"
            android:id="@+id/backBut"

            />

        <TextView
            android:id="@+id/textView4"

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:fontFamily="@font/roboto_bold"
            android:text="CREATE"
            android:textColor="#000"
            android:textSize="20sp" />


    </RelativeLayout>


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/rel1"
        android:layout_marginTop="20dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp"
        android:id="@+id/createSingleDealBut"
        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_margin="5dp"
            android:weightSum="1"
            >

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:src="@drawable/hourglass"
                    android:scaleType="centerInside"
                    android:layout_margin="20dp"
                    />

            </RelativeLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:layout_marginTop="20dp"
                    android:text="Single Deal"
                    android:textColor="#000"
                    android:textSize="18sp"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:textSize="12sp"
                    android:layout_marginTop="8dp"
                    android:text="Time sensitive exclusive deal expiring live within 24hrs or less"
                    />


            </LinearLayout>
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1"
                >
                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginTop="20dp"
                    android:src="@drawable/arrow"
                    android:layout_centerHorizontal="true"

                    />

            </RelativeLayout>


        </LinearLayout>




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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OR"
        android:layout_below="@id/createSingleDealBut"
        android:layout_marginTop="30dp"
        android:layout_centerHorizontal="true"
        android:textColor="#000"
        android:textSize="20sp"
        android:fontFamily="@font/roboto_medium"
        android:id="@+id/or"
        />


    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/or"
        android:layout_marginTop="20dp"
        android:layout_marginStart="30dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="15dp"
        app:cardElevation="5dp"
        android:id="@+id/createOngoingDealBut"


        >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_margin="5dp"
            android:weightSum="1"
            >

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:src="@drawable/clock"
                    android:scaleType="centerInside"
                    android:layout_margin="15dp"
                    />

            </RelativeLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:layout_marginTop="20dp"
                    android:text="Ongoing Deals List"
                    android:textColor="#000"
                    android:textSize="18sp"
                    />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:fontFamily="@font/roboto_medium"
                    android:textSize="12sp"
                    android:layout_marginTop="8dp"
                    android:text="Ongoing daily/weekly time specific deal specials offered to all customers. Create a Happy Hour deals  menu"
                    />


            </LinearLayout>
            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1"
                >
                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_marginTop="20dp"
                    android:src="@drawable/arrow"
                    android:layout_centerHorizontal="true"

                    />

            </RelativeLayout>


        </LinearLayout>




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

    <include layout="@layout/bottom_navigation" android:id="@+id/navigation" />


</RelativeLayout>

And the preview for the above XML is

Help me to add a greenish color in elevation. Any help will be appreciated. Thanks.

Answer 1

Solution! You can use drawable shape as a background

How below code result looks like

drawable/shape_rounded_background.xml

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


<item>
<shape android:shape="rectangle">
  <corners
    android:bottomLeftRadius="10dp"
    android:bottomRightRadius="10dp"
    android:topLeftRadius="10dp"
    android:topRightRadius="10dp" />
  <solid android:color="#17E208" />
</shape>
</item>
<item android:bottom="6dp">
<shape android:shape="rectangle">
  <corners
    android:bottomLeftRadius="6dp"
    android:bottomRightRadius="6dp"
    android:topLeftRadius="6dp"
    android:topRightRadius="6dp" />
  <solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>

Answer 2

You can do this using cardview. You need to create an extra drawable. Here is the code.

Your listview row:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:gravity="center">

    <android.support.v7.widget.CardView
        android:layout_margin="10dp"
        app:cardCornerRadius="8dp"
        app:cardPreventCornerOverlap="true"
        app:cardBackgroundColor="@color/first_circle"
        android:layout_width="match_parent"
        android:layout_height="150dp">
        <LinearLayout
            android:background="@drawable/rounded_corners"
            android:layout_marginBottom="2dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

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

</LinearLayout>

Now create a Drawable resource file in drawable folder named rounded_corners. Then add these code:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
            <corners android:bottomLeftRadius="8dp"
                android:topLeftRadius="5dp"
                android:bottomRightRadius="8dp"
                android:topRightRadius="5dp"/>
            <solid android:color="#ddd"/>
        </shape>
    </item>
</layer-list>

it should look like this:

Answer 3

Try this

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

    <RelativeLayout
        android:id="@+id/rel1"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@android:color/white"
        android:elevation="5dp">

        <ImageView
            android:id="@+id/backBut"
            android:layout_width="50dp"
            android:layout_height="40dp"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_close" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="CREATE"
            android:textColor="#000"
            android:textSize="20sp" />

    </RelativeLayout>

    <android.support.v7.widget.CardView
        android:id="@+id/createSingleDealBut"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/rel1"
        android:layout_marginStart="30dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="30dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/test"
            android:orientation="horizontal"
            android:weightSum="1">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:layout_margin="20dp"
                    android:scaleType="centerInside"
                    android:src="@drawable/dishu" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:text="Single Deal"
                    android:textColor="#000"
                    android:textSize="18sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="Time sensitive exclusive deal expiring live within 24hrs or less"
                    android:textSize="12sp" />


            </LinearLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="20dp"

                    />

            </RelativeLayout>


        </LinearLayout>


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

    <TextView
        android:id="@+id/or"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/createSingleDealBut"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="OR"
        android:textColor="#000"
        android:textSize="20sp" />


    <android.support.v7.widget.CardView
        android:id="@+id/createOngoingDealBut"
        android:layout_width="match_parent"
        android:layout_height="130dp"
        android:layout_below="@id/or"
        android:layout_marginStart="30dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="30dp"
        app:cardCornerRadius="30dp"
        app:cardElevation="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/test"
            android:orientation="horizontal"
            android:weightSum="1">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.3">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_centerInParent="true"
                    android:layout_margin="15dp"
                    android:scaleType="centerInside" />

            </RelativeLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.6"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="20dp"
                    android:text="Ongoing Deals List"
                    android:textColor="#000"
                    android:textSize="18sp" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="8dp"
                    android:text="Ongoing daily/weekly time specific deal specials offered to all customers. Create a Happy Hour deals  menu"
                    android:textSize="12sp" />

            </LinearLayout>

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="0.1">

                <ImageView
                    android:layout_width="20dp"
                    android:layout_height="20dp"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="20dp"
                    android:src="@drawable/ic_apk_box" />

            </RelativeLayout>

        </LinearLayout>

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

</RelativeLayout>

drawable/test

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="-8dp"
        android:right="-8dp"
        android:top="-8dp">
        <shape>
            <corners
                android:bottomLeftRadius="35dp"
                android:bottomRightRadius="35dp" />
            <stroke
                android:width="4dp"
                android:color="#17E208" />
        </shape>
    </item>
</layer-list>

OUTPUT

Answer 4

You can see this article to achieve your goal.

Summary:

Create a custom layout:

public class RoundLinerLayoutNormal extends LinearLayout {
    public RoundLinerLayoutNormal(Context context) {
        super(context);
        initBackground();
    }

    public RoundLinerLayoutNormal(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initBackground();
    }

    public RoundLinerLayoutNormal(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initBackground();
    }

    private void initBackground() {
        setBackground(ViewUtils.generateBackgroundWithShadow(this,R.color.white,
                R.dimen.radius_corner,R.color.shadowColor,R.dimen.elevation, Gravity.BOTTOM));
    }
}

Then use this:

public class ViewUtils {

    public static Drawable generateBackgroundWithShadow(View view, @ColorRes int backgroundColor,
                                                        @DimenRes int cornerRadius,
                                                        @ColorRes int shadowColor,
                                                        @DimenRes int elevation,
                                                        int shadowGravity) {
        float cornerRadiusValue = view.getContext().getResources().getDimension(cornerRadius);
        int elevationValue = (int) view.getContext().getResources().getDimension(elevation);
        int shadowColorValue = ContextCompat.getColor(view.getContext(),shadowColor);
        int backgroundColorValue = ContextCompat.getColor(view.getContext(),backgroundColor);

        float[] outerRadius = {cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
                cornerRadiusValue, cornerRadiusValue, cornerRadiusValue, cornerRadiusValue,
                cornerRadiusValue};

        Paint backgroundPaint = new Paint();
        backgroundPaint.setStyle(Paint.Style.FILL);
        backgroundPaint.setShadowLayer(cornerRadiusValue, 0, 0, 0);

        Rect shapeDrawablePadding = new Rect();
        shapeDrawablePadding.left = elevationValue;
        shapeDrawablePadding.right = elevationValue;

        int DY;
        switch (shadowGravity) {
            case Gravity.CENTER:
                shapeDrawablePadding.top = elevationValue;
                shapeDrawablePadding.bottom = elevationValue;
                DY = 0;
                break;
            case Gravity.TOP:
                shapeDrawablePadding.top = elevationValue*2;
                shapeDrawablePadding.bottom = elevationValue;
                DY = -1*elevationValue/3;
                break;
            default:
            case Gravity.BOTTOM:
                shapeDrawablePadding.top = elevationValue;
                shapeDrawablePadding.bottom = elevationValue*2;
                DY = elevationValue/3;
                break;
        }

        ShapeDrawable shapeDrawable = new ShapeDrawable();
        shapeDrawable.setPadding(shapeDrawablePadding);

        shapeDrawable.getPaint().setColor(backgroundColorValue);
        shapeDrawable.getPaint().setShadowLayer(cornerRadiusValue/3, 0, DY, shadowColorValue);

        view.setLayerType(LAYER_TYPE_SOFTWARE, shapeDrawable.getPaint());

        shapeDrawable.setShape(new RoundRectShape(outerRadius, null, null));

        LayerDrawable drawable = new LayerDrawable(new Drawable[]{shapeDrawable});
        drawable.setLayerInset(0, elevationValue, elevationValue*2, elevationValue, elevationValue*2);

        return drawable;

    }
}

You can see this article for details.

Answer 5

According to this answer Lollipop's elevation system doesn't support colored shadows.

But it can be achieved using Carbon. It is a Material Design implementation for Android 4.0 and newer. This is not the exact copy of the Lollipop's API and features rather it is a. custom implementation. Do try it out.

An example from the above answer:

<carbon.widget.LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<carbon.widget.Button
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:layout_margin="@dimen/carbon_padding"
    android:background="#ffffff"
    app:carbon_cornerRadius="2dp"
    app:carbon_elevation="8dp"
    app:carbon_elevationShadowColor="@color/carbon_red_700"/>