Building a Pro Android App using Material Design–chapter 1

I’ve decided to write a series of tutorials aimed to create modern android apps using the concept of material design. As usual I’ll go baby steps but I will also assume you have knowledge on the platform and specially on Java programming. OOP is a must as well.

This few paragraphs will be dedicated on the focus of the app, or in other words what the app should do. It has to be generic enough so the sample is helpful to a broader audience but not to much to avoid unnecessary code complications.

For now we will do a simple product catalog that will be using the specs detailed on the material design guide by Google.

It’s important to state that we will not see a lot of material design during the few first chapters ! We will get there in time !

The app for now will have 3 screens. Those “screens” will be subdivided in fragments as the app grows in complexity:

Welcome Screen: will greet the user and check for any special feature our app requires before continuing (internet, gps, or any feature you may need on your app).

Categories: We will show our first grouping scheme in this screen. For example, if we sell clothing this could be “jackets”, “jeans”, etc.

Products: To show products and in the future add them to a checkout cart or any feature you may want to do.

Structure using Fragments and their navigation

We will be using a special architecture for this app. As the title indicates, we want to build a PRO application, this means we will try to be as tidy as possible on some definitions and concepts. The app will be have only one Activity that will be a hub to attend various tasks being the most important the handling process of the fragment navigation. Other tasks such as handling communication with the UI thread will be explored further ahead.

If you have never used Fragments or the App Drawer concept then this tutorial can be a little too complex to you and you should consider taking a look at the documentation for each of them on the android developer portal. I will assume you are familiar with the concept and implementation of the app drawer template.

Base Fragment

To make things easier we will create a base fragment that will be the parent of all the fragments we will create. This fragment will grow in complexity as the tutorial goes. For now we will focus on just a few things: TAG and AppSection. TAG will be used later by the Main Activity to find this specific fragment on the stack and AppSection is used to link the navigation system with each fragment.

1 public class BaseFragment extends Fragment { 2 3 public String TAG = ""; 4 protected AppSection section = AppSection.NONE; 5 6 public BaseFragment() { 7 } 8 9 protected MainActivity getMainActivity() { 10 return (MainActivity) getActivity(); 11 } 12 13 public AppSection getAppSection(){ 14 return this.section; 15 } 16 }

Welcome Screen Fragment

Most of the time we will need to make sure the user has certain features enabled on the phone to fully use our apps. Also, our costumers will always appreciate if we can show they brand for a couple of seconds while we check for those needed options to be enabled. A good example is the app needing internet to proceed.

The Main Activity

This will be our application’s hart. The activity will handle multiple tasks that we will discuss in the future but for now I will only stop on fragment navigation. This concept was a great deal to me when I first started studying fragments and for what I’ve seen on forums and open stack it still is for a lot of developers. The bad news is since English is not my native language I cannot assure you will get it 100% from me.

As I mentioned, I won’t emphasize on the app drawer template but I will try to make a few comments on how I have solved a few issues you may find doing it. First is I’ve created a hierarchy for the drawer elements for the adapter to use. This is because you may want to use more specific items instead of just a text view. Also notice I’m using a custom drawable to display state changes. The adapter and classes should not have anything complex to you and I will avoid pasting them to reduce the amount of code on this entry.

About the layout XML file

I’m using the extended action bar template which requires you to define the XML of it and the style. You will find all of those elements on the attached code with this blog entry. The only difference is I’ve moved the header of the list into a separate layout in order to make it easier to edit (include_drawer_header.xml).

Fragment Navigation

The Fragment navigation may require you to sit down and do some drawings on how this works (as it happened with me !). Some paragraphs above you learned we will be using a TAG string per fragment. This is used to identify each fragment on the stack and avoid creating duplicate elements. The AppSection Enum will also play a role here since will indicate the Main Activity what type of fragment to instantiate.

I will paste the code for the switch fragment method which handles the navigation.

1 public void switchFragment(AppSection section, boolean addToBackStack, 2 Bundle args) { 3 4 // this code will avoid to re-navigate to a section if that section is the one visble 5 if (getCurrentAppSection() == section) { 6 mDrawerLayout.closeDrawer(mDrawerLeft); 7 return; 8 } 9 10 // hide soft keyboard when changing fragments, without this the app can look unprofessional 11 View focus = getCurrentFocus(); 12 if (focus != null) { 13 hiddenKeyboard(focus); 14 } 15 16 // create the correct instance depending on the section we want to open 17 BaseFragment fragment = null; 18 19 switch (section) { 20 case WELCOME: 21 fragment = new WelcomeFragmet(); 22 break; 23 default: 24 break; 25 } 26 27 // UI indicating this section is selected on the drawer 28 setDrawerSelected(fragment.getAppSection()); 29 30 /* 31 if There is a fragment identified by this tag on the stack 32 we will bring that one up. We won't be creating a new instance 33 every time a section is visited. Doing this will make the stack 34 go back to that position hence making the back key navigation easier. 35 If you keep creating new instances you would be filling a potentially 36 large stack and exiting the app can be problematic (not to mention duplicate sections 37 on the back navigation) 38 */ 39 boolean fragmentExist = fragmentManager.popBackStackImmediate(fragment.TAG, 0); 40 if (fragmentExist) { 41 // go to this found state, nothing to do 42 } else { 43 44 /* 45 the fragment is not on the stack. This means we will create a new one 46 and pass the arguments if required. It's important you add the fragment into the stack 47 (if the parameter says so) using the corresponding tag (defined on the constructor of 48 each fragment) 49 */ 50 if (args != null) 51 fragment.setArguments(args); 52 53 FragmentTransaction transaction = fragmentManager 54 .beginTransaction(); 55 transaction.replace(, fragment, fragment.TAG); 56 57 // some times you may not want the transaction to be added, use the method parameter for this 58 if (addToBackStack) 59 transaction.addToBackStack(fragment.TAG); 60 61 transaction.commit(); 62 } 63 }

Wrapping up the first lesson

I know we haven’t explore anything interesting but setting the bases for the app is really important. Just in the code you can download from his tutorial you will have enough to understand specially if you are not that familiar with drawers and fragment navigation.

Don’t pay much attention to the files on the values directory since Ive copied those from other projects I have.

You can download the source for this lesson from


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s