1 / 18

Designing User Interface for Manner Mode App: GUI Elements and Layouts

This guide by Dr. Razi Iqbal covers the essential steps for creating the graphical user interface (GUI) of the Manner Mode App. Focused on layout designs, it introduces Linear and Relative layouts to organize controls vertically and horizontally. It explains how to specify layout direction, add images through drag-and-drop, and incorporate widgets like ImageView and ToggleButton. Key functionalities include changing images and states on button clicks, ensuring an engaging user experience. Perfect for beginners and seasoned developers alike.

xander-finley
Download Presentation

Designing User Interface for Manner Mode App: GUI Elements and Layouts

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing user interface Dr. Razi Iqbal razi.iqbal@leads.edu.pk

  2. Creating Manner Mode App

  3. Creating Manner Mode App

  4. GUI + App Icon (Initial Stage)

  5. Layouts

  6. Linear Layout • A View Group that arranges its children • Vertically • Horizontally • Layout Direction can be specified as • android:orientation • If orientation is vertical • Control will be one control per column • If orientation is Horizontal • Controls will be arranged in rows

  7. Linear Layout – Vertical Orientation

  8. Linear Layout – Horizontal Orientation

  9. Relative Layout • A View Group that arranges its children • Relative to each other • Child Views can specify their positions • Relative to their parents • Elements can be arranged to • Left of • Right of • Above • Below

  10. Relative Layout

  11. Activity_Main.xml code Code after deleting the TextView from Activity_Main.xml

  12. Adding Images to Project • Simply drag and Drop the images to res drawable-mdpi • Project will rebuild (Build Automatically) • It will include the resources in R.java file

  13. Adding ImageView

  14. Adding Toggle Button

  15. The Final GUI • Widgets • An Image View • A Toggle Button • Desired Actions • Image should change on Button Click • State of Manner Mode should change on Button Click

  16. Generating Code

  17. Generating Code

  18. Generating Code

More Related