Week-1 Lecture-3 Counter App
INFT-516 – Mobile Application Development
(Source: Slide1.png)
This session introduces the core concepts of mobile application development within the context of the INFT-516 course, designed for BS (Information Technology) Part-III, 2nd Semester students. Under the instruction of Prof. Dr. Zeeshan Bhatti, Week 1, Lecture 3 focuses on a foundational, hands-on exercise: creating a simple but functional Counter Application, which serves as an essential introduction to handling UI interaction and state management in mobile development.
⚠️ Unauthorized distribution of this content is strictly prohibited ⚠️.
(Source: Slide2.png)
A strict declaration is issued regarding the intellectual property rights associated with this course material. All content, including slides, notes, code, and videos, is copyrighted material owned exclusively by Dr. Zeeshan Bhatti. Unauthorized reproduction, storage, transmission, or distribution in any form is expressly prohibited. Any request for permissions or inquiries regarding the use of this copyrighted work must be directed to the author through the provided contact channels.
Create Your FIRST APP
(Source: Slide3.png)
Section 1 of this lecture marks the critical transition from theoretical concepts to practical execution, challenging students to build their very first functional mobile application. This initial project, the Counter App, is designed to demystify the basic architecture of a mobile application and provide immediate experience in integrating user interface design with underlying application logic.
Conceptualizing the Application State and Logic
(Source: Slide4.png)
Before writing any code, it is essential to conceptualize the required application state and logic. For a counter app, this involves defining a numerical variable to store the current count, ensuring this variable can be incremented, and establishing a mechanism (like a button press) to trigger the state change. This planning phase ensures that developers understand the relationship between user interaction, data storage, and the resulting visual feedback.
Essential Development Steps: Project Initialization
(Source: Slide5.png)
The initial steps involve setting up the development environment, including creating a new project in the IDE (e.g., Android Studio). Proper project initialization ensures that all necessary configuration files, dependencies, and default directories (like `src`, `res`, and `manifest`) are correctly structured, providing a clean slate for both designing the user interface and writing the primary activity logic.
Preparing for Layout Design: The XML Structure
(Source: Slide6.png)
The application’s visual structure is handled using XML files located in the `res/layout` directory. This preparation stage requires developers to identify the necessary UI elements—a text display for the count and a button for interaction—and plan their arrangement within the main screen file, typically named `activity_main.xml`, utilizing appropriate layout containers for optimal organization.
Structuring the Main Layout: Using LinearLayout
(Source: Slide7.png)
The foundation of the UI layout is defined in `activity_main.xml`, beginning with a root `LinearLayout`. This container is configured to occupy the entire screen (`layout_width=”match_parent”` and `layout_height=”match_parent”`), using `gravity=”center”` to centrally align all child elements, and specifying `orientation=”vertical”`. This vertical orientation is crucial for stacking the application title, counter display, and the interaction button cleanly one above the other.
Implementing UI Components: Text Views and Interaction Button
(Source: Slide8.png)
Within the structured `LinearLayout`, three key components are added. The first is a `TextView` displaying the fixed title ‘Counter App’, styled boldly in pink (`#E91E63`) with a large font size (48sp). The second is the dynamic counter display (`txtCounter`), initialized to ‘0’ with an even larger font (60sp). Finally, an interactive `Button` (`btnIncrement`) is added, labeled ‘Counter’, which will be linked to the increment logic, completing the visual design elements required for user interaction.
Connecting Logic (Java) to UI (XML)
(Source: Slide9.png)
The next vital stage involves bridging the XML layout with the functional logic implemented in the `MainActivity.java` file. This requires declaring variables for the `TextView` (to update the count display) and the `Button` (to handle clicks), initializing these variables by locating the corresponding IDs using `findViewById()`, and setting up an integer variable to track the counter state. The core of the functionality is then implemented by attaching an `OnClickListener` to the button, ensuring that every tap increments the counter variable and simultaneously updates the text property of the display `TextView`, thus providing real-time feedback to the user.
End of Session
(Source: Slide10.png)
This session successfully concludes the practical exercise for Week 1 of Mobile Application Development. Students have completed the implementation and testing of the fundamental Counter App, demonstrating proficiency in setting up an Android project, designing a functional UI using XML layouts, and connecting UI interaction with Java logic for simple state management.
About The Author
