Overview

ButtonsKt eliminates boilterplate xml files through ease of customization by exposing button customizations (icons, borders & outlines, corner radius, background and more!) whilst being lightweight, plus runtime xml selection of icons from FontAwesome.

Features

Container
  • Corner Radius
  • Border (width, color)
  • Layout (padding, margin)
Background
  • Easy Ripple Effect Integration (defaultBackgroundColor, focusedBackgroundColor, disabledBackgroundColor)
  • Support for SDK below API Lollipop (StateListDrawable instead of RippleDrawable)
Icons
  • Choose from your resource directory
  • Choose from FontAwesome Icons (ttf based, not images!)
  • Tint (enabledColor & disabledColor)
  • Layout (iconArea, iconMargin, iconPadding)
Text
  • Choose font your resource directory
  • Choose from the available fonts (eg. OpenSans, Gilroy, ...)
  • Style (size, alignment, gravity, style, isTextAllCaps)
  • Color (textColor, disabledTextColor)
Additional Overrides
  • isEnabled
  • isRippleEffectEnabled
  • Anatomy

  • Based on Google's Android Material Design
  • anatomy
    1. Icon
    2. Text
    3. Background
    4. Border (Outline)
    5. Ripple Effect

    Installation

    Project Level Gradle

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

    Module Level Gradle

      dependencies {
        // Replace version with release version, e.g. 1.0.0-alpha, -SNAPSHOT
        implementation "io.jmdg:buttonskt:[VERSION]"
      }
      

    Refer to the version changelog

    Configuration

    Attributes

    Attributes available on XML and Kotlin

    XML Attribute Kotlin Type
    bkt_cornerRadius cornerRadius dimension
    bkt_cornerRadiusTopLeft cornerRadiusTopLeft/td> dimension
    bkt_cornerRadiusTopRight cornerRadiusTopRight dimension
    bkt_cornerRadiusBottomLeft cornerRadiusBottomLeft dimension
    bkt_cornerRadiusBottomRight cornerRadiusBottomRight dimension
    bkt_borderWidth borderWith dimension
    bkt_defaultBorderColor defaultBorderColor color
    bkt_focusedBorderColor focusedBorderColor color
    bkt_disabledBorderColor disabledBorderColor color
    bkt_padding padding dimension
    bkt_paddingLeft paddingLeft dimension
    bkt_paddingTop paddingTop dimension
    bkt_paddingRight paddingRight dimension
    bkt_paddingBottom paddingBottom dimension
    bkt_margin margin dimension
    bkt_marginLeft marginLeft dimension
    bkt_marginTop marginTop dimension
    bkt_marginRight marginRight dimension
    bkt_marginBottom marginBottom dimension
    bkt_isRippleEffectEnabled isRippleEffectEnabled boolean
    bkt_defaultBackgroundColor defaultBackgroundColor color
    bkt_focusedBackgroundColor focusedBackgroundColor color
    bkt_disabledBackgroundColor disabledBackgroundColor color
    bkt_iconResource iconResource Refer to the available icons
    bkt_iconDrawable iconDrawable drawable
    bkt_iconTint iconTint color
    bkt_disabledIconTint disabledIconTint color
    bkt_iconArea iconArea dimension
    bkt_iconMargin iconMargin dimension
    bkt_iconMarginLeft iconMarginLeft dimension
    bkt_iconMarginTop iconMarginTop dimension
    bkt_iconMarginRight iconMarginRight dimension
    bkt_iconMarginBottom iconMarginBottom dimension
    bkt_iconPadding iconPadding dimension
    bkt_iconPaddingLeft iconPaddingLeft dimension
    bkt_iconPaddingTop iconPaddingTop dimension
    bkt_iconPaddingRight iconPaddingRight dimension
    bkt_iconPaddingBottom iconPaddingBottom dimension
    bkt_text text string
    bkt_textSize textSize dimension
    bkt_textColor textColor color
    bkt_disabledTextColor disabledTextColor color
    bkt_textAllCaps textAllCaps boolean
    bkt_defaultFont defaultFont Refer to the available fonts
    bkt_textStyle textStyle dimension
    bkt_textGravity textGravity dimension
    bkt_textPosition textPosition dimension

    Options

    Fonts

    • Open Sans
    • Gilroy
    • Champagne

    FontAwesome Icons

    • fa_address_book
    • fa_address_card
    • fa_calculator
    • fa_cloud_download_alt
    • fa_xray
    • Visit the complete list

    Usage

    XML Declaration

    Load URI xmlns:app="http://schemas.android.com/apk/res-auto" to render runtime custom attributes

      <RootLayout
        ...
        xmlns:app="http://schemas.android.com/apk/res-auto"
        ...
      />
    
      <io.jmdg.buttonskt.ButtonsKtView
        android:id="@+id/bkt_demo_xml"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:textAlignment="center"
        ...
        app:bkt_isEnabled="false"
        app:bkt_isRippleEffectEnabled="true"
        app:bkt_cornerRadius="10dp"
        app:bkt_borderWidth="2dp"
        app:bkt_defaultBackgroundColor="@color/colorPrimary"
        app:bkt_focusedBackgroundColor="@color/colorPrimaryDark"
        app:bkt_focusedBackgroundColor="@color/colorPrimaryDisabled"
        app:bkt_text="ButtonsKt"
        app:bkt_textSize="12dp"
        app:bkt_textStyle="normal"
        app:bkt_textAllCaps="false"
        app:bkt_defaultFont="opensans_light"
        app:bkt_textColor="@android:color/white"
        app:bkt_disabledTextColor="@android:color/darker_gray"
        app:bkt_iconResource="fa_cloud_download_alt"
        app:bkt_iconArea="30dp"
        app:bkt_iconTint="@color/colorAccent"
        app:bkt_iconPadding="0dp"
        app:bkt_iconMargin="10dp"
        ...
      />
      ...
      </RootLayout>
      

    Configure isEnabled instead of the default view's setEnabled to allow ButtonsKt engine render the desired custom configurations (eg. disabledBackgroundColor, disabledTextColor)

    Declaration via Code

    Creating a configuration instance

      override fun onCreate(savedInstanceState: Bundle?) {
      ...
        // Configuration instance
        // You are opt to change specific & named configurations
        // This configuration can be reused for adding multiple views programatically
        val configuration = ButtonsKt(
          text = "DECLARED VIA CODE",
          textSize = 18f,
          textStyle = BktTextStyle.BOLD,
          ...
        )
      ...
      }
      

    Passing the configuration instance

      override fun onCreate(savedInstanceState: Bundle?) {
      ...
        // Configuration instance
        // You are opt to change specific & named configurations
        // This configuration can be reused for adding multiple views programatically
        val configuration = ButtonsKt(
          text = "DECLARED VIA CODE",
          textSize = 18f,
          textStyle = BktTextStyle.BOLD,
          ...
        )
    
        // Create ButtonsKtView with the desired configuration instance
        val buttonsKtView = ButtonsKtView(this, configuration)
    
        // Add custom view
        rl_main.addView(buttonsKtView)
      ...
      }
      

    configuration instance can be reused when adding more views programmatically