Coders In C

Let’ make Scrolling Date/Time Picker in Android studio using Number Picker. In this video, I will show you how you can add a number picker and get selected value on button click event. After that, we will use 3 number pickers for mins, seconds and one with using string AM / PM. on button click, we will get value something like this mm:ss: AM/pm

---

Checkout this YouTube tutorial

---

Source code

activity_main.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorWhite"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/colorBlue"
        android:padding="10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_action_back_white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="Meal Time"
            android:textColor="@color/colorWhite"
            android:textSize="18sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <!-- empty space -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="20dp" />

            <!--  section 1-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:padding="6dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/schedule_breakfast_reminder"
                    android:textColor="@color/colorBlack"
                    android:textSize="16sp" />

                <com.suke.widget.SwitchButton
                    android:id="@+id/switch_button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24dp"
                    app:sb_checked_color="@color/colorBlue"
                    app:sb_show_indicator="false" />

            </LinearLayout>
            <!-- layout for time picker mm:ss AM/PM -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:orientation="horizontal">

                <NumberPicker
                    android:id="@+id/numPickerH"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/numPickerM"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:divider="#ebebeb"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/numPickerAm"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

            </LinearLayout>

            <!--  section 2 lunch-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:padding="6dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/schedule_lunch_reminder"
                    android:textColor="@color/colorBlack"
                    android:textSize="16sp" />

                <com.suke.widget.SwitchButton
                    android:id="@+id/switch_button1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24dp"
                    app:sb_checked_color="@color/colorBlue"
                    app:sb_show_indicator="false" />

            </LinearLayout>
            <!-- layout for time picker mm:ss AM/PM -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:orientation="horizontal">

                <NumberPicker
                    android:id="@+id/LunchNumPickerH"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/LunchNumPickerM"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:divider="#ebebeb"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/LunchNumPickerAm"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

            </LinearLayout>


            <!--  section 3 dinner-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:padding="6dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/schedule_dinner_reminder"
                    android:textColor="@color/colorBlack"
                    android:textSize="16sp" />

                <com.suke.widget.SwitchButton
                    android:id="@+id/switch_button2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24dp"
                    app:sb_checked_color="@color/colorBlue"
                    app:sb_show_indicator="false" />

            </LinearLayout>
            <!-- layout for time picker mm:ss AM/PM -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:orientation="horizontal">

                <NumberPicker
                    android:id="@+id/DinnerNumPickerH"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/DinnerNumPickerM"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:divider="#ebebeb"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/DinnerNumPickerAm"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

            </LinearLayout>


            <!--  section 4 Snacks(s)-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:padding="6dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/schedule_snacks_s_reminder"
                    android:textColor="@color/colorBlack"
                    android:textSize="16sp" />

                <com.suke.widget.SwitchButton
                    android:id="@+id/switch_button3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24dp"
                    app:sb_checked_color="@color/colorBlue"
                    app:sb_show_indicator="false" />

            </LinearLayout>
            <!-- layout for time picker mm:ss AM/PM -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:orientation="horizontal">

                <NumberPicker
                    android:id="@+id/SnacksNumPickerH"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/SnacksNumPickerM"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:divider="#ebebeb"
                    android:theme="@style/myNum" />

                <NumberPicker
                    android:id="@+id/SnacksNumPickerAm"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

            </LinearLayout>

            <!-- empty space -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="10dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_margin="10dp"
                android:text="Post-Meal Reminder Text:"
                android:textColor="@color/colorBlack"
                android:textSize="16sp" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:background="@drawable/edittext_bg"
                android:minWidth="100dp"
                android:padding="10dp"
                android:text="Please remember to send an Post-Meal"
                android:textSize="14sp" />

            <!--  section 5 After(s)-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                android:orientation="horizontal"
                android:padding="6dp">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Schedule Post-Meal Photo Reminder: "
                    android:textColor="@color/colorBlack"
                    android:textSize="16sp" />

            </LinearLayout>
            <!-- layout for time picker mm:ss AM/PM -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:gravity="center_vertical"
                android:orientation="horizontal">

                <NumberPicker
                    android:id="@+id/AftersNumPickerHours"

                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:theme="@style/myNum" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="6dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Hours(s)"
                        android:textColor="@color/colorBlack"
                        android:textSize="14sp"
                        android:textStyle="bold" />
                </LinearLayout>

                <NumberPicker
                    android:id="@+id/AfterNumPickerMin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:divider="#ebebeb"
                    android:theme="@style/myNum" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="6dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Min(s)"
                        android:textColor="@color/colorBlack"
                        android:textSize="14sp"
                        android:textStyle="bold" />
                </LinearLayout>


            </LinearLayout>

        </LinearLayout>
    </ScrollView>

</LinearLayout>

MainActivity.kt

package com.raj.timepickerscroll

import android.os.Bundle
import android.widget.NumberPicker
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //setting number picker for min
        initAllPicker()

    }

    fun initPicker(min: Int, max: Int, p: NumberPicker) {
        p.minValue = min
        p.maxValue = max
        p.setFormatter { i -> String.format("%02d", i) }

    }

    fun initPickerWithString(min: Int, max: Int, p: NumberPicker, str: Array<String>) {
        p.minValue = min
        p.maxValue = max
        p.displayedValues = str

    }

    fun initAllPicker() {
        val str = arrayOf<String>("AM", "PM")
        initPicker(0, 12, numPickerH)
        initPicker(0, 59, numPickerM)
        initPickerWithString(0, (str.size - 1), numPickerAm, str)

        //section 2
        initPicker(1, 12, LunchNumPickerH)
        initPicker(0, 59, LunchNumPickerM)
        initPickerWithString(0, (str.size - 1), LunchNumPickerAm, str)

        //section 3
        initPicker(1, 12, DinnerNumPickerH)
        initPicker(0, 59, DinnerNumPickerM)
        initPickerWithString(0, (str.size - 1), DinnerNumPickerAm, str)

        //section 4
        initPicker(1, 12, SnacksNumPickerH)
        initPicker(0, 59, SnacksNumPickerM)
        initPickerWithString(0, (str.size - 1), SnacksNumPickerAm, str)

        //section 4
        initPicker(1, 12, AftersNumPickerHours)
        initPicker(0, 59, AfterNumPickerMin)
    }
}

Get Source Code of This Project

Download Source

CodeContact me in Instagram

Source code at github : https://github.com/rajjani88/quizapplication

i Hope this post will help you to build your own Quiz Application. For more Android tutorials subscribe to my YouTube Channel Raj Jani

If you need any help in android app development i am one dm away. Thanks for reading this blog. See you in the next post.