Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Apply a Material Design Theme

In this lesson, you’ll learn how to apply an AppCompat theme to the app. Additionally, you’ll learn how to add various support and third-party libraries to the app.

Related Links

2.1 Apply a Material Design Theme

Hello and welcome back. In this lesson, we are gonna be making a few configuration changes to this app so that it can support material design. We will also be adding a few third party dependencies and vector assets. Let's start by opening the build.gradle file of the app module. As you can see here, both the compiler SDK version and the target SDK version are outdated. There are actually four and are gingerbread and that is very old. So let's increase both of them to 23 so that we can support Android marshmallow. You can leave the minimum SDK version unchanged. The build tools version is also quite old so change it to the latest version you have on your computer. I'll say, 23.0.2. It's also a good practice to update the version code and version name. It's okay, if you don't change them, right now. But you'll be forced to do it when you try to publish this on Google Play. I'll change them both to 2, that completes the configuration changes. Now, in order to support material design, we need to add a few dependencies. One of the most important sets of dependencies is the appcompat-v7 support library. This is the library which will allow us to add our material design team to the app. So, add that first. Next, we need to add a dependency for the design support library. This library contains most of the material design, you overgenerous we will be using in this course. Additionally, to be able to add cards to our user interface, we must add a dependency for the card view V7 support library. We'll now be adding a few third party libraries to our app. The first one is going to be Picasso. This is a very popular library because it has a very easy and intuitive API to fetch images over the Internet and display them inside an image view. To add this library, copy this line and paste it inside the build.gradle file. The next library we are gonna add is called Circle Image View. This is another very popular library and as its name suggests, it offers a widget it that can display images inside a circle. To add it copy this line and paste it in the builder grader file. All our dependencies have been added. So, press Sync now to update the project. We can now add the material design team to our app. So, open style .XML. This app is currently using a simple team called theme.light. We're gonna replace it with theme.AppCompat.light.NoActionBar. This is a material design team. It doesn't have an action bar, however. So we'll be adding it manually in the next lesson. The default colors of this theme are not very interesting. So let's change those colors now by opening the team editor. As you can see, it has sheets of gray for both the primary colors. We're gonna change those now. First, select color primary. Here, click on new resource and select new color value. Do the primary colors and our studio recommends. I am gonna go with material deep orange 500 and press OK. Let's select a value for the color primary dark now. Repeat the same steps and our studio now, recommends material the part and 700, so click on it and press OK. Repeat the same steps for the color accent too. These other recommended colors, I'm gonna go over the material deep orange accent 400. The last column you're gonna change is the background color. It is too light, so I'm gonna change it to something slightly darker. #FFEDEDED, looks good to me. The material design team is ready. In order to use the material design team, we must make a slight change in the main activity class. So open MainActivity.Java, here, change the parent of this class from activity to appCompactActivity. The last thing we will be doing in this lesson is add a few vector assets to this project. So open Vector Asset Studio, press Choose here. The first asset, we'll add is a hamburger icon. It's available inside the navigation category and it's called ic_menu_black. Select it and press OK. Change the name to just ic_menu and then, press Next and Finish. Open Vector Asset Studio again to add another icon. Press Choose and open the Communication Category. Here, choose this icon called ic_forum_black. We'll be using this as an icon for the Stack Exchange sites. Set its name to ic_forum and then, press Next and press Finish. You can now run that. It looks slightly different already. The title bar is gone and the color of the status bar now matches our theme. Apart from that, nothing else has changed but that's okay. In the next lesson, we'll add a toolbar to this activity. Thanks for watching.

Back to the top