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

Next lesson playing in 5 seconds


Free Preview: Migrate an Android App to Material Design

Migrate an Android App to Material Design

  • Overview
  • Transcript

Years ago, when Android was still a budding mobile operating system, it was rather notorious for its ugly user interface. Because there were no design guidelines to follow back then, Android apps weren't pretty either. By introducing Material Design, Google has revolutionized Android user interfaces. Apps created from scratch today using Android Studio automatically follow Material Design's guidelines. However, there are many of us who still have apps that were built before Material Design. Applying Material Design guidelines to them is not straightforward.

In this course, Envato Tuts+ instructor Ashraff Hathibelagal will show you how to migrate an old-fashioned app to Material Design. You'll learn how to use the themes, widgets, and gestures available in the Android Support libraries to convert an app that was built for Android Gingerbread into a modern app whose look and feel matches that of Android Lollipop and Marshmallow.

1. Introduction

1.1 Migrate an Android App to Material Design

If you have an old app and you want to change its looks and behavior so that they conform to the guidelines of Material Design, this course is definitely for you. Even if you don't have such an app, by watching this course you will learn how to use Android Support Libraries to create Material Design apps that look good on all versions of Android. Hi, I'm Ashraff Hathibelagal, and in this course I'll show you how to apply a material design team to your app, and how to customize it. I'll also show you how to create and use a Navigation view, a Hamburger button, Recycler view and Card views. If you're interested in swipe gestures, this course also shows you how to use the swipe tool refresh gesture. We'll be starting with this outdated looking app, which was built for Android Gingerbread. And slowly transform it into this app, which has all the features of a modern material design app. So, just open the next video to get started.

1.2 A Closer Look at the App

Hi in this lesson I'm going to give you a quick overview of the app we will be working on in this course. And then, I'll also walk you through the most important portions of its source code. So as you can see, we have one screen here that lists all the questions from Stack Overflow. It contains just one list view, and you can scroll to see more questions. This activity has an old fashioned menu containing two options. The Refresh option lets you refresh the list of questions, and the Sites option lets you pick a different Stack Exchange site. Let me click on Sites. It opens another screen containing a list of Stack Exchange sites. If you click on any site here, the app will load the questions from that site and display them. So, that's all there is to this app. It's a very simple app with just two screens. Let's take a look at its source code now. You can get it from this data repository. All you need to do is press this button here, and then click on Download ZIP. Alternatively, you can always download the course project of this course, and open the folder card lessonOne.2. Once you have the source code, you can directly open it using Android Studio. So, this is the home screen of the app, and it is created using the main activity class. Its layout is defined inside the activity main.xml file. This menu here is defined in a file called main_menu.xml. If you open it, you will be able to see the refresh and sites option defined inside it. The second screen of the app is created using the site selection activity class. Its layout is defined in activity_site_selection.xml. If you open the file, you will see that it contains just one list view. Let's go back to the home screen now. If you open the layout file of the home screen, you will again find just one list view inside it. So, now you know that both activities have very simple layouts. You might be wondering where the sites of site selection activity are defined. Well, they are defined as a string array inside strings.xml. If you want to support more Stack Exchange sites, feel free to add new items to this array. In addition to the two classes for the activities, this app has a few other classes. One such class is JSON reader. This is responsible for connecting to the Stock Exchange API servers, and fetching the questions from them. We won't be making any changes to this class in this course, so you can simply ignore it. Each question fetched from the Stack Exchange API is represented using this question class. As you can see, it has a lot of intuitively named member variables. Currently, the app is using only three of these variables, the title, the auto display name and the score. But, by the time we complete this course, we will have used almost all of these variables. Back in main activity, all the questions first from the Stack Exchange API are put inside this list called Questions. Now if you scroll down, you will see that the array adapter of the list view makes use of the list of questions. This array adapter follows the view holder pattern. That is the reason why this app has a QuestionViewHolder class as well. This class has just three text fields, one for the score, one for the title, and one for the author. The StackExchangeSites class is another class you can safely ignore. All it does is map the Stack Exchange sites titles to their subdomains. It has just one static map object and nothing else. Let us now take a look a few important methods defined inside the main activity class. RenderList is the method inside which the array adapter is initialized. In case of refresh, it also calls the notifyDataSetChanged method of the adapter. OnCreateOptionsMenu is the method inside which we are creating the menu of this activity. You can see that it is inflating the main_menu.xml file. The onOptionsItemSelected method is where the click handlers or the refresh and sites options are defined. For the Sites option, a new intent is being created for the site selection activity. For the Refresh option, a method called updateScreen is called, which first reloads questions from the Stack Exchange API servers, and then calls the renderList method. Lastly, whenever the user clicks on a question, a browser is opened where the answers to the question can be seen. So that code is returned here, inside the OnItemClickListener after List View. All it does is create a new intent with the ACTION_VIEW action, and pass the URL of the question to it. I hope you now understand how this app works. There's really nothing complex about it. If you've created Android apps earlier, I'm sure you didn't find anything confusing here. In any case, you don't have to worry too much about its functionality, because in this course we will be focusing more on the looks of this app. In the next lesson, we'll start configuring this app to support material design. Thanks for watching.