Skip to content

Latest commit

 

History

History
85 lines (65 loc) · 3.48 KB

README.md

File metadata and controls

85 lines (65 loc) · 3.48 KB
Raw

SEGMENTED CONTROL

A little widget to create an iOS-like Segmented Control for android. The segmented control widget in iOS is sometimes great and isn't very different then a beautiful styled radio button. I created a little widget, that imitates that behavior. It creates buttons and styles their edges accordingly.

USAGE

Checkout this project and add it as an android library to your project. Unfortunately, due to Android limitations I cannot make a jar library out of this, as it needs references to the R file and the resources.

You can create as many buttons as you like, but I recommend to keep them under 5. By default the first (left most) button is selected and the labels of the buttons are trimmed if their length is longer than 10 characters. You can overwrite this behavior (see the examples).

Basic Usage

<com.petpet.sc.widget.SegmentedControl
            android:id="@+id/segmented_control"
            style="@style/SegmentedControl">

            <Button
                android:id="@+id/filter1"
                android:text="Filter 1" 
                style="@style/SmallSegmentedFilter" />

            <View style="@style/VerticalLine" /> <!-- not necessary, but looks better if you have more than two buttons--> 

            <Button
                android:id="@+id/filter2"
                android:text="Filter 2"
                style="@style/SmallSegmentedFilter" />
                
        </com.petpet.sc.widget.SegmentedControl>

Overwrite Default Behaviour

include this into your layout namespaces:

xmlns:sc="http://schemas.android.com/apk/res/com.petpet.sc"
<com.petpet.sc.widget.SegmentedControl
            android:id="@+id/segmented_control"
            style="@style/SegmentedControl">

    <!-- first button not selected -->
    <!-- max text length before trim = 15 characters -->
            <Button
                android:id="@+id/filter1"
                android:text="Filter 1" 
                style="@style/SmallSegmentedFilter" 
                sc:first_selected="false"
                sc:label_maxlength="15"/>
                
        </com.petpet.sc.widget.SegmentedControl>

Change Styles

If you like to have the bigger buttons then use @style/BigSegmentedFilter. In order to change the coloring scheme you can edit the colors in res/values/sc_values.xml. There are some predefined color schemes, but you can use whatever colors you like. Just change the values of the following colors:

   <color name="sc_top_selected">...</color>
   <color name="sc_bottom_selected">...</color>
   <color name="sc_top_unselected">...</color>
   <color name="sc_bottom_unselected">...</color>
   <color name="sc_separator">...</color>

LIMITATIONS

Unfortunately, android poses some limitations and that is why I was forced to do some things that I don't like. If you have other ideas, feel free to comment or contribute.