Architecture I — Fragments, Navigation Component, BMI Layout

Key concepts

• Fragment lifecycle vs Activity lifecycle
• FragmentContainerView & NavHost
• Nav graph (res/navigation/nav_graph.xml)
• Actions and destinations
• Passing args via Bundle

Lectures in this day

1. 01

   Introduction to Architecture Components

   Google gives us a set of ready-made tools called Jetpack. They solve problems every app has — screens (Navigation), data (Room), state (ViewModel), background work (WorkManager). Using them means less code AND fewer bugs.

   Real life · Instead of forging your own nails at every building site, you buy them from a hardware store. Same purpose, way less pain.

   Practice · 3 quick questions

   1. Q1.Architecture Components help with…

      A.Clean, lifecycle-aware app structureB.Faster CPUC.Free storage

   2. Q2.They live in package…

      A.androidx.*B.java.util.*C.com.google.gson

   3. Q3.Main benefit?

      A.Less boilerplate + safer lifecyclesB.Higher screen resolutionC.Better sound

   Check answersPick one answer per question.
2. 02

   Fragment Overview

   A Fragment is a small reusable piece of a screen, with its own life cycle. One Activity can hold several fragments (great for tablets), and Navigation swaps them in and out.

   Real life · LEGO pieces that snap into a bigger board. The same piece can be reused in different builds.
   kotlin

   Copy

   class InputFragment : Fragment(R.layout.fragment_input) {
       0
       override fun onViewCreated(v: View, s: Bundle?) {
           v.findViewById<Button>(R.id.next).setOnClickListener {
               findNavController().navigate(R.id.toResult)   1
           }
       }
   }

   Practice · 3 quick questions

   1. Q1.A Fragment is…

      A.A reusable UI chunk hosted by an ActivityB.A database rowC.A file type

   2. Q2.Fragments have…

      A.Their own lifecycleB.No lifecycleC.Only onCreate

   3. Q3.Why use fragments?

      A.Reuse UI, easier navigation, tablet layoutsB.Faster CPUC.Bigger app size

   Check answersPick one answer per question.
3. 03

   Setting up Navigation Component

   Navigation Component is Google's tool for moving between screens. You draw a graph in `res/navigation/nav_graph.xml` (nodes = screens, arrows = actions). A `NavHostFragment` in your activity is the frame where the current screen lives.

   Real life · A metro map: each station is a screen, each line is an action. Riders just tap 'go here' and the system routes them.
   xml

   Copy

   <!-- activity_main.xml -->
   <class="tok-key">androidx.fragment.app.FragmentContainerView
       android:id="@+id/nav_host"
       android:name="androidx.navigation.fragment.NavHostFragment"
       app:defaultNavHost="true"
       app:navGraph="@navigation/nav_graph"
       android:layout_width="match_parent"
       android:layout_height="match_parent" />

   Practice · 3 quick questions

   1. Q1.Navigation Component uses a…

      A.Navigation graph (XML)B.Text fileC.Database

   2. Q2.A destination is…

      A.A screen (Fragment/Activity) nodeB.A URLC.A drawable

   3. Q3.Moving to another destination uses…

      A.findNavController().navigate(...)B.startActivity()C.System.exit()

   Check answersPick one answer per question.
4. 04

   BMI Calculator Layout Design

   Build two small screens (fragments). Input screen: two EditTexts (height in cm, weight in kg) and a Calculate button. Result screen: one big TextView that shows the BMI number.

   Real life · At the doctor's clinic: first the reception form, then the doctor's report page.
   xml

   Copy

   <class="tok-key">LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical" android:padding="24dp"
       android:layout_width="match_parent" android:layout_height="match_parent">
   
       <class="tok-key">EditText android:id="@+id/height" android:hint="Height (cm)"
                 android:inputType="numberDecimal"
                 android:layout_width="match_parent" android:layout_height="wrap_content" />
   
       <class="tok-key">EditText android:id="@+id/weight" android:hint="Weight (kg)"
                 android:inputType="numberDecimal"
                 android:layout_width="match_parent" android:layout_height="wrap_content" />
   
       <class="tok-key">Button android:id="@+id/calculate" android:text="Calculate"
               android:layout_width="match_parent" android:layout_height="wrap_content" />
   </class="tok-key">LinearLayout>

   Practice · 3 quick questions

   1. Q1.BMI needs which inputs?

      A.Height and weightB.Name and age onlyC.Email

   2. Q2.Best input type for numbers?

      A.numberDecimalB.textPasswordC.phone

   3. Q3.Result should be shown in…

      A.A TextViewB.Log onlyC.Toast only

   Check answersPick one answer per question.
5. 05

   Change Destination and Pass Arguments using Bundle

   To open another screen and give it some data, put the data in a Bundle (a small labeled box) and pass it into `navigate(...)`. The next screen reads those values from `arguments`.

   Real life · Handing the doctor a filled form on the way in — the room you enter already has the info it needs.
   kotlin

   Copy

   binding.calculate.setOnClickListener {
       0
       val args = bundleOf(
           "heightCm" to binding.height.text.toString().toFloat(),
           "weightKg" to binding.weight.text.toString().toFloat(),
       )
       findNavController().navigate(R.id.toResult, args)
   }

   Practice · 3 quick questions

   1. Q1.A Bundle carries…

      A.Small key/value data between destinationsB.Big filesC.Threads

   2. Q2.Bundle keys are…

      A.StringsB.Ints onlyC.Files

   3. Q3.A safer alternative introduced later is…

      A.Safe ArgsB.Manual JSONC.SharedPrefs

   Check answersPick one answer per question.

Real-life analogies

Code examples

<class="tok-key">navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:startDestination="@id/inputFragment">

    <class="tok-key">fragment
        android:id="@+id/inputFragment"
        android:name="com.example.bmi.InputFragment"
        android:label="Input">
        <class="tok-key">action
            android:id="@+id/toResult"
            app:destination="@id/resultFragment" />
    </class="tok-key">fragment>

    <class="tok-key">fragment
        android:id="@+id/resultFragment"
        android:name="com.example.bmi.ResultFragment" />
</class="tok-key">navigation>

binding.calculateBtn.setOnClickListener {
    val args = bundleOf(
        "height" to binding.height.text.toString().toFloat(),
        "weight" to binding.weight.text.toString().toFloat()
    )
    findNavController().navigate(R.id.toResult, args)
}

Hands-on checklist

• Create BMI project & add navigation-fragment-ktx dependency
• Add InputFragment (height, weight, calculate) & ResultFragment
• Wire nav_graph with an action between them
• Pass height & weight via Bundle

Milestone

Common pitfalls

• Missing NavHostFragment in activity_main.xml — nothing navigates.
• Using getSupportFragmentManager() manually when Nav Component should own it.