Mobile Application & Development Unit III- Android User

Interface Design Essentials

Unit-III

 Android User Interface Design Essentials:-

---------------------------------------------------------------------------------------------------------------
Contents:
Android User Interface Design Essentials: User Interface Screen elements, Designing
User Interfaces with Layouts, Drawing and Working with Animation.

---------------------------------------------------------------------------------------------------------------

 User Interface Screen elements:

User interface (UI) screen elements in mobile application development encompass a

wide range of components that collectively define how users interact with and perceive the app.
fundamental components that facilitate interaction between users and the application. These
elements are carefully designed to enhance usability, accessibility, and overall user experience
These elements are crucial for creating a seamless and engaging user experience. Here’s a
comprehensive overview of these UI screen elements:

1. Navigation Components:

 Navigation Bar: The navigation bar (on iOS) or tab bar (on Android) typically appears at the
bottom of the screen and contains icons or labels that allow users to switch between different
sections and Located typically at the top of the screen, it includes controls for navigating back,
accessing menus, and displaying the current screen title.

Typically located at the top of the screen, the navigation bar includes:

 Back Button: Allows users to navigate back to the previous screen.

 Title: Displays the name or description of the current screen or section.
 Menu Button: Provides access to additional options or actions related to the current
context.

 Toolbar / App Bar

 Description: Displays actions, titles, and navigation buttons relevant to the current
screen.
 Examples: Top app bar with action buttons, title, and optional navigation (Android),
navigation bar (iOS).

 Tab Bar: Positioned at the bottom of the screen, it allows users to switch between different
sections or views within the app using tabs. Each tab represents a distinct category or
functionality.

GFGC Boy’s College, Kolar 1 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

 Tabs: Each tab represents a different section or view within the app, enabling users to switch
between them easily.

 Drawer/Sidebar: A slide-in panel from the edge of the screen that provides access to
navigation links, settings, or additional options.

A slide-in panel from the edge of the screen:

 Navigation Links: Provides access to different sections of the app.

 Settings: Options for configuring app preferences.
 Additional Actions: Such as account management or help.

2. Input Controls:

 Text Fields: Text fields allow users to input text (e.g., username, password, search queries).
They may include features like auto-complete, input validation, and keyboard customization.
Areas where users can input text or numbers. They may include options for auto-completion,
suggestions, and validation.

Text Fields and Input Boxes: Areas where users can enter text or numeric data:

 Labels: Describes the purpose of the input field.

 Validation: Alerts users to errors or required fields.
 Examples: Text fields for names, email addresses, passwords; numeric fields for
quantities, prices

 Buttons: Buttons are interactive elements that users tap to perform actions, such as submitting
a form, navigating to another screen, or triggering a specific function within the app. Trigger
actions such as submitting forms, navigating to different screens, or performing specific tasks.
They can be styled as text, icons, or a combination.

Examples: Primary buttons (e.g., submit, save), secondary buttons (e.g., cancel, delete)

 Dropdowns and Pickers: Allow users to select from a list of options, dates, times, or other
inputs using a dropdown menu or a picker interface.

 Dropdown Menus: Display a list of options when tapped.

 Date/Time Pickers: Provide a user-friendly interface for selecting dates or times.

3. Content Presentation:

 Lists and Grids: Lists and grids display collections of data (e.g., contacts, products) in a
scrollable format. Each item typically contains text, images, and sometimes interactive
elements like buttons or switches and Display collections of data or items in a scrollable
format, facilitating navigation and exploration within the app.

GFGC Boy’s College, Kolar 2 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

 Scrolling: Users can scroll vertically to view more items.

 Examples: List of contacts, products, messages; grid of images.

 Carousel: Allows users to swipe horizontally through a set of items or images, often used to
showcase featured content or products.

4. Interactive Elements:

 Icons: Icons are used throughout the interface to represent actions, features, or categories
visually. They can convey information quickly and are often used in navigation bars, buttons,
and menus and Graphical representations used for navigation, actions, or indicating status.

 Navigation: Direct users to different sections or actions.

 Examples: Menu icons, action icons (e.g., search, settings), status icons (e.g.,
notifications, connectivity).

 Toggle Switches and Checkboxes: Toggle switches enable users to turn options on or off,
