Adding Material Design Icons to the Action Bar in Android Studio


Adding Material Design Icons to the Action Bar in Android Studio



hello this is Caitlin Kinney and this recording is for the advanced Android development course at the University of Cincinnati in this tutorial I will be discussing how to add material design icons to the action bar in a blank activity so in this activity here we're trying to add icons that follow Google's standards for material design material design is extremely important as it keeps a consistent iconographic system throughout the entire app it is also extremely easy to implement in the new version of Android studio as all of these icons are built into the program so to start off with we'll have to import the icons that you would like to use up here in your action bar so to do that first you actually have to create a menu resource so if you're like me you're starting from a blank activity you won't have this by default so what you'll need to do is right-click go to new go to Android resource directory prepare you need to select menu and feel free to name that whatever you'd like I'm just going to keep it as the default menu and you'll see that I go ahead and populated that over here you now need to create your menu dot XML file so get a new menu resource file go ahead and name this whatever you like I'm just going to keep it as a simple main and you'll see it'll go ahead and construct this blank dot XML file in your menu resource folder so this is basically where we're going to house and import our material design icons so now that you've created this structure you need to right-click on the res folder go to new and import vector asset so this is where you actually select your material design icons you make sure that material I con is selected up here in order to get access to Google's specific material design icons from there you can click Choose and it will open all of the default assets for Google so as I said before it's extremely important when you're go make an app to use consistent iconography to help your your user to understand how to move through your app you can also look through here see there are many different types of icons that are available you know if you're looking for an action you're looking for social navigation icons or there are lots of these so feel free to look through and find whatever icon you're looking for so for our example we're just going to add a search icon up at the top in our action bar so go ahead and select it and click OK and you'll see a little display here this is the resource file name that you'll need to know so you can call this I'm up later if you feel so compelled you can also control the opacity of this icon if you don't want it to maintain its solid color you can add a little bit of an opacity do it for this example s'matter so we're going to keep it fully opaque go ahead and click OK and this is going to tell you where it's depositing the file it's going to store all of your import material design icons in the drawable file just so you know where those are located later so that's alright go ahead and click finish so you'll see it has now added our search icon to the drawable folder so this is where it's important that we created that menu resource directory and the menu and the main XML file so I'm going to head and add at this icon so I just copy pasted a lot of code in there that was for me so I do not make any typos while doing this tutorial but I'll go ahead and kind of explain what's going on here so this is the default information that occurs when you create your XML file right here this is the important stuff that actually calls and brings that icon and place it into the action bar so see I commented the search icon basically this is adding an item and what it's doing here is this line right here is what's actually calling this drawable file um you can also add a title in here if you wish this will add some text to it if you're adding an icon most the time it does you do not want text but for example could add that in there just for safety sake also this is an extremely important line here show as action always there are several other options that you could set here so you could set this to if room never basically what this line is doing is telling what instance this icon is going to show by typing in always it says that you know this this icon always needs to be an action bar it's never going to attempt to put it into an overflow menu usually in instances if you have many icons you do not want to do this because your icons will start overlapping on top of each other in that instance you'll want to set this to if room which means if your screen size becomes too small it will deposit everything into an overflow menu that you can then access by tapping on it for instance we're only adding the one icon so I'll go ahead and keep this as always I always want that search icon to be up in the corner so now that you actually got the icon there you need to make certain that it will be implemented on the primary rendering screen so for that we need to go over to our main activity file once you're in that main activity file you will need to add some information here so go ahead please set in there for you so basically what this is saying is it's once you create the option use that file down here you need to inflate it or basically make it so that people can see that that icon is there I also notice you have an error here this is simply a need to you know organize your imports so that is an alt enter command on the keyboard you want to import go ahead and click enter and that will solve that simple error there no problem and now we should be good to go so as you can see here we've added this material design icon up in the corner we'll go ahead and run the application so you can see the it displays on the emulator so and as you can see you or me like now that my emulator has popped up here it has created this application and it's got our little icon up in the corner here so that's it in this tutorial I walked you through how to create a menu resource directory and a main dot XML file to call your icon I also show you how to import icons from Google's material design that are default to Android studio and then make certain that that icon appears when you run it in the emulator so that's it thank you very much

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *