Missing Resources
Before we can move on to coding the logic behind our layout, we need to make sure all the supporting files referenced in activity_main.xml actually exist. These include things like:
Text labels stored in strings.xml .
Colors used across the UI from colors.xml .
Drawable resources like icons and button backgrounds.
Navigation menu definitions for the bottom bar.
While the layout file is the visual structure, these resources are the ingredients that give it color, text, icons, and interactivity. in this section, we’ll go through each of these files step by step
You’ll learn haw to create each type of resource and how they plug into the XML layout you’ve already written.
Strings.xml - String Resources
The strings.xml file stores all the text values we reference in our layout. This lets us keep the app easily translatable, organized, and clean by avoiding hardcoded text directly in the layout files.
Instructions
In Android Studio, navigate to: “res/values/strings.xml”.
If the file doesn’t exist, right-click the values folder and then select: “New -> Values Resource File”. Name it strings.xml .
At this stage of the app, we only include string resources actually used in activity_main.xml , such as the app name, UI button labels, device status message, content description for accessibility, and titles for the bottom navigation menu.
We’ll introduce more strings later as we build out additional screens and logic.
Strings.xml
<resources>
<!-- App Title -->
<string name="app_name">Project Void</string>
<string name="headerTitle">Desk LEDs Controller</string>
<!-- Main Screen Buttons -->
<string name="select_device_button">Select Device</string>
<string name="animationsButton">Animations</string>
<string name="static_color_button">Static Color</string>
<!-- Device Status -->
<string name="device_not_connected">Connect to a device</string>
<string name="device_icon_desc">Device Icon</string>
<!-- Bottom Navigation Titles -->
<string name="home">Home</string>
<string name="animations">Animations</string>
<string name="static_colors">Static Colors</string>
<string name="settings">Settings</string>
</resources>
Colors.xml - Color Resources
The Colors.xml file defines named color values that we reference throughout the layout to maintain a consistent theme, support dark mode, and allow for easy future updates.
Instructions
In Android Studio navigate to: “res/values/colors.xml”.
If the file doesn’t exist, right-click the values folder and then select: “New -> Values Resource File”. Name it colors.xml .
Just like with strings, we’re introducing only the colors that are currently used in activity_main.xml .
Colors.xml
<resources>
<!-- Core Theme Colors -->
<color name="backgroundColor">#1A1A1A</color>
<color name="AccentColor">#8E05C2</color>
<color name="primaryTextColor">#FFFFFFFF</color>
<color name="SecondaryColor">#2A2A2A</color>
<!-- Button Styling -->
<color name="roundedButtonColor">#700B97</color>
</resources>
Creating button_background_with_outline.xml
To style the frame around the Select Device button in the corner of the main layout, we need to create a custom drawable background with a solid color, rounded corners, and a visible border.
Instructions:
In Android Studio, locate the “res/drawable” folder in your project".
Right-click the drawable folder and select: “New -> Drawable Resource File”.
Name the file: button_background_with_outline.xml .
Choose shape as the element.
This drawable will be used as the background for a FrameLayout , giving it a modern look with an accent-colored outline and subtle rounding.
button_background_with_outline.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- Fill color for the button background -->
<solid android:color="@color/SecondaryColor" />
<!-- Border with desired width and color -->
<stroke
android:width="2dp"
android:color="@color/AccentColor" />
<!-- Rounded corners -->
<corners android:radius="8dp" />
</shape>
Creating ic_device.xml
This file defines a vector drawable used as the icon for Select Device ImageButton in the top-right corner of the main screen.
To create this file, follow the same instructions from button_background_with_outline.xml to create a new drawable, but name it: ic_device.xml .
This vector drawable displays a simple outline of a smartphone to represent connected devices in the app.
ic_device.xml
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<!-- A simple outline of a smartphone/device -->
<path
android:fillColor="@color/primaryTextColor"
android:pathData="M17,1H7c-1.1,0 -2,0.9 -2,2v18c0,1.1 0.9,2 2,2h10c1.1,0 2,-0.9 2,-2V3c0,-1.1 -0.9,-2 -2,-2zM17,21H7V3h10v18zM12,19c0.55,0 1,-0.45 1,-1s-0.45,-1 -1,-1 -1,0.45 -1,1 0.45,1 1,1z"/>
</vector>
Creating rounded_button.xml
This drawable is used as the background for both the Animations and Static Color buttons. It creates a modern, pill-shaped button with a colored background and a ripple effect on tap.
To create this file, follow the same instructions as in button_background_with_outline.xml , but name it: rounded_button.xml .
rounded_button.xml
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#99444444">
<!-- Content item: draws the original button background -->
<item>
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<solid android:color="@color/roundedButtonColor" />
<padding
android:left="8dp"
android:right="8dp"
android:top="8dp"
android:bottom="8dp" />
</shape>
</item>
<!-- Mask item: defines the ripple’s clipping area -->
<item android:id="@android:id/mask">
<shape android:shape="rectangle">
<corners android:radius="12dp" />
<solid android:color="@android:color/white" />
</shape>
</item>
</ripple>
Creating bottom_navigation_menu.xml
This file defines the menu items for the BottomNavigationView at the bottom of the main screen. Each item includes an icon and label and corresponds to a navigation destination such as Home, Animations, Static Color and Settings.
Instructions
Open: “res/menu” folder.
If menu doesn’t exist right-click res and choose: “New -> Android Resource Directory -> Type: menu”.
Then right-click the menu folder and select: “New -> Manu resource File”.
Name it: bottom_navigation_menu.xml .
bottom_navigation_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Home Tab -->
<item
android:id="@+id/home"
android:icon="@drawable/ic_home"
android:title="@string/home" />
<!-- Animations Tab -->
<item
android:id="@+id/animations"
android:icon="@drawable/ic_animations"
android:title="@string/animations" />
<!-- Static Colors Tab -->
<item
android:id="@+id/static_color"
android:icon="@drawable/ic_static"
android:title="@string/static_colors" />
<!-- Settings Tab -->
<item
android:id="@+id/settings"
android:icon="@drawable/ic_settings"
android:title="@string/settings" />
</menu>
Drawable Resources For bottom_navigation_menu.xml
The bottom navigation menu references several icons from the drawable folder. Below are vector drawables you’ll need to create for each tab.
To create these files follow the same steps as used for ic_device.xml, and name each file accordingly.
ic_home.xml
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@color/primaryTextColor"
android:pathData="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</vector>
ic_animations.xml
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@color/primaryTextColor"
android:pathData="M4,4h16v2H4zm0,6h10v2H4zm0,6h16v2H4z"/>
</vector>
ic_static.xml
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@color/primaryTextColor"
android:pathData="M12 2a10 10 0 1 0 0.001 20.001A10 10 0 0 0 12 2zM7 13h10v-2H7v2z"/>
</vector>
ic_settings.xml
<vector
xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@color/primaryTextColor"
android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94s-0.02,-0.64 -0.06,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.4 0.12,-0.61l-1.92,-3.32c-0.11,-0.2 -0.35,-0.28 -0.56,-0.22l-2.39,0.96a7.007,7.007 0 0 0 -1.62,-0.94L14.5,2.81c-0.05,-0.22 -0.25,-0.38 -0.48,-0.38h-4c-0.23,0 -0.43,0.16 -0.48,0.38l-0.38,2.45c-0.58,0.23 -1.12,0.55 -1.62,0.94L5.15,5.24c-0.21,-0.06 -0.45,0.02 -0.56,0.22L2.67,8.78c-0.11,0.21 -0.06,0.47 0.12,0.61l2.03,1.58c-0.04,0.3 -0.06,0.61 -0.06,0.94s0.02,0.64 0.06,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.4 -0.12,0.61l1.92,3.32c0.11,0.2 0.35,0.28 0.56,0.22l2.39,-0.96c0.5,0.39 1.04,0.71 1.62,0.94l0.38,2.45c0.05,0.22 0.25,0.38 0.48,0.38h4c0.23,0 0.43,-0.16 0.48,-0.38l0.38,-2.45c0.58,-0.23 1.12,-0.55 1.62,-0.94l2.39,0.96c0.21,0.06 0.45,-0.02 0.56,-0.22l1.92,-3.32c0.11,-0.2 0.06,-0.47 -0.12,-0.61l-2.03,-1.58zM12,15.5c-1.93,0 -3.5,-1.57 -3.5,-3.5s1.57,-3.5 3.5,-3.5 3.5,1.57 3.5,3.5 -1.57,3.5 -3.5,3.5z"/>
</vector>
Summary
In this section, we created all the supporting resources required for our activity_main.xml layout to compile and render correctly in Android Studio. These included:
strings.xml - for button labels, status messages, and navigation titles.
colors.xml - for background, accent, and text colors.
drawable files - for buttons, backgrounds, and icons.
bottom_navigation_menu.xml - to define the navigation bar.
Each file was explained with purpose, location, and minimal content to reflect exactly what’s used so far - nothing extra. As we build more screens and functionality, we’ll continue to extend these resources incrementally.
