Install and Modify Your App Theme

In this guide, we’ll explore how to customize your Shoutem app’s appearance and navigation layout with a range of extensive customization options. By following these steps, you’ll be able to fine-tune your app’s appearance, colors, and styles to match your brand’s identity.

We’ve put together two videos to showcase the basic and more advanced modification options available through the Shoutem Builder. Take a look at each for a visual walkthrough, or just keep reading for step-by-step instructions!

Setting Navigation Preferences

Watch a video walkthrough tutorial of Shoutem’s main navigation/style customization options:

Selecting the Navigation Layout

Shoutem offers several main navigation layout options, such as a tab bar, card list, drawer, icon grid, simple list, tile grid, and more. 

To change your app navigation layout:

1. Click on “Main Navigation” at the top of your Screens list.
2. Confirm that the Main Navigation tab automatically opened to the “Layout” category.
3. Browse the navigation options, and click on the main navigation layout you’d like to use.

Your selection will save automatically.

Choosing a Start Screen

The start screen is the first screen that shows when a user opens your app. By default, the start screen will open to the first screen listed in your navigation.

If you’d like your app to open to a different screen upon first load, do the following:

1. Within the Main Navigation settings, click on the “Layout” category.
2. Click the dropdown for “Starting screen.”
   
3. Select your preferred starting screen from the dropdown list. This list will show all screens currently included in your main navigation. 

Your selection will save automatically.

Selecting Display Preferences for Navigation Text & Icons

For each navigation layout option, you can select your display preference for screen titles and/or icons. 

Under “Settings” for your preferred navigation layout, click the “Icons and Text” dropdown menu. Select one of the following options: 

1. Show text only – Displays only the name of each screen in your navigation.
2. Show icons only – Displays only the icon for each screen in your navigation.
3. Show text and icons – Displays both the name and the icon for each screen in your navigation.

Your selection will save automatically.

Modifying Navigation Text

To change the name of a screen as it’s displayed in the main app navigation, go to that screen on the left-hand side of the builder.

1. Select the screen you want to modify. 
2. Click the three dots in the top right corner of the builder, then select ‘Rename.’
3. Update the name of the screen in the text field, then click ‘Save.’

Modifying Navigation Icons

To update the icon that is associated with each screen,

4. Within the Main Navigation settings, click on the “Icons” category.
5. Click on the icon that you’d like to update.
6. Select an icon from the provided “Theme icons” list, or upload your own custom icons in the “My icons” list.

Your selections will save automatically.

Adding Custom Navigation Bar Images

To customize the navigation bar with a background image that fits your app’s theme or styling, do the following:

1. Within the Main Navigation settings, click on the “Navigation Bar” category.
2. Upload two custom images: One for devices with no notch, the other for devices with notches.
   
3. Select your preferences for where the navigation bar image should show, whether or not it should fill the navigation screen width, and whether or not the screen name should be visible on top of the background image.
   

Note that sometimes, a specific screen’s layout may prevent the navigation bar image from displaying. If this occurs, navigate to that screen’s layout settings and select a layout that displays the top navigation bar setting.

Your selections will save automatically.

Advanced Style Customizations 

Watch a video walkthrough tutorial of Shoutem’s advanced style customization options:

Changing the Overall Theme

We offer several predefined color themes to apply to your app, including such options as Prime, Blue, Noir, and Rose. To change your app’s theme, do the following:

1. Navigate to “Style” in the far-left sidebar of the Shoutem builder.
2. Select “Theme.” Your current theme selection will show.
3. Click “Change theme” to select a new theme.
   
4. All currently available theme options will appear on the page. Select your preferred theme, then click “Apply theme.”
   

When changing a theme from dark to light, or from light to dark, keep in mind that you other color adjustments may be needed, such as optimizing text colors to ensure visibility against the new theme colors.

Customizing Theme Options

For more styling options, such as colors, fonts, and spacing settings, click on “Style” in the far-left navigation pane, and then click on “Customize theme.”

Here, you can select your custom preferences for basic background colors, shadow colors, fonts, font weights, heading colors, button options and overlays, and toast (alert) message colors. 

When you’re finished making your selections, click “Save” on the bottom right of your screen.

Updating Advanced Main Navigation Options

To customize main navigation colors, fonts, spacing settings, and more, go to “Style” in the far-left navigation pane, then “Main Navigation.” 

After you’ve set your preferences within this section, click the “Save” button at the bottom of the screen. 

Enabling Additional Fonts

By default, your Shoutem app includes three fonts: Rubik-Regular, NotoSans, and NotoSerif. By upgrading to the Professional plan, you will enable additional fonts in your app. 

To add fonts, do the following:

1. Navigate to the “Style” tab in the far-left navigation pane.
2. Select “Fonts” in the main Style navigation.
3. Click “Add font” on the right.
   
4. Type the name of the font you’d like to add and click “Next.”
5. Upload the standard, bold, italic, and bold-italic font files, then click “Add.”

Building Out Your Shoutem App

This tutorial on adding and managing content using the Shoutem App Builder is just one in a larger series on Getting Started with Shoutem. Learn more about customizing your Shoutem app with the following in-depth tutorials from the series: 

• How to Use the Shoutem App Builder
• How Do I Add Content to My App?
• How App Updates Work
• How to Publish Your App

If you have any additional questions regarding using the Shoutem Builder to create your own app, reach out to our support team!