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
