Your first screen, piece by piece

Goal Create activity_main.xml, the file that says what your screen shows: “Hello, Notes!” in the middle.

• Android Studio Project
• Layout res › layout › activity_main.xml

1. A new resource file, from the menu of res.

   1. In the Project window, right-click res, under app.
   2. A menu opens: choose NewAndroid Resource File.

   Project › res A menuFull size

   

   1. Right-click res › New.
   2. Android Resource File: the layout.

2. Its name and its type: activity_main, a layout.

   1. A New Resource File window opens. In File name, type activity_main.
   2. In Resource type, open the list, then choose Layout.
   3. Root element shows androidx.constraintlayout.widget.ConstraintLayout: keep it.
   4. Leave Source set and Directory name as they are, then click OK.

   New Resource File A dialogFull size

   

   1. File name: activity_main.
   2. Resource type: Layout, in the list.
   3. Root element: androidx.constraintlayout.widget.ConstraintLayout.

3. Paste The screen: “Hello, Notes!” in the middle.

   1. The file opens in Design. Click Code, at the top right of the editor.
   2. Click Copy the file, at the top right of the panel below.
   3. In Code, click in the text, press Ctrl+A, then Ctrl+V.

   res › layout › activity_main.xmlReplace the whole file

   <?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context=".MainActivity">
       <TextView        android:id="@+id/textHello"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Hello, Notes!"        android:textSize="24sp"        app:layout_constraintBottom_toBottomOf="parent"        app:layout_constraintEnd_toEndOf="parent"        app:layout_constraintStart_toStartOf="parent"        app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>

   Part 3 explains these lines. For now, notice line 7. Since Android 15, an app draws under the status bar and the navigation bar: android:fitsSystemWindows="true" keeps your screen out from under them.

4. The preview, beside the code.

   1. Click Split, at the top right of the editor: the preview shows beside the code.

Goal Create MainActivity, the Java class Android runs for this screen, and make it show your layout.

• Android Studio Project
• Java kotlin+java › com.yourname.notes › MainActivity.java

1. A new Java class, in the plain package.

   1. In Project, open kotlin+java: it holds three com.yourname.notes.
   2. Right-click the first, the plain com.yourname.notes, without (test) or (androidTest).
   3. A menu opens: choose NewJava Class, at the top of the submenu.

   Project › kotlin+java A menuFull size

   

   1. The plain com.yourname.notes, the first one: right-click it.
   2. New.
   3. Java Class.

2. Its name: MainActivity.

   1. A small New Java Class popup opens: type MainActivity.
   2. Keep Class selected below, then press Enter: MainActivity.java opens.

   New Java Class A dialogFull size

   

   1. New Java Class: type MainActivity.
   2. Class: keep it, then press Enter.

3. Type The class: it extends AppCompatActivity and shows your layout.

   1. On the line public class MainActivity {, click right after MainActivity, then type a space and extends AppCompatActivity.
   2. A completion list has opened: press Esc. Enter would pick an item.
   3. Click right after the class line’s {, then press Enter twice: one empty line stays under it.
   4. Type @Override: a list opens. Press Esc, then Enter.
   5. Type the onCreate line up to its {: Android Studio adds the }. Press Enter.
   6. Above that }, type the panel’s lines 11 and 12.

   kotlin+java › com.yourname.notes › MainActivity.javaNew file

   package com.yourname.notes;
   import android.os.Bundle;
   import androidx.appcompat.app.AppCompatActivity;
   public class MainActivity extends AppCompatActivity {
       @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }}

   Grey lines: Android Studio writes them, with the class and with Alt+Enter.

4. The two imports, lines 3 and 5.

   1. Click the red AppCompatActivity, then press Alt+Enter.
   2. A menu opens: choose Import class. The panel’s line 5 appears at the top.
   3. Do the same on the red Bundle: the panel’s line 3, android.os.Bundle, appears.

Why A recipe, for now: Android calls onCreate() when the screen opens, and setContentView() shows your layout. Part 5 explains both.

The path Bottom edge of the windowFull size

1. The path: app › src › main › java, the right folder.

Stuck? 4 symptoms · the file

• MainActivity sits under (test) or (androidTest) It is in a test folder. Drag it onto the plain com.yourname.notes, as in the capture below.
• No plain com.yourname.notes under kotlin+java Right-click kotlin+java › NewPackage, click OK (…\app\src\main\java is already selected), then type your package and press Enter.
• Alt+Enter offers nothing Android Studio is still indexing: the bar at the bottom of the window. Wait for it to end.
• Still red Replace the whole file with this one. The Copy the file button writes your package on its first line.

