Creating first App: Activity, Layout

📖 Theory

Two files for one screen

Your FestConnect welcome screen needs to look a certain way (a title, a Register button) and do things (react when the button is tapped). Android deliberately splits those two jobs into two files.

The Activity (a Java class) is the screen's brain: its behaviour. The Layout (an XML file) is the screen's face: its appearance. One screen, two files, joined by a single line of code. This split is the first big idea of Android UI.

📖 Theory

The stage and the stage manager

Think of a play. The set (painted backdrop, furniture placement) is designed and described separately: that is the XML layout. The stage manager who cues the action, responds to events, and runs the show is the Activity in Java. The set does not act; the manager does not paint scenery. Keeping them apart lets each be changed without disturbing the other.

📖 Theory

Activity and Layout, formally

• An Activity is one screen of the app, a Java class extending AppCompatActivity.
• Its lifecycle begins at `onCreate()`, called when the screen is created.
• Inside onCreate you call `setContentView(R.layout.activity_main)` to attach a layout.
• A Layout is an XML file in res/layout describing the UI: containers (LinearLayout) and widgets (TextView, Button).

Look lives in XML; behaviour lives in Java. That is separation of concerns.

⌨️ Practical

activity_main.xml (the look)

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to FestConnect" />

</LinearLayout>

⌨️ Practical

MainActivity.java (the behaviour)

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // attach the XML layout to THIS screen
        setContentView(R.layout.activity_main);
    }
}

💭 Think first

What joins the two files?

You have activity_main.xml (the layout) and MainActivity.java (the Activity). Which single line makes the Java screen actually display that XML, and where does it go?

🧩 Quiz

In Android, which statement about Activity and Layout is correct?

1. An Activity is a screen written in Java; a Layout is its UI written in XML
2. An Activity is the XML file; a Layout is the Java class
3. Both the Activity and Layout are written in XML
4. One Activity must contain many unrelated screens at once

⚠️ Watch out

Activity/Layout traps

1. Forgetting setContentView: the app runs but the screen is blank. Always attach a layout in onCreate.

2. Mixing up which is which: Activity = Java (behaviour), Layout = XML (appearance).

3. Putting logic in the XML: XML only describes the UI. Button clicks and data handling belong in the Java Activity (or via an onClick binding), never as logic inside the layout file.

📖 Theory

Next: the whole project, and the glue

You have seen the two files of one screen. The next lesson creates the full FestConnect project in Android Studio, runs 'Welcome' on the emulator, and tours the other components that make it an app, including the AndroidManifest.xml and the auto-generated R.java that turns @+id/title into that R.layout reference you just used.

✅ Summary

Key takeaways

• An Activity is one screen of the app, written as a Java class (extends AppCompatActivity).
• A Layout is that screen's UI, written in XML in res/layout (containers + widgets).
• onCreate() is the Activity's entry point; setContentView(R.layout.activity_main) attaches the layout.
• Appearance lives in XML, behaviour in Java: separation of concerns.
• Forgetting setContentView leaves the screen blank.
• Memory hook: the set (XML layout) and the stage manager (Java Activity).