Chap-3 - UI Componenets and Layouts-1

Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 43

Chapter-3

UI Components and Layouts


Control Flow

Java Programming language can be used in development of


Android Apps.
Android IDE or tools check and compile the dependencies, code,
resource, data and generate an APK.
APK file contains all the content of the app.
Each app runs on emulator or virtual machine so that app can run
inaccessible from other apps.
Each android app only access to the components which it requires to
do its work.
Application components are the vital parts of an Android
application.
All components are associated with the manifest file
AndroidManifest.xml that defines each component of the
application and way of interact.
There are following four main components that can be used within an Android
application –
Sr.no. Components and Description

1 Activities: They dictate the UI and handle the user interaction


to the smart phone screen.

2 Services: They handle background processing associated with


an application.
3 Broadcast Receivers: They handle communication between
Android OS and applications.

4 Content Providers: They handle data and database


management issues.
• 1.Activities
• An activity represents a single screen with a user interface, in-short
activity performs actions on the screen.
• For example, an email application might have one activity that
shows a list of new emails, another activity to compose an email,
and another activity for reading emails.
• An activity is implemented as a subclass of Activity class as follows
• public class MainActivity extends Activity {
•}
2.Services
A service is a component that runs in the background to perform
long-running operations.
For example, a service might play music in the background while
the user is in a different application, or it might fetch data over
the network without blocking user interaction with an activity.
A service is implemented as a subclass of Service class as follows -
public class MyService extends Service {
}
• 3. Broadcast Receivers
• Broadcast receivers simply respond to broadcast messages from
other applications or from the system.
• For example, applications can also initiate broadcasts to let other
applications know that some data has been downloaded to the
device and is available for them to use, so this is broadcast receiver
who will intercept this communication and will initiate appropriate
action.
• A broadcast receiver is implemented as a subclass of Broadcast
Receiver class and each message broadcaster as an Intent object.
• public class My Receiver extendsBroadcastReceiver {
• public void onReceive(context,intent){}
• Content Providers
• A content provider component supplies data from one application to
others on request.
• Such requests are handled by the methods of the ContentResolver
class.
• The data may be stored in the file system, the database or
somewhere else entirely.
• A content provider is implemented as a subclass of ContentProvider
class and must implement a standard set of APIs that enable other
applications to perform transactions.
• public class MyContent Providerextends
• Content Provider {
• public void onCreate(){}
•}
Additional Components
There are additional components which will be used in the construction of
above mentioned entities, their logic and writing between them.
Sr.No. Components and Description

1 Fragments: Represents a portion of user interface in an Activity

2 Views: Ul elements that are drawn on-screen including buttons, lists forms etc.

3 Layouts : View hierarchies that control screen format and appearance of the
views.
4 Intents: Messages writing components together.

5 Resources: External elements, such as strings, constants and drawable pictures.

6 Manifest : Configuration file for the application.


• Android Application Structure
Before you run your app, you should be aware of a few directories and files in the
android project-Android Project Directory Structure
• The Android project structure on the disk might be differs from the above
representation. To see the actual file structure of the project, select Project from
the Project dropdown instead of Android.

• The android app project will contain different types of app modules, source code
files, and resource files. We will explore all the folders and files in the android
app.
Android Project Directory Structure:---
• manifests-: It is used to provide application information to android operating system.

• java directory-: All business logics related files are stored in java directory.

• resource directory-: All internal and external resources are stored in resource directory.

• layout-: All pictures are stored in drawable directory.

• Mipmap-: all predefined icon are stored in mipmap directory.

• Gradle directory-: It is used to compile your whole project at a time.


• Java Folder
• This folder will contain all the java source code (.java) files which we’ll create during the
application development, including JUnit test code.
• Whenever we create any new project/application, by default the class
file MainActivity.java will create automatically under the package name
“com.tutlane.helloworld” like as shown below.
• res (Resources) Folder
• It’s an important folder that will contain all non-code resources, such as
bitmap images, UI strings, XML layouts like as shown below.
• The res (Resources) will contain a different type of folders that are:
• Drawable Folder (res/drawable)
• It will contain the different types of images as per the requirement of
application. It’s a best practice to add all the images in a drawable folder other
than app/launcher icons for the application development.
• Layout Folder (res/layout)
• This folder will contain all XML layout files which we used to define the user
interface of our application. Following is the structure of the layout folder in
the android application.
• Mipmap Folder (res/mipmap)
• This folder will contain app / launcher icons that are used to show on the
home screen. It will contain different density type of icons such as hdpi, mdpi,
xhdpi, xxhdpi, xxxhdpi, to use different icons based on the size of the device.
• Following is the structure of the mipmap folder in the android application.
• Values Folder (res/values)
• This folder will contain various XML files, such as strings, colors, style
definitions and a static array of strings or integers. Following is the
structure of the values folder in android application.

• Manifests Folder
• This folder will contain a manifest file (AndroidManifest.xml) for our
android application. This manifest file will contain information about our
application such as android version, access permissions, metadata, etc. of
our application and its components. The manifest file will act as an
intermediate between android OS and our application.

• Following is the structure of the manifests folder in the android application.


• Gradle Scripts
• In android, Gradle means automated build system and by using this
we can define a build configuration that applies to all modules in our
application. In Gradle build.gradle (Project), and build.gradle
(Module) files are useful to build configurations that apply to all our
app modules or specific to one app module.
• Following is the structure of Gradle Scripts in the android application.
• Following are the important files which we need to implement an app
in android studio:
• Android Layout File (activity_main.xml)
• The UI of our application will be designed in this file and it will
contain Design and Text modes. It will exists in the layouts folder and
the structure of activity_main.xml file in Design mode like as shown
below.
• We can make required design modifications in activity_main.xml file
either using Design or Text modes. If we switch
to Text mode activity_main.xml file will contain a code like as shown
below.
• Android Main Activity File (MainActivity.java):
• The main activity file in the android application
is MainActivity.java and it will exist in the java folder.
The MainActivity.java file will contain the java code to handle all the
activities related to our app.
• Following is the default code of MainActivity.java file which is
generated by our HelloWorld application.
• Android Manifest File (AndroidManifest.xml)
• Generally, our application will contain multiple activities and we need
to define all those activities in the AndroidManifest.xml file.
• In our manifest file, we need to mention the main activity for our app
using the MAIN action and LAUNCHER category attributes in intent
filters (<intent-filter>).
• In case if we didn’t mention MAIN action or LAUNCHER category for
the main activity, our app icon will not appear in the home screen’s
list of apps.

• Following is the default code of AndroidManifest.xml file which is


generated by our HelloWorld application.
These are the main folders and files required to implement an application in android studio. If
you want to see the actual file structure of the project, select Project from the Project dropdown
instead of Android.
• Android UI Controls
• Input controls are the interactive components in your app's user
interface. Android provides a wide variety of controls you can use in
your UI, such as buttons, text fields, seek bars, check box, zoom
buttons, toggle buttons, and many more.
• UI Elements
• A View is an object that draws something on the screen that the user
can interact with and a ViewGroup is an object that holds other View
(and ViewGroup) objects in order to define the layout of the user
interface.
• 1.TextView-This control is used to display text to the user.
• 2.EditText-EditText is a predefined subclass of TextView that includes
rich editing capabilities.
• 3.AutoCompleteTextView-The AutoCompleteTextView is a view that is
similar to EditText, except that it 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-An ImageButton is an AbsoluteLayout which enables
you to specify the exact location of its children. This shows a button
with an image (instead of text) that can be pressed or clicked by the
user.
• 6.CheckBox-An on/off switch that can be toggled by the user. You
should use check box when 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-The RadioButton has two states: either checked or
unchecked.
• 9.RadioGroup-A RadioGroup is used to group together one or more
RadioButtons.
• 10.ProgressBar-The ProgressBar view provides visual feedback about
some ongoing tasks, such as when you are performing a task in the
background.
• 11.Spinner-A drop-down list that allows users to select one value
from a set.
12.TimePicker-The TimePicker view enables users to select a time of the
day, in either 24-hour mode or AM/PM mode.
13.DatePicker-The DatePicker view enables users to select a date of the
day.
UI screen components
• A typical user interface of an android application consists of action bar
and the application content area.
• Main Action Bar
• View Control
• Content Area
• Split Action Bar
Android UI Layouts
• Android Layout is used to define the user interface that holds the UI
controls or widgets that will appear on the screen of an android
application or activity screen.
• Generally, every application is a combination of View and ViewGroup.
• As we know, an android application contains a large number of activities
and we can say each activity is one page of the application.
• So, each activity contains multiple user interface components and those
components are the instances of the View and ViewGroup.
• All the elements in a layout are built using a hierarchy
of View and ViewGroup objects.
• View
• A View is defined as the user interface which is used to create
interactive UI components such as TextView, ImageView, EditText,
RadioButton, etc., and is responsible for event handling and drawing.
They are Generally Called Widgets.
• View Group
• A ViewGroup act as a base class for layouts and layouts parameters that
hold other Views or ViewGroups and to define the layout properties.
They are Generally Called layouts.
Types of Android Layout
• Android Linear Layout: LinearLayout is a ViewGroup subclass, used to provide
child View elements one by one either in a particular direction either
horizontally or vertically based on the orientation property.
• Android Relative Layout: RelativeLayout is a ViewGroup subclass, used to
specify the position of child View elements relative to each other like (A to the
right of B) or relative to the parent (fix to the top of the parent).
• Android Absolute Layout: In Android, an Absolute Layout is a layout used to
design the custom layouts. In this layout you can specify the exact location of
its children by using x and y coordinates.
• Android Frame Layout: FrameLayout is a ViewGroup subclass, used to specify
the position of View elements it contains on the top of each other to display
only a single View inside the FrameLayout.
• Android Table Layout: TableLayout is a ViewGroup subclass, used to display
the child View elements in rows and columns.
• 1. Linear Layout
• Android Linear Layout is View Group that aligns all its children's either in
vertically or Horizontally
• Linear Layout Attributes-
• android:id - This is the ID which uniquely identifies the layout.

• android:divider - This is drawable to use as a vertical divider between


buttons. You use a color value, in the form of "#RGB", "#ARGB", "#RRGGBB",
or "#AARRGGBB“.
• • android:gravity This specifies how an object should position its content, on
both the X and Y axes. Possible values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.

• android:orientation - This specifies the direction of arrangement and you will


use "horizontal" for a row, "vertical" for a column. The default is horizontal.
• android:layout_weight - This assigns importance on how much screen
a View can relatively occupy compare to others.
• Relative Layout
• Arranges your views relative to its parent or other child views
• Child views specify layout attributes to get aligned.
• some of the most used properties are listed below
• layout_alignParentTop
• layout_alignParentBottom
• layout_alignParentRight
• layout_alignParentLeft
• layout_centerHorozontal
• layout_centerVertical
• layout_above
• layout_below
Android Absolute Layout:
• An Absolute layout allows you to specify the exact location
i.e. X and Y co-ordinates of its children with respect to the
origin at the top left corner of the layout.
• Absolute layout is less flexible and harder to maintain for
varying sizes of screens that’s why it is not recommended.
• Attributes:
• 1. android:id-
• This is ID which uniquely identifies the layout.
• 2.android layout_x
• This specifies the x-coordinate of the view.
• 3.android layout_y
• This specifies the y-coordinate of the view.
Frame Layout
• Frame Layout is designed to block out area on the screen to display a
single item.
• generally, Frame Layout should be used to hold a single child view,
because it can be difficult to organize child views in a way that’s
scalable to different screen sizes without the children overlapping
each other
• Attributes:
1.android:id
• This is the ID which uniquely identifies the layout.
• android:foreground
• This defines the drawable to draw over the content and possible
values may be a color value, in the form of "#rgb", "#argb", "#rrggbb",
or "#aarrggbb".
• android:foregroundGravity
• Defines the gravity to apply to the foreground drawable. The gravity
defaults to fill. Possible values are top, bottom, left, right, center,
center_vertical, center_horizontal etc.
• android:measureAllChildren
• Determines whether to measure all children or just those in the VISIBLE
or INVISIBLE state when measuring. Defaults to false.
Table Layout
• Android TableLayout is a ViewGroup subclass which is used to display the
child View elements in rows and columns.
• It will arrange all the children elements into rows and columns and does not
display any border lines in between rows, columns or cells.
• The working of TableLayout is almost similar to HTML table and it contains
as many columns as row with the most cells.
• Attributes:
• android:id
• This is the ID which uniquely identifies the layout.
• android:collapseColumns
• This specifies the zero-based index of the columns to collapse. The column
indices must be separated by a comma: 1, 2, 5.
• android:shrinkColumns
• The zero-based index of the columns to shrink. The column indices
must be separated by a comma: 1, 2, 5.
• android:stretchColumns
• The zero-based index of the columns to stretch. The column indices
must be separated by a comma: 1, 2, 5.

You might also like