while checkboxes allow for selecting multiple items or options.

 Switches: Toggle between two states (on/off).

 Checkboxes: Select one or more items from a list.
Examples: Checkboxes for multiple selections, switches for on/off toggles.

 Sliders: Enable users to adjust settings or values within a specified range by sliding a thumb
control.

 Volume: Control audio output.

 Brightness: Adjust screen brightness.

5. Feedback and Notifications:

 Toast and Snackbar: Brief messages that appear at the bottom of the screen to provide
feedback or alerts about actions or system events.

 Feedback: Confirmations or success messages.

 Warnings: Alerts for errors or issues.
Examples: Toasts for successful actions (e.g., "Saved"), warnings (e.g., "No internet
connection").

 Dialogs and Alerts: Pop-up windows that require user attention, used for critical notifications,
confirmations, or warnings

 Confirmation: Prompt for user confirmation before proceeding.

 Error Messages: Notify users of critical errors or actions.

GFGC Boy’s College, Kolar 3 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

 Notification : Notifications appear as banners or alerts to inform users about important

updates, messages, or events within the app. They may include action buttons for users
to respond or dismiss

6. Media and Multimedia Elements:

 Image and Video Players: Images and media players display visual content (e.g., photos,
videos) within the app. They may include features like zooming, cropping, and playback
controls. Interfaces for displaying and interacting with images, videos, or audio content within
the app.

 Playback Controls: Play, pause, and seek options.

 Full-Screen Mode: Expand content for a better view.

 Audio Controls: Buttons or sliders for controlling playback of audio content.

 Playback: Control audio tracks or streams.

 Volume Control: Adjust audio output levels.

7. Additional UI Components:

 Search Bar: Allows users to search for specific content within the app, often providing
suggestions or recent search history.

Search Bar: Allows users to find specific content within the app:

 Suggestions: Provide autocomplete options or recent searches.

 Filters: Refine search results based on criteria.

 Progress Indicators: Progress indicators (e.g., spinners, progress bars) show the status of
ongoing operations or loading processes to keep users informed about the app's activity. Visual
cues that indicate the status of ongoing operations, such as loading screens or file downloads.

Progress Indicators: Visual cues that show the status of ongoing tasks:

 Loading: Indicate that content or data is being fetched.

 Completion: Show progress towards completing a task.
 Examples: Progress bars, spinners, percentage indicators.

 Toolbars: Positioned at the top or bottom of the screen, they contain actions or tools relevant
to the current context or screen.

Toolbars: Located at the top or bottom of the screen:

 Actions: Provide quick access to relevant functions or settings.

 Contextual Options: Change based on the current screen or user activity.
GFGC Boy’s College, Kolar 4 By: Divakar M.S
Mobile Application & Development Unit III- Android User
Interface Design Essentials

8. Gesture Controls:
 Gestures: Gesture controls (e.g., swipe gestures, pinch-to-zoom) enable users to interact
with the app through intuitive touch-based movements for navigation or manipulation
of content. Essential for touch-enabled devices, gestures like tapping, swiping, pinching,
and long-pressing allow users to interact with content and navigate through the app.
Gestures: Enable touch-based interactions:
 Tapping: Select items or trigger actions.
 Swiping: Navigate between screens or content.

Example:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Welcome to My App"
android:textSize="24sp"
android:gravity="center"/>

<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name"
android:inputType="textPersonName"/>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:onClick="onSubmitButtonClick"/>

<ProgressBar
android:id="@+id/loadingProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible"/>

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"/>
</LinearLayout>

GFGC Boy’s College, Kolar 5 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

 Designing User Interfaces with Layouts:-

It is a type of resource which gives definition on what is drawn on the screen or how
elements are placed on the device’s screen and stored as XML files in the /res/layout
resource directory for the application. It can also be a type of View class to organize other
controls.
Layout Managers (or simply layouts) are said to be extensions of the ViewGroup class.
They are used to set the position of child Views within the UI we are building. We can nest
the layouts, and therefore we can create arbitrarily complex UIs using a combination of
layouts. There is a number of layout classes in the Android SDK. They can be used,
modified or can create your own to make the UI for your Views, Fragments and Activities.
You can display your contents effectively by using the right combination of layouts

There are many types of layout. Some of which are listed below −

1. Linear Layout
2. Absolute Layout
3. Table Layout
4. Frame Layout
5. Relative Layout

1. LINEAR LAYOUT

Linear layout is further divided into horizontal and vertical layout. It means it can
arrange views in a single column or in a single row. Here is the code of linear
layout(vertical) that includes a text view.
A layout that organizes its children into a single horizontal or vertical row. It creates a
scrollbar if the length of the window exceeds the length of the screen

GFGC Boy’s College, Kolar 6 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials
Example:

<?xml version=”1.0” encoding=”utf-8”?>

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_width=”fill_parent” android:layout_height=”fill_parent”
android:orientation=”vertical” >
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=”@string/hello” />
</LinearLayout>

2. Absolute Layout:-

The AbsoluteLayout enables you to specify the exact location of its children. It can be
declared like this.
Example:
<AbsoluteLayout

android:layout_width=”fill_parent” android:layout_height=”fill_parent”
xmlns:android=”http://schemas.android.com/apk/res/android” >

<Button

android:layout_width=”188dp” android:layout_height=”wrap_content”
android:text=”Button” android:layout_x=”126px” android:layout_y=”361px” />
</AbsoluteLayout>>

3. Table Layout:
TableLayout is a ViewGroup subclass, used to display the child View elements in
rows and columns. The TableLayout groups views into rows and columns. It can be
declared like this.
<TableLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:layout_height=”fill_parent” android:layout_width=”fill_parent” >
<TableRow>

<TextView android:text=”User Name:” android:width =”120dp” />

<EditText android:id=”@+id/txtUserName” android:width=”200dp” />

</TableRow>

</TableLayout>

GFGC Boy’s College, Kolar 7 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

4. RelativeLayout
RelativeLayout enforces to display elements in relations to each other. You can specify
that, for instance, one UI element can be said to be placed on the left of another element, or
on the bottom of another etc. Each UI element can also be positioned according to the
layout’s borders (e.g. aligned to the right)
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).

Example:
RelativeLayout
android:id=”@+id/RLayout”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”

xmlns:android=”http://schemas.android.com/apk/res/android” >

</RelativeLayout>

5. Frame Layout:

The FrameLayout is a placeholder on screen that you can use to display a single view. It
can be declared like this. 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.

GFGC Boy’s College, Kolar 8 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

Example:
<?xml version=”1.0” encoding=”utf-8”?>

<FrameLayout android:layout_width=”wrap_content”
android:layout_height=”wrap_content” android:layout_alignLeft=”@+id/lblComments”
android:layout_below=”@+id/lblComments” android:layout_centerHorizontal=”true” >
<ImageView android:src = “@drawable/droid”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content” />
</FrameLayout>

6. Android List Lyout:

ListView is a ViewGroup, used to display scrollable lists of items in a single column.

7. Android Grid Layout:

GridView is a ViewGroup that is used to display a scrollable list of items in a grid
view of rows and columns.
It was introduced in Android 4.0 (API level 14), the Grid Layout used a rectangular grid
of infinitely thin lines to lay out Views in a series of rows and columns. The Grid Layout is
incredibly flexible and can be used to greatly simplify layouts and reduce or eliminate the
complex nesting often required to construct UIs using the layouts described before.

 Other Attributes That Are Common In All Views And Viewgroups

Sr.No View & description
1 layout_width
Specifies the width of the View or ViewGroup
2 layout_height
Specifies the height of the View or ViewGroup
3 layout_marginTop
Specifies extra space on the top side of the View or ViewGroup
4 layout_marginBottom
Specifies extra space on the bottom side of the View or ViewGroup
5 layout_marginLeft
Specifies extra space on the left side of the View or ViewGroup
6 layout_marginRight
Specifies extra space on the right side of the View or ViewGroup
7 layout_gravity
Specifies how child Views are positioned
8 layout_weight
Specifies how much of the extra space in the layout should be allocated to
the View

