About

App resources are static additional files that your source code uses to build your application. This can be:

  • bitmaps (images)
  • Layout definitions (XML)
  • User Interface strings
  • Animation instructions

They are stored inside the res folder. Once you store your app resources, you can access them using Resource IDs that are generated in your project's R class.


Best Practice
You should always externalize app resources such as images and strings from your code, so that it can be maintained independently.
You should place each type of resources in their respective folders. {: .prompt-tip}



App resources

Some folders such as Animators are not generated by default inside the project template. You can add them later on.



Animator & anims

Animations work with these few files:

  • animator: XML files that define property animations
  • anim: XML files that define tween animations

About animators
Property animations can also be saved in the anim directory, but the animator folder is preferred for property animations to distinguish between the 2 types. {: .prompt-info}


drawables

They are Bitmap files (.png, . jpg, .gif) or XML files that are compiled into drawable resource subtypes:

  • Bitmap files
  • Nine-Patches
  • State lists
  • Shapes
  • Animation drawables
  • Other drawables

layouts and designs

The layouts and looks of your app takes a few folders to store:

  • layout : They store XML files that makes up your user interface, we have seen them when we define your MainActivity.xml
  • menu : XML files that define app menus such as options menu, context Menu, or sub menus.
  • mipmap : Stores different desity drawable files for your app launcher icon
  • Font: Stores font files with extensions like .ttf .otf .ttc or XML files that includes a <font-family> element. You can use this to add your own custom fonts.

arbitraries

We have 3 folders that store arbitrary files:

  • XML : XML files that can be read at runtime by calling Resources.getXML()
  • raw : Arbitary files to save in their raw form.
  • values : XML files that contain simple values,



raw folder

This folder is used to store raw abitary files, by raw i mean binaries, such as mp3, mp4 etc.

To create this subdirectory:

Plain Text
res > New > Android Resource Directory
Resouce type: raw

Adding files to this directory is a simple drag and drop.



values folder

this folder store files that contains simple values such as strings, integers and colors.


colors.xml

colors.xml defines a state list of colors. Here is where you can define custom colors with variable names that you can call inside your project folders. This is automatically generated when you use a color value.

XML
<?xml version="1.0" encoding="utf-8"?>  
<resources>  
    <color name="black">#FF000000</color>  
    <color name="white">#FFFFFFFF</color>  
</resources>

You can use them in your layout files like so:

XML
<TextView
    android:backgound="@color/black">

and call this in your java source code like so:

Java
int colorBlack = resources.getColor(R.color.black);

Colors confusion
The colors in android is defined as the following, it is not the same as the standard web Hex code with #RRGGBBAA format.

Plain Text
#RGB
#ARGB
#RRGGBB
#AARRGGBB

{: .prompt-warning}



strings.xml

A string resource stores text strings for your application with customizable format and styling. This decouples our application code from things like welcome texts etc.

they are defined this way:

XML
<?xml version="1.0" encoding="utf-8"?>  
<resources>
    <string name="app_name">ResoucesApp</string>
    <string name="text_welcome">Hello welcome</string>
</resources>

To use them in our layout:

XML
<TextView
    android:backgound="@string/text_welcome">

To use them in our java source code

Java
String welcome = resources.getString()

String arrays We can also declare an array of strings:

XML
<?xml version="1.0" encoding="utf-8"?>  
<resources>
    ...
    <string name="text_welcome">Hello welcome</string>
    <string-array name="Names">
        <item>Alex</item>
        <item>Steve</item>
        <item>Jeb</item>
    </string-array>
</resources>



themes

This subfolder specifies the look of your application based on light / dark modes.

XML
<resources xmlns:tools="http://schemas.android.com/tools">  
    <!-- Base application theme. -->  
    <style name="Base.Theme.StoneCamera" parent="Theme.Material3.DayNight.NoActionBar">  
        <!-- Customize your light theme here. -->  
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->    </style>  
  
    <style name="Theme.StoneCamera" parent="Base.Theme.StoneCamera" />  
</resources>

Making fullscreen apps

To make your application goes full screen you need to change this line of code within the themes.xml so that it specifies NoActionBar

XML
<style name="Base.Theme.StoneCamera" parent="Theme.Material3.DayNight.NoActionBar">

