Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Developer and personalized recommendations.Start Your Free Trial Now
- View Offline
- Exploring local data storage options
- Creating an Android virtual device
- Starting a new project
- Defining preferences with Java and activities
- Creating and reading JSON and XML data files
- Creating a new SQLite database
- Inserting and retrieving data in the database
Skill Level Intermediate
The sample application I've been developing throughout this course displays data that's stored in a SQLite database. Each item in the list display displays simple plain text all of the same size. I'm going to show you some ideas about how you can spiff up the display and dynamically select graphics at runtime to display. I'm working in a version of the project that's available in the exercise files named RichDisplay. I've added some layout resources and a new Java class. I've also added some graphics that will be displayed along with the tour data.
I'll start with the new layout. I'll go to the resources folder to the layout subfolder and open the file listitem_tour.xml. This is a rich layout that's designed to display a map icon and then the title and the price of the current tour. Looking at the XML structure, it's a linear layout that contains an image view. There's a default graphic called map_various. It's just a simple picture of the map of California.
Then next to it, there's another linear layout, this time with an orientation of vertical containing two text views, one for the title and one for the price, and they each have a different text size. So, it's a fairly simple layout, and it's designed to be used as the layout for an item in the list. Next, I'll show you the graphics that I've added. They're in the drawable-hdpi folder. I've added a whole bunch of map graphics. They start off with map_ and then a name, and these match values that are in the database table in the image column of the tours table.
For example, there's a bigsur tour where the image value is set to map_bigsur without the .png extension. I haven't provided graphics for every single tour in the data set, but you'll have enough to get started. Next, I'll show the Java class that's going to use this list item tour layout. It's called TourListAdapter.java. This is an adapter class that extends the ArrayAdapter class.
Going back to the MainActivity and going down to the refreshDisplay method, we're currently using a generic layout, one that's included in the Android SDK and it's designed to show text only. My goal is to do a richer display. And so this class extends the ArrayAdapter class. Just like in the original code, this ArrayAdapter has items data typed as my tour class. It has a constructor method that lets me pass in the current context and the current data.
Both are then saved in fields within the class. As the list is rendered, the getView method will be called for each item in the list. For each item, we're inflating the layout, listitem_tour right here and that's that layout that's in the resources folder. Then I'm getting a reference to the current tour object by calling the tours list's get method and passing in the current position which is passed in here by the Android SDK. Next, I'm populating the TextView objects with data.
This is the code that's setting the title. I'm getting a reference to the text element and then setting it with a value from the tour object, and I'm doing the same thing here for the price but formatting it using a NumberFormat object. Here's perhaps the most interesting code, and you might not have seen this before. The layout has an ImageView object, and first, I'm getting a reference to the ImageView object by its ID. Then I'm dynamically getting an imageResource integer by calling context.getResources().getIdentifier. This method receives three values: first a string, which would be the name of the resource. I'm passing in the value of the tour object's image property.
Then I'm indicating the subfolder of the resources area. That's going to be drawable. I'm not specifying a pixel density and so the same image will be used for all pixel densities, regardless of device. And finally, I'm passing in the current package name using the expression context.getPackageName. If an image is found that matches these three values, its integer resource number which is in the generated resource class will be returned.
Otherwise, the value of zero will be returned. And then in some conditional code, I'm asking, did you find a resource? If so, set the ImageView with that resource, and if not, leave the default image alone. So, all of this code together, again, is called for each and every item in the list. We're getting the data, we're setting the TextView objects, we're setting the ImageView object and returning the new layout object. There's one more bit of code to add, and that code is going to look at the current settings for the application.
Going back a couple of chapters when I was working on shared preferences, I added a preference to this application called View Images. Here will be the logic. If that preference has a value of true, I'll use this new RichDisplay, and if it has a value of false, I'll use the simple text display that I've been using. I'll go to the MainActivity class and let's code up the behavior. I'll go to the refreshDisplay method in MainActivity. Right now this method always shows the simple list display.
I'll make some extra space here. I'll find out what the value of the preference is for viewing images. I'll create a new variable called viewImages, and I'll call the settings object's getBoolean method. Remember, the settings object is declared and created in the On Create method, and it's pointing to the Preferences Set that's handled by my preference activity. Now for the key, I'll type in my constant VIEWIMAGE, and for the default value, I'll pass in false.
So, I'm saying if you can't find this preference, assume that it's false and that will mean we'll see the simple text display and not the new rich display. Now I'll evaluate that variable, VIEWIMAGES, I'll type if and press Ctrl+Spacebar and choose if else. The viewImages variable is added as the condition, and that's exactly what I want. I'll go down here and take this existing code and cut and paste it into the else block.
So, now I'm saying that if the viewImages variable is false, then I'll display my tours with simple text, but if it's true, I'll use my new RichDisplay. I'll move the cursor into the if clause, and just as in the other code, I'll declare an ArrayAdapter with a data type of tour and I'll name it adapter. But this time I'll use my custom adapter class that I showed you with the syntax new TourListAdapter. I'll pass in this as the context and my list of tours as the data.
Then just as with the other code, I'll call setListAdapter and pass in the adapter object. And that's all the custom code I need to do. Everything else here is already done. I've added an item to my onOptionsItemSelected method. This is the method that's called when a user selects a menu item, and I already have a settings menu choice in my menu. So when that item is selected from the menu, I'll create a new Intent. It'll set up my SettingsActivity class and start the activity.
And I already have code in the onCreate method that sets up a listener for the settings, so that when the settings are changed, I'll automatically call that refreshDisplay method. So, let's give it a test. I'll run the application in the emulator. When it first opens, it shows the old display, the text only display where the font sizes are all the same. Now I'll go to the menu and I'll choose Settings. That opens my preference activity.
I'll check the checkbox to View images and I'll return. And when I come back to the MainActivity, I'm now seeing the RichDisplay that's using my custom layout and my custom Java class. Also, as I scroll through, I see the custom graphics are being correctly assigned where they match the data in the database table. The Week of Wine gets Wine Country, Avila Beach Hot Springs gets the Avila Beach graphic, Big Sur gets Big Sur, and so on and so forth, and wherever there isn't a match I'm seeing the generic graphic, the map of California.
So you can use this coding model to combine the use of shared preferences with information that you're storing in your database. You can make your visual display much more interesting and fun to look at, and you can give the user a choice, letting them go into the preferences and select their preferred display with rich graphics or with plain text.