What is best way to implement calendar and time picker?

Question

I have to implement Calendar and TimePicker I have attached image please see and give me answer what is the best way to implement this.

Thanks in advance

Please see this image

Answer 1

For date selection you can use HorizontalCalendarView from Mulham-Raee or HorizontalCalendarView from mybringback22 into your xml like.

<devs.mulham.horizontalcalendar.HorizontalCalendarView
            android:id="@+id/calendarView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:textColorNormal="#bababa"
            app:textColorSelected="#FFFF"
            app:selectorColor="#c62828"  //default to colorAccent
            app:selectedDateBackground="@drawable/myDrawable"/>

or

<com.view.calender.horizontal.umar.horizontalcalendarview.HorizontalCalendarView
        android:id="@+id/horizontalcalendarview"
        android:layout_width="match_parent"
        android:layout_height="200dp">
 </com.view.calender.horizontal.umar.horizontalcalendarview.HorizontalCalendarView>

and for time picker you can use androidTimePicker. Also there is wheel picker with this you can design your time picker like

<LinearLayout
        android:id="@+id/timepicker"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@+id/calendarView"
        android:gravity="center_horizontal">
        <com.aigestudio.wheelpicker.WheelPicker
            android:id="@+id/hour"
            app:wheel_item_text_size="20sp"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            app:wheel_item_space="10dp"
            app:wheel_same_width="true"
            app:wheel_atmospheric="true"
            app:wheel_curved="true"
            app:wheel_cyclic="true"
            app:wheel_item_align="right"
            app:wheel_item_text_color="#A7A7DB"
            app:wheel_selected_item_text_color="#536D8A"
            app:wheel_visible_item_count="3"/>
        <View
            android:layout_width="15dp"
            android:layout_height="match_parent"/>
        <com.aigestudio.wheelpicker.WheelPicker
            android:id="@+id/minute"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            app:wheel_item_space="10dp"
            app:wheel_same_width="true"
            app:wheel_atmospheric="true"
            app:wheel_curved="true"
            app:wheel_cyclic="true"
            app:wheel_item_text_color="#A7A7DB"
            app:wheel_item_text_size="20sp"
            app:wheel_selected_item_text_color="#536D8A"
            app:wheel_visible_item_count="3"/>
        <View
            android:layout_width="15dp"
            android:layout_height="match_parent"/>
        <com.aigestudio.wheelpicker.WheelPicker
            android:id="@+id/am_pm"
            app:wheel_item_text_size="20sp"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            app:wheel_item_space="10dp"
            app:wheel_same_width="true"
            app:wheel_atmospheric="true"
            app:wheel_curved="true"
            app:wheel_item_align="right"
            app:wheel_item_text_color="#A7A7DB"
            app:wheel_selected_item_text_color="#536D8A"
            app:wheel_visible_item_count="2"
             />

</LinearLayout>