Intro to Android GUI development choices
This is part of technical research conducted into a common Android development workflow.
Usually the front-end and the backend as detailed in the block diagram are linked quite closely so development will happen in parallel. Let us assume that we start with a low-fi prototype/wireframe which is based on Material Design and that you have a brief idea of the storyboard.
##Main Dev environment
- Android SDK Tools
- Android SDK Platform-tools
- SDK Platform - Install the latest version; API 23 (which corresponds to Android 6.0)
- Android Support Library - For backward compatibility with earlier versions of Android.
- Android Support Repository.
- Google Repository.
These can be accessed from the Tools > Android > SDK Manager menu in Android Studio. Please check that nothing is missing.
##Getting started
You can either clone the repository manually and go to File > New > Import Project, or you can import it straight from Git.
To ensure that the project builds properly, click on Tools > Android > Sync project with Gradle Files. Try to run the application with the green run button on the HAXM emulator included with Android Studio, on Genymotion, or on a physical Android device.
Familiarize yourself with the Android directory structure, first. In our project, I have structured the Java files into packages, like a normal Java project.
##Transforming a UI into native Android code
- https://developer.android.com/training/basics/firstapp/building-ui.html
- https://github.com/codepath/android_guides/wiki#views-and-layouts
Familiarize yourself with these two guides. Try to understand that View is a rectangle on the screen, Layout is like a <div/> container; different Layouts will require different attributes to be set to each View and will position them differently.
As a rule of thumb, when you want to import a new class which is a subclass of View, always search online to see if there is a class which is in the appcompat libraries. For example, do not do import android.widget.Toolbar; because import android.support.v7.widget.Toolbar; is available from the Android Design Support Library.
After you are familiar with creating Views within Layouts and altering their text, loading a background image into them, etc, read about common Android patterns. Look at some code samples online; usually there is more than one way to do things; but there is only one convenient way used by the majority of people.
Example:
Identify all the UI elements in the above Mockup:
- Navigation Drawer
- A Header.
- A List.
- Action Bar, behind the navigation drawer.
- Floating Action Button.
Let's skip forward to https://github.com/codepath/android_guides/wiki/Fragment-Navigation-Drawer
If you have read the common patterns, you will have noticed that
Moving from a parent scene to a child scene is descending navigation. Moving from child to parent is ascending navigation.
and that it is appropriate for
Lateral navigation Parents with siblings or peers