Build on your open source control shadowLayer 3.0 for more than shadows

Source: This project was made open source last year (2019.07.07). The initial design direction was based on control shadows. With a year and a half of growth, ShadowLayer 3.0 is more than shadows. What is more than shadow, in fact, is added to the system shape function. When we do projects, especially big projects, and we’re iterating and optimizing after a month or two, some of the shapes and selectors that we’re going to reuse don’t remember the exact names, so it takes time to find them. There is no control, directly through a few simple properties, shape system function. Free your hands and clear the project Drawable folder. So here it comes, ShadowLayout. Current STAR (1.3K)

I. Features and functions

When nested, you can enjoy shadows, which is much better, more convenient, and more powerful than CardView

Support customized shadow: 1. Modify the shadow color value at will 2. Shadow fillet: you can set the fillet uniformly or set the fillet individually 3. 5. Hide shadow: Hide a side or side of the shadow, or completely hide more than the shadow; Shape: Shape, Selector, and Ripple are all available in the project. Free your hands and clear the project drawable folder 1. Shape: pressed, selected, ripple 2. Background color Settings 3. Stroke border Settings 4. Gradient background color value 6. After binding textView, it can be accompanied by text changes and text color changes. 5. Whether the button is clickableCopy the code

Second, ShadowLayout dynamic

• ShadowLayout3.1.3 updated content and previous growth
• Note: a large number of API and specification names have been modified after 3.0. If you are still using 2.0, you can check shadowLayer 2.0 documents if it is not convenient to transfer

3. Effect display

The resolution of the screenshot is blurred for smooth recording. Scan the QR code below to download and see the effect of the real machine

3.1 Function Display (1.0)

Basic Function Display	Display of each attribute	You can change the color

3.2 function Update (2.0)

2.1.6 Added shape and selector functions	2.1.7 Comparison of isSym Attributes	2.1.8 Change the size of a Rounded Corner separately

3.3 Version Coming (3.0.1)

Stroke borders and clicks	Shape and image selector	Use a combination of

3.4. Added ripple (3.1.0) and gradient, and 3.1.1 Binding textView

3.1.0 Gradient and ripple	3.1.1 binding textView

Fourth, the Demo

Scan the QR code to download the demo. The download password is 123456

Add dependencies

• Add project build.gradle as follows

  allprojects {
   	repositories {
   		maven { url 'https://jitpack.io'}}}Copy the code

• Add app build.gradle as follows

  dependencies {
          implementation 'com. Making. Lihangleo2: ShadowLayout: 3.1.3'
  }
  Copy the code

Six, basic use

6.1. Simple use of shadows

            <com.lihang.ShadowLayout
                android:id="@+id/mShadowLayout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                app:hl_cornerRadius="10dp"
                app:hl_shadowColor="#2a000000"
                app:hl_shadowLimit="5dp"
                >

                <TextView
                    android:id="@+id/txt_test"
                    android:layout_width="wrap_content"
                    android:layout_height="36dp"
                    android:gravity="center"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:text="Round"
                    android:textColor="# 000" />
            </com.lihang.ShadowLayout>
Copy the code

6.2 simple use of stroke borders

            <com.lihang.ShadowLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                app:hl_cornerRadius="10dp"
                app:hl_strokeColor="# 000">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="36dp"
                    android:gravity="center"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:text="Rounded border"
                    android:textColor="# 000" />
            </com.lihang.ShadowLayout>
Copy the code

6.3. Simple use of Shape Selector

            <com.lihang.ShadowLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                app:hl_cornerRadius="30dp"
                app:hl_cornerRadius_leftTop="0dp"
                app:hl_layoutBackground="#F76C6C"
                app:hl_layoutBackground_true="#89F76C6C"
                app:hl_shapeMode="pressed">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="36dp"
                    android:gravity="center"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:text="Selector pressed, please click"
                    android:textColor="#fff" />
            </com.lihang.ShadowLayout>
Copy the code

