Join David Gassner for an in-depth discussion in this video Customizing the appearance of list items, part of Building a Note-Taking App for Android.
- So far, I've implemented the material design theme in my app, but my list is showing just plain text. The material design guidelines, which you can find at this website show that you should include an icon on the left of any content. That icon is called the primary action icon. I'm going to implement a custom list item layout that incorporates an icon and I'll get the artwork from this website: materialdesignicons.com. This website hosts a whole bunch of different icons.
The orange icons are donated by community developers, whereas the icons without the orange outline are created by Google. To find a useful icon, you can search for keywords. I've searched for "document" and I'll be using this icon: file-document.box. If you want to download one of these icons yourself, you can select it and then download the package and choose Android 5.x. You'll get a zip file that has a bunch of different versions of the icon in different colors and in different resolutions.
I took this icon and I changed its color using a graphic editor. I used Adobe Fireworks, but you could also use Photoshop or Illustrator or any other graphical editor. And then, I run the icon through the Android Asset Studio tools, creating new action bar and tab icons. I've included the results in the Exercise Files. Under Exercise Files, you'll find an Assets folder and then a drawable sub-folder.
There are four sub-folders under that for the different pixel density buckets and each of those folders has three files. I'll be using this file: ic_document. Again, there are four different versions for four different pixel densities. At the same time, I'll be copying over these icon files for deleting a note and for adding a note. These two are both white, so they're a little harder to see but you'll see later on how they appear correctly against the background of their buttons.
To incorporate these files into my project, I'll go to the Assets folder, to the drawable sub-folder and then I'll select and copy the four sub-folders under that. Then I'll go back to Android Studio. I'm working in the project: Customize List. You can either open that project from the Exercise Files or you can continue working where the last project left off. Now, you're supposed to be able to paste these files directly into the Resources folder within Android Studio but you can run into problems this way.
To make sure I can do it correctly, I'll right click on the folder and then select Show in Explorer on Windows or Show in Finder on Mac. Then I'll double click into the folder, right click and paste. Then I'll go back to Android Studio and wait a moment and then I should see that the files have been added. Once again, there are four different files for each of the icons. They're grouped together in this view but if we want to see how they look in the actual file structure, you can go to the Project view and then drill down to the Resources folder and you'll see the different folders there.
You can open these files by double clicking them and seeing what they look like. Now I'm ready to create my own custom layout for the list items. I'll go once again to the Resources folder and then to the Layout folder, which currently contains only one file. I'll right click and select New, Layout resource file. I'll name this new file note_list_item. I'll set the root element as Linear Layout but as you'll see in a moment, it doesn't matter because I'm going to be replacing it with code that I'm going to copy and paste.
When the new layout opens, I'll click on the Text tab and then select any existing code and delete it then I'll go to a browser and go to a Gist. where I've already created the code for the layout I need. I'll go to git.io/jpr2, all lower case, and here's the code for my list item layout . I'll select starting from the xml declaration down to the bottom of the relative layout and copy that then come back to Android Studio and paste it into place.
Let's take a look at what this code is doing. The RelativeLayout has a width of match_parent and a height of wrap_content. It will expand its height to accommodate its contents. The gravity is set to center_vertical so objects that I place within the layout, including the icon and the text, will be right in the center vertical area. The padding for the entire layout is set to 4dp. The ImageView will display the document icon that I just added to my project, using the source of drawable/ic_document.
And the width and height are both set to 36 pixels. There's a TextView component with an id of tvNote and it has a width and height of wrap_content. The alignParentEnd and alignParentRight settings cause the TextView to stretch so it goes all the way out to the right edge of the layout. There's a 4dp margin all around the TextView and then there are toEndOf and toRightOf settings that anchor the left side of the text to the document icon, so I'm stretching the TextView in both directions, filling up as much space as possible.
The singleLine attribute is set to true, so even with a long string value that has multiple lines, it will truncate, and by default, it will show ellipsis at the end. The textColor is set to the custom color that I set earlier in the demonstrations. That's a color of list_item_text_color and the textSize is 18sp. There's one discrepancy here. Earlier on when I created my custom colors, I named the actual color just list_item_text, so I'll get rid of the suffix there and that now matches up correctly.
Now I'll look at this in Design view and I'll see what it looks like. I see the icon and I see the string value that's being displayed in the Text view. To use this layout, I'll go back to my MainActivity class In the MainActivity class at line 33, I'm referring to a text view with an id of android.R.id.text1. I'm going to replace that with the id of my new text view, with R.id.tvNote.
Then I'll change the id of the layout I'm using to my new layout. I'll delete simple_list_item_1 and replace it with R.layout.note_list_item. The rest of the values can stay the same. I'm still passing in the from and the to arrays to indicate where the data should be displayed and now I'll test the app. The app is now using my new custom layout. It's displaying the document icon next to each note and the long note that has more text than can be displayed on the screen is being truncated with ellipsis.
The Multi-line note is just being truncated by itself without any ellipsis that I'll show you how to fix that with a little bit more custom code in the next video.
Building a Note-Taking App for iOS 8 and Building a Note-Taking App for Windows Phone 8 and Windows Store use the same assets to develop a similar app. Compare and contrast the steps and discover the similarities and differences between the three platforms.
- Understanding Android UI and data management patterns
- Creating an Android Studio project
- Customizing material design theme colors
- Defining an SQLite database structure
- Managing data with ContentProvider and Loader classes
- Retrieving and displaying data
- Customizing data display with a CursorAdapter
- Creating, updating, and deleting notes
- Preparing the app for deployment