creating User interface in mobile and app dev
- 1. Creating UI Mobile and app development
- 2. User Interface UI (User Interface) refers to the visual and interactive elements of an application that a user interacts with. It encompasses the design, layout, and navigation flow that guide users as they engage with an app on their mobile devices. Mobile app components 1. Activities 2. Services 3. Broadcast Receivers 4. Content Providers 5. Intent
- 3. Activity Activities define the user interface (UI) of an app and manage interactions with the screen. Each activity represents a single screen with UI elements, like buttons and text fields. Every Android app typically has multiple activities, each designed to handle a specific part of the app. For example, an app might have one activity for the login screen, another for displaying a list of items, and a third for detailed information.
- 5. View and View Group View: • A View is the basic building block for any UI component in Android. • It is created from the View class and occupies a rectangular space on the screen. • A View is responsible for: o Drawing: Rendering its appearance on the screen. o Event Handling: Capturing user input like touches, clicks, or gestures. Examples of Views include interactive elements such as buttons, text fields, and images. Widgets like Button, TextView, and ImageView are all subclasses of View, allowing developers to create functional UI components
- 6. View Group: • A View Group is a subclass of View that acts as an invisible container for organizing other Views or even other View Groups. • View Group manages the layout and size of multiple View elements, ensuring they are displayed properly on different devices Layout: • They define the visual structure of an Android UI. • A layout can be created in two ways: o Programmatically at runtime using View or View Group objects in your code. o Using XML to define the structure. The layout XML files are stored in the res/layout folder of the project, such as main_layout.xml.
- 7. Mobile Application UI layouts There are many type of layouts that works for different purposes. 1. Linear Layout: Arranges child views in a single direction, either vertically or horizontally. 2. Relative Layout: Positions child views relative to each other or to the parent layout. 3. Table Layout: Organizes child views into rows and columns. 4. Absolute Layout (deprecated): Positions child views at exact x and y coordinates on the screen. 5. Frame Layout: Acts as a container that can hold a single view and allows stacking of multiple views on top of each other. 6. List View: Displays a scrollable list of items, each represented by a row. 7. Grid View: Displays items in a two-dimensional grid layout.
- 8. UI Components / Ui Controll 1. Text View: A control used to display text to the user. 2. EditText: A predefined subclass of TextView that includes rich editing capabilities. 3. AutoCompleteTextView: Similar to EditText, this view shows a list of completion suggestions automatically while the user is typing. 4. Button: A push-button that can be pressed or clicked by the user to perform an action. 5. ImageButton: A button that displays an image (instead of text) and can be pressed or clicked by the user. 6. CheckBox: An on/off switch that can be toggled by the user, used for presenting users with a group of selectable options that are not mutually exclusive. 7. ToggleButton: An on/off button with a light indicator. 8. RadioButton: A button that has two states: either checked or unchecked.
- 9. UI Components / Ui Controll 9. RadioGroup: Used to group together one or more RadioButtons, allowing only one button to be selected at a time. 10. ProgressBar: Provides visual feedback about ongoing tasks, such as when performing a task in the background. 11. Spinner: A drop-down list that allows users to select one value from a set. 12. TimePicker: Enables users to select a time of day, in either 24- hour mode or AM/PM mode. 13. DatePicker: Allows users to select a date from a calendar interface.