Android Basics I — First App, Layouts, Views

Key concepts

• Android Studio project structure
• Emulator vs physical device
• View, ViewGroup, id, findViewById
• LinearLayout & layout_weight
• RelativeLayout basics
• ConstraintLayout & constraints

Lectures in this day

1. 01

   Intro to Android

   An Android app is made of a few kinds of files. Layouts (XML) describe what a screen looks like. Activities (Kotlin classes) run each screen. The Manifest lists the app's screens and permissions. Gradle is the tool that packs everything into an APK/AAB — the file the phone installs.

   Real life · Opening a shop: the Manifest is your permit, layouts are the shelves, Activities are the salespeople, and images/strings are the stock.

   Practice · 3 quick questions

   1. Q1.Android apps are typically written in…

      A.SwiftB.Kotlin/JavaC.Python

   2. Q2.The IDE recommended is…

      A.VS CodeB.Android StudioC.Xcode

   3. Q3.A screen in Android is called…

      A.PageB.Activity (or Fragment)C.Window

   Check answersPick one answer per question.
2. 02

   Run Your First App

   In Android Studio pick 'Empty Views Activity', keep the defaults, wait for Gradle to finish, then press Run. Choose an emulator (a fake phone) or a real phone plugged in with USB (developer mode on). Your first app is 'Hello World'.

   Real life · Plugging in a new toy for the first time — most of the wait is the first boot. After that it just works.
   bash

   Copy

   # terminal sanity check (optional)
   adb devices                   # is your phone connected?
   ./gradlew installDebug        # build + install without the IDE

   Practice · 3 quick questions

   1. Q1.To run on a real phone you enable…

      A.Airplane modeB.USB debuggingC.Bluetooth

   2. Q2.An emulator is…

      A.A fake phone on your computerB.A fileC.A camera

   3. Q3.The green 'Run' button does what?

      A.Builds & launches the appB.Deletes filesC.Signs in

   Check answersPick one answer per question.
3. 03

   User Interaction (change text programmatically)

   Every view (Button, TextView) can get an id in the layout, like `android:id="@+id/label"`. In Kotlin, `findViewById` finds that view so you can change it. A click listener runs your code when someone taps the button.

   Real life · A doorbell with a sign above it. The wire (id) connects the button to the little machine that changes the sign.
   kotlin

   Copy

   class MainActivity : AppCompatActivity() {
       override fun onCreate(s: Bundle?) {
           super.onCreate(s)
           setContentView(R.layout.activity_main)      0
   
           val label = findViewById<TextView>(R.id.label)
           val btn = findViewById<Button>(R.id.btn)
   
           btn.setOnClickListener {                    1
               label.text = "You clicked me!"
           }
       }
   }

   Practice · 3 quick questions

   1. Q1.To find a view in code you call…

      A.findViewById()B.getView()C.openView()

   2. Q2.To change a TextView's text you set…

      A..textB..labelC..value

   3. Q3.Views are declared where?

      A.In XML layouts under res/layoutB.In Kotlin onlyC.In gradle

   Check answersPick one answer per question.
4. 04

   Linear Layout and Layout Weight

   A LinearLayout puts its children in one line — either top-to-bottom (vertical) or side-by-side (horizontal). `weight` shares leftover space between children. Higher weight = bigger share.

   Real life · Three friends splitting a pizza. Equal weights = equal slices. If one is hungrier and gets weight 2, they get twice as much.
   xml

   Copy

   <class="tok-key">LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal">
   
       <!-- 0dp on the axis + weight = share space -->
       <class="tok-key">Button android:layout_width="0dp" android:layout_height="wrap_content"
               android:layout_weight="1" android:text="A" />
   
       <class="tok-key">Button android:layout_width="0dp" android:layout_height="wrap_content"
               android:layout_weight="2" android:text="B (bigger)" />
   </class="tok-key">LinearLayout>

   Practice · 3 quick questions

   1. Q1.LinearLayout stacks children…

      A.Only verticallyB.Horizontally or verticallyC.In a grid

   2. Q2.layout_weight is used to…

      A.Add paddingB.Share leftover space between childrenC.Rotate views

   3. Q3.For weight to work well, set the size to…

      A.match_parentB.0dp on the weighted axisC.wrap_content only

   Check answersPick one answer per question.
5. 05

   Example: Calculator Layout Design

   Stack the calculator vertically: a big display on top, then four rows of buttons below. Each row is a horizontal LinearLayout with equal weights, so the keys all look the same size.

   Real life · A real desktop calculator: one screen on top, four neat rows of equal-sized keys under it.
   xml

   Copy

   <class="tok-key">LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="match_parent" android:layout_height="match_parent">
   
       <class="tok-key">TextView android:id="@+id/display"
                 android:layout_width="match_parent"
                 android:layout_height="80dp"
                 android:textSize="32sp" android:gravity="end" />
   
       <!-- One row of 4 equal-width buttons; repeat for each row. -->
       <class="tok-key">LinearLayout android:layout_width="match_parent" android:layout_height="0dp"
                     android:layout_weight="1" android:orientation="horizontal">
           <class="tok-key">Button android:layout_width="0dp" android:layout_height="match_parent"
                   android:layout_weight="1" android:text="7" />
           <!-- 8, 9, ÷ … -->
       </class="tok-key">LinearLayout>
   </class="tok-key">LinearLayout>

   Practice · 3 quick questions

   1. Q1.A calculator screen mostly needs…

      A.A grid of buttons and a displayB.A cameraC.A map

   2. Q2.Which layout fits a button grid well?

      A.LinearLayout with weights or GridLayoutB.WebViewC.Toolbar

   3. Q3.The display should be…

      A.Editable by hand onlyB.Updated by code when buttons are pressedC.Static text

   Check answersPick one answer per question.
6. 06

   Relative Layout

   In a RelativeLayout you place each child by describing its position relative to the parent (top, center) or to another view (below, right of). No exact numbers — just relationships.

   Real life · Arranging your room: 'the bed is against the north wall, the study desk is next to the bed'. You describe positions, not coordinates.
   xml

   Copy

   <class="tok-key">RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent" android:layout_height="match_parent">
   
       <class="tok-key">TextView android:id="@+id/title" android:text="Hello"
                 android:layout_width="wrap_content" android:layout_height="wrap_content"
                 android:layout_centerHorizontal="true" />
   
       <class="tok-key">Button android:layout_width="wrap_content" android:layout_height="wrap_content"
               android:layout_below="@id/title"                   <!-- under the title -->
               android:layout_centerHorizontal="true"
               android:text="Tap" />
   </class="tok-key">RelativeLayout>

   Practice · 3 quick questions

   1. Q1.RelativeLayout positions children…

      A.Relative to each other or the parentB.Only in a rowC.Only in a column

   2. Q2.Which attribute anchors a view to the parent's right?

      A.layout_alignParentEndB.gravity=centerC.orientation=right

   3. Q3.Compared to LinearLayout, RelativeLayout…

      A.Needs fewer nested layouts for complex UIsB.Is slower for simple stacksC.Cannot use IDs

   Check answersPick one answer per question.
7. 07

   Constraint Layout

   ConstraintLayout is the modern default. Each child needs at least one horizontal and one vertical 'constraint' — a rubber-band tying it to the parent or to another view. It's fast and flexible for complex screens.

   Real life · Furniture tied to the walls (and to each other) with invisible strings. Move one piece and the rest slide neatly.
   xml

   Copy

   <class="tok-key">androidx.constraintlayout.widget.ConstraintLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent" android:layout_height="match_parent">
   
       <class="tok-key">Button android:id="@+id/go" android:text="Go"
               android:layout_width="wrap_content" android:layout_height="wrap_content"
               app:layout_constraintTop_toTopOf="parent"         <!-- top rubber band -->
               app:layout_constraintStart_toStartOf="parent"     <!-- left rubber band -->
               app:layout_constraintEnd_toEndOf="parent"         <!-- right rubber band -->
               android:layout_marginTop="24dp" />
   </class="tok-key">androidx.constraintlayout.widget.ConstraintLayout>

   Practice · 3 quick questions

   1. Q1.ConstraintLayout positions views using…

      A.Constraints to other views/parentB.CSSC.Grids only

   2. Q2.It is best for…

      A.Flat, flexible, complex layoutsB.Server codeC.Databases

   3. Q3.A view without constraints will…

      A.Snap to (0,0) at runtimeB.VanishC.Fill the screen

   Check answersPick one answer per question.

Real-life analogies

Code examples

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

        val label = findViewById<TextView>(R.id.label)
        findViewById<Button>(R.id.btn).setOnClickListener {
            label.text = "Clicked!"
        }
    }
}

<class="tok-key">LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <class="tok-key">Button android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="1" />
    <class="tok-key">Button android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="2" />
</class="tok-key">LinearLayout>

Hands-on checklist

• Create a new Empty Activity project in Android Studio (Kotlin)
• Build calculator UI with LinearLayout
• Rebuild the same UI with RelativeLayout
• Rebuild it once more with ConstraintLayout

Milestone

Common pitfalls

• Using match_parent with layout_weight — set width/height to 0dp on weighted axis.
• Missing android:id — findViewById returns null and crashes.