/ Clock

A full options clock view

A full options clock view

Clock View

You are now able to create and design your own clock view with changing just attributes.
Over 20 attributes are available.

Setup

Gradle

Add it in your root build.gradle at the end of repositories:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Add the dependency

dependencies {
    implementation 'com.github.arbelkilani:Clock-view:1.0'
}

Maven

<repositories>
	<repository>
	    <id>jitpack.io</id>
	    <url>https://jitpack.io</url>
	</repository>
</repositories>

Add the dependency

<dependency>
    <groupId>com.github.arbelkilani</groupId>
    <artifactId>Clock-view</artifactId>
    <version>1.0</version>
</dependency>

How does this work ?

3 ways enable you to customise your own clock view design.

  • Example 1 : Using only XML, attributes :
<com.arbelkilani.clock.Clock
    android:id="@+id/clock_2"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:layout_weight="1"
    app:clock_value_step="full"
    app:show_center="true"
    app:center_inner_color="@color/white"
    app:clock_value_disposition="alternate"
    app:show_hours_values="true"
    app:show_seconds_needle="true" />
  • Example 2 : Using simple setters :
Clock clock = findViewById(R.id.clock);

clock.setShowBorder(true);
clock.setBorderColor(R.color.gray);
clock.setShowHoursProgress(true);
clock.setHoursProgressColor(R.color.black);
clock.setShowHoursValues(true);
clock.setClockValueStep(ClockValueStep.quarter);
clock.setShowCenter(true);
clock.setCenterOuterColor(R.color.black);
clock.setCenterInnerColor(R.color.gray);
...

  • Example 3 : Using ClockTheme builder :
Clock clock = findViewById(R.id.clock);

ClockTheme clockTheme = new ClockTheme.ClockThemeBuilder()
        .showBorder(true, R.color.gray)
        .showHoursProgress(true, R.color.black)
        .showMinutesProgress(true, R.color.black, 0.35f)
        .showMinutesValues(true, 0.37f)
        ...
        .showHoursValues(true, ClockValueStep.quarter)
        .build();
        
clock.setTheme(clockTheme);

results

Enumeration

  • ClockDegreeStep : quarter, full, twelve
  • ClockDegreeType : line, circle, square
  • ClockValueDisposition : regular, alternate
  • ClockValueStep : quarter, full
  • ClockValueType : none, roman, arabic

Available attributes

Attribute Type Description Default value
clockBackground Reference set a custom drawable background for the clock.
Example : clock.setClockBackground(R.drawable.background_7);
null
showCenter boolean show clock center or not
false
centerInnerColor Color clock center innner color
example = setCenterInnerColor(R.color.black);
Color.LTGRAY
centerOuterColor Color clock center border color
example = setCenterOuterColor(R.color.black);
Color.BLACK
showBorder boolean enable or disable showing border for analogical type. false
borderColor Color set color for the clock border once showBorder set to true. Color.BLACK
showHoursProgress boolean enable showing hours circular progress false
hoursProgressColor Color set color for the circular progress that show hours value. Color.BLACK
showMinutesProgress boolean enable showing minutes circular progress. false
minutesProgressColor Color set color for the circular progress that show minutes value. Color.BLACK
minutesProgressFactor float set factor for the miutes progress position, should be between 0.2f and 0.5f 0.4f
showSecondsProgress boolean enable showing seconds circular progress. false
secondsProgressColor Color set color for the circular progress that show seconds value. Color.BLACK
secondsProgressFactor float set factor for the seconds progress position, should be between 0.2f and 0.9f 0.7f
showSecondsNeedle boolean enable showing needle for the seconds value.
false
secondsNeedleColor Color set color for the seconds needle once showSecondsNeedle is set to true. Color.BLACK
hoursNeedleColor Color set color for the hours needle. Color.BLACK
minutesNeedleColor Color set color for the minutes needle. Color.BLACK
showDegrees boolean enable showing or hiding degrees. false
degreesColor Color set degrees color. Color.BLACK
clockDegreeType ClockDegreeType degrees could be on line, circle or square shapes. ClockDegreeType.line
clockDegreeStep ClockDegreeStep degrees could be set in 3 types : quarter, full or twelve. ClockDegreeStep.full
showHoursValues boolean show clock hours values false
hoursValuesColor Color set color for hours values. Color.BLACK
hoursValuesFont Reference set font for hours values.
Example : clock.setHoursValuesTypeFace(R.font.hunters);
R.font.proxima_nova_thin
clockValueType ClockValueType set values type, it could be none, roman, or arabic ClockValueType.none
clockValueDisposition ClockValueDisposition change methods of hours values disposition, it could be either regular or alternate. ClockValueDisposition.regular
clockValueStep ClockValueStep user could enable showing all hours values or just four of them. Values could be quarter or full. ClockValueStep.full
showMinutesValues boolean enable or not showning minutes values. false
minutesValuesFactor float set factor for minutes values disposition. Should be between 0.2f and 0.9f 0.4f

GitHub