2.1 File Structure and File Types

In general, each Activity (think of it as a unique screen displayed) in an Android app has two files associated with it: a Kotlin / Java file that manages the logic behind the screen, and an XML file which makes the visual display that is shown to the user.

XML Files

The XML files associated with this project are located under app/res/layout. At first the code might seem intimidating, but they’re not difficult to write once you understand how they are formatted. XML files contain a ViewGroup object that contains View objects inside. As you will learn in the next section, view groups set the layout or structure for how views will be placed on the screen.

Below, is an example of what a simple XML file might look like. The majority of the code that is displayed below is auto-generated by Android Studio when you create a new XML file. What is important to note is that this file contains a layout that contains one component with a text element inside.

activity_main.xml

<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World"/>
</FrameLayout>

Inside this file, we can see that there is a hierarchical 'tree’ of elements. Each element has an opening tag (<FrameLayout ...>) and a closing tag (</FrameLayout>), and the code in between these two tags are all the ‘children’ of that element. The lines of code within the opening tag represent a set of attributes associated with each element. Each attribute has a name (i.e. android:text) that is set equal to a value (i.e. “Hello World”). Attributes can help you customize the placement and styling of an element.

Taking a look at the example above, the first two attributes of the TextView element set the width to be as large as the parent (FrameLayout) and the height to be as large as the content inside of it (the height and the width must be defined for every XML element). The last attribute sets the text of the TextView to be “Hello World!”. Other attributes for this TextView include android:textColor, and android:layout_marginLeft which changes how much space is to the left of the element.

The tools:context=".MainActivity" attribute of the FrameLayout defines what class this XML file is connected to. Note the id attribute that we added as well—it is a vital attribute that allows us to identify and manipulate the component from the specific class defined for this XML file.

Class File

The complement to activity_main.xml is a file called MainActivity.kt, and this class will control all the logic associated with the screen generated by activity_main.xml. The code below is auto-generated when you create a new "Empty Activity" project.

MainActivity.kt

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

The line setContentView() inside the onCreate() method allows for the XML layout we defined above to be shown when the activity is launched in the application. Method findViewById(R.id.textView) is a built-in method that allows users to access and add functionality to a component described in the associated XML file with a given id. Then, after storing the element in a local variable, we dynamically update the text to display "Hello Friend".

Having a good understanding of Kotlin files, XML files, and their interactions is a core skill necessary for Android development. In this section, we looked at an overview of XML and Kotlin files, and how to manipulate a TextView element through XML and through Kotlin code.

For the rest of the chapter, we’ll be focusing on more complex elements (buttons, text inputs, etc.) that you have at your disposal.