How do you display 24 hour time format in hourly increments on a time slider in android?-ThrowExceptions

Exception or error:

I have a 2 step question here:
1) How do I display a time slider UI which scrolls horizontally upon touch in a 24-hour format?
2) How do I divide it into a 24 hour format with each slot consisting of a 1 hour slot each?

The time slot is divided into hourly increments, such that only 8 hours are visible at a time ( but it’s actually a 24 hour time slider which scrolls horizontally)
Also, I am planning to make it such that based on the start and end time returned by the JSON I am using, it shows the available time slot in green and non-available time slot in gray ( but that’s from data perspective, planning to implement that next once I get the slider working, just to give an oversight of what I am planning to achieve)

I have the code chalked out for the cardview as below ( which is in a recyclerview), only struggling with the notion of what’s the best way to implement a time slider. any help appreciated!
Here’s the cardview code without the timeslider included :

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout 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:id="@+id/event_card_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:orientation="vertical">

    <android.support.v7.widget.CardView
        android:id="@+id/event_card_view"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:cardBackgroundColor="@color/white"
        android:orientation="vertical"
        app:cardCornerRadius="1dp"
        app:cardElevation="4dp">

        <LinearLayout
            android:id="@+id/card_view_linear_container"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/cover_image_view"
                android:layout_width="116dp"
                android:layout_height="82dp"
                android:contentDescription="@null"
                android:scaleType="fitCenter"
                tools:src="@drawable/ic_rabbit" />

            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <TextView
                    android:id="@+id/title_text_view"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="20dp"
                    android:layout_marginTop="16dp"
                    android:layout_marginEnd="20dp"
                    android:layout_marginBottom="8dp"
                    android:ellipsize="end"
                    android:gravity="start"
                    android:lineSpacingExtra="0sp"
                    android:lineSpacingMultiplier="1.2"
                    android:maxLines="2"
                    android:textAppearance="@style/TextAppearance.Text.Graphik.Semibold"
                    android:textColor="@color/black"
                    android:textSize="14sp"
                    android:textStyle="bold"
                    tools:text="Content Error" />
                <RelativeLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/title_text_view">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:id="@+id/seating_capacity"
                        android:layout_marginStart="20dp"
                        android:drawableStart="@drawable/ic_seats"
                        android:textAppearance="@style/TextAppearance.Text.Graphik.Regular"
                        android:textColor="#6f6f6f"
                        tools:text="5"/>
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="9dp"
                        android:id="@+id/floor_number"
                        android:layout_toEndOf="@id/seating_capacity"
                        android:textAppearance="@style/TextAppearance.Text.Graphik.Regular"
                        android:text="9th Floor"
                        android:textColor="#6f6f6f"
                        android:drawableStart="@drawable/ic_floors"/>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentEnd="true"
                        android:id="@+id/room_price"
                        android:layout_marginEnd="20dp"
                        android:textAppearance="@style/TextAppearance.Text.Graphik.Semibold"
                        android:text="$50/hr"
                        android:textColor="#232527"
                        />

                </RelativeLayout>


            </RelativeLayout>

        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

Happy to share more code or any details if need be! Also, would help if you could add your solutions with respect to my code. thanks in advance!

Here are more details on the JSON and activity and adapter classes I am using for more details:
https://pastebin.com/cBFQeHKU ( JSON class). Please note: the timeline reflects the data in “bookings” section as in started_at and ended_at time there for the booked part (grayed out part) and rest of the times in 24 hours it’s supposed to display available. A little bit of context to map it: say the timeline displays 24 hours and the room is booked from 11:01 am to 11:30 am, and 1:05 pm and 1:45 pm, it will gray out the slot between 11 am to 11:30 am and 1 pm to 2 pm. So it’s only supposed to gray out in 30-minute increments making it easier to map it out.

Here are my model classes:
https://pastebin.com/LBH7B9YY ( this class to retrieve individual data)

here’s a second model class the retrieves the data above as an array list:

public class AllRoomsResponse extends ArrayList<AllRooms>{
}

here’s my fragment:
https://pastebin.com/gt2kgm25

here’s my adapter:
https://pastebin.com/0neKYuKF

here’s my presenter where I make the call to API:
https://pastebin.com/GCuTKNwp

and finally, here’s datetimeutils function which I use for returning date used in the fragment code :

 public static Date getSelectedRoomDateFormat(String date) {
        try {
            return new SimpleDateFormat("EEE, MMM d",Locale.US).parse(date);
        } catch (ParseException e) {
            Timber.e(e, "getIsoFormat() exception log");
        }
        return null;

    }

Open to sharing more details for context or as needed.

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *