Join Albert Lo for an in-depth discussion in this video Create a custom layout XML, part of Android Development: Modern Android UI Design Elements.
- [Instructor] Let's switch over to activity_main layout. We are going to go to line 23 of activity_main layout which is here and we're going to delete this line. This will remove the default side navigation drawer items. What we want to do now is to replace it with our own custom side navigation drawer items. The easiest way to do that is to add a LinearLayout container. I'm going to add a LinearLayout container here.
The width is match_parent and the height is going to be wrap_content. I'm also going to define the orientation as vertical. So, our general strategy here is to have a LinearLayout container containing a series of TextViews as our side navigation drawer items. We also want to separate the TextViews with a divider, so I'm going to create a new layout here and I'm going to include it.
The layout name will be divider. And I'm going to use alt return to define my new layout. The new layout will just contain a basic view. I will add this also to my source control repository. Now, I'm going to clean up this layout file by inserting new lines for each attribute.
We are also going to modify this layout_height to 1DP. We are also going to add a custom background and the custom background will be a color. And I will name this custom background color divider_color and again, I will use alt return and I'm going to define a color value instead of a color resource file this time.
The hex code for black as our divider color will be six zeros. Now, let's go back to activity_main. We have our divider. Now we can start inserting TextViews for the side navigation drawer items. The first TextView will be match_parent and the height will be wrap_content, the ID will be google_photos.
I will also insert a text string and call the text string google_photos. Now we're going to create a string resource for this using alt return. The actual value of the resource will be google_photos. I am also going to define a style and I'm going to call the style nav_drawer_menu_item and again I'm going to use alt return to define my style.
So, here I'm just going to put in a placeholder value and later on we will go into modify it. Now, I'm going to press control B to go into my style and I'm going to define my style fully here. First thing we will need is gravity. We're going to define gravity as center_vertical.
The next thing we're going to define is textSize and our default textSize will be 14-point font. The next item we're going to define will be height. And our default height will be 48. We're also going to define background and our default background we're going to use a default Android attribute.
It's called selectableItemBackground and finally, we're going to add some default padding to the start of our TextView. Our default padding will be 32dp. Now, we go back to activity_main. We have our TextView defined, we have our layout, so now we have one complete side navigation drawer and menu item.
Now, I'm just going to copy this to create some more items. We're going to create a total of four. So, I've copied one navigation drawer item and I'm going to paste it three times, so let's go to the second one. We're going to rename it to Facebook as our ID and our string will be Facebook and we'll create a string value resource, call it Facebook.
The next one we're going to create is Twitter and we'll do the same thing for the string value and our final one will be user_settings. Our ID is user_settings and our text string will be settings. It looks like I've added the LinearLayout container outside of the NavigationView, so let's go ahead and fix that.
I'm going to go up to the NavigationView and I'm going to remove the enclosing tag and add in the header tag. Android Studio will automatically insert the enclosing tag for me. I'm going to cut with command X, go back to the bottom and insert it right between the LinearLayout container and the DrawerLayout container with command V. So, I'm also going to clean up the layout.
I'm going to highlight the LinearLayout container and change the indentation by pressing tab, so now it will line up with my NavigationView. One last thing that I notice is that the LinearLayout container doesn't have a layout_gravity. This will affect how the side navigation drawer is displayed, so let's go ahead and add a layout_gravity. And the layout_gravity will be center.
Now that we have finished making our changes to our layout XML, let's go ahead and test out our change by building the app. I'm just going to press play here. I will select a virtual device that I have created ahead of time. This will start up the emulator. If this is the first time that we're starting the emulator, it may take a couple minutes for it to start. We have our app running now and if we go to the side navigation drawer, we'll see our TextViews that we've created here, Google Photos, Facebook.
We also see the custom divider that we created. So, now if you wanted, you could actually change the color of the divider, you could change the color of the text and many other things that we can do with TextViews.
- Creating a custom layout with XML
- Setting up OnClick handlers
- Making API calls
- Creating custom views
- Implementing ViewHolder objects
- Signing certificates
- Adding a checkbox