Floating Action Buttons

Loading...

From the course by The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

170 ratings

The Hong Kong University of Science and Technology

Multiplatform Mobile App Development with Web Technologies: Ionic and Cordova

170 ratings

Course 3 of 5 in the Specialization Full Stack Web and Multiplatform Mobile App Development

This course focuses on developing multiplatform mobile applications using the Web technologies (HTML5, CSS and Javascript). In particular we make use of the Cordova hybrid application framework to develop and target multiple mobile platforms with a single codebase. We make use of the Ionic framework (Ionic Ver 3.x), one of the most popular mobile application frameworks, that is built with mobile-optimized HTML5 and CSS based components and Angular. You will learn about UI development with Ionic and then using Cordova's modules to access the native mobile platform's capabilities from Javascript. You should have already completed the Bootstrap 4 and the Angular courses in this specialization before proceeding with this course. At the end of this course you will be able to (a) Build mobile applications targeting multiple platforms with a single codebase, (b) Leverage your HTML5, CSS, Javascript and Angular skills, and (c) Use various features of the Ionic framework to build hybrid mobile applications

From the lesson

Ionic Components

This module explores the Ionic support for forms. Advanced features of Ionic lists are discussed. In addition all the different methods of overlaying information on the screen like modals, popups, popovers, action sheets, and loading are examined. Ionic support for gestures is also briefly considered.

Floating Action Buttons5:06

Exercise (Video): Floating Action Button13:54

Exercise (Video): FAB and Favorites13:14

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

Floating action buttons.

As the name implies,

they are floating, they are call for action,

and they are buttons.

So, how exactly do we make use of floating action buttons in our application?

How do we configure them in our Ionic application?

And what are they useful for?

Let's look at more details about floating action buttons in this lecture.

So, as I mentioned,

floating action buttons are a Material Design component.

They have been introduced as part of the Material Design.

And so, you will see a lot of Android applications

making use of floating action buttons in their views.

Now, this component is also available within Ionic,

so should you decide to use a floating action button within your Ionic application,

you can definitely do so,

as we will do in the next two exercises of this course.

So, the idea behind having a floating action button in a view is

that this button is a call to action or call to the promoted action within that view.

So, for example, if you have a list of items and you want to add one more,

so your floating action button could be used as an add action within that view.

Similarly, we can configure our floating action button to provide

the default action that you want to take within that view,

as we will see in the exercises that follow this lecture.

So how do we design a floating action button?

As the name implies, the floating action button is floating on top of the view

or on top of the page that you use within your Ionic application.

Now the floating action button can be fixed at a location,

so you can specify where you fix the floating action button in the view.

Typically, the floating action button is fixed to

the right bottom corner in our view so that it doesn't obstruct the rest of the view.

Sometimes, in some of the views,

especially in Material Design,

you will see that the floating action button may be stuck to a picture at the top,

and between the picture and the text,

there will be a floating action button.

In that case, the fab will scroll with the view.

So you can use the floating action button in Ionic

to either be at a fixed location or scroll with the view.

If you want it to be at a fixed location,

then you will enclose this within a ion-fab,

so this is a container for your floating action button.

So, and if you are designing a button as a floating action button,

you will use the standard HTML button and then use

the ion-fab attribute associated with that button.

Let's take a look at an example of a floating action button.

Going to our application,

you will see that in the home page I have

a floating action button that will be included as part of the next exercise.

Now, what is the purpose of this floating action button?

We will learn more about it in the next exercise.

And also, you will see that we will introduce another following action button

within our view of a specific dish.

So you can see on the right corner you see a floating action button there.

The purpose of this button is to add this dish to the list of your favorite dishes

or to be able to display that this dish

is already selected as one of the favorite dishes of the user.

So these are two examples of

floating action buttons being used within your Ionic application.

You can also configure your floating action button in Ionic

to display multiple floating action buttons when the fab,

the main fab is clicked.

This is where we'll use the Ionic fab-list to include a set of

additional floating action buttons which will be

displayed when you click on the main floating action button.

Let's take a look at an example now.

Going to our Ionic application,

when you click on this floating action button,

you will immediately see that there is a set of additional floating action buttons

that will be displayed onto the screen here and you'll

see that the main fab has now turned into a cross.

And when you click on that,

those lists of additional fabs will be hidden.

So, this is the approach that we will take,

with an ion-list here,

so both in Android and in iOS,

the use of the floating action button to display multiple fabs onto the screen.

With this, we will move onto the exercises where we will see how

these two floating action buttons will be added to our Ionic application.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play