Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.1 FloatingActionButtons and TextInputLayouts

In this lesson, we’ll create the user interface of our app. You’ll learn how to use FABs (FloatingActionButtons), input widgets with floating labels, action bar menu items and more.

Related Links

2.1 FloatingActionButtons and TextInputLayouts

Hello and welcome back to this course about building a material design Android app. In this lesson, we will be focusing on the user interface of our app, you will learn how to add material designed widgets, like floating action buttons, and text input layouts with floating labels to your activities. We are going to create two activities now. One for the home screen and one for both of these screens which are identical except for their titles. Let's start by creating the activity for the home screen, right-click on your package name and select New > Activity > Blank Activity. As you can see, this activity template already has a floating action button in it. Change the title of the activity to shopping list and pick the launcher activity field to let Android Studio know that this is going to be the home screen. Press Finish to generate activity. Android Studio tries to follow the material design guidelines closely. As you can see here this layout already has the recommended values for all the paddings. If you open activity_main.xml, you will see the code for the floating action button. Change the value of the source property to @drawable/ic_add_ 24dp because we want this button to display the plus symbol. Change the tint property to add @android:color/white to change the color of the plus symbol to white. The floating action button is now ready. Let us now move on to creating the activity for the add and edit item screens. Right-click on the package name again and select New > Activity > Empty Activity. I'm going to call this ItemActivity and press Finish. This layout is going to have two text input widgets, one below the other. Therefore, it is easier to use a linear layout instead of a relative layout. Set its orientation to vertical. Inside the layout, create a tag for a text input layout. Set its width to match_parent and set its height to wrap_content. Inside the tag add an edit text tag and set its width to match_parent and height to wrap_content. Call it Input_item_name. Next, set its hint attribute to item_name. The value you specify for the hint is going to be rendered as an animated floating label. Now we have to repeat the same steps for the second input widget. So you can simply copy and paste all of this code. Change the id to input_item_quantity and change the hint to Quantity. The layout of the activity is almost complete. What's missing is a save button. To add a button inside the action bar, we need to add it as a menu item. Right-click on the Resources folder and select a New Android Resource File. Change the resource type to menu and name the file menu_item_activity. Add the application namespace to the root element by simply typing in appNs and pressing Enter. Next, create a new item tag to represent the save button. Set its id to save_action and set the title to Save. And now add an attribute called app:showAsAction, and set its value to always. This attribute is important because if you forget to add it, the save button is going to end up inside the overflow menu of the action bar. We should now inflate the menu file inside item activity. To do so, open itemActivity.java and override its on create options menu method. Here, get a reference to the MenuInflater and call its inflate method to inflate R.menu.menu_item_activity. Next, override the onOptionsItemSelected method so that we are notified when the user presses the button. Inside it, add an if statement and use getItemId to check if the id of the selected option matches the id of the save button, which is R.id.save_action. We are going to write the actual code for the save operation later in this course, so you can leave this block empty for now. Let us now write code to open item activity when the user presses the floating action button, so open MainActivity.java. The floating action button already has an on click event listener attached do it. It contains some placeholder code which you can delete. We will now use an Intent to launch ItemActivity. Initialize the Intent using MainActivity as the context and ItemActivity as the class. When ItemActivity opens this way, its title should be Add item. We can use an extra for this purpose. And finally call startActivity to actually launch ItemActivity. Open ItemActivity.java now because we need to use the extra we send. So add a condition here to check if the return value of the getIntent method has an extra called TITLE. If the condition is true, use setTitle to change the title. Note that you must use the getStringExtra method to fetch the value of the extra. Let us now add this back icon to our activity. To do that open AndroidManifest.xml. Here, inside the tag for ItemActivity add a parentActivityName attribute and set its value to MainActivity. We can now run our app to see what we have just created. Our home screen now has a floating action button. If you click on it, you will be taken to ItemActivity. And if you try typing something into the input widgets you should be able to see their floating labels. You now know how to create user interfaces which have floating action buttons and text input layouts. Now, before I end this lesson, let me give you a quick tip. If you do not like the default colors of the app, which are shades of indigo and pink, you can easily change them by simply going to colors.xml and changing the hex values for the colors here. In the next lesson, you are going to learn how to use another material design compliant UI widget called a recycler view. Thanks for watching.

Back to the top