5

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,
Months selected

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! :)

reinaldomoreira
  • 5,388
  • 3
  • 14
  • 29
  • I don't know why I got downvoted, maybe you can explain me why? – reinaldomoreira May 29 '17 at 11:30
  • Can you please share what have you tried for the same, so that we can suggest on improvements – Raut Darpan May 29 '17 at 11:57
  • Sadly I haven't been able to go much further from this problem because I have no ideas for this problem – reinaldomoreira May 29 '17 at 12:10
  • I think the answer is in your question. You are looking for a custom rating bar. How does what you are asking for different from a rating bar other than the images used? Search for "android custom rating bar" and you will get a lot of hits. Here is [one Stack Overflow question](https://stackoverflow.com/questions/5800657/how-to-create-custom-ratings-bar-in-android) that I think addresses your need. If not, respond here with what is missing. – Cheticamp May 29 '17 at 12:52
  • @Cheticamp the links from the answer are not valid but I will check the code – reinaldomoreira May 29 '17 at 13:07
  • the provided link does not work for many ratingbar (two-three lines), also, I was trying to find a elegant solution rather than putting 13 ratingbar in my xml – reinaldomoreira May 29 '17 at 13:32

2 Answers2

4

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>
reinaldomoreira
  • 5,388
  • 3
  • 14
  • 29
1

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.

Simo
  • 345
  • 4
  • 12