Unit-3

Android User Interface Design Essentials

What is Android UI?

Android is a mobile operating system that runs on 75% of mobile phones in the
world and is based on a modified version of Linux kernel and other open source
software. Android is primarily designed for touch screen mobile devices such as
smartphones, smart watches, tablets, Android TV, and automotives. The Android
operating system (OS) allows users to interact with it through different devices and
a medium called the User Interface (UI).

The UI is what the end user is able to see and interact with to navigate and use
different components of the Android OS on an Android application. They are
presented to the user in different forms, such as the following:

 Graphical User Interface (GUI): This helps users interact with visual
representations on digital devices or smartphones such as a Samsung phone.
 Voice-controlled interfaces: These allow users to interact through voice
commands, such as Siri and Alexa.
 Gesture-based interface: Users are able to interact with the interface through
body motions

AIDL: Android Interface Definition Language, it helps to create bridge between user
and application of the android
Top UI Controls:
Button: it is used to display text on the button to perform an Action.
Check Box: A Checkbox is the UI control that has two states that are either checked
or unchecked. It helps to choose more than one option
Image Button: An Image Button is an Absolute Layout 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.
Toggle button: An on/off button with a light indicator.
Radio Button: The Radio Button has two states: either checked or unchecked. It
helps to choose only one option
Progress Bar: The Progress Bar view provides visual feedback about some ongoing
tasks, such as when you are performing a task in the background.
Spinner: A drop-down list that allows users to select one value from a set.
Time Picker: The Time Picker view enables users to select a time of the day, in
either 24-hour mode or AM/PM mode
Date Picker: The Date Picker view enables users to select a date of the day.
User Interface Screen elements

Screen elements help to apply specific action on mobile screen. The following are
elements of screen:

 Main Action Bar

 View Control
 Content Area
 Split Action Bar
Main Action Bar:
It has detail about the action which is performed by application like opening,
closing, downloading etc.
View control:
 A View is an object that draws something on the screen that the user can
interact
 ViewGroup is an object that holds two or more views together in order to
define the layout of the user interface
 It helps to show your content in particular order
The following are different types of views in android studio:

 TextView is one of the most fundamental View types. It’s used to display
text to the user. You can customize the appearance of the text by changing
its color, size, font, and alignment.
 ImageView it is used for displaying images. You can manipulate images in
ImageView, such as resizing them or changing their aspect ratio.
 EditText is an interactive TextView that allows users to input and edit text.
It’s commonly used in forms, search bars, and messaging apps. You can use
 various input types like text, number, and password, and set various
properties to control the text, like limiting the number of characters or
allowing only numbers.
 ListView is a view which groups several items and display them in vertical
scrollable list.
 GridView is a type of AdapterView that displays items in a two-
dimensional scrolling grid. Items are inserted into this grid layout from a
database or from an array.
 WebView class is an extension of Android's View class that lets you display
web pages as a part of your activity layout
 ScrollView is a view group that is used to make vertically and horizontally
scrollable views.
Content area:
Content area manages access to a central repository of data. It is part of an
Android application, which often provides its own UI for working with the
data
Split action bar:
It helps to divide application action by two or more ways that can be done
with the help of OK or CANCEL actions, YES or NO actions etc
Designing Interface with Layout
 Layouts in Android serve as the cornerstone for designing and
arranging user interfaces
 It is important because they provide a systematic way to arrange
different interface components
 A well-structured layout can significantly reduce the complexity of
application maintenance
The following are most frequently used layout in android studio:
 LinearLayout organizes Views in a linear order, horizontally or vertically. It is
straightforward and efficient for arranging elements in a single row or column.
 This layout is particularly useful for creating forms, toolbars, or any interface
where a sequential arrangement of elements is needed.
 TableLayout: as the name suggests, it arranges Views in a grid-like format,
similar to a table. It’s useful for displaying rows of data or elements that
need to be aligned in columns and rows. Each row in a TableLayout can
contain multiple Views, and each View is placed in a cell. This layout is
beneficial when creating calculators, timetables, or any interface with a
tabular structure.
 AbsoluteLayout enables you to specify the exact location of child Views.
Each View can be positioned with specific x and y coordinates. However,
it’s not recommended for use as it doesn’t adapt well to different screen
sizes and orientations. Due to its lack of flexibility and the complexity of
maintaining it across various screen sizes, it’s generally avoided in modern
Android development
 Relative Layout: It enables relationship between two different layouts.
Whenever the changes made in one layout that will get affected in another
layout also
 ConstraintLayout: It enables to create complex application in android
studio. It allows to apply specific condition on layout for creating
complicate UI design
Working with Layouts:
Layout combines two or more controls together to design User Interface
design. The following are attributes of layout:
Specifies the width of a View or ViewGroup. Common values
layout_width
include match_parent, wrap_content, and specific dimensions.

Specifies the height of a View or ViewGroup. Like layout_width, it

layout_height
can be match_parent, wrap_content, or a specific size.

layout_gravity
Used in certain ViewGroups like LinearLayout or FrameLayout to
specify the position of a View within the ViewGroup.
 padding defines the space inside the View boundaries, while
padding or margin
margin defines the space outside, around the View.

Assigns a unique identifier to a View, which is crucial for

id
referencing the View in your Java or Kotlin code.

src Used in ImageView to define the source image.

text Sets the text displayed by a TextView or a Button.

Example: Designing Login Page in Android Studio:
Step 1: Open Android Studio
Step 2: File menu->new->project->Empty Views Activity
Step 3: Right click on drawable->new->drawable file->type name of the file
Step 4: Type the following code:

Step 5: Goto activity main.xml and type the following code:

Step 6: Right click on drawable->new->vector asset->click on clipart->choose

