‫عيدمك مبارك و لك عام‬

‫و أنمت بألف خري‬

‫د‪ .‬زواي مفتاح‬
 Chapiter IV:

User Interface (UI)

Introduction
The User Interface (UI) in Android refers to the visual
and interactive components of an Android application
that allow users to interact with the app and perform
various tasks. The UI is an essential part of any Android
app, as it determines how users will interact with the app
and how they will perceive its functionality and usability.
The Android UI is based on the Material Design
guidelines developed by Google, which provide a set of
design principles and best practices for creating
beautiful, intuitive, and consistent user interfaces across
all Android devices.
Layouts
Layouts are an essential part of the Android user interface
(UI) design. A layout defines the visual structure for a user
interface in an Android app, such as where UI elements should be
placed and how they should be arranged. In other words, layouts
define the look and feel of an app and its user interface.
Android provides a variety of layout types that developers
can choose from to design their app's UI. Each layout has its own
unique set of properties, and selecting the right layout for your
app can make a significant difference in the overall user
experience. Understanding the different types of layouts and how
to use them effectively is crucial for creating well-designed and
user-friendly apps.
The general structure of a layout in Android
Types of Layouts
There are several types of layouts available in Android, each with its own unique
characteristics and intended use cases. Here are some of the most commonly used layouts:
Layout Type Description Use Cases
Arranges UI elements in a single row or
Linear Layout Forms, lists, simple UI designs
column
Arranges UI elements relative to one Complex UI designs that require precise
Relative Layout
another or to the parent container positioning of elements

Similar to a relative layout but allows for Complex UI designs with elements that
Constraint Layout
more precise positioning of UI elements need to be constrained to one another

Arranges UI elements in rows and columns,

Table Layout Displaying tabular data
similar to an HTML table
Arranges UI elements in a grid-like
Displaying multiple items in a grid-like
Grid Layout structure, with a fixed number of rows and
pattern
columns
Allows for only one child view to be Displaying a single view that takes up the
Frame Layout
displayed at a time entire screen
Layout Example: Linear Layout
Layout Example: Relative Layout
Layout Example: Constraint Layout
Views
In Android app development, Views refer to the visual
elements or components that make up the user interface (UI) of
an app. Views can be simple elements such as text, images, and
buttons, or more complex elements such as lists, grids, and web
views.

Views are implemented using the View class and its

subclasses such as TextView, EditText, Button, ImageView,
ListView, and others. Each View has its own properties and
methods that define its behavior and appearance, and they can
be customized to meet specific requirements.
Types of views
View Description
Button A clickable button that performs an action when clicked
TextView A non-editable text view that displays text to the user
EditText A view that allows the user to input text
ImageView A view that displays an image resource
CheckBox A view that allows the user to select one or more items from a set of options
RadioButton A view that allows the user to select one option from a set of options
Spinner A view that displays a dropdown list of options for the user to select from
A view that allows the user to select a value from a range of values by sliding a thumb along a
SeekBar
horizontal track
RatingBar A view that allows the user to rate something by selecting a number of stars
A view that displays a progress indicator, typically used to indicate the progress of a background
ProgressBar
task
Switch A view that allows the user to toggle a binary setting
A view that allows the user to toggle a binary setting, similar to a switch but with a different
ToggleButton
appearance
WebView A view that displays web content within the app
Views Examples
Manipulating of UI
Manipulating the interface in Java code involves accessing the different UI
elements and modifying their properties, such as text, visibility, and behavior. This
can be done by obtaining references to the UI elements through their assigned IDs
and using methods provided by the Android SDK.
For example, to modify the text of a TextView element, we can use the
setText() method, as shown in the following code snippet:
Manipulating of UI
Similarly, to set the visibility of a View element to be hidden, we can use the
setVisibility() method with the View.INVISIBLE constant, like this:
Manipulating of UI
To handle user input, we can attach event listeners to UI elements using
setOnClickListener() method, like this:
Event listeners in Android
Event Listener Description
OnClickListener Responds to clicks on a view
OnLongClickListener Responds to long clicks on a view
OnTouchListener Responds to touch events on a view
OnKeyListener Responds to key presses
OnFocusChangeListener Responds to changes in focus
OnCheckedChangeListener Responds to changes in the checked state of a compound button
OnSeekBarChangeListener Responds to changes in the progress of a seek bar
OnItemSelectedLister Responds to the selection of an item in a spinner
TextWatcher Responds to changes in the text of an editable view
OnEditorActionListener Responds to editor actions, such as "done" or "next"
GestureDetector.OnGestureListener Responds to gestures, such as flings, swipes, and taps
GestureDetector.OnDoubleTapListener Responds to double tap gestures
ScaleGestureDetector.OnScaleGestureListener Responds to scaling gestures
View.OnDragListener Responds to drag and drop events
View.OnLayoutChangeListener Responds to changes in the layout of a view
ViewTreeObserver.OnGlobalLayoutListener Responds to global layout changes, such as changes in the size or position of a view
ViewTreeObserver.OnScrollChangedListener Responds to changes in the scrolling position of a view
ViewTreeObserver.OnPreDrawListener Responds before a view is drawn, allowing for modifications to the view tree
ViewTreeObserver.OnWindowFocusChangeListener Responds to changes in the focus state of a window
Responds to changes in the system UI visibility, such as when the status bar or navigation
View.OnSystemUiVisibilityChangeListener
bar is shown or hidden