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 codeIf 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
| name | format | description |
|---|---|---|
| hl_cornerRadius | dimension | Including Shadow fillet, Shape fillet (DP) |
| hl_cornerRadius_leftTop | dimension | The top left corner is rounded, and the other corners are still hl_cornerRadius. And the same thing with the other 3 angles. |
7.3. Shape
7.3.1 About Shape style and background color
| name | format | description |
|---|---|---|
| hl_shapeMode | enum | There are three modes: Pressed and Selected. As with system Shape, and Ripple click the water ripple |
| hl_layoutBackground | reference/color | Background color, displayed when false: can be color value, image, and system Shape |
| hl_layoutBackground_true | reference/color | Background color, displayed when true: can be color value, image, and system Shape |
7.3.2 About stroke borders
| name | format | description |
|---|---|---|
| hl_strokeWith | dimension | Stroke Border line width |
| hl_strokeColor | color | Border color value, displayed as false |
| hl_strokeColor_true | color | Border color value, displayed as true |
7.3.3 on asymptotic discoloration
| name | format | description |
|---|---|---|
| hl_startColor | color | Gradient start color (hl_layoutBackground property is disabled when gradient is set) |
| hl_centerColor | color | Gradient middle color (optional) |
| hl_endColor | color | End color of gradient |
| hl_angle | integer | Gradient Angle (default 0) |
7.3.4. About Binding textView
| name | format | description |
|---|---|---|
| hl_bindTextView | reference | The ID of the current textView to bind |
| hl_textColor | color | Shape to false is the color of the text displayed |
| hl_textColor_true | color | Shape to true is the text color to display |
| hl_text | string | Copy displayed when Shape is false |
| hl_text_true | string | The copy displayed when Shape is true |
7.4. About Clickable
| name | format | description |
|---|---|---|
| clickable | boolean | Set ShadowLayout to be clickable. Code sets: mShadowLayout setClickable (false); (Default true) |
| hl_layoutBackground_clickFalse | reference/color | When Clickable is false, the image or color to display. (This property should work when app:hl_shapeMode=”pressed”) |
8. Method Table
| name | format | description |
|---|---|---|
| setShadowHidden() | boolean | Whether to hide shadows |
| setShadowColor() | color | Sets the shadow color value |
| setShadowLimit() | dimension | Set the shadow spread area |
| setOffsetX() | dimension | Sets the X-axis offset of the shadow |
| setOffsetY() | dimension | Sets the Y offset of the shadow |
| setShadowHiddenTop() | boolean | Hide the upper shadow (same as the other three times) |
| setCornerRadius() | dimension | Set the rounded corners |
| setLayoutBackground() | color | Set the background color value to false |
| setLayoutBackgroundTrue() | color | Sets the background color value when true |
| setStrokeColor() | color | Sets the border color for false |
| setStrokeColorTrue() | color | Sets the border color for true |
| setClickable() | boolean | Set ShadowLayout to clickable |
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.
