How to return to the previous screen by Swipe operation

Introduction

Long time no see. This time I would like to explain about SwipeBack. The default browser on the iPhone has this feature, but Android does not. On Android, it is normal to press the "back button" at the bottom left to return to the previous screen, but it is implemented in apps such as Gunosy and SmartNews. Since I am creating an information system application, when I actually implemented it, I felt that it would be more convenient to swipe back, so I wrote an article. I will post the URL of what it actually looks like, so if you don't know, please check it out. https://media.giphy.com/media/3dcKwpfcH50vAITwWy/giphy.gif

At first

Open build.gradle (Module: app) in Gradle Scripts and open

build.gradle



//Upper part omitted

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    //noinspection GradleCompatible
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'

//Add here
    implementation 'com.r0adkll:slidableactivity:2.0.6'


    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

Please add this part. If you do not add this first, you will not be able to use the ** Slider Interface ** that you will use later, so be sure to add it. I understand the basics! !! If you are interested, please check from STEP3.

STEP1 Place a button in MainActivity

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/openActivity2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="Onclick"
        android:text="Open Activity 2"
        tools:ignore="OnClick" />
</LinearLayout>

image.png LinearLayout is a Layout that is arranged in a horizontal row or a vertical row. Button places the button.

STEP2 Create another Activity

Create another Activity. Name it activity_one.xml.

activity_one.xml


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".ActivityOne">
    <ImageView
        android:src="@drawable/another_activity_img"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</RelativeLayout>

ImageView arranges the image for you. In this case, the red image you made yourself will be displayed. image.png

I'm ready. Let's go next.

STEP3 Editing MainActivity and ActivityOne

Enable the button in MainActivity.

ActivityMain.java


import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btn = findViewById(R.id.openActivity2);
        btn.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        Intent intent = new Intent(MainActivity.this, ActivityOne.class);
        startActivity(intent);
    }
}

By enabling ** OnClick **, the screen will transition to Activity One. Very simply, you can use ** Intent ** to move from the current screen to a different screen. If you are not sure about Intent processing, please refer to here.

https://techacademy.jp/magazine/2719

Next is the editing of Activity One.

ActivityOne.java


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class ActivityOne extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
    }
}

Now you have a simple screen transition.

Here is the explanation. In "Introduction" implementation 'com.r0adkll:slidableactivity:2.0.6' By adding, you can use a class called SliderInterface. I will describe it in ActivityOne.

ActivityOne.java


import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Slide;
import android.view.View;

import com.r0adkll.slidr.Slidr;
import com.r0adkll.slidr.model.SlidrInterface;


public class ActivityOne extends AppCompatActivity {
//Add here
    private SlidrInterface slidr;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_one);
//Add here
        slidr = Slidr.attach(this);
    }
}

STEP4 Edit styles.xml and manifests.xml

styles.xml


<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
//Add from here
    <style name="AppTheme.SlidrActivityTheme" parent="AppTheme">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
    </style>
</resources>

Finally, edit manifests.xml and you're done.

manimests.xml


<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".ActivityOne"
            android:theme="@style/AppTheme.SlidrActivityTheme"/> 

    </application>

Add the theme SliderActivityTheme created earlier to **. ActivityOne ** and you're done.

slidr = Slidr.attach(this);

I couldn't explain this part well. If anyone knows, please comment. Later, I would like to publish the source to github.

The site URL that I referred to this time https://www.youtube.com/watch?v=h-74bLrng2M

It was easy to understand because it was made by following the procedure with a video.

Recommended Posts

How to return to the previous screen by Swipe operation
How to move to the details screen by clicking the image
I want to return to the previous screen with kotlin and java!
How to display products by category on the same list screen
How to pass the value to another screen
[Rails] How to decide the destination by "rails routes"
How to remove the underline displayed by Rails link_to
[Android Studio] [Java] How to fix the screen vertically
9 Corresponds to the return value
How to use Ruby return
How to transition from the [Swift5] app to the iPhone settings screen
How to dynamically change the column name acquired by MyBatis
How to connect the strings in the List separated by commas
Git How to easily return to the state before the change (before commit)
[Rails] How to display the list of posts by category
How to use the link_to method
How to use the include? method
How to use the form_with method
How to find the average angle
[Rails] How to prevent screen transition
How to use the wrapper class
How to make a splash screen
How to return Rails API mode to Rails
How to add the delete function
[Rails 5] How to display the password change screen when using devise
How to return a value from Model to Controller using the [Swift5] protocol
[Ruby] How to prevent errors when nil is included in the operation
How to make the schema of the URL generated by Rails URL helper https
How to prevent duplicate processing by addEventListener
[Java] How to use the File class
How to delete the wrong migration file
[Java] How to use the hasNext function
How to put out the error bundling
[Java] How to use the HashMap class
How to delete the migration file NO FILE
[Rails] How to use the map method
[Java] How to use the toString () method
Studying how to use the constructor (java)
[Processing × Java] How to use the loop
How to determine the number of parallels
How to output Java string to console screen
[Java] How to set the Date time to 00:00:00
[Java] How to get the current directory
[Swift] How to implement the countdown function
How to change the timezone on Ubuntu
How the website is displayed on the screen
Ransack sort_link How to change the color!
[Processing × Java] How to use the class
How to sort the List of SelectItem
How to install the legacy version [Java]
How to find the tens and ones
How to get the date in java
[Swift5] How to implement standby screen using'PKHUD'
[Swift5] How to create a splash screen
[Processing × Java] How to use the function
[Java] How to use the Calendar class
Summarized how to climb the programming stairs
[Rails] How to read the XML file uploaded from the screen with Hash type
[Rails6] How to connect the posting function generated by Scaffold with the user function generated by devise
How to display the amount of disk used by Docker container for each container
[swift5] How to transition from the app to an external site by specifying the URL