Native Android MVC Application

In this blog we will be reviewing an Android template that I created to help developers who are new to native android development quickly get their projects up and running with minimal effort. This project serves as 2 things: 1. A learning template 2. An application template that you can use for your own project.

It was designed in such a way that you can go in and view how the sample pages work, each page containing only the code require to perform that specific example so as to reduce the amount of fluff you need to read through. Once you are comfortable with this then you can move onto turning this into your own project. (Instructions: makingThisYourOwn.txt) Within minutes you can start coding your own business logic into this app, skipping the hours/days it takes to set everything up that you will need.

Lets talk about developing Android apps

Developing android apps can be simple, in fact that is what we are trying to prove today. Like most things in technology, Android development is like Othello.  Easy to learn, lifetime to master.

The basics: All we need is to ensure that Android Studio is setup properly on our machines; this development environment will fill in all of the details for us such as our android emulator, git, etc.
Download Android Studio

Getting down to Business
  • We want to teach you how to start programming Android apps as quick as possible; in order to do that we will be using a custom framework that will help you create a clean app in no time.
  • In order to do this we need to ensure that we have the following elements installed properly on your computers
    • Android Studio – This is the development platform that we use to make android applications with.
    • Git – Used to pull and push code from other Git repositories such as GitHub
Get the Code

We will be using Android Studio to get a copy of our code from GitHub. Create your free GitHub account before we get started if you don’t have an account already. GitHub.com

  1. Open Android Studio
  2. Select “Check out project from Version Control”
    1. Submenu selection of “GitHub”
  3. Enter the following information into the “Clone” window
    1. Git Repository URL:
      https://github.com/postalguy03/android-starter-mvc-template.git
    2. Parent Directory: Select a directory on your computer where you want this project to be downloaded to.  (Folder must exist)
    3. Directory Name: Enter a name for your main project folder
  4. You may be prompted for a “Gradle” location.
    1. Gradle is the program which will automatically download any/all dependencies required to run this project.
Review the Project & Code
  • Java is the primary language used when programming android applications using Android Studio.
  • Lets review our project structure:
    • App – This is the folder that contains all of our application files
      • Manifests – This folder contains our application definition file, this is the point of engagement when the android operating system launches the application
      • Java – This contains… yes you guessed it… Java. Lots and lots of Java classes
      • Res – Short for resources, this contains our views(layout), images (drawable), animations (anim), strings/styles (values), etc.
    • Gradle Scripts – This is the folder that manages all of our project dependencies
  • If your application has red squiggilie lines like the one on this squiggilie word then run the ”Clean Project” command.
    • Build Menu -> Clean Project
Lets Run the Code
  • You have 2 different ways you can run an android application from Android Studio
    • Run it directly on your phone.  You must enable development mode on your phone and then enable USB Debugging.  Enabling developer mode is easy to do.
    • Create a “Virtual Android Device” which is basically a phone running on your computer.
      • Select the Tools Menu -> Android -> AVD Manager
        • Start an existing/prebuilt AVD
          OR
        • Create a new AVD
      • Select your desired Android Virtual Device and under the Actions Column click the green arrow (green play button)
        • You android device could take a few minutes to start.. It is anything but fast.
  • Next lets login to either our physical or virtual android phone.
  • Go back to Android Studio and find the Green Icon that looks like a Bug.
    • Click it and the application will then be pushed and automatically started on your android phone
Lets review how to use this app as a learning tool

This application is structured so you can see and understand the basic concepts of android programming.  We will quickly go over how you perform the following actions:

  • Inner Application Broadcasts – Primarily used for communicating with code that is running on different threads
  • JSON Call Examples – Used to make calls to obtain external content
  • Database Example – Used to store data into a local database
  • Imaging Example – Shows you how to scale and turn square images into circles
  • App Settings Example – Show you how to save data into a the android system preferences
  • Loading Images Example – Shows you how to load images from external resources.

We just need to learn how to use and read this application so that we can understand these examples.

How this works

We will start by running the application to view an example.  Next we will explore how to see the code behind the example.

You should be able to break down each example into its most bare form and just focus on the code that makes it work.

This is really setup so you can basically browse for the functionality that you want to use in your own code and just pull out the parts you need.

 

Make this application your own!
  • You can turn this project which was designed to teach you into your own application in 10 minutes!
    • Close the project, we need to rename our folders and name space
      • Navigate to the location the project resides and navigate to the following path:
        • {folder}/app/src/main/java/  & {folder}/app/src/androidTest/java/
          • Currently our name space is cct.github.droid.android_mvc_sample, in order to change that we just simply rename the next 3 tiers of folders, each folder tier is relative to a dot in the “cct.github.droid.andoird_mvc_sample” name.  If I just renamed the cct folder to dogs then the android_mvc_sample folder to dogs_app and now my namespace would be dogs.github.droid.dogs_app
        • Reopen the Android Application and open your project.  It should now be broken… red squigiligies everywhere!  Don’t worry.
          • Select the following menu item:
            • Edit -> Find -> Replace in Path…
              • Text to find: “cct.github.droid”
              • Replace with: “dogs.github.droid”
            • Update our project configuration by selecting the following menu item
              • File -> Project Structure…
              • One the new window opens up select the “app” selection under “modules”
                • Select the “Flavors” tab and update the following field
                  • Application ID: dogs.github.droid.dogs_app
