IncrementDecrementButton

Zomato/Swiggy like increment decrement button for android. Available as a composable as well as XML based view library!

compose_vs_xml.mp4

Screenshots

Requirements

• API level 21+

Installation

Step 1. Add the JitPack repository to your build file. Add it in your root build.gradle at the end of repositories:

	allprojects {
		repositories {
			...
			maven { url 'https://jitpack.io' }
		}
	}

Step 2. Add the dependency in app's buid.gradle:

dependencies { implementation 'com.github.Damercy:IncrementDecrementButton:2.0.0' }

For gradle versions 7.X.X+, you may face issues related to unable to resolve library on syncing projects. In that case, please update project's settings.gradle as follows:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        jcenter() // Warning: this repository is going to shut down soon
        maven { url "https://jitpack.io" } // Add jitpack dependency here instead
    }
}
rootProject.name = "Your awesome app"
include ':app'

Usage

XML

For a basic use case, you can simply plugin the library in your layout as follows:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
  <!-- Other views -->

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sample text view"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <dev.dayaonweb.incrementdecrementbutton.IncrementDecrementButton
        android:id="@+id/inc_dec_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintVertical_bias="0.25" />
  
  <!-- Other views -->

</androidx.constraintlayout.widget.ConstraintLayout>

The following attributes are implemented as of now:

Attribute	Format	Description
app:decrementText	string	The text to set for decrement button. Default is -
app:incrementText	string	The text to set for increment button. Default is +
app:middleText	string	The text to set for the middle view. Default is ADD
app:fontFamilyRes	reference	The font family to set for the texts
app:fontSizeRes	integer	The font size to set for the texts. Defaults to 16sp
app:cornerRadius	dimension	The corner radius of the button. Defaults to 8dp
app:animationType	enum	The type of animation to set on text change. Either of FADE,HORIZONTAL or VERTICAL. Defaults to FADE
app:animationDuration	integer	The duration for animation. Defauls to 500ms
app:textColor	color	The color to set for texts
app:buttonBackground	reference	The color to set as background for button
app:borderStrokeColor	color	The border stroke color to set for button. Defaults to white
app:borderStrokeWidth	integer	The border width to set as background for button. Defaults to 0 hence no border is shown

Programatically:

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val button: IncrementDecrementButton = findViewById(R.id.inc_dec_btn)
        
        // available functions
        button.setIncrementButtonText()
        button.setDecrementButtonText()
        button.getCurrentValue() // Get current value  (amount)
        button.setFontFamily()
    }
}

Composable

Simply use the composable as shown below.

   MaterialTheme {
		// Some other composables
                IncrementDecrementButton()
            }

The IncrementDecrementButton is highly customizable. You can pass in your Modifier with appropriate styling as required or use the available methods provided.

You can even pass in your own composables for the decrement (left), middle (center) & increment (right) places of the button. The default values of IncrementDecrementButton is as follows:

@Composable
fun IncrementDecrementButton(
    modifier: Modifier = Modifier,
    fontFamily: FontFamily = FontFamily(typeface = Typeface.DEFAULT),
    fontSize: TextUnit = 16.0.sp,
    cornerRadius: Dp = 8.dp,
    animationType: AnimationType = AnimationType.FADE,
    backgroundColor: Color = MaterialTheme.colors.background,
    contentColor: Color = MaterialTheme.colors.contentColorFor(backgroundColor),
    borderStroke: BorderStroke = BorderStroke(0.dp, Color.White),
    value: Int = 0,
    onDecrementClick: (Int) -> Unit = {},
    onIncrementClick: (Int) -> Unit = {},
    onMiddleClick: (Int) -> Unit = {},
    decrementComposable: @Composable (cb: (Int) -> Unit) -> Unit = { cb ->
        DefaultDecrementComposable(
            modifier = modifier,
            textColor = contentColor,
            fontFamily = fontFamily,
            fontSize = fontSize,
            backgroundColor = backgroundColor,
            cornerRadius = cornerRadius,
            borderStroke = borderStroke,
            onDecrementClick = { cb(-1) }
        )
    },
    incrementComposable: @Composable (cb: (Int) -> Unit) -> Unit = { cb ->
        DefaultIncrementComposable(
            modifier = modifier,
            textColor = contentColor,
            fontFamily = fontFamily,
            fontSize = fontSize,
            backgroundColor = backgroundColor,
            cornerRadius = cornerRadius,
            borderStroke = borderStroke,
            onIncrementClick = { cb(-1) }
        )
    },
    middleComposable: @Composable (Int, cb: (Int) -> Unit) -> Unit = { buttonValue, cb ->
        DefaultMiddleComposable(
            modifier = modifier,
            textColor = contentColor,
            fontFamily = fontFamily,
            fontSize = fontSize,
            backgroundColor = backgroundColor,
            borderStroke = borderStroke,
            onMiddleClick = { cb(-1) },
            value = buttonValue
        )
    },
)

Please read the release notes for details on available methods & changes.

Try sample app

You can download the sample apk to see this library in action.

Hit the ⭐ if this library helped you in your projects 😄