DbTradeAlert for Android: Create the Application

Update 2017-08-24: An activity does NOT equal a screen like I wrote originally! Corrected the post.

First post in this series: Introduction to DbTradeAlert

Previous post: Creating a Development Environment for Android Apps on Windows – Part 3: Install Git

The first step after setting up the development environment is to let Android Studio create the app’s scaffolding.

1. Create the Project

Start a new Android Studio project. In the project configuration window enter “DbTradeAlert” as Application name and your domain. It’s “dbremes.de” in my case resulting in a package name of “de.dbremes.dbtradealert”.

The default project location is under “C:\Users\<AccountName>\AndroidStudioProjects\” but I prefer to have everything valuable under the My Documents folder. Android Studio will remember the path to “AndroidStudioProjects” and suggest it for future project locations.

In the form factor selection window accept the defaults being phone and tablet as well as a minimum SDK level of 15.

The next window presents a set of activity types to choose the app’s main activity from. An activity is a user task in Android lingo and and also an external entry point into the app for example to start it from the launcher. The user’s main task will be checking his watchlists which includes swiping right and left to switch between them. So select “Tabbed Activity”.

The following window allows customizing the activity. Change Activity Name to “WatchlistListActivity” as the activity will present a list of watchlists. The other names will be updated accordingly. After that update Title to “Watchlists”. Keep Navigation Style as “Swipe Views (ViewPager)”. To have your Tabbed Activity actually use tabs you’d have to select a different Navigation Style.

After clicking Finish your app will be generated and show up in Android Studio. Should it not render correctly but throw errors like “Failed to find style ‘textViewStyle’ in current theme” just click the Refresh button on the top right of the preview pane.

DbTradeAlert - Android - Create Application

Start the app to see what you got for free, preferably on an actual phone. Running it on an emulator will take longer – especially on the ARM based one as it’s not hardware-accelerated. In that case there will even be complaints about run time errors and skipped frames. For some reason I had to delete the previous post’s “My Application” from the emulator before DbTradeAlert would install.

The free functionality as far as it will be useful to DbTradeAlert is:

  • The app’s title is shown at the top
  • Tapping the menu (three dots to the right of the app’s name) will open a settings menu (empty for now)
  • Swiping left will switch to the next watchlist, swiping right will switch back

2. Dissecting the App

Let’s have a look at the app’s structure to find out how all the little cogs work together.

app\manifests\AndroidManifest.xml is Android’s info center for each app. It specifies things like the app’s minimum SDK version, label, and icon. It also specifies the default activity by listing MAIN action and LAUNCHER category as its intent-filters. This default activity is specified as “.MainActivity” which is a shortcut for “de.dbremes.dbtradealert.MainActivity” and will run when the app is started. During app development AndroidManifest.xml will considerably grow to contain services and required permissions.

app\java\de.dbremes\dbtradealert\WatchlistListActivity.java as the default activity will be the first to run and whenever an activity starts its onCreate() method is called. By calling setContentView() the activity specifies its view – that’s what will be drawn on the screen. The method’s parameter is an ID which get’s generated from the respective XML file when compiling the app. All those IDs are defined in the generated class R.java. In this case the ID points to activity_watchlist_list.xml.

app\src\main\res\layout\activity_watchlist_list.xml as the view of the app’s default activity is what gets rendered by Android Studio. This view has a CoordinatorLayout as its root element which wraps an AppBarLayout which in turn wraps a Toolbar. The latter both form the blue area at the app’s top containing its title and menu. The CoordinatorLayout also wraps a ViewPager which will respond to horizontal swipes but has no child elements defined yet. And finally it wraps a FloatingActionButton which creates the pink circle at the bottom. The CoordinatorLayout’s main duty is to provide visual feedback through animations for example when its children change sizes or move.

So how does the app get its actual content? Let’s go back to onCreate(). It creates a SectionsPagerAdapter instance to provide the sections and their contents and connects it to the ViewPager – each section will be a watchlist. The definition of SectionsPagerAdapter is at the bottom of WatchlistListActivity.java and provides three methods:

  • getCount() supplies the number of sections available
  • getPageTitle() supplies the specified sections’ title
  • getItem() supplies the specified sections’ contents

The first two are self-explanatory and the third one is where things get interesting. It returns a Fragment – specifically a PlaceholderFragment instance – which is a reusable part of an activity. The fragment will deliver the content and contains both the view and the code behind it.

The definition of PlaceholderFragment is in WatchlistListActivity.java, too. Its instances are created by calling the static newInstance() method and specifying the section number which gets wrapped into a Bundle and passed to the new instance. When Android actually draws the fragment it calls onCreateView() passing the Bundle as savedInstanceState parameter. onCreateView() first creates the view from app\src\main\res\layout\fragment_watchlist_list.xml which contains just a TextView for now. After that it fills the TextView’s contents from the section number and finally it returns the new View. This view will then act as the specific sections’ contents.

3. Some Additional Notes

The views in activity_watchlist_list.xml and fragment_watchlist_list.xml have their id attribute specified like ‘android:id=”@+id/container”‘. This instructs the XML parser to create a new ID in R.java. Please note that has to happen wherever you first specify that ID which isn’t necessarily in the id attribute.

Google invented Fragments mostly because tablets have vastly bigger screens than phones and activities that would be used in sequence on a phone could be presented side by side on a tablet. Performance gains are another benefit because fragments survive a device changing orientation while activities don’t and will be re-created.

A FloatingActionButton (FAB) represents the most important action of the current activity. Like the CoordinatorLayout it originates in Google’s Material Design.

4. Optional: Initial Commit

To initialize the Git project:

  1. From the project folder’s context menu select “Git Create repository here”
  2. In the following dialog box leave “Make it Bare” unchecked and click OK
  3. Click OK in the success message box

To commit the files:

  1. From the project folder’s context menu select “Git Commit -> “master””
  2. Enter a commit message like “Generated app”
  3. Check All files and click Commmit
  4. Close the progress window

As you control Git from Explorer it’s not necessary to have Git-related menu items in Android Studio anymore. To remove them:

  • In Android Studio select File | Settings
  • In the Settings window select “Version Control”
  • Click the Remove button at the end of DbTradeAlert’s line
  • Click OK

Next post: Create the Basic Watchlist UI

Additional Ressources

This entry was posted in Uncategorized and tagged , . Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s