A simple Android UI library for segmented controls with material-ish styling

by androidexample

segmented

A simple Android UI library for segmented controls with material-ish styling.

How to add?

I. In your root build.gradle file add the following:

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

II. In your build.gradle file add the following dependency:

dependencies {
    implementation 'com.github.creageek:segmented:1.0.0'
}

III. Declare SegmentedButton inside your layout.xml file:

<com.creageek.segmentedbutton.SegmentedButton
           android:id="@+id/segmented"
           android:layout_width="0dp"
           android:layout_height="wrap_content"
           app:layout_constraintTop_toTopOf="parent"
           app:layout_constraintStart_toStartOf="parent"
           app:layout_constraintEnd_toEndOf="parent"/>

Please, note that SegmentedButton extends from RadioGroup so you can add RadioButton (doesn't need any additional styling) views as a child to fetch the segments.

IV. Declare SegmentedButton in your class.kt.
You can call the view by its id with the power of kotlin-android-extensions plugin or just use findViewById<SegmentedButton>(R.id.segmented):

segmented {

        // set initial checked segment (null by default)
        initialCheckedIndex = 0

        // init with segments programmatically without RadioButton as a child in xml
        initWithItems {
            // takes only list of strings
            listOf("Today", "This week", "This month")
        }

        // notifies when segment was checked
        onSegmentChecked { segment ->
            Log.d("creageek:segmented", "Segment ${segment.text} checked")
        }
        // notifies when segment was unchecked
        onSegmentUnchecked { segment ->
            Log.d("creageek:segmented", "Segment ${segment.text} unchecked")
        }
        // notifies when segment was rechecked
        onSegmentRechecked { segment ->
            Log.d("creageek:segmented", "Segment ${segment.text} rechecked")
        }
}

How to customize?

I. In your layout.xml file you can set a few attrs to SegmentedButton:

  • app:textSize - applies text size to all child segments (reference to a dimension).
  • app:segmentHeight - allows you to set segment height (reference to a dimension).
  • app:textColor - allows you to set text color (reference to a color).
  • app:textColorChecked - allows you to set the text color of a checked segment (reference to a color).
  • app:segmentFont - allows you to set a segment's font (reference to a font).
  • app:segmentFontChecked - allows you to set the font of a checked segment (reference to a font).
  • app:segmentColor - allows you to set segment color (reference to a color).
  • app:segmentColorChecked - allows you to set the color of a checked segment (reference to a color).
  • app:rippleColor - allows you to set a segment's ripple color (reference to a color).
  • app:rippleColorChecked - allows you to set ripple color of a checked segment (reference to a color).
  • app:borderColor - allows you to set the color of a segment's border (reference to a color).
  • app:borderWidth - allows you to set a segment's border width (reference to a dimension).
  • app:cornerRadius - allows you to set a segment's corner radius (reference to a dimension).
  • app:spreadType - sets the spread type of a SegmentedButton. Possible values are:
    • wrap (default)
    • evenly

II. By default, if no custom attrs set, these values applied:

  • Default colors.xml values:
<resources>
    <color name="default_text_color">#3e3e3d</color>
    <color name="default_text_color_checked">#ffffff</color>

    <color name="default_segment_color">#f8f8f8</color>
    <color name="default_segment_color_checked">#7f6a93</color>

    <color name="default_ripple_color">#e4e4e4</color>
    <color name="default_ripple_color_checked">#c695a4</color>

    <color name="default_border_color">#e4e4e4</color>
</resources>
  • Default dimens.xml values:
<resources>
    <dimen name="compound_drawable_size">24dp</dimen>
    <dimen name="default_segment_text_size">16sp</dimen>
    <dimen name="default_segment_height">48dp</dimen>
    <dimen name="default_border_width">1dp</dimen>
    <dimen name="default_corner_radius">8dp</dimen>
</resources>

What about contributions?

If you have any ideas, suggestions, or issues, please feel free to create the following issue. I'll be here to help and/or improve SegmentedButton according to your needs (if it doesn't confront the original idea).

GitHub