UNIVERSITY OF EDUCATION,

LAHORE.

Submitted By: Muhammad Ahmed

Roll No: BSF2201611

Class: BSIT EVE 6TH

Course Title: Mobile App Development

Submitted To: Dr. Sheraz Tariq

Date: 17-4-25

Department of Information Sciences.

University of Education, Township Campus, Lahore.
Multi-Screen Navigation with Login, Dashboard, and
Project Showcase

STEP 1: Create New Android Project

1. Open Android Studio

2. Click “New Project”

3. Select “Empty Activity”

4. Click Next

5. Fill the form:

6. Name: MultiScreenApp

7. Language: Kotlin

8. Minimum SDK: API 21 (Android 5.0 Lollipop)

9. Click Finish

10. Wait until everything loads (Gradle builds)

STEP 2: Rename MainActivity to LoginActivity

In the Project panel, expand: app > java > com.example.multiscreenapp

Right-click MainActivity.kt → Rename → Type: LoginActivity

Now go to res > layout folder → Right-click activity_main.xml →

Rename → Type: activity_login.xml

Now open LoginActivity.kt and update this line:

setContentView(R.layout.activity_login)
STEP 3: Create 2 More Screens (Activities)

Create DashboardActivity:

Right-click the com.example.multiscreenapp package

Select: New → Activity → Empty Activity

Name: DashboardActivity

Click Finish

Create ProjectShowcaseActivity:

Do the same steps again:

Name: ProjectShowcaseActivity

Click Finish

STEP 4: Design Login Screen

Open res > layout > activity_login.xml

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

<EditText
android:id="@+id/usernameEdit"
android:hint="Enter Username"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<EditText
android:id="@+id/passwordEdit"
 android:hint="Enter Password"
android:inputType="textPassword"
android:layout_marginTop="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<Button
android:id="@+id/loginBtn"
android:text="Login"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

STEP 5: Add Login Code in LoginActivity

Open LoginActivity.kt
package com.example.multiscreenapp

import android.content.Intent
import android.os.Bundle
import android.widget.*
import androidx.appcompat.app.AppCompatActivity

class LoginActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_login)

val usernameEdit = findViewById<EditText>(R.id.usernameEdit)

val passwordEdit = findViewById<EditText>(R.id.passwordEdit)
val loginBtn = findViewById<Button>(R.id.loginBtn)

loginBtn.setOnClickListener {
val username = usernameEdit.text.toString()
val password = passwordEdit.text.toString()

if (username == "student" && password == "1234") {

val intent = Intent(this, DashboardActivity::class.java)
intent.putExtra("username", username)
startActivity(intent)
} else {
 Toast.makeText(this, "Invalid username or password",
Toast.LENGTH_SHORT).show()
}
}
}
}

STEP 6: Design Dashboard Screen

Open res > layout > activity_dashboard.xml

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

<TextView
android:id="@+id/welcomeText"
android:textSize="20sp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<Button
android:id="@+id/projectBtn"
android:text="Go to Project Showcase"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>

STEP 7: Add Code to DashboardActivity

Open DashboardActivity.kt
package com.example.multiscreenapp

import android.content.Intent
import android.os.Bundle
import android.widget.*
import androidx.appcompat.app.AppCompatActivity
class DashboardActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_dashboard)

val welcomeText = findViewById<TextView>(R.id.welcomeText)

val projectBtn = findViewById<Button>(R.id.projectBtn)

val username = intent.getStringExtra("username")

welcomeText.text = "Welcome, $username!"

projectBtn.setOnClickListener {
val intent = Intent(this, ProjectShowcaseActivity::class.java)
startActivity(intent)
}
}
}

STEP 8: Design Project Showcase Screen

Open res > layout > activity_project_showcase.xml

Replace all with:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
android:orientation="vertical"
android:padding="24dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<TextView
android:text="Project Title: Smart Farming App"
android:textStyle="bold"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
 android:text="Description: An app that helps farmers monitor crops
using IoT and AI."
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:text="Features:"
android:textStyle="bold"
android:layout_marginTop="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<TextView
android:text="- Weather Monitoring\n- Crop Disease Detection\n-
Voice Alerts\n- IoT Sensor Integration"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<ImageView
android:layout_marginTop="20dp"
android:src="@drawable/mockup"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="fitCenter" />
</LinearLayout>
</ScrollView>

STEP 9: Add Image in Drawable Folder

Find an image for your project mockup then Rename it to: mockup.png

Copy it into this folder: app > res > drawable

STEP 10: Add Code to ProjectShowcaseActivity

Open ProjectShowcaseActivity.kt
package com.example.multiscreenapp

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
class ProjectShowcaseActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_project_showcase)
}
}

STEP 11: Update AndroidManifest.xml

Open AndroidManifest.xml in manifests folder
Ensure it looks like this:
<application
...>

<activity android:name=".ProjectShowcaseActivity" />

<activity android:name=".DashboardActivity" />
<activity android:name=".LoginActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category
android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>

</application>