Selection of views like a ratingbar

Question

I need something like a RatingBar for selecting a range of months in a year,

Where the user can select march, and moves the finger towards a direction and it is selected. I can't have something "not selected" in the middle.

To exemplify,

In this case, the user selected 'Jan', and 'Abr'. I didn't find anything specific for this case, so, I was wondering if anyone came across this or I should do this manually.

Thanks! :)

Answer 1

Well, I ended up doing almost manually all the code. I will post here so if anyone needs the same, it will be here.
first of all, I have a FlexboxLayout maintained by Google, which wraps the views to next line. Then, I added inside it all 13 checkboxes, and set the background and textColor based on StateLists.
The view Code:

<com.google.android.flexbox.FlexboxLayout
    android:id="@+id/fl_cadastrofonterendamensalactivity_months_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:alignContent="stretch"
    app:justifyContent="space_around"
    app:alignItems="center"
    app:flexWrap="wrap">

    <CheckBox
        android:id="@+id/cb_monthlist_jan"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_jan"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"
        />

    <CheckBox
        android:id="@+id/cb_monthlist_fev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_fev"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>


    <CheckBox
        android:id="@+id/cb_cadastromonthlist_mar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_mar"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>


    <CheckBox
        android:id="@+id/cb_cadastromonthlist_abr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_abr"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>


    <CheckBox
        android:id="@+id/cb_cadastromonthlist_mai"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_mai"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>


    <CheckBox
        android:id="@+id/cb_cadastromonthlist_jun"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_jun"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>


    <CheckBox
        android:id="@+id/cb_cadastromonthlist_jul"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_jul"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>


    <CheckBox
        android:id="@+id/cb_cadastromonthlist_ago"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        app:layout_wrapBefore="true"
        android:text="@string/cadastro_fonterendamensal_mes_ago"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>

    <CheckBox
        android:id="@+id/cb_cadastromonthlist_set"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_set"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>

    <CheckBox
        android:id="@+id/cb_cadastromonthlist_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_out"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>

    <CheckBox
        android:id="@+id/cb_cadastromonthlist_nov"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_nov"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>

    <CheckBox
        android:id="@+id/cb_cadastromonthlist_dez"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_dez"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>

    <CheckBox
        android:id="@+id/cb_cadastromonthlist_dct"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/months_statelist"
        android:button="@null"
        android:gravity="center"
        android:text="@string/cadastro_fonterendamensal_mes_dct"
        android:textColor="@color/months_textcolor"
        android:textStyle="bold"/>

</com.google.android.flexbox.FlexboxLayout>

inside res/color/months.textcolor.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/color_background" android:state_checked="true"/>
    <item android:color="@android:color/white" android:state_checked="false"/>
</selector>

inside res/drawable/months_statelist.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@drawable/checkbox_checked"
        android:state_checked="true"/>

    <item
        android:drawable="@drawable/checkbox_unchecked"
        android:state_checked="false"/>

</selector>

inside res/drawable/checkbox_checked.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#FFFFFF"/>

    <corners android:radius="100dp"/>

    <size
        android:width="-2dp"
        android:height="-2dp"/>

    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp"/>
</shape>

and inside res/drawable/checkbox_unchecked.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@android:color/transparent"/>

    <stroke
        android:width="1dp"
        android:color="#FFFFFF"/>

    <corners android:radius="100dp"/>

    <size
        android:width="40dp"
        android:height="40dp"/>

    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp"/>
</shape>

Answer 2

here are two libraries material-range-bar:

dependencies {
    compile 'com.appyvet:materialrangebar:1.3'
}

and Range seek bar:

dependencies {
      compile 'com.yahoo.mobile.client.android.util.rangeseekbar:rangeseekbar-library:0.1.0'

}

You might like to have a look at this and this links. It may not be exactly what you are looking for but with a little customization I think it will help. I have not tried them yet though. Just googled it for you.