Your First Android Project

Welcome to the Android App Backstage!

Imagine your Android app as a play. The code is the script, bringing the characters (activities and services) to life. But every play needs props, costumes, and sets, right? That’s where resource files come in!

The res folder is your app’s backstage, filled with all the visual elements, sound effects (you’ll get there!), and even text for your app.

In Android Studio, expand the Project view by pressing Command-1 on macOS or Alt-1 on Windows/Linux. Or, click the icon that looks like a folder in the upper-left corner of the IDE:

Expand the res folder and see what folders are inside:

• Layouts (res/layout/): This folder isn’t there by default anymore. If you were using XML layouts anywhere in your app, this is where they’d go. Think of layouts as blueprints for your app’s screens. These XML files would define how buttons, images, and text are arranged. Imagine them as sketches for the stage where you place everything. But Jetpack Compose throws away the old blueprints! Instead, you build the sets and scenes directly in code. Think of it as having a super flexible stage where you can create anything on the fly.
• Drawables (res/drawable/): Here live your app’s costumes and props! This folder stores images (icons, backgrounds) and even animations. Got a cool character icon? It goes here! Expand the drawable folder, and you’ll see two XML resource files there already, ic_launcher_foreground.xml and ic_launcher_background.xml. These two files define the vector assets for the app icon foreground and background layers, respectively. Open each to see what the code looks like. You could replace these with your own custom app icon assets.

• Values (res/values/): The toolbox! This folder stores various bits of data your app uses, like dimensions (sizes), strings (text), and even styles (fonts, colors for different elements). Think of it as a box with precut props and premixed paints — ready to use!
  • Colors (res/values/colors.xml): Sets the mood! This folder holds color definitions for your app’s elements. Want to make a button pop? Assign a bright color here. The color is specified using an RGB value and alpha channel. Open colors.xml to see the color definitions already provided for you by default. Additionally, if you want different colors for different button states, you can use a ColorStateList object, defined in res/color/filename.xml, where the filename is used as the resource ID. In your Kotlin code, you can use a special built-in object, R (for “Resource”), to access a resource by name, such as R.color.filename for a ColorStateList or R.color.color_name for a color. You’ll learn more about R in the next section.
  • Dimension (res/values/dimens.xml): This is another file that doesn’t exist in a new project by default. Imagine this file as a ruler for your stage. It stores all the measurements (sizes) you use in your app in a single place. Buttons need to be a specific width and Text needs a certain size. Define them here with easy-to-understand names like “button_width” or “text_size”. This way, you can change the size throughout your app by simply referring to the name in dimens.xml, keeping your code clean and organized! A dimension is specified with a number followed by a unit of measure, such as 10px, 2in, or 5sp. More on dp and some of the other units in a moment.
  • Themes (res/values/themes.xml): This file is like your app’s costume designer! It holds predefined styles for various UI elements like buttons, text views, and backgrounds. You can set attributes like font styles, colors, and even shapes here. Imagine having predesigned outfits for your actors — instead of defining everything every time, you can just reference the costumes in themes.xml for a consistent look! themes.xml can even be set to light or dark mode, allowing your app to adapt to user preferences.
  • Strings (res/values/strings.xml): This file is the scriptwriter for your app! It stores all the text your app displays, from button labels to error messages. Think of it as the cue cards for your actors. Having them all in one place makes it easy to change text throughout the app or even translate it for different languages! Click the strings.xml file, and you’ll see there’s currently only one string defined there, the name of your app. In the next section, you’ll learn more about managing strings in your app.
• Mipmaps (res/mipmap/): Special costumes for your app’s icon! This folder holds icons in various sizes to fit different devices. Think of it as having different sized shirts for your main character, so they look good on any stage. Open this folder, and you’ll see an XML file, ic_launcher.xml, that’s provided for you by default, that combines the icon foreground and background assets you saw earlier into the actual app icon.

As you saw a moment ago, Android has a bunch of different unit types. Here’s a breakdown of some of the more commonly used ones:

dp (density-independent pixels): Imagine you’re a set designer for a play, and you want to make sure a button on stage appears the same size regardless of the theater. In the world of Android layouts, dp is your tool for achieving that consistency. It is a virtual unit that takes the screen’s density into account. One dp is roughly equivalent to one pixel on a medium-density screen (around 160 dpi). The Android system automatically scales dp values based on the device’s actual screen density.

• Pixels vs. dp: A regular pixel (px) is the basic unit for representing a single dot on the screen. However, screens come in all shapes and sizes, with varying pixel densities (dpi — dots per inch). A 100px button on a high-density phone might look tiny on a low-density tablet.
• Benefits of using dp: By using dp in your layouts, you ensure your UI elements (buttons, text, etc.) appear roughly the same size across different Android devices. This ensures that your app remains consistent and user-friendly on any screen.

Here’s an analogy:

Imagine you design your layout using millimeters (mm) instead of dp, A 10mm button on a high-resolution phone might look great, but on a lower-resolution screen, it might appear gigantic and out of place. dp acts like a smart mm that adjusts itself based on the “ruler” (screen density) of the device.

In short, using dp helps you achieve a consistent and user-friendly UI across a wide range of Android devices.

sp (scale-independent pixels): This is like the dp unit, but it’s also scaled by the user’s font size preference. It is recommended that you use this unit when specifying font sizes so they adjust for both screen density and the user’s preference.

There’s more to explore, like storing sounds (res/raw/) and animations (res/anim/), but this gives you a good idea of how resources bring your app to life.

Now, the coolest part: Android can adjust these resources based on the device! For example, it can show a bigger icon on a tablet or use the corresponding text according to the language of the device. Pretty neat, huh?

So, next time you open your res folder, remember — it’s not just random files. It’s the behind-the-scenes magic that makes your app look and feel amazing!

For a complete list of all the resource types, see the Android developer documentation.

Continue to the next section to update your app with strings, images, and a custom app icon!