Android adds shadow effect to layout and control

There are two solutions to increase the shadow effect and make the control or layout look three-dimensional.

1. Directly use the code of attribute: android:elevation="4dp" to achieve the effect. Elevation represents the altitude, which is the height of z axis of the layout. Adjust the height, and you can choose the weight of the shadow.

<TextView 
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center"
                android:elevation="4dp"
                android:background="@drawable/home_waitcourse_yellow_shape"
                android:textColor="@color/foorYellow"   
                android:text="report"/>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2. This method needs to write some code, but not many. It is realized by writing an xml.

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

    <!-- shadow -->  
    <!-- More vivid expression: top Represents the height of the shadow below, left Represents the shadow width on the right. In fact, it is the corresponding offset,solid The color in is the color of the shadow. You can also set the angle and so on -->  
    <item  
        android:left="2dp"  
        android:top="2dp"  
        android:right="2dp"  
        android:bottom="2dp">  
        <shape android:shape="rectangle" >  

            <gradient  
                android:angle="270"  
                android:endColor="#0F000000"  
                android:startColor="#0F000000" />  

            <corners  
                android:bottomLeftRadius="6dip"  
                android:bottomRightRadius="6dip"  
                android:topLeftRadius="6dip"  
                android:topRightRadius="6dip" />  
        </shape>  
    </item>  

    <!-- Background -->  
    <!-- Image expression: bottom Represents the height of the background above the shadow at the top edge, right Represents the width of the background beyond the shadow on the left (corresponding to offset) -->  
    <item  
        android:left="3dp"  
        android:top="3dp"  
        android:right="3dp"  
        android:bottom="5dp">  
        <shape android:shape="rectangle" >  

            <gradient  
                android:angle="270"  
                android:endColor="#FFFFFF"  
                android:startColor="#FFFFFF" />  

            <corners  
                android:bottomLeftRadius="6dip"  
                android:bottomRightRadius="6dip"  
                android:topLeftRadius="6dip"  
                android:topRightRadius="6dip" />  
        </shape>  
    </item>  
</layer-list> 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47

Mode 2, refer to blog: 1 
Reference blog: 2 
Reference blog: 3

Tags: Android xml Attribute encoding

Posted on Mon, 20 Apr 2020 09:40:01 -0700 by eddy666