How to create Custom Swipe Button in Android | Android Studio | Java

In this tutorial, we will see how to create a custom swipe button in android. It allows the user to make an appropriate action without significantly having to confirm his/her intentions because it is hard to swipe the button by accident (But please remember: It is not impossible. So take care!). So you have a much more intuitive, and simpler UX.

Part 1: Add the dependency

Add the dependency in the build.gradle App file

dependencies {

implementation ‘com.ebanx:swipe-button:0.4.0’

}

Part 2: Define the XML files

Our swipe button has a circle moving part and a rounded background. So let’s make those parts:

the circle, shape_button.xml

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

<shape xmlns:android=”http://schemas.android.com/apk/res/android">

<solid

android:color=”#FFFFFF”>

</solid>

<corners

android:radius=”200dp”>

</corners>

</shape>

the background, shape_background.xml

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

<shape xmlns:android=”http://schemas.android.com/apk/res/android">

<solid

android:color=”#C1E6F6">

</solid>

<corners

android:radius=”200dp”>

</corners>

</shape>

The radius can be any number that is very, you can use your radius so the borders are a semi-circle. You can use different colors if you prefer.

Now, in the main XML file define the swipe button and add custom attributes in the swipe button.

activty_main.xml

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

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android"

xmlns:tools=”http://schemas.android.com/tools"

android:layout_width=”match_parent”

android:layout_height=”match_parent”

xmlns:app=”http://schemas.android.com/apk/res-auto"

android:background=”@color/black”

tools:context=”.MainActivity”>

<TextView

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:fontFamily=”@font/oswald_bold”

android:gravity=”center”

android:text=”SW\nIPE”

android:textSize=”250sp”

android:textColor=”#121212"

android:layout_marginTop=”-45dp”/>

<LinearLayout

android:orientation=”vertical”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:gravity=”center_vertical”>

<com.ebanx.swipebtn.SwipeButton

android:id=”@+id/swipe_btn”

android:layout_width=”match_parent”

android:layout_height=”wrap_content”

android:layout_marginStart=”40dp”

android:layout_marginEnd=”40dp”

app:button_bottom_padding=”20dp”

app:button_image_disabled=”@drawable/adjust”

app:button_image_enabled=”@drawable/check”

app:button_left_padding=”20dp”

app:button_right_padding=”20dp”

app:button_top_padding=”20dp”

app:inner_text=”Swipe Left”

app:button_background=”@drawable/shape_button”

app:inner_text_background=”@drawable/shape_background”

app:inner_text_bottom_padding=”16dp”

app:inner_text_color=”#000"

app:inner_text_size=”18sp”

app:inner_text_top_padding=”16dp” />

</LinearLayout>

</RelativeLayout>

here, app:button_image_disabled=”@drawable/adjust” is the initial image when we do not apply swipe in the button, and app:button_image_enabled=”@drawable/check” is the final image when we apply the swipe in the button. See the below figure.

Part 3: Define the Swipe button in the main Java file

now define the swipe button in the main java file, use setOnStateChangeListener in the swipe button to change the state.

SwipeButton swipeButton = (SwipeButton)findViewById(R.id.swipe_btn);

swipeButton.setOnStateChangeListener(new OnStateChangeListener() {

@Override

public void onStateChange(boolean active) {

Intent intent = new Intent(MainActivity.this,NextActivity.class);

startActivity(intent);

}

});

MainActivity.java

package com.codewithgolap.swipebutton;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.os.Bundle;

import com.ebanx.swipebtn.OnStateChangeListener;

import com.ebanx.swipebtn.SwipeButton;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

SwipeButton swipeButton = (SwipeButton)findViewById(R.id.swipe_btn);

swipeButton.setOnStateChangeListener(new OnStateChangeListener() {

@Override

public void onStateChange(boolean active) {

Intent intent = new Intent(MainActivity.this,NextActivity.class);

startActivity(intent);

}

});

}

}

Part 4: Output of the Custom Swipe Button

Hi everyone, myself Golap an Android app developer with UI/UX designer.