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.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Intermediate: How to extract the data from Image using Huawei HiAI Text Recognition service in…

Android RecyclerView Part 2 — Creating RecyclerView with multiple view-types

Why Our App Got Removed from the Google Play Store & How We Fixed It

How to fetch ip address in android studio pragramatically

https://www.coinbase.com/price/sushiswap?utm_source=share&utm_platform=Android

Android Notifications#2: Adding Actions and Modifying Properties

Android Architecture: Hilt, MVVM, Kotlin Coroutines, Live Data, Room and Retrofit (ft.

Realtime Firestore Pagination on Android with MVVM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Golap Gunjan Barman

Golap Gunjan Barman

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

More from Medium

MVP Architecture with Example in Android

Getting started on Android App Development

Find the basic Android and HMS questions in Quiz Android app (Kotlin) — Part 2

Android 13: Notification Runtime Permission