GFGC Boy’s College, Kolar 9 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

 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.
Animation in android apps is the process of creating motion and shape change.

The animations are basically of three types as follows:

1. Property Animation
2. View Animation
3. Drawable Animation

1. 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. Property animation can be used to add any animation in
the CheckBox, RadioButtons, and widgets other than any view.

2. View Animation
View Animation can be used to add animation to a specific view to perform tweened
animation on views. Tweened animation calculates animation information such as size,
rotation, start point, and endpoint. These animations are 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. The example of View Animation can be seen in Expandable RecyclerView.

3. Drawable Animation
Drawable Animation is used if you want to animate one image over another. The simple
way to understand is to animate drawable is to load the series of drawable one after another
to create an animation. A simple example of drawable animation can be seen in many apps
Splash screen on apps logo animation.

Important Methods of Animation

Methods Description

startAnimation() This method will start the animation.

This method will clear the animation running on a

clearAnimation()
specific view.

GFGC Boy’s College, Kolar 10 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

Example of Implementation Android Animation

Now we will see the Simple Example to add animations to ImageView. Note that we are
going to implement this project using the Java language.

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project
in Android Studio. Note that select Java as the programming language.

Step 2: Working with the strings.xml file

Strings.xml can be found from the app > res > values > strings.xml.

Below is the snippet for the strings.xml file.

<resources>
<string name="app_name">GFG App</string>
<string name="blink">BLINK</string>
<string name="clockwise">ROTATE</string>
<string name="fade">FADE</string>
<string name="move">MOVE</string>
<string name="slide">SLIDE</string>
<string name="zoom">ZOOM</string>
<string name="stop_animation">STOP ANIMATION</string>
<string name="course_rating">Course Rating</string>
<string name="course_name">Course Name</string>
</resources>

Step 3: Working with the activity_main.xml file

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.

GFGC Boy’s College, Kolar 11 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

Below is the code for the activity_main.xml file.

<?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:src="@drawable/gfgimage" />

<LinearLayout
android:id="@+id/linear1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/imageview"
android:layout_marginTop="30dp"
android:orientation="horizontal"
android:weightSum="3">
<!--To start the blink animation of the image-->
<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:text="@string/blink"/>
<!--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:text="@string/clockwise"
android:textColor="@color/white" />
<!--To start the move animation of the image-->
<Button
android:id="@+id/BTNmove"
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/move/>
<!--To start the zoom animation of the image-->
<Button
android:id="@+id/BTNzoom"
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/zoom"
android:textColor="@color/white" /> </LinearLayout>
<!--To stop the animation of the image-->
<Button
android:id="@+id/BTNstop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/linear2"
android:layout_marginLeft="30dp"
android:layout_marginTop="30dp"
android:layout_marginRight="30dp"
android:text="@string/stop_animation" />
</RelativeLayout>

GFGC Boy’s College, Kolar 12 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

Types of Android Animation

The basic ways of animation that are:

1. Fade In Animation
2. Fade Out Animation
3. Cross Fading Animation
4. Blink Animation
5. Zoom In Animation
6. Zoom Out Animation
7. Rotate Animation
8. Move Animation
9. Slide Up Animation
10. Slide Down Animation
11. Bounce Animation

Android Animation Example XML

We create a resource directory under the res folder names anim to keep all the xml files
containing the animation logic. Following is a sample xml file showing an android
animation code logic.
sample_animation.xml

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

<scale xmlns:android="https://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator”
android:duration="300"
android:fillAfter="true"
android:fromXScale="0.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />

Loading Animation when UI widget is clicked

Our aim is to show an animation when any widget(lets say TextView) is clicked. For that we
need to use the Animation Class. The xml file that contains the animation logic is loaded using
AnimationUtils class by calling the loadAnimation() function. The below snippet shows this
implementation.

GFGC Boy’s College, Kolar 13 By: Divakar M.S

 Mobile Application & Development Unit III- Android User
