[Android] Try to display the effect on the touched part of the screen, which is common in games.

As the title says, when you touch the screen, it glitters or marks appear. I wanted to do that, so I made a note of what I looked up.

By the way, the iOS version is here * Objective-c

Android seems to use onTouchEvent.

First, create a java class that inherits the Activity class and implement onTouchEvent.

public class TapActivity extends Activity {
  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tap);
    }

 @Override
    public boolean onTouchEvent(MotionEvent event) {
        float pointX = event.getX();
        float pointY = event.getY();

        return super.onTouchEvent(event);
    }
}

Now pointX and pointY will contain the X and Y coordinates of the touch point. After that, if you do it well with this.

For example ...

1.activity_main.xml

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

    android:id="@+id/tapLayout"← Give id

    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="jp.***.***.***.***.TapActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</RelativeLayout>

2.TapActivity.java

public class TapActivity extends Activity {

//Define ViewGroup
    RelativeLayout tapLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

//Substitute RelativeLayout with id given in xml to defined ViewGroup
     tapLayout = (RelativeLayout)findViewById(R.id.tapLayout)
    }

@Override
    public boolean onTouchEvent(MotionEvent event) {
        float pointX = event.getX();
        float pointY = event.getY();

//Get screen dp and prepare image size
        float dp = getResources().getDisplayMetrics().density;
        int imgSize = (int)(50 * dp);

//Set image
        ImageView img = new ImageView(getApplicationContext());
     img.setImageResource(R.drawable.Mark image);

//Set image size in ImageView
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(imgSize, imgSize);
        img.setLayoutParams(params);

//Set the touch point to be in the middle of the image
        img.setX(pointX-imgSize/2);
        img.setY(pointY-imgSize/2);
        img.setScaleType(ImageView.ScaleType.FIT_XY);

//Reduce image to half size
        img.setScaleX(0.5f);
        img.setScaleY(0.5F);

//Draw image
        tapLayout.addView(img);

//0.Animation that becomes transparent while expanding to the original size over 3 seconds
        ViewCompat.animate(img)
                 .setDuration(300)
                 .alpha(0)
                 .scaleX(1)
                 .scaleY(1)
                 .setListener(new ViewPropertyAnimatorListener() {
                     @Override
                     public void onAnimationStart(View view) {

                     }

                     @Override
                     public void onAnimationEnd(View view) {
//Deleted at the end of the animation
                         tapLayout.removeView(img);
                     }

                     @Override
                     public void onAnimationCancel(View view) {

                     }
                 }).start();
               

        return super.onTouchEvent(event);
    }

But with this, when you tap it, the effect comes out and it's not cool. .. .. Moreover, even if you move your finger while tapping the screen, it does not follow. Furthermore, if you want to apply an effect to the screen tap throughout the application, you can not describe this in all activities, so you want to implement each screen with an activity that inherits this.

The following is the fulfillment of all such greed.

1.TapActivity.java

