Mobile App Development

Assignment # 1

Fall 2024-26

UNIVERSITY OF EDUCATION

Township Campus

Lahore.
 University of Education
Township Campus, Lahore.
BS-Program (Morning)

Assignment 1

Student Name M.Faheem Mahmood Student-Id mtf24002778

Program BS-IT (Post ADP) Semester 6th (Morning)

Course Title Mobile App Development Course Code COMP4124

Course
Mr. Muhammad Sheraz Tariq Total Marks 10
Instructor

Instructions for Students:

1. All the students are instructed to perform the Lab Manual on their own. No student is allowed
to copy any part of the experiment.
2. Students will get ZERO marks for those solution, which will found identical/similar partially
or fully.
3. You can search the material from any resource, books, web, literature, etc. But make sure, you
DO NOT copy paste from the resource. Rephrase the required material in your own words in
experiments solution.

Please note that No Assignment will be accepted after the due date.
 MAD(Mobile App Development)

What is MAD?
Mobile Application Development (MAD) is the process of creating software applications designed to
run on mobile devices such as smartphones and tablets. These applications can be developed for various
platforms like Android, iOS, and cross-platform frameworks. MAD involves designing, coding,
testing, and deploying mobile apps using different programming languages and tools.

Types of Mobile Applications:

 Native Apps: Developed specifically for a single platform (e.g., Android using Java/Kotlin,
iOS using Swift).
 Hybrid Apps: Use web technologies like HTML, CSS, and JavaScript, wrapped in a native
container (e.g., Flutter, React Native).
 Web Apps: Mobile-optimized websites that function like apps but run on browsers instead
of being installed.

Development Tools for MAD:

 Android Development: Android Studio (using Java/Kotlin), Firebase (for backend services).
 iOS Development: Xcode (using Swift), SwiftUI.
 Cross-Platform Development: React Native, Flutter, Xamarin.
 EXPERIMENT

Create a Login page front-end and back-end

Aim:

To design and implement a Login Page in Android Studio with both front-end (UI design) and
back-end to allow users to securely log in using their email and password.

Learning Objectives:
At the end of the session your will be able to:
 Design a login screen UI using XML in Android Studio.
 Implement user authentication using Firebase Authentication in Kotlin.
 Handle user input validation for email and password fields.
 Manage login success and failure scenarios with appropriate error messages.
 Navigate between activities (Login → Home Page, Login → Register Page).

Introduction:
A Login Page is an essential feature of mobile applications, allowing users to securely access
personalized content. In this experiment, we will develop a Login Page in Android Studio using
XML for UI design and Kotlin for backend logic. The authentication process will be implemented
using Firebase Authentication, which ensures secure user login with email and password.

In modern mobile applications, login systems are crucial for verifying user identity and
maintaining data privacy. By implementing authentication, we can protect user accounts, provide
a personalized experience, and manage access control.
We Create First Login Page with these code:-

 Code of the ImageView:

<ImageView
android:layout_width="160dp"
android:layout_height="160dp"
android:src="@drawable/icon_account_circle"
/>

 Code of the EditText:

1) <EditText
android:id="@+id/username_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:background="@drawable/rounded_corner"
android:hint="Username"
android:inputType="text"
android:padding="10dp"
android:textColor="@color/white"
android:textColorHint="@color/white"
android:textSize="30sp" />

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="Password"
android:textColor="@color/white"
android:textColorHint="@color/white"
android:textSize="30sp"
android:background="@drawable/rounded_corner"
android:padding="10dp"
android:inputType="textPassword"
android:id="@+id/password_input"/>
 Code of the Login Button:

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Login"
android:backgroundTint="@color/white"
android:textColor="#3B84F1"
android:padding="18dp"
android:layout_marginTop="32sp"
android:textSize="30sp"
android:id="@+id/Login_btn"/>

 Code of Social Login :

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Social login"
android:textSize="30sp"
android:textColor="@color/white"
android:layout_marginTop="32dpdp"/>

 ImageView of the Social Platform Facebook :

<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_margin="16dp"
android:id="@+id/facebook_btn"
android:src="@drawable/facebook"
 ImageView of the Social Platform Linkedin:

<ImageView
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_margin="16dp"
android:id="@+id/linkedin_btn"
android:src="@drawable/linkedin"

Now Login Page of the Social Media is ready:

Back End of the Login Page:

package com.kami.loginform

import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

class MainActivity : AppCompatActivity() {

lateinit var usernameInput:EditText
lateinit var PasswordInput:EditText
lateinit var loginBtn:Button

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContentView(R.layout.activity_main)
UsernameInput = findViewById<>(R.id.username_input)
PasswordInput = findViewById<>(R.id.Password_input)
loginBtnInput = findViewById<>(R.id.login_btn)
loginBtn.setOnClickListener {
val username = usernameInput.txt.tostring()
val password = passwordInput.txt.tostring()
log.i("test credentials","username:$username and
password:$password")