Android Apps development is becoming more and more popular in the past years, you can see tons of new apps going live every single day, and I don’t just talk about large complicated apps. Since mobile development is available to everyone, you can see many developers develop small apps to answer all sorts of specific needs they have like house monitoring, getting stocks notifications etc. Here I will show how to create a basic Android app to organize your next trip.
What Do We Need?
- Android Studio IDE – download the latest from Here (I use version 1.1.0)
- Android SDK – (download the stand-alone version or the integrated android studio version)
- Gradle – To compile and build your Android project into an installable .apk file(s)
Be Creative
This tutorial will show how to develop your first material design Android app, why Android? because it’s free and you can start immediately. Waiting to buy a MAC in order to start developing is a bad decision (as far as I see it), and the app will probably be ready not in the near future. Besides, I find Android platform much easier to start with, especially if you’re already familiar with java programming. The open source community is so big, you can find great FREE widgets, designs, modules and much more to create your best App. I suggest just to start and let your imagination lead you.
My apps development experience began when me and my wife planned a trip to Japan, Hong-Kong and China. I thought this is a great opportunity to write a small app which will show us our flights and hotels reservations.
I Set a Few Goals For My New App
- I’m a big fan of Google’s Material Design concepts, so the app has to follow those guidelines
- It should use a Drawer navigation style
- The flights schedule should be loaded dynamically upon request
Let’s Start To Code
I assume you have android studio installed and you already created a new project with an empty activity. The first step is to create the drawer navigation fragment itself, I created a file called header.XML which will be included in the drawer and will show a large image with some information text below.
As you can see, the view contains the header section and the list items section below. The rounded image is implemented using this cool widget – CircleImageView.
In addition, we have a fragment for each item row inside the menu where each row contains an icon and a text box.
The Inner Fragments
When clicking on each of the drawer navigation list items, we open a different fragment for each item, the click event is defined inside the MainActivity.java file and on each item we create the fragment we need to show.
Each inner fragment consists of a fragment XML file and a matching java fragment class. As before, the XML defines the title and the list view which will hold all the flights content, and the fragment java class which handles all the content fetching and binding the view and the model together. You can design this fragment the way you want to, I chose to set a background image and use a simple list with dividers. As you can see, the list shows only the flights titles, when you click on a specific flight (long click) a request to a server is made and the flight details is shown inside the fragment context menu.
The Main Home Screen
This is the main activity layout file which defines the app main window, in this file we set the full-screen main image as well as a container to later hold the dynamically loaded fragments. In this file, we can also set our app to open in full-screen mode. (I chose to set the property inside the matching ActivityMain.java file)
The main screen layout consists of a few important widgets:
This is the matching activity file which handles all the app life-cycle and binds the home model and view. In this file, we define the touch listeners and initialize the main fragment drawer and toolbar.
More Resources
- Icon generator for android apps
- Google’s Material Design icons
- Google’s icons
- API service mashape – fetch flights information
* NOTE – I removed the mashape API key which I generated, you can change the flight details to be hard coded or generate a private key for yourself.
As always, you can find the full App code @ My Github Repository.
Cheers
