A full options clock view
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
clock
gradle/wrapper
wiki
.gitignore
LICENSE
README.md
build.gradle
gradle.properties
gradlew
gradlew.bat
settings.gradle

README.md

Clock View

Codacy Badge License minSdkVersion targetSdkVersion

cover

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

Credits

Developed by : Belkilani Ahmed Radhouane
Inspired and based on Souissi Dorsaf design.

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

License

Copyright 2018 Belkilani Ahmed Radhouane

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.