account circle->give name for your clipart
Step 7: Right click on drawable->new->drawable file->type name of the file (for
rounded corner rectangle)

Step 8: Type the following code for adding text boxes for user name and password
Step 9: Add the following code for button

Drawing and Working With animation

Animation is the process of adding a motion effect to any view, image, or text.
With the help of an animation, you can add motion or can change the shape of a
specific view. Animation in Android is generally used to give your UI a rich look
and feel. The animations are basically of three types as follows:
1. Property Animation
2. View Animation
3. Drawable Animation

Property Animation
Property Animation is one of the robust frameworks which allows animation
almost everything. This is one of the powerful and flexible animations which was
introduced in Android 3.0
View Animation
This animation is slower and less flexible. An example of View animation can be
used if we want to expand a specific layout in that place we can use View
Animation.
Drawable Animation
Drawable Animation is used if you want to animate one image over another
Attributes or Methods of animation
startAnimation ():This method will start the animation.
clearAnimation ():This method will clear the animation running on a
specific view.
 Rotation(): This method helps to apply rotation on objects, the rotation can
be of two types clockwise or anti-clockwise rotations
StartPoint(): This method helps to specify the starting point of animation
EndPoint(): This method helps to specify the ending point of animation
Example for working with animation
Step 1: Start a new project in android studio
Step 2: app > res > values > strings.xml
Step 3: Type the following code:

<resources>
<string name="app_name">GFG App</string>
<string name="blink">BLINK</string>
<string name="clockwise">ROTATE</string>
</resources>

Step 4: Create ImageView in the activity_main.xml along with buttons that will
add animation to the view. Navigate to the app > res > layout >
activity_main.xml

<?xml version="1.0" encoding="utf‐8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:id="@+id/imageview"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="40dp"
android:contentDescription="@string/app_name"
android:src="@drawable/gfgimage" />
<Button
android:id="@+id/BTNblink"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
 android:text="@string/blink"
android:textColor="@color/white" />

<!‐‐To start the rotate animation of the image‐‐>

<Button
android:id="@+id/BTNrotate"
style="@style/TextAppearance.AppCompat.Widget.Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:padding="3dp"
android:text="@string/clockwise"
android:textColor="@color/white" />

Step 5: Create 2 different types of animation for ImageView

app > res > Right-Click on res >> New >> Directory >> Name your directory as
“anim”. Inside this directory, we will create our animations.

blink_animation.xml
<?xml version="1.0" encoding="utf‐8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<alpha android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="500"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>

Clockwise.xml:

<?xml version="1.0" encoding="utf‐8"?>

<set
xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="6000"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />

<rotate
android:duration="6000"
android:fromDegrees="360"
android:pivotX="50%"
 android:pivotY="50%"
android:startOffset="5000"
android:toDegrees="0" />

</set>

Step 6:Working with the MainActivity.java file

Add animation to the ImageView by clicking a specific Button. Navigate to
the app > java > your apps package name >> MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

// Declare ImageView and Buttons

ImageView imageView;
Button blinkBTN, rotateBTN;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

// Initialize ImageView and Buttons using their IDs

imageView = findViewById(R.id.imageview);
blinkBTN = findViewById(R.id.BTNblink);
rotateBTN = findViewById(R.id.BTNrotate);
blinkBTN.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Load blink animation and start it on the ImageView
Animation animation =
AnimationUtils.loadAnimation(getApplicationContext()
,
R.anim.blink_animation);
imageView.startAnimation(animation);
}
});

// Set up click listener for rotate button to start rotate animation

rotateBTN.setOnClickListener(new View.OnClickListener() {
@Override
 public void onClick(View v) {
// Load rotate animation and start it on the ImageView
Animation animation =
AnimationUtils.loadAnimation(getApplicationContext()
,
R.anim.rotate_animation);
imageView.startAnimation(animation);
}
});
Drawing an animation:
Drawing an animation can be of three types,
 Custom animation
 Timing and Sequencing animation
 Creating complex animation
Custom animation: This type of animation allows users to make movement on
object. Steps to create custom animation:
Step 1: Set up android environment. In this step we need to set two things
dependencies and libraries
Step 2: Define animator resources. In this step we need to set XML file and
calling animate class. This animate class helps to apply basic animation in
android studio. The following are examples of animate class:
Translation: It helps to translate object from one position to another position
Rotation: It helps to rotate an object either clockwise or anti-clockwise
Scaling: It helps to change the size of object, size can be increased or decreased
Alpha: It helps to combine any two animations on single object
Step 3: Implement animation in your application. In this step we should do apply
animation in your application and referencing animation resources for the
animation application
Timing and Sequencing animation:
This type of animation helps to control the animation and helps to change the
sequence order of the animation
This animation can be implemented with the help of duration class
Steps to create timing and sequencing animation:
Step 1: Using animator set to apply order of animation, duration of animation and
helps to set delay which makes delay on animation transition
Step 2: Setting animation duration. This helps to control the speed of the
animation.
Longer duration helps to show lower speed in animation
Shorter duration helps to make high speed in animation
Step 3: Applying delay that helps to create staggered effect on your animation
The following are examples of duration class:
Start time(): It helps to set the starting time of the animation
Stop time(): It helps to set the stop time of the animation
Fixed time(): It helps to set specific time of the animation
Creating Complex animation
It can be created with help of interpolator class. The following are properties of
interpolator class:
Accelerate: This property helps to increase the speed of animation
Decelerate: This property helps to decrease the speed of animation
Rotate: This property helps to rotate the object on specific number of times
Bounce: This property helps to make an object to jump up and jump down

Step 1: Starting and ending layout helps to set layout always it should be
constraint layout
Step 2: Staring scene and ending scene helps to set sequence of the animation
Step 3: Transition will help to set the specific animation on object and Transition
manager helps to control the flow of animation.