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

dependencies {

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

}

Part 2: Define the XML files

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

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.