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>

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.

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.