Segmented Control Group is a fully customisable ViewGroup for Android which is inspired (and has the same features as the iOS Segmented Controls)
Step 1 - Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
Step 2 - Add the dependency
dependencies {
implementation 'com.github.alanvan0502:segmented-control-group:v1.0'
}
Include the SegmentedControlGroup in your layout file. Just add as many SegmentedControlButton as needed.
The SegmentedControlGroup has the following custom colors that you can adjust:
customSliderColor
, customDividerColor
, customShadowColor
<com.alanvan.segmented_control.SegmentedControlGroup
android:id="@+id/segmented_control_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:customSliderColor="#0277BD"
app:customDividerColor="#0277BD"
app:customShadowColor="#01579B"
android:backgroundTint="#03A9F4"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.alanvan.segmented_control.SegmentedControlButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#E1F5FE"
android:id="@+id/button1"
android:text="@string/button_1"/>
<com.alanvan.segmented_control.SegmentedControlButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#E1F5FE"
android:id="@+id/button2"
android:text="@string/button_2"/>
<com.alanvan.segmented_control.SegmentedControlButton
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#E1F5FE"
android:id="@+id/button3"
android:text="@string/button_3"/>
</com.alanvan.segmented_control.SegmentedControlGroup>
Below is one of the ways you can use the SegmentedControlGroup in your Activity/Fragment
segmentedControlGroup = findViewById(R.id.segmented_control_group)
segmentedControlGroup.apply {
setSelectedIndex(2, false)
setOnSelectedOptionChangeCallback {
Toast.makeText(context, "Button ${it + 1} selected", Toast.LENGTH_SHORT).show()
}
}