This basically hides the ActionBar:



The menu resources is used to define the app menu, options, context menu or submenu.

To create a menu folder,

Plain Text
res > New > Android Resource Directory
Resouce type: menu

To create a menu resouce file:

Plain Text
menu > New > Menu Resouce File

Name your menufile: main_menu.xml

Once you have created the menu file you will see that our menu.xml contains the following boilerplate:

XML
<?xml version="1.0" encoding="utf-8"?>  
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    
</menu>

To add some menu buttons and setting options, they are called menu items, you must define the <item/> like so:

XML
<?xml version="1.0" encoding="utf-8"?>  
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/new"
        android:icon="@mipmap/ic_launcher"
        android:title="New Game"/>
    <item
        android:id="@+id/save_game"
        android:icon="@mipmap/ic_launcher"
        android:title="Save Game"/>
</menu>

To utilize the menu buttons, we must use the following boilerplate in java. This is added to our main activity.

Java
@override
public boolean onCreateOptionsMenu(Menu menu) {
    MenuInflater inflater  = getMenuInflater();
    inflater.inflate(R.menu.main_menu, menu);
    return True;
}



drawable folder

The drawable resouces is a general concept for graphics that can be drawn on the screen. You can retrieve these via the R. class APIS,

The naming convention for drawable files should always be lower snake_case. Do not start with numbers.

Once you have added a resource to drawable, you can add them to a layout attribute:

XML
android:background="@drawable/mypicture"

Avoid bad practices
Adding .jpg or .png backgrounds that are above 100kb would be computationaly expensive. Instead, try and see if you could compile your drawable background to a shape type.

A shape type background with have significantly reduced sizes 1:100kb ratios {: .prompt-warning}



Drawable shapes (drawable .xml files)

To create a shape for optimizations,

Plain Text
drawable {RIGHT CLICK} > New > Drawable Resource File
File name: my_gradient_shape
Root element: shape

You should see a new XML file being generated with the following starting boilerplate:

XML
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  
  
</shape>

Now we can compile a gradient background this way:

XML
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  
    <gradient
        android:type="linear"
        android:angle="45"
        android:startColor="#560bad"
        android:centerColor="#3f37c9"
        android:endColor="#4cc90f">
</shape>

Angle values
DO NOT use angle values that are not multiples of 45. This may cause some inconsistent or bad behavior. {: .prompt-warning}

We can apply them to our layout xml:

XML
...
android:background="@drawable/my_gradient_shape"
...

more about shapes

Android shapes "objects" can contain the above few properties, by using these properties we can create beautiful custom buttons (with rounded corners etc.)

Example usages of some of the shape properties:

XML
<?xml version="1.0" encoding="utf-8"?>  
<shape xmlns:android="http://schemas.android.com/apk/res/android">  
    <gradient
        android:type="linear"
        android:angle="45"
        android:startColor="#560bad"
        android:centerColor="#3f37c9"
        android:endColor="#4cc90f">
    
    <!--Rounded corners-->
    <corners
        android:radius="12dp"/>
        
    <!--Define border properties thickness & color-->
    <stroke
        android:width="12dp"
        android:color="#eeef20"/>
</shape>

We can use this shape in our layout .xml via the background attribute. This can be linked via the file name.

Plain Text
.
.
.
android:background="@drawable/button_shape"/>

Shape naming conventions
You can name your drawable shapes any that you like, however, it is recommended practice that you add a "shape" suffix. {: .prompt-tip}



font

You can download and use custom fonts from the internet, they are usually in .ttf or .otf files.

To add a font subfolder to our res folder:

Plain Text
res {RIGHT CLICK} > New > Android Resource File

Directory name: font
Resource type: font

We can right away paste our font files inside the font subfolder. Remember, the naming convention for resources dictates we must name the files in lower case snake_case. As an example, my font file will be named lexand.ttf

Now we can use our custom fonts in our layout xml like so:

XML
<TextView
    android:fontFamily="@font/lexand"/>



Assets folder

You can use this folder to add other files such as PDF files

Plain Text
res {RIGHT CLICK} > New > Folder > Assets Folder

Untick "Change Target source"
Finish.

You will see the assets folder generated here: