Scribd
Upload
3 views

Assignmen1

The document provides an introduction to user interface (UI) elements, focusing on layouts and widgets used in mobile application development. It outlines various types of layouts such as Linear, Relative, and Table Layouts, along with their attributes, and describes common widget types like buttons, text fields, and images. The content emphasizes the importance of structuring UI elements for effective user interaction in apps and websites.

Uploaded by

venomfate778
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

Assignmen1

The document provides an introduction to user interface (UI) elements, focusing on layouts and widgets used in mobile application development. It outlines various types of layouts such as Linear, Relative, and Table Layouts, along with their attributes, and describes common widget types like buttons, text fields, and images. The content emphasizes the importance of structuring UI elements for effective user interaction in apps and websites.

Uploaded by

venomfate778
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Assignment # 01

Submitted By:

Eman Iftikhar

Submitted To:

Sir Aoun

Department:
BS Computer Science (6th)

Topic:
User Interface Elements introduction (layouts &
Widgets)

Subject:
Mobile Application Development

Roll No:
01

INFORMATICS GROUP OF COLLEGES


User Interface Elements Introduction (layouts & widgets)

User interface (UI) elements are the parts we use to build apps or
websites. They add interactivity to a user interface, providing touchpoints for
the user as they navigate their way around; think buttons, scrollbars, menu
items, and checkboxes.

User Interface Elements


 Input controls. Input controls make it easy for users to enter information.
 Containers.
 Navigational components.
 Informational components.

User interface (UI) design involves structuring the visual elements of an app or website using
layouts and widgets. Layouts determine the overall structure and arrangement of elements on
the screen, while widgets are individual UI components like buttons, text fields, or images
that users interact with.

Layouts:
Definition:

Layouts are the foundational structures that organize UI elements on a screen, determining
their positioning, size, and arrangement.

Layout Types
There are number of Layouts provided by Android which you will use in almost all the
Android applications to provide different view, look and feel.

1.Linear Layout
Linear Layout is a view group that aligns all children in a single direction, vertically or
horizontally.

2. Relative Layout
Relative Layout is a view group that displays child views in relative positions.

3. Table Layout
Table Layout is a view that groups views into rows and columns.
4. Absolute Layout
Absolute Layout enables you to specify the exact location of its children.

5.Frame Layout
The Frame Layout is a placeholder on screen that you can use to display a single view.

6.List View
List View is a view group that displays a list of scrollable items.

7.Grid View
Grid View is a View Group that displays items in a two-dimensional, scrollable grid.

Layout Attributes
Each layout has a set of attributes which define the visual properties of that layout. There are
few common attributes among all the layouts and there are other attributes which are specific
to that layout. Following are common attributes and will be applied to all the layouts:

1.android:id
This is the ID which uniquely identifies the view.
2.android: layout width
This is the width of the layout.
3.android: layout height
This is the height of the layout
4.android: layout_marginTop
This is the extra space on the top side of the layout.
5.android: layout_marginBottom
This is the extra space on the bottom side of the layout.
6.android: layout_marginLeft
This is the extra space on the left side of the layout.
7.android: layout_marginRight
This is the extra space on the right side of the layout.
8.android: layout_gravity
This specifies how child Views are positioned.

9.android: layout_weight
This specifies how much of the extra space in the layout should be allocated to the View.

Here width and height are the dimension of the layout/view which can be specified in terms
of dp (Density-independent Pixels), sp (Scale-independent Pixels), pt (Points which is 1/72 of
an inch), px(Pixels), mm (Millimeters) and finally in (inches).
You can specify width and height with exact measurements but more often, you will use one
of these constants to set the width or height −
 android: layout width=wrap content tells your view to size itself to the dimensions
required by its content.
 android: layout_width=fill_parent tells your view to become as big as its parent
view.

Widgets:
Definition:
Widgets are the individual UI components that users interact with, such as buttons, text
fields, images, and more.
Common Types of Widgets:
1. Text and Labels
o Display static text.

o Example: Text View (Android), Text (Flutter), <label> (HTML).

2. Input Fields
o Allow users to enter data.

o Example: Edit Text, TextField, <input>.

3. Buttons
o Trigger actions.

o Example: Button, ElevatedButton, <button>.

4. Images and Icons


o Show graphics or icons.

o Example: image View, Icon, <img>.

5. Containers and Cards


o Group and visually separate content.

o Example: Container, Card, <div> with CSS.

6. Lists and Tables


o Display collections of data.

o Example: List View, Recycler View, <ul>, <table>.

7. Navigation Widgets
o Menus, tabs, drawers for navigating between screens.

o Example: BottomNavigationView, TabBar, <nav>.

Layout + Widget Example (Flutter-style pseudocode):


dart
CopyEdit
Column(
children: [
Text('Welcome'),
TextField(),
ElevatedButton(
onPressed: () => print("Clicked"),
child: Text('Login'),
),
],
)
Here:
 Column is a layout (vertical arrangement).
 Text, Text Field, and Elevated Button are widgets.

You might also like