6.4. Simple use of image selector

    <com.lihang.ShadowLayout
        android:id="@+id/ShadowLayout_shape"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        app:hl_cornerRadius="18dp"
        app:hl_cornerRadius_rightTop="0dp"
        app:hl_layoutBackground="@mipmap/test_background_false"
        app:hl_layoutBackground_true="@mipmap/test_background_true">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="36dp"
            android:gravity="center"
            android:paddingLeft="10dp"
            android:paddingRight="10dp"
            android:text="Image selector"
            android:textColor="#fff" />

    </com.lihang.ShadowLayout>
Copy the code

If it bothers you, you can do this

            <com.lihang.ShadowLayout
                android:id="@+id/ShadowLayout_image"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                app:hl_layoutBackground="@mipmap/game_6_right"
                app:hl_layoutBackground_true="@mipmap/game_6_wrong"
                app:hl_shapeMode="pressed" />
Copy the code

6.5. Simple use of gradient color

            <com.lihang.ShadowLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:hl_cornerRadius="18dp"
                app:hl_startColor="#ff0000"
                app:hl_endColor="#0000ff"
                >

                <TextView
                    android:layout_width="160dp"
                    android:layout_height="40dp"
                    android:gravity="center"
                    android:text="Gradient"
                    android:textColor="#fff" />

            </com.lihang.ShadowLayout>
Copy the code

6.6 Use of ripple

            <com.lihang.ShadowLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:hl_cornerRadius="18dp"
                app:hl_shadowColor="#2a000000"
                app:hl_shadowLimit="7dp"
                app:hl_layoutBackground="#fff"
                app:hl_layoutBackground_true="#ff0000"
                app:hl_shapeMode="ripple"
                >

                <TextView
                    android:layout_width="160dp"
                    android:layout_height="40dp"
                    android:gravity="center"
                    android:text="Water ripple"
                    />

            </com.lihang.ShadowLayout>
Copy the code

6.7 Bind textView with text and color changes

		<com.lihang.ShadowLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="20dp"
                    app:hl_bindTextView="@+id/txt_press"
                    app:hl_cornerRadius="18dp"
                    app:hl_layoutBackground="#FF9800"
                    app:hl_layoutBackground_true="#ff0000"
                    app:hl_shapeMode="pressed"
                    app:hl_textColor_true="#fff"
                    app:hl_text="Click on me, Press style"
                    app:hl_text_true="I changed the copy."
                    >

                    <TextView
                        android:id="@+id/txt_press"
                        android:layout_width="wrap_content"
                        android:layout_height="36dp"
                        android:gravity="center"
                        android:paddingLeft="10dp"
                        android:paddingRight="10dp"
                        android:text="Click on me, Press style"
                        android:textColor="# 000" />

                </com.lihang.ShadowLayout>
Copy the code

7. Attributes

7.1. About shadows

name	format	description
hl_shadowHidden	boolean	Whether to hide shadows (default false)
hl_shadowColor	color	The shadow color value, if not transparent, defaults to 16% transparent
hl_shadowLimit	dimension	Degree of Shadow diffusion (DP)
hl_shadowOffsetX	dimension	The offset of the x axis (DP)
hl_shadowOffsetY	dimension	Y offset (dp)
hl_shadowHiddenLeft	boolean	The shadow on the left is invisible, as are the other three edges
hl_shadowSymmetry	boolean	Control area symmetry (default true) according to this figure

7.2. About rounded corners

7.3. Shape

7.3.1 About Shape style and background color

7.3.2 About stroke borders

7.3.3 on asymptotic discoloration

7.3.4. About Binding textView

7.4. About Clickable

8. Method Table

Ix. Other works

RichEditTextCopyToutiao

mPro

SmartLoadingView

X. Address of the project

ShadowLayout

My official account

I plan to publish two columns recently. One is dedicated to recording interview information, and the other is dedicated to recording interview questions. In fact, the public can also take notes to record.