Tuesday, May 14, 2019

How to custom Shadow effect RelativeLayout Android

How to custom Shadow effect RelativeLayout Android

It's easy to create shadows for the viewport using the custom shape relativeLayout  .
That's the BIG idea that you create a shadow layer as the background and content of the layer above it.
But you also need to replace the layers to create the shadow effect android.

How to custom Shadow effect RelativeLayout Android
Create file xml in drawble name : shape_bg_shadow.xml

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <layer-list>
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
        </layer-list>
    </item>
    <item>
        <layer-list>
            <!-- SHADOW LAYER -->
            <item android:left="4dp" android:top="4dp">
                <shape>
                    <solid android:color="#66000000" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
            <!-- CONTENT LAYER -->
            <item android:bottom="4dp" android:right="4dp">
                <shape>
                    <solid android:color="#ff58bb52" />
                    <corners android:radius="30dip"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>
Create file xml of activity_main.xml
 <RelativeLayout
        android:id="@+id/rl_bg_note"
        android:layout_width="match_parent"
        android:background="@drawable/shadown_bg_effect"
        android:layout_margin="5dp"
        android:padding="10dp"
        android:layout_height="wrap_content">


        <TextView
            android:id="@+id/tv_note"
            android:layout_width="match_parent"
            android:text="@string/app_name"

            android:textColor="@color/color_white"
            android:textSize="25sp"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/tv_date"
            android:layout_below="@+id/tv_note"
            android:text="23/03"
            android:layout_marginTop="5dp"
            android:padding="5dp"
            android:textColor="@color/color_white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/img_pin_none"
            android:layout_below="@+id/tv_note"
            android:src="@drawable/ic_pin_down_server"
            android:padding="5dp"
            android:layout_marginTop="5dp"
            android:contentDescription="@string/app_name"
            android:layout_alignParentRight="true"
            android:textColor="@color/color_white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RelativeLayout>
Success custom effect in android.
custom effect in android

No comments:

Post a Comment