Guide for how to create themes #63
Conversation
There was a problem hiding this comment.
Make an image without ticks. Put it in the drawable folder named dial_background_blank_<your theme name>.png
There was a problem hiding this comment.
Make an image with ticks. Put it in the drawable folder named dial_background_marks_<your theme name>.png
There was a problem hiding this comment.
Make a preview image showing the needle and the dial named ic_theme_<theme name>.png
There was a problem hiding this comment.
Make an image showing the needle named as needle_<your theme name>.png
| @@ -22,6 +22,7 @@ | |||
| <item>Dark</item> | |||
| <item>Mustang GT</item> | |||
| <item>BMW</item> | |||
| <item>MK</item> | |||
There was a problem hiding this comment.
Put the name of the theme in the Themes array.
| @@ -46,6 +47,7 @@ | |||
| <item>@drawable/ic_theme_dark</item> | |||
| <item>@drawable/ic_theme_ford</item> | |||
| <item>@drawable/ic_theme_bmw</item> | |||
| <item>@drawable/ic_theme_mk</item> | |||
There was a problem hiding this comment.
Put a reference to the preview image in the ThemesThumbs array. You specify it with @drawable/ic_theme_<your theme name> matching the file created for the thumbnail without the extension. It must be in the same position as the item you added to the Themes array.
| @@ -70,6 +72,7 @@ | |||
| <item>@style/AppTheme.Dark</item> | |||
| <item>@style/AppTheme.Ford</item> | |||
| <item>@style/AppTheme.BMW</item> | |||
| <item>@style/AppTheme.MK</item> | |||
There was a problem hiding this comment.
Add an item to the ThemeList array. It should be @style/AppTheme.<your theme name>. It must be in the same position as the previous two arrays.
| @@ -345,6 +345,21 @@ | |||
| <item name="sv_tickRotation">false</item> | |||
| </style> | |||
|
|
|||
| <style name="AppTheme.MK" parent="AppTheme"> | |||
There was a problem hiding this comment.
Create a new XML element in this file to declare your new theme. The item in ThemeList is pointing to this.
| <item name="themedDialBackground">@drawable/dial_background_blank_mk</item> | ||
| <item name="themedEmptyDialBackground">@drawable/dial_background_marks_mk</item> | ||
| <item name="themedBlankDialBackground">@drawable/dial_background_marks_mk</item> |
There was a problem hiding this comment.
Set these to reference your images. themedDialBackground should have the image with ticks. themedEmptyDialBackground and themedBlankDialBackground should have the ones without. This example is backwards.
| <item name="themedDialBackground">@drawable/dial_background_blank_mk</item> | ||
| <item name="themedEmptyDialBackground">@drawable/dial_background_marks_mk</item> | ||
| <item name="themedBlankDialBackground">@drawable/dial_background_marks_mk</item> | ||
| <item name="themedNeedle">@drawable/needle_mk</item> |
There was a problem hiding this comment.
Set to reference the needle image.
| <item name="themedEmptyDialBackground">@drawable/dial_background_marks_mk</item> | ||
| <item name="themedBlankDialBackground">@drawable/dial_background_marks_mk</item> | ||
| <item name="themedNeedle">@drawable/needle_mk</item> | ||
| <item name="themedStopWatchBackground">@drawable/dial_background_blank_mk</item> |
There was a problem hiding this comment.
This may be used in the future if we add the stopwatch feature back.
| <item name="sv_withIndicatorLight">false</item> | ||
| <item name="sv_indicatorLightColor">#44FFFFFF</item> |
There was a problem hiding this comment.
These can be used to control the blur effect when the dial is moving. It shows a light in the wake of the needle.
| <item name="themedBlankDialBackground">@drawable/dial_background_marks_mk</item> | ||
| <item name="themedNeedle">@drawable/needle_mk</item> | ||
| <item name="themedStopWatchBackground">@drawable/dial_background_blank_mk</item> | ||
| <item name="themedNeedleColor">@color/red</item> |
There was a problem hiding this comment.
Controls the color of the min/max triangle.
| <item name="themedNeedleColor">@color/red</item> | ||
| <item name="sv_withIndicatorLight">false</item> | ||
| <item name="sv_indicatorLightColor">#44FFFFFF</item> | ||
| <item name="sv_indicatorColor">@color/aqua</item> |
There was a problem hiding this comment.
This must be set to @color/aqua. It tells the app to use an image for the needle instead of just a square.
| <item name="sv_indicatorLightColor">#44FFFFFF</item> | ||
| <item name="sv_indicatorColor">@color/aqua</item> | ||
| <item name="sv_indicatorWidth">0dp</item> | ||
| <item name="sv_tickPadding">30dp</item> |
There was a problem hiding this comment.
You can set positive and negative padding to control how far inside or outside the ticks show. Positive padding is inside.
This PR is going to serve as a guide for how to create themes. It is an easy process and does not require any programming knowledge. You can create new themes just by editing XML files. Review the diff in this PR for a commentated walkthrough on how it is done.
Fork this repository. You can use any desktop Git client to commit your changes. Once you push up Github with automatically build it. Check the actions page of your forked repository to see it build. Once it is done building it should show in the releases page of your forked repository. You can then make a PR to request to have your theme merged.