Modify your home page!
  • Lets create our new “Home Page” for our application.
    In order to do this we need to create 2 elements:

    • Layout Page
      • Open the layout folder
        • Right Click Layout Folder -> New Layout Resource File -> Change Root Elements to Relative Layout -> Give it a name fragment_{name}
      • Controller (Fragment)
        • Open viewController folder
          • Right Click viewController Folder -> New Java Class -> Name it fragment_{name}
          • Now we just need to turn this new class into something that can read and work with our layout file.  In Java we can just “extend” on the Fragment class to do this.  On the next slide is the basic code we need to set this up.
  • Extend the Fragment class
    • Public class fragment_{name} extends Fragment {
      • (click on the red squigilie.. “alt + enter” to import v4.app.Fragment
    • Add out Android Lifecycle methods
      • (Added to the embedded text file)
    • Add your Listener for EventBus (inner application broadcasting)
      • (Added to the embedded text file)
  • If we copied the content from the next slide, be sure to link your new layout file.
    • Current Line:
      • View view = inflater.inflate(R.layout.fragment_home, container, false);
    • New Line:
      • View view = inflater.inflate(R.layout.fragment_{name}, container, false);
Basic Android Fragment Code & Life Cycle Events
public class fragment_temp extends Fragment {

    public fragment_temp() {
    }

    //----------------------------------------
    //------ Android Life Cycle events -------
    //----------------------------------------
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            //Fragment started with arguements.. lets do someting with them!
        }
    }
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_home, container, false);

        return view;
    }
    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
    }
    @Override
    public void onStart() {
        super.onStart();
    }
    @Override
    public void onResume() {
        super.onResume();
        EventBus.getDefault().register(this); // EventBus
    }
    @Override
    public void onPause() {
        super.onPause();
        EventBus.getDefault().unregister(this); // EventBus
    }
    @Override
    public void onDestroyView() {
        super.onDestroyView();
    }


    //----------------------------------------
    //--------- Listener(EventBus) -----------
    //----------------------------------------
    //EventBus method for recieving events from other threads/fragments -- used in place of broadcast recievers/intents/listeners
    // ultimately this helps with creating cleaner code quicker
    public void onEventMainThread(EventModel event) {
        if (event.getEventType() == EventModel.EventType.EVENT_BUS_MESSAGE_TEST) {
            Toast.makeText(this.getActivity(), getResources().getString(R.string._txt_EventBus_Sample_Message), Toast.LENGTH_SHORT).show();
        }
    }
    
}
Register your new pages with the App and Run!
  • FragmentRouter
    • Register a new Router Reference
      • Add a new element to the public enum Tag. (Comma separated values)
  • MainApplication
    • Add a new line to register your new fragment
  • MainActivity
    • Update your starting fragment
  • Current line:
    • FragmentRouter.replace(getSupportFragmentManager(), R.id.container, FragmentRouter.Tag.HOME_FRAGMENT, null, FragmentRouter.Animation.NON, false);
  • New Line:
    • FragmentRouter.replace(getSupportFragmentManager(), R.id.container, FragmentRouter.Tag.{new value from first step}, null, FragmentRouter.Animation.NON, false);
Update our Sliding Menu
  • Managing our menu is easy; we only have to update 2 regions.
    • Menu Definition: Strings.xml
      • Open Strings.xml in the Values folder.  Locate and add/update the elements under the “mnu_items” String-Array node/element
    • Menu Click Events: MainActivity
      • Now that we have new values, we just need to handle the events when the are clicked.  We do that in the MainActivity.
        • There is just a repeating “if – else if” statement which we need to modify and add our new menu item element.
Adding basic objects to your new page
  • Open your new fragement_{filename} Layout file
    • Drag a button onto you layout
    • Give it an ID in the properties window
  • Open you Fragment_{filename}
    • Add the following code in your “onCreateView” method
    • //Sample Broadcast -- not binding to button, just setting onclick listener
      view.findViewById(R.id.{id of the new button”).setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) { btnClickMyButton(v); }
      });
  • Add the following method to your file/class
    • public void btnClickMyButton(v(View v) {
          AlertDialog.Builder dlgAlert = new AlertDialog.Builder(this);
          dlgAlert.setMessage(" I'm really good at stuff until people watch me do that stuff ");
          dlgAlert.setTitle(“About Me");
          dlgAlert.setPositiveButton("OK", null);
          dlgAlert.setCancelable(true);
          dlgAlert.create().show();
      }
  • Run your project!

One thought on “Native Android MVC Application

Leave a Reply

Your email address will not be published. Required fields are marked *