Today I am going to show to how to build a free wallpapers app using Picasa Web Albums API. In this tutorial you can learn how to integrate multiple android components like splash screen, navigation drawer, grid view, volley library in a single app.
As this tutorial seems very lengthy, I divided this into two parts. In 1st part we do all basic setup like creating the Picasa albums, planning the app design and creating the android project and write some reusable components required for the app. In the 2nd part the actual implementation of the app starts where we add one by one module to the app like splash screen, navigation drawer, grid view and other things to complete the app.
DOWNLOAD CODE
VIDEO DEMO
1. Prerequisite
As this app is a complete application we need to integrate several components together. Please go through below articles before getting into this tutorial as these concepts are main building blocks for this app.
1. How to implement Android Splash Screen This explains how to add a splash screen to your app when the app needs to make few HTTP calls and fetch some data before going in to actual app flow.
2. Android Sliding Menu using Navigation Drawer This article helps in adding a slider menu for the app where we can show list of categories for wallpapers.
3. Android working with Volley Library We use volley to make network calls like downloading the json and images. Also another main advantage of using volley is image cache which makes the app faster.
4. Android Full Screen Image Slider with Swipe and Pinch Zoom Gestures This is another important article helps in creating the app’s main Grid View screen where the thumbnail preview of each wallpaper will be displayed in a grid fashion.
2. Google’s Picasa Web Albums API
The major and difficult task in this app is building the server side components like an admin panel to manage your wallpaper data by providing file upload option and other things. For this you should also able to code in other technologies like HTML, CSS, JSP, PHP or MySQL which is again a difficult task for android beginners.
So I selected Picasa Web Albums as a robust solution for this. Picasa web albums is free of cost and importantly it exposes an API (json and xml) for developers. You can go through Picasa Web Albums Data API to know more about the API’s exposed.
We are specifically interested in following API calls for this app which doesn’t require any authentication as we perform read operations only on public albums.
1. Request a list of albums
(username should be replaced with your Google username)
2. List photos recently uploaded
(username should be replaced with your Google username)
3. List photos in album
(albumid should be replaced with actual album id which can find in albums response)
If you want to provide more options like providing user to comment, edit or delete options you need to implement authentication as mentioned in the document.
Hint: alt parameter decides the type of response we are expecting either json or xml. Pass alt=json in the url to get the response in JSON format.
3. Adding wallpapers in Picasa Web Albums
Before starting the app, we’ll add few wallpapers in Picasa albums for testing. You can login into Picasa using your Google account. Follow below steps to create albums and wallpapers in Picasa web albums.
1. Login into Picasa.
(If you are redirected to your Google+ account, click on Click here to go back to Picasa Web Albums to navigate back to Picasa Web or go with Google+ if you are comfortable)
2. Click on upload and enter your album name. These albums act as wallpaper categories in our app which will be listed in navigation drawer menu. Example: Animals, Cars, Food, Movies, Vintage etc.,
3. Once you created the album, upload few wallpapers to the album. Make sure that you are uploading the wallpapers with good high resolution.
4. Now make the album visibility as Public by clicking on Edit link displayed on the right. Note: If you don’t make your album as public, it will not be accessible via your android app. In other words you can’t see the album in the json response.
5. Follow 2nd, 3rd and 4th steps to create few more albums and wallpapers.
Checkout the below video which takes you through uploading process.
PICASA UPLOADING WALLPAPERS
4. Designing The App
The design of this app is very minimalistic with very few color combinations. Overall it contains following components.
1. Navigation drawer (Slider Menu) to display wallpaper categories.
2. Grid view screen to display the thumbnail of wallpapers under a category.
3. Full screen view of wallpaper with Set As Wallpaper and Download Wallpaper options.
4. Settings screen to configure Picasa username, number of columns in grid and gallery image directory.
Below are screen shots of the final app.
Splash Screen
Navigation Drawer
Wallpapers thumbnail view
Full screen view with Set As Wallpaper and Download options
Settings view
5. Downloading Volley Library (volley.jar)
To make calls to Picasa API we are going to use Volley Library instead of using the java library mentioned in the documentation. I already published an article about Volley Library explaining about the advantages of choosing volley. In this project it plays a major role in caching the images.
Download the precompiled volley.jar
Now it’s time to start the android app. I am naming this app as Awesome Wallpapers.
6. Creating New Project
1. In Eclipse create a new project by navigating to File ⇒ New ⇒ Android Application Project and fill required details. I gave my project package name as info.androidhive.awesomewallpapers
2. Once the project is created paste the volley.jar in libs folder.
3. Download the resources and place them in your project’s respective folders. In this downloaded zip you will find splash screen background image and other app icons.
4. Now add below resource values in strings.xml, colors.xml. These values are used in various places in the project.
strings.xml
colors.xml
5. Now create five packages named app, helper, util and picasa.model under src folder. Right Click on src ⇒ New ⇒ Package.
info.androidhive.awesomewallpapers.app
info.androidhive.awesomewallpapers.helper
info.androidhive.awesomewallpapers.picasa.model
info.androidhive.awesomewallpapers.util
6. Now create AppConst.java in app package. All the app configuration like google username, picasa api urls, gallery directory name and other static variables goes in this class.
7. Create another class named AppController.java under app package. This class extends from Application and this is a singleton class which initializes volley’s core objects and few other classes those can be used across the app.
8. Create Utils.java under util package. This class contains few helper methods.
9. Create LruBitmapCache.java and paste the below code. This class used to keep the volley cached objects on the disk.
10. Create two classes named Category.java and Wallpaper.java under picasa.model package. These POJO classes will be useful while parsing the json data fetched from Picasa.
11. Finally create another class named PrefManager.java under utils package. This class takes care of storing the data in Shared Preferences. The data like google username, picasa wallpaper categories, gallery name and other things will be stored in shared preferences.
Now we have all the required classes in place. So let’s start adding one by one component to the app in Android Building Free Wallpapers App – Part 2