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.
Developed by : Belkilani Ahmed Radhouane
Inspired and based on Souissi Dorsaf design.
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.1'
}
<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.1</version>
</dependency>
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);
- ClockDegreeStep : quarter, full, twelve
- ClockDegreeType : line, circle, square
- ClockValueDisposition : regular, alternate
- ClockValueStep : quarter, full
- ClockValueType : none, roman, arabic
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 |
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.