Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Guide for how to create themes #63

Open
wants to merge 1 commit into
base: mk_pre
Choose a base branch
from
Open

Guide for how to create themes #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added app/src/main/res/drawable/dial_background_blank_mk.png
View file
Open in desktop
Copy link
Owner Author

@agronick agronick Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make an image without ticks. Put it in the drawable folder named dial_background_blank_<your theme name>.png

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/main/res/drawable/dial_background_marks_mk.png
View file
Open in desktop
Copy link
Owner Author

@agronick agronick Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make an image with ticks. Put it in the drawable folder named dial_background_marks_<your theme name>.png

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/main/res/drawable/ic_theme_mk.png
View file
Open in desktop
Copy link
Owner Author

@agronick agronick Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make a preview image showing the needle and the dial named ic_theme_<theme name>.png

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added app/src/main/res/drawable/needle_mk.png
View file
Open in desktop
Copy link
Owner Author

@agronick agronick Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make an image showing the needle named as needle_<your theme name>.png

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/src/main/res/values/arrays.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
<item>Dark</item>
<item>Mustang GT</item>
<item>BMW</item>
<item>MK</item>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Put the name of the theme in the Themes array.

<item>Test</item>
</string-array>

Expand All @@ -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>
Copy link
Owner Author

@agronick agronick Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<item>@drawable/ic_theme_test</item>
</array>

Expand All @@ -70,6 +72,7 @@
<item>@style/AppTheme.Dark</item>
<item>@style/AppTheme.Ford</item>
<item>@style/AppTheme.BMW</item>
<item>@style/AppTheme.MK</item>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<item>@style/AppTheme.Testing</item>
</array>

Expand Down
15 changes: 15 additions & 0 deletions app/src/main/res/values/styles.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,6 +345,21 @@
<item name="sv_tickRotation">false</item>
</style>

<style name="AppTheme.MK" parent="AppTheme">
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
Comment on lines +349 to +351
Copy link
Owner Author

@agronick agronick Oct 31, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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="themedNeedle">@drawable/needle_mk</item>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Set to reference the needle image.

<item name="themedStopWatchBackground">@drawable/dial_background_blank_mk</item>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may be used in the future if we add the stopwatch feature back.

<item name="themedNeedleColor">@color/red</item>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Controls the color of the min/max triangle.

<item name="sv_withIndicatorLight">false</item>
<item name="sv_indicatorLightColor">#44FFFFFF</item>
Comment on lines +355 to +356
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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="sv_indicatorColor">@color/aqua</item>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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_indicatorWidth">0dp</item>
<item name="sv_tickPadding">30dp</item>
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can set positive and negative padding to control how far inside or outside the ticks show. Positive padding is inside.

<item name="sv_tickRotation">false</item>
</style>

<style name="AppTheme.Testing" parent="AppTheme">
<item name="themedCarBackground">@drawable/background_incar_test</item>
<item name="themedDialBackground">@drawable/dial_background_test</item>
Expand Down