Android Day Picker like in Google Clock?

Question

I have an app and I want the user to be able to tap on days of the week which are in circles, just like how Google Clock does this. See the image below as a better illustration as to what I am after.

I have searched around and cannot find even a library which adds this. The only solution I can think of would be have a horizontal layout with various ImageButtons, but this would not have the animations and in my opinion is not a very clean solution.

What kind of a View is this, and how can I implement similar functionality into my Android application?

Answer 1

Sorry for my english.

I present to you my own solution, this is the final result:

Day Picker

1.- Create toogle_text_color inside drawable folder, this file is for change the color of the text when the button is on/off

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

<item android:state_checked="true"
    android:color="#FFF" />
</selector>

2.- Create shape_oval in the same folder, this will be the background of the button

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorAccent" />
<size
    android:width="20dp"
    android:height="20dp" />
</shape>

3.- Create toggle_bg in the same folder, this will choose the background color when the button is on/off, using the oval background or transparent background.

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

4.- In the styles file of your project add the next lines.

<style name="Widget.Button.Toggle" parent="android:Widget">
    <item name="android:background">@drawable/ic_toggle_bg</item>
</style>

<style name="toggleButton" parent="DefaultTheme">
    <item name="android:buttonStyleToggle">@style/Widget.Button.Toggle</item>
    <item name="android:textColor">@drawable/toggle_text_color</item>
</style>

5.- Create a **daypicker file in layout folder, with this content

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<ToggleButton
    android:id="@+id/tD"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:textOff="D"
    android:textOn="D"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />
<ToggleButton
    android:id="@+id/tL"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="L"
    android:textOn="L"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tM"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="M"
    android:textOn="M"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tMi"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="M"
    android:textOn="M"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tJ"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="J"
    android:textOn="J"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tV"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="V"
    android:textOn="V"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />

<ToggleButton
    android:id="@+id/tS"
    android:layout_marginLeft="3dp"
    android:layout_marginRight="3dp"
    android:layout_width="35dp"
    android:layout_height="35dp"
    android:textOff="S"
    android:textOn="S"
    style="@style/toggleButton"
    android:background="@drawable/toggle_bg" />
</LinearLayout>

6.- Import to your Layout with the tags like this:

    <LinearLayout
        android:id="@+id/daypicker_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/linearLayout"
        android:layout_centerHorizontal="true">

        <include
            android:id="@+id/daypicker"
            layout="@layout/daypicker"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"></include>
    </LinearLayout>

I add a LinearLayout first, because i want align below some items, but you can customize this part.

7.- Finally in the code you can get the marked items like this:

Create objects:

//Day buttons
ToggleButton tD;
ToggleButton tL;
ToggleButton tM;
ToggleButton tMi;
ToggleButton tJ;
ToggleButton tV;
ToggleButton tS;

Instantiate

    tD = (ToggleButton) findViewById(R.id.tD);
    tL = (ToggleButton) findViewById(R.id.tL);
    tM = (ToggleButton) findViewById(R.id.tM);
    tMi = (ToggleButton) findViewById(R.id.tMi);
    tJ = (ToggleButton) findViewById(R.id.tJ);
    tV = (ToggleButton) findViewById(R.id.tV);
    tS = (ToggleButton) findViewById(R.id.tS);

And get marked items.

        String markedButtons= "";
    //Check individual items.
    if(tD.isChecked()){
        markedButtons +="D,";
    }
    if(tL.isChecked()){
        markedButtons +="L,";
    }
    if(tM.isChecked()){
        markedButtons +="M,";
    }
    if(tMi.isChecked()){
        markedButtons +="Mi,";
    }
    if(tJ.isChecked()){
        markedButtons +="J,";
    }
    if(tV.isChecked()){
        markedButtons +="V,";
    }
    if(tS.isChecked()){
        markedButtons +="S";
    }
    Toast.makeText(this, markedButtons, Toast.LENGTH_SHORT).show();

If you want to add animation you can do it with TransitionDrawable.