Show the click effect of the Material style for earlier Android projects.

Show the click effect of the Material style for earlier Android projects.

Every day, it is a happy and unfortunate life that is entangled by different needs, this is not what our dear designers have asked us to implement click effects similar to Material Design on the Android platform of lower versions.

Although we all know that MaterialDesign looks a lot better, it is a hard job to adapt to a lower version.

However, after using the nineoldandroids open-source library, we finally achieved this effect.

First release a Github address, if you can go there to see the source code: https://github.com/Kifile/MaterialView, to Star a better.

Two more images are provided, which are based on TextView and ImageView:

Figure 1 click effect after TextView and ImageView

1. Code Implementation Logic

First, we will analyze the implementation logic of this click effect.

The processing of click effects is divided into two phases:

A. Press your finger:

When the user touches the control, first let the control display a light mask, and then from the finger pressed position, a dark mask gradually expands to the entire control.

B. Finger bounce:

After you release your finger, there are two cases: one is that the dark mask has been extended to the entire control range, and the other is that the dark mask has not completely surrounded the entire control.

In the previous case, we made a simple transparency change so that the mask gradually disappears;

In the latter case, we need to allow the dark mask to quickly spread from the current position to the entire control. At the same time, we also need to change the transparency. It is too abrupt to place the mask.

For specific code implementation logic, see here: onTouchEvent processing in the https://github.com/Kifile/MaterialView/blob/master/materialwidget/src/main/java/com/kifile/materialwidget/MaterialBackgroundDetector.java,MaterialBackgroundDetector.

2. Use the library file to achieve the Material click Effect

Currently, I have deployed this project to the Maven central repository. If you are interested in the deployment logic, read this article (step by step to share the open-source project with the Maven central repository ), therefore, if you are using Android Studio for project development, you can use the following code to integrate the Library:

 

[Ruby]View plaincopy

1. Dependencies {
2. Compile 'com. kifile: MaterialView: 100'
3. }

By introducing the maven project in the gradle. build File, we can now officially use this click effect.

 

A. inherit the control you want to implement. The Code is as follows:

[Html]View plaincopy

1. Public class MaterialImageView extends ImageView {
2. Public MaterialImageView (Context context ){
3. Super (context );
4. Init (null, 0 );
5. }
7. Public MaterialImageView (Context context, AttributeSet attrs ){
8. Super (context, attrs );
9. Init (attrs, 0 );
10. }
12. Public MaterialImageView (Context context, AttributeSet attrs, int defStyle ){
13. Super (context, attrs, defStyle );
14. Init (attrs, defStyle );
15. }
16. }

B. Create a MaterialBackgroundDetector object in the init Method for event delegation:

 

 

[Html]View plaincopy

1. Private MaterialBackgroundDetector mDetector;
3. Private void init (AttributeSet attrs, int defStyle ){
4. Final TypedArray a = getContext (). obtainStyledAttributes (
5. Attrs, com. kifile. materialwidget. R. styleable. MaterialTextView, defStyle, 0 );
6. Int color = a. getColor (com. kifile. materialwidget. R. styleable. MaterialTextView_maskColor, MaterialBackgroundDetector. DEFAULT_COLOR );
7. A. recycle ();
8. MDetector = new MaterialBackgroundDetector (getContext (), this, null, color );
9. }

C. Rewrite the parent class method and delegate the corresponding event to the mDetector object for processing.

 

 

[Html]View plaincopy

1. @ Override
2. Protected void onSizeChanged (int w, int h, int oldw, int oldh ){
3. Super. onSizeChanged (w, h, oldw, oldh );
4. MDetector. onSizeChanged (w, h );
5. }
7. @ Override
8. Public boolean onTouchEvent (MotionEvent event ){
9. Boolean superResult = super. onTouchEvent (event );
10. Return mDetector. onTouchEvent (event, superResult );
11. }
13. @ Override
14. Protected void onDraw (Canvas canvas ){
15. Super. onDraw (canvas );
16. If (isInEditMode ()){
17. Return;
18. }
19. MDetector. draw (canvas );
20. }

D. (optional) process the click event to the mDetector.

 

When we click controls, the android Click Event Processing Mechanism will take effect. If a page Jump exists in your click callback function, you may find that, after you click it, the deep-color mask in the key has not been moved to the entire control, and the entire interface has been redirected. This will cause the Material animation to stop immediately after the jump.

To solve this problem, we need to process click events in the inherited space. We first let the mDetector receive the click request. After the animation is executed, it is then distributed to the control for click processing.

Therefore, you need to implement the following code:

1) In the init method, change null to this to enable the control to implement the Callback interface.

 

[Html]View plaincopy

1. MDetector = new MaterialBackgroundDetector (getContext (), this, this, color );

2) rewrite the following method:

 

 

[Html]View plaincopy

1. @ Override
2. Public boolean initialize mclick (){
3. Return mDetector. handlew.mclick ();
4. }
6. @ Override
7. Public boolean initialize mlongclick (){
8. Return mDetector. handlew.mlongclick ();
9. }
11. @ Override
12. Public void initialize mclickafteranimation (){
13. Super. initialize mclick ();
14. }
16. @ Override
17. Public void initialize mlongclickafteranimation (){
18. Super. initialize mlongclick ();
19. }

So far, you have successfully completed the implementation of the entire interface effect. Congratulations!

 

3. Obfuscation

In fact, many times we may involve obfuscation of code. In order to avoid application failure caused by code processing by obfuscation tools, add the following code to the configuration file:

 

[Html]View plaincopy

1. -Keep class com. kifile. materialwidget. MaterialBackgroundDetector {
2. Public void setRadius (...);
3. Public void setAlpha (...);
4. }

 

Basically, the entire code usage process is here. Thank you for reading it. If you think it is helpful to yourself, please try again.

 

Other brilliant articles

 

JQuery tutorial (10)-DOM tree operation content setter and getter Methods android Study Notes (37) Use DatePickerDialog and TimePickerDialogandroid Study Notes (36) create a custom dialog box using AlertDialog jQuery tutorial (1)-operations on DOM attributes Spring mvc beginner's Guide (11)-Other methods of returning json strings