styles_themes.adoc

Styles and Themes

Styles and themes on Android allow you to separate the details of your app design from the UI structure and behavior, similar to stylesheets in web design.

A style is a collection of attributes that specify the appearance for a single View. A style can specify attributes such as font color, font size, background color, and much more.

A theme is a type of style that’s applied to an entire app, activity, or view hierarchy—not just an individual view. When you apply your style as a theme, every view in the app or activity applies each style attribute that it supports. Themes can also apply styles to non-view elements, such as the status bar and window background.

Styles and themes are declared in a style resource file in res/values/, usually named styles.xml.

Build variants

Each applications use the flavor concept at the build gradle level which allows to easily create variants of these applications. Currently, the default variant is generic which allows you to apply, among other things, the basic colors of the theme and the icons of the mobile applications following the main colors of the French National Park. When building applications, it is therefore necessary to specify the variant to be used by gradle:

In debug mode:

./gradlew clean assembleGenericDebug

How to register a new build variant

You have to modify each build.gradle file located in each application directory and add a new variant to productFlavors. For example, if you want to create the named pnm we’ll get:

android {
    // ...
    productFlavors {
        generic {}
        // ...
        pnm {}
    }
    // ...
}

When building applications, it will be necessary to specify the variant to be used by gradle.

In debug mode:

./gradlew clean assemblePnmDebug

Adding a color theme

Once the build variant has been created, you now need to add a new directory with the same name as this variant in the src/ directory of each application:

• main: the directory of resources and sources for each application

• pnm: The directory for the pnm variant.

Copy the res/values/colors.xml from default to the directory of the new variant:

• primary: the primary color of the theme

• primary_dark: the dark variant of the theme’s main color

• accent: accent color

Application icon

The artwork/ directory contains the icons in SVG format (including *_launcher.svg). You can use this to create a new icon that will be used as the launcher of each application. Ideally, you should stick to the following principles:

• SVG format

• No margin

• Icon in black only with no background (transparent)

Then use Asset Studio (from Android Studio) to generate a new set of icons.

Application name

To change the name of the application, copy the files res/values/strings.xml and res/values-fr/strings.xml from the src/main directory to the directory of the new variant, respecting the tree structure.

Then, we can edit each strings.xml file and keep only the node containing the key app_name:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">My application</string>

</resources>

Gradle will simply merge the default resources (src/main/res) with the resources of the variant selected during the build. So you don’t need to keep everything copied to the variant but just take the resources we want to replace.

Application ID

Changing the app name doesn’t prevent conflicts with other Occtax applications. If you think your users may install and use your application alongside another Occtax applications, you may want to change it’s ID in the occtax/build.gradle file, so that the terminal can understand it’s a distinct application.

android {
    // ...
    defaultConfig {
        applicationId "fr.geonature.myocctax"
        // ...
    }
    // ...
}

Be aware that if you do so, your application will be treated by the user’s terminal as a different app from any previous version. Opening the new apk will not launch an update of the existing app, but the installation of a new one. To obtain the new version, users will have to fully uninstall the previous version before. Therefore, it is preferable to make this change before you release your application.

Changing the ID also changes the repository where the application files are located (settings, local db). Don’t forget to set the gn_commons.t_mobile_apps.package field accordingly in your GeoNature instance.