Project › kotlin+java Project window · leftFull size

1. MainActivity, inside the plain com.yourname.notes.
2. (androidTest) and (test): tests, not here.

The files at the end of this step

kotlin+java › com.yourname.notes › MainActivity.javaReplace the whole file

package com.yourname.notes;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);    }}

Goal Add MainActivity to the manifest, as the screen the app’s icon opens.

• Manifest manifests › AndroidManifest.xml

1. Paste The manifest, with MainActivity as the screen the icon opens.

   1. In Project, open manifests, then double-click AndroidManifest.xml.
   2. Click Copy the file, at the top right of the panel below.
   3. In the editor, click in the text, press Ctrl+A, then Ctrl+V.

   manifests › AndroidManifest.xmlReplace the whole file

   ⋯ lines 1–10<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools">
       <application        android:allowBackup="true"        android:dataExtractionRules="@xml/data_extraction_rules"        android:fullBackupContent="@xml/backup_rules"        android:icon="@mipmap/ic_launcher"        android:label="@string/app_name"        android:roundIcon="@mipmap/ic_launcher_round"        android:supportsRtl="true"        android:theme="@style/Theme.Notes">        <activity            android:name=".MainActivity"            android:exported="true">            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application>
   </manifest>

Why MAIN and LAUNCHER say “this one gets the icon”, as chapter 02 showed. exported="true": another app, here the launcher, may open it.

Goal Build, install and open your app on the virtual phone, then use the phone’s controls.

• Android Studio ▶ Run 'app'
• Emulator Running Devices

1. Your app, built, installed and opened on the phone.

   1. In the toolbar, top right, the device menu must read Pixel 7. If not, open it and choose Pixel 7.
   2. Click the green ▶ Run 'app', right of the app menu (Shift+F10).
   3. Wait about a minute for the first build: Running Devices then shows your app, in its tab Pixel 7 API 37.0.

   Toolbar and Running Devices Toolbar · topFull size

   

   1. The device menu: Pixel 7.
   2. ▶ Run 'app'. Once the app runs, it becomes ↻ Rerun, next to the red ■ (stop).
   3. Back, Home, Overview: the phone’s three buttons. Overview shows the recent apps (chapter 03’s Recents).
   4. Rotate Left, Rotate Right: turn the phone.

2. The phone’s home screen.

   1. In the toolbar of Running Devices, click Home.

3. The app list, then your app.

   1. On the phone’s screen, drag up from the middle: the app list opens.
   2. Click Notes (a click is a tap): your app opens.

You should see “Hello, Notes!” under a purple bar titled “Notes”, below a purple status bar with white icons.

Done I see Notes in the phone’s app list.

YesNo

Goal Give the app a theme without the purple action bar, and with dark status icons.

• Resources res › values › themes.xml
• Emulator

1. The theme without its night copy: that copy keeps the old bar.

   1. In Project, open res › values › themes: it holds themes.xml and themes.xml (night).
   2. Right-click themes.xml (night), then choose Delete… in its menu.
   3. A Delete window opens, Delete file "themes.xml"?: leave both boxes ticked, then click OK.

   Delete A dialogFull size

   

   1. Delete: the dialog’s title.
   2. OK: leave both boxes ticked.

2. Paste The theme, without the action bar.

   1. In res › values, double-click themes.xml, now alone.
   2. Click Copy the file, at the top right of the panel below.
   3. In the editor, click in the text, press Ctrl+A, then Ctrl+V.

   res › values › themes.xmlReplace the whole file

   <resources>    <style name="Theme.Notes" parent="Theme.Material3.Light.NoActionBar">        <item name="android:windowLightStatusBar">true</item>    </style></resources>

   A theme sets the look of the whole app: its colours and its bars. Your notes screen draws its own header in Part 3, so the template’s bar goes: NoActionBar. windowLightStatusBar: dark status icons, for the light background behind them.

3. Your app again, with its new theme.

   1. In the toolbar, click ↻ Rerun, where ▶ Run 'app' was. Your app has stopped? Click ▶ Run 'app'.

You should see No bar. The status bar icons are dark on the light background:

Done I see no bar, and dark icons at the top.

YesNo