public class TapActivity extends Activity {

//Define ViewGroup
    ViewGroup viewGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

//Prepare a method to receive ViewGroup
    public void setViewGroup(ViewGroup vg){
        viewGroup = vg;
    }


    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float pointX = event.getX();
        float pointY = event.getY();
        float dp = getResources().getDisplayMetrics().density;
        int imgSize = (int)(50 * dp);

//Branch action with switch statement
        switch (event.getAction()){
//When tapping the screen
            case MotionEvent.ACTION_DOWN:

                break;

//When your finger is off the screen
            case MotionEvent.ACTION_UP:
                final ImageView img = new ImageView(getApplicationContext());
                img.setImageResource(R.drawable.Mark image);
                LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(imgSize, imgSize);
                img.setLayoutParams(params);

                img.setX(pointX-imgSize/2);
                img.setY(pointY-imgSize/2);
                img.setScaleType(ImageView.ScaleType.FIT_XY);
                img.setScaleX(0.5f);
                img.setScaleY(0.5F);
                viewGroup.addView(img);
                ViewCompat.animate(img)
                        .setDuration(300)
                        .alpha(0)
                        .scaleX(1)
                        .scaleY(1)
                        .setListener(new ViewPropertyAnimatorListener() {
                            @Override
                            public void onAnimationStart(View view) {

                            }

                            @Override
                            public void onAnimationEnd(View view) {
                                viewGroup.removeView(img);
                            }

                            @Override
                            public void onAnimationCancel(View view) {

                            }
                        }).start();
                break;

//When you move your finger while tapping the screen
            case MotionEvent.ACTION_MOVE:
                final ImageView img2 = new ImageView(getApplicationContext());
                img2.setImageResource(R.drawable.Mark image);
                LinearLayout.LayoutParams params2 = new LinearLayout.LayoutParams(imgSize, imgSize);
                img2.setLayoutParams(params2);

                img2.setX(pointX-imgSize/2);
                img2.setY(pointY-imgSize/2);
                img2.setScaleType(ImageView.ScaleType.FIT_XY);

                viewGroup.addView(img2);

//0.Animation that becomes transparent while shrinking over 3 seconds
                ViewCompat.animate(img2)
                        .setDuration(300)
                        .alpha(0)
                        .scaleX(0.01f)
                        .scaleY(0.01f)
                        .setListener(new ViewPropertyAnimatorListener() {
                            @Override
                            public void onAnimationStart(View view) {

                            }

                            @Override
                            public void onAnimationEnd(View view) {
                                viewGroup.removeView(img2);
                            }

                            @Override
                            public void onAnimationCancel(View view) {

                            }
                        }).start();
                break;
        }


        return super.onTouchEvent(event);
    }
}

2.MainActivity.java

//Inherit TapActivity
public class MainActivity extends TapActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
   
//Pass ViewGroup with id given in xml file
       setViewGroup((RelativeLayout)findViewById(R.id.mainLayout));
    }

}

Now you can tap and move to follow, and even if you inherit it, it will work. By the way, there seems to be no way to get the currently displayed ViewGroup on Android, so it was quite difficult to inherit it and draw the effect. In the end, I took the uncool method of having the caller pass it on onCreate each time. .. ..

If anyone knows any other good way, please give me some advice!

Recommended Posts

[Android] Try to display the effect on the touched part of the screen, which is common in games.
Display the list in setDetails on the screen with spring-security
Changing the debug build signature of the android app to the release signature is useful in many ways.
How to implement one-line display of TextView in Android development
How to display 0 on the left side of the standard input value
How to display products by category on the same list screen
The milliseconds to set in /lib/calendars.properties of Java jre is UTC
Change the conversation depending on which day of the week is today
Trial and error to display national holidays in Android app development. Part 2
Code of the part where server.servlet.session.timeout is set in spring.session.timeout in spring-boot2 system
[Android application development] How to display in full screen (notification bar hidden)
What wasn't fair use in the diversion of Java APIs on Android
Trial and error to display national holidays in Android application development. Part 1
Android development, how to check null in the value of JSON object
Is it possible to put the library (aar) in the Android library (aar) and use it?
Change the save destination of the image to S3 in the Rails app. Part 2
[Introduction to Computer Science Part 1: Let's try machine learning] Let's implement k-means clustering in Java-About the concept of coordinates-
Display text on top of the image
Try using the service on Android Oreo
Sample to display (head-up) notifications on Android
Display an image on the base64 screen
part of the syntax of ruby ​​on rails
How the website is displayed on the screen
Pre-processing to display on the browser (compiler)
[Ruby on Rails] How to make the link destination part of the specified id
Summarize the life cycle of Java objects to be aware of in Android development
Login fails because the redirect URL of the self-login screen is incorrect in spring-security
[Java] Is it unnecessary to check "identity" in the implementation of the equals () method?
The list of installed apps is not displayed in getPackageManager (Android11 ​​/ API level 30)
Is it mainstream not to write the closing tag of <P> tag in Javadoc?
Correspondence of the part where Authentication # getDetails is done in the unit test of spring-security