Swipe-Button

Library of an android button activated by swipe.

• Easy to use.
• Makes your app look great
• Better UX in sensitive button

Installation

On your module's build.gradle.kts (Module :app) file add this implementation statement to the dependencies section:

dependencies {
  implementation("com.github.subhajit-rajak:swipe-button:1.1.0")
}

Also make sure to add the jitpack dependency in the settings.build.gradle file, under the repositories section:

dependencyResolutionManagement {
  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
  repositories {
    mavenCentral()
    maven { url = uri("https://jitpack.io") }
  }
}

How to use

Add the button in your layout file and customize it the way you like it.

<com.subhajitrajak.swipebutton.SwipeButton
    android:id="@+id/swipeButton"
    android:layout_width="match_parent"
    android:layout_height="54dp"
    android:layout_marginHorizontal="64dp"

    app:button_height="45dp"
    app:button_width="45dp"

    app:button_background_drawable="@drawable/swipe_circular_white_background"
    app:button_background_padding="8dp"
    app:button_background_src="@drawable/rv_right"
    app:button_background_tint="@color/dark_white"

    app:inner_text="Slide to activate"
    app:inner_text_size="15sp"
    app:inner_text_font_family="@font/inter_semibold"
    app:inner_text_color="@color/black"
    app:inner_text_gravity="center"
    app:inner_text_left_padding="24dp"

    app:outer_background_drawable="@drawable/swipe_circular_white_background"
    app:outer_background_height="54dp"
    app:outer_background_tint="@color/highlight" />

Change the sliding button size

You can set the size of the moving part of the button by changing the app:button_image_width and app:button_image_height properties. Or, just customise the size in your kotlin file

swipeButton.apply {
    setButtonWidth(54)
    setButtonHeight(54)
}

Customize the text

You can set the size of the fixed part of the button by setting the text size of the setting the padding in this part. Or, just customise the text in your kotlin file

swipeButton.apply {
    setInnerText("Slide to activate")
    setInnerTextColor(R.color.black)
    setInnerTextSize(15)
    setInnerTextGravity(Gravity.CENTER_HORIZONTAL)
    setInnerTextPaddings(24, 0, 0, 0)
    setInnerTextFontFamily(R.font.inter_semibold)
}

Listening the activation of the button

You can set a listener for button activation

val swipeButton = findViewById<SwipeButton>(R.id.swipeButton)
swipeButton.setOnActiveListener {
    Toast.makeText(this, "Button activated", Toast.LENGTH_SHORT).show()
}

Configure XML

• button_width: Change the width of the moving part of the button
• button_height: Change the height of the moving part of the button
• inner_text: Text in the center of the button. It disapears when swiped
• inner_text_color: Color of the text
• inner_text_size: Size of the text
• inner_text_font_family: Font of the text
• inner_text_[direction]_padding: Sets the padding of the text inside the button. You can set how big this part of the button will by setting text size and padding.
• inner_text_gravity: Sets the gravity of the text inside the button. (Using center is recommended)
• outer_background_drawable: Sets a custom drawable to the outer background.
• outer_background_tint: Sets a color to the outer background.
• outer_background_height: Sets a fixed height to the outer background.

Thanks

• Inspired by swipe-button by ebanx.

Developed By

Subhajit Rajak - subhajitrajak.dev@gmail.com