msoftware/clock-view

A full options clock view

Clock View

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);

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.