Colored Time Range Selector

A smart colored time range selector. Users can select just free time with a handy colorful range selector.

Colored-Time-Range-SelectorB

Colored-Time-Range-Selector

Features

  • Select a time range between 2 hours
  • Highlight available time range with your desire color
  • Select just free times in a range
  • Two different type of view, with Selector and without it

Use it

build.gradle

dependencies {
    implementation 'de.ehsun.coloredtimebar:coloredtimebar:1.0'
}
Gradle

In your layout use the ColoredTimeBar as below:

<de.ehsun.coloredtimebar.TimelineView
            android:id="@+id/timelineView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:barColorAvailable="@color/available_time_default_color"
            app:barColorHighlight="@color/selector_default_color"
            app:barColorNotAvailable="@color/timeline_default_color"
            app:barWidth="16dp"
            app:fractionLineColor="@color/separatorDark"
            app:fractionLineLength="8dp"
            app:fractionLineWidth="1dp"
            app:fractionPrimaryTextColor="@color/fraction_default_color"
            app:fractionSecondaryTextColor="@color/fraction_default_color"
            app:fractionTextInterval="2"
            app:fractionTextSize="8sp"
            app:timeRange="07:00-19:00" />
XML

In your code you can easily set the available time by passing an array of time range string as below:

timelineView.setAvailableTimeRange(listOf("07:00 - 10:15", "12:00 - 15:00"))
Kotlin

And to enable picker handles use it as below:

<de.ehsun.coloredtimebar.TimelinePickerView
                android:id="@+id/timelinePicker"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:barColorAvailable="@color/available_time_default_color"
                app:barColorHighlight="@color/selector_default_color"
                app:barColorNotAvailable="@color/timeline_default_color"
                app:barWidth="24dp"
                app:fractionLineColor="@color/separatorDark"
                app:fractionLineLength="8dp"
                app:fractionLineWidth="1dp"
                app:fractionPrimaryTextColor="@color/colorGrey900"
                app:fractionSecondaryTextColor="@color/colorBlueGrey500"
                app:fractionTextInterval="1"
                app:fractionTextSize="8sp"
                app:stepSize="15"
                app:timeRange="07:00-19:00" />
XML
timelinePicker.setOnSelectedTimeRangeChangedListener { from, to ->
            selectedTimeTextView.text = getString(R.string.from_to, from.format(), to.format())
        }
Kotlin
Colored Time Range Bar Selector

GitHub