Mobile App development - 🎓 Lecture 9: Hands-On Android UI Design | RelativeLayout part 2

Welcome to Lecture 9 of the Mobile App Development Course (Android Studio 2025 Edition)! 🚀 In this hands-on lecture, we’ll move from theory to real practical Android UI design. You’ll learn how to use TextView, Button, ImageView, and EditText widgets together to design a professional-looking Android screen — all within the RelativeLayout framework. This lecture focuses on practical implementation, ensuring that you not only understand how these widgets work but can also design and align them correctly in your own Android projects. By the end of this video, you’ll be confident in building clean, responsive, and functional app interfaces directly in Android Studio. 🎯 What You Will Learn in This Lecture In this hands-on Android UI session, you’ll explore the core building blocks of user interfaces. Here’s what we’ll cover step-by-step: 🔹 1. Introduction to UI Design in Android Studio Quick review of what widgets are and their role in app design Overview of how RelativeLayout helps in arranging UI components Understanding the layout editor, design view, and code view Best practices for clean, responsive, and maintainable XML layout design 🔹 2. TextView — Displaying Text on Screen How to add a TextView widget in XML layout Customizing TextView: android:text, android:textColor, android:textSize, android:gravity, android:fontFamily Aligning TextView using RelativeLayout attributes (layout_alignParentTop, layout_centerHorizontal) Styling your app title or header using fonts and colors 🔹 3. Button — Adding Clickable Actions Creating Button widgets in RelativeLayout Setting attributes like android:text, android:background, and android:onClick Aligning buttons relative to TextView or EditText Adding multiple buttons (Login / Cancel / Submit) and positioning them neatly Previewing button states and styling buttons using material design themes 🔹 4. EditText — Taking User Input Adding EditText fields for username, password, or email Setting properties like android:hint, android:inputType, android:ems, and android:maxLength Styling input fields using background and padding Aligning EditText fields below TextView or ImageView Handling multiple EditTexts and managing layout spacing 🔹 5. ImageView — Displaying Graphics and Icons Adding an ImageView to your layout Setting image resources using android:src or vector assets Adjusting image size using layout_width and layout_height Using scale types like fitXY, centerCrop, and fitCenter Aligning ImageView relative to other views (e.g., center, above, or beside TextView) Tips for optimizing image resolution for better app performance 🔹 6. Hands-On Design Example — Login Screen Layout Combining TextView, EditText, Button, and ImageView in one layout Designing a simple Login UI using RelativeLayout Step-by-step XML code explanation Aligning and spacing elements properly using layout_below, layout_centerHorizontal, and margins Final UI preview on emulator and fixing common layout issues 🔹 7. Understanding Relative Positioning Using RelativeLayout attributes effectively for flexible design How to position elements relative to one another Avoiding overlapping and ensuring responsive design Practical examples of aligning multiple elements on various screen sizes