Interface Design Essentials

Animation animation;
animation = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.sample_animation)

To start the animation we need to call the startAnimation() function on the UI element as
shown in the snippet below:

sampleTextView.startAnimation(animation);

Here we perform the animation on a textview component by passing the type of Animation as
the parameter.

Android Animation Examples XML Code

Here I am providing sample code for most of the common android animations.

Fade In Animation

fade_in.xml

<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true" >

<alpha

android:duration="1000"
android:fromAlpha="0.0"
android:interpolator="@android:anim/accelerate_inte
rpolator" android:toAlpha="1.0" />
</set>

Here alpha references the opacity of an object. An object with lower alpha values is more
transparent, while an object with higher alpha values is less transparent, more opaque.
Fade in animation is nothing but increasing alpha value from 0 to 1.

Fade Out Animation

fade_out.xml
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true" >

<alpha
android:duration="1000”
android:fromAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:toAlpha="0.0" />
</set>
Fade out android animation is exactly opposite to fade in, where we need to decrease the alpha value from 1 to 0.

GFGC Boy’s College, Kolar 14 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

Cross Fading Animation

Cross fading is performing fade in animation on one TextView while other TextView is fading
out. This can be done by using fade_in.xml and fade_out.xml on the two TextViews. The code will
be discussed in the MainActivity.java

Blink Animation

blink.xml
<set xmlns:android="https://schemas.android.com/apk/res/android">
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:interpolator="@android:anim/accelerate_interpolator"
android:duration="600"
android:repeatMode="reverse"
android:repeatCount="infinite"/>
</set>

Here fade in and fade out are performed infinitely in reverse mode each time

Zoom In Animation

zoom_in.xml
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true" >
<scale
xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1"
android:fromYScale="1"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="3"
android:toYScale="3" >
</scale>
</set>

We use pivotX="50%" and pivotY="50%" to perform zoom from the center of the
element.

GFGC Boy’s College, Kolar 15 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

Zoom Out Animation

zoom_out.xml
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true" >
<scale

xmlns:android="https://schemas.android.com/apk/res/android"
android:duration="1000"
android:fromXScale="1.0"
android:fromYScale="1.0" android:pivotX="50%" android:pivotY="50%"
android:toXScale="0.5" android:toYScale="0.5" >
</scale>
</set>

Notice that android:from and android:to are opposite in zoom_in.xml and zoom_out.xml.

Rotate Animation

rotate.xml
<set xmlns:android="https://schemas.android.com/apk/res/android">
<rotate
android:fromDegrees="0"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="600"
android:repeatMode="restart"
android:repeatCount="infinite"
android:interpolator="@android:anim/cycle_interpolator"/>
</set>

A from/toDegrees tag is used here to specify the degrees and a cyclic interpolator is used

Move Animation

move.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator" android:fillAfter="true">

<translate android:fromXDelta="0%p"
android:toXDelta="75%p"
android:duration="800" />
</set>

GFGC Boy’s College, Kolar 16 By: Divakar M.S

Mobile Application & Development Unit III- Android User
Interface Design Essentials

Slide Up Animation

slide_up.xml
<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true" >
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:interpolator="@android:anim/linear_interpolator"
android:toXScale="1.0"
android:toYScale="0.0"\>
</set>

It’s achieved by setting android:fromYScale=”1.0″ and android:toYScale=”0.0″ inside the

scale tag.

Slide Down Animation

slide_down.xml

<set xmlns:android="https://schemas.android.com/apk/res/android" android:fillAfter="true">

<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
This is just the opposite of slide_up.xml
Bounce Animation

bounce.xml
<set xmlns:android="https://schemas.android.com/apk/res/android"
android:fillAfter="true"
android:interpolator="@android:anim/bounce_interpolator">
<scale
android:duration="500"
android:fromXScale="1.0"
android:fromYScale="0.0"
android:toXScale="1.0"
android:toYScale="1.0" />
</set>
Here bounce interpolator is used to complete the animation in bouncing fashion

GFGC Boy’s College, Kolar 17 By: Divakar M.S