Skip to main content

Udacity Capstone Part One - Add icon to Android toolbar

Currently working my way through my project plan for my Udacity Capstone project.  I'm going to go slightly off-piste at the start as I'm not 100% which libraries I'm going to be using and therefore not 100% sure what to put in my Gradle files so I'll just update them as I go along.  So today's task is to build the skeleton of the app.

Building the skeleton

My app design consists of three main sections:
  • The main landing page where the user can swipe through articles deciding whether or not to read them
  • An article viewing activity where the above selected article is displayed in detail
  • A stats activity where the user's reading habits can be displayed.
On top of that I want to support both phones and tablets with the app displaying as two panes on a tablet.  Last time I created a phone app and then tried to 'convert' it to a two-pane version I found it really buggy so this time I have decided to create it with two panes in mind from the get-go.  Also, last time I did this I ended up creating everything by hand so I'm going to try, at least initially, using some of the much improved templates built in to Android Studio these days.

Linking the two halves

My plan is to have a simple icon on the toolbar that when clicked will flip the app between 'reading' and 'stats' views.  By default the built-in template for a two pane interface does not include any menu or toolbar icon so the first task is to add one in.

The first thing to do is make sure your Gradle file imports the dependancies you need when working with AppCompat.  The version will change but you want to make sure you have something like this under 'dependencies':

compile 'com.android.support:appcompat-v7:25.3.1'

If the two-pane template was used then that should be in there already.

Next up the menu itself needs creating.  Even though I am after an icon on the toolbar it is best to set it up as a straightforward menu and then set the menu item to display an icon.  This way it is properly scalable for different systems.

To get started on that you need to create an xml file to store the menu entries.  If it doesn't already exist then create a 'menu' folder under 'res'.  Do this by right-clicking on the 'res' folder and selecting 'New Android Resources Folder'.  In the pop-up dialog give it the name 'menu' and under type select 'menu'.  Now right-click on your new 'menu' folder and select New > Menu Resource File.  There's all-sorts of things that can be added here but for now just put a new 'item' entry in-between the menu node.  Something along the lines of:

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item        
         android:id="@+id/action_view_stats"        
         android:title="View Stats"        
         app:showAsAction="ifRoom"        
     />
</menu>





The id allows you to reference it easily later, the title is what is shown if the menu gets compacted into text and the showsAsAction is what is responsible for whether it is displayed in a menu or on the bar.  An icon can be added later.







All that remains then is adding the code into the main activity to actually display the menu (and the item on the toolbar).  Slightly boilerplate here but the following goes in the activity:






@Overridepublic boolean onCreateOptionsMenu(Menu menu){
    getMenuInflater().inflate(R.menu.menu, menu);
    return true;
}

@Overridepublic boolean onOptionsItemSelected(MenuItem item){
    int id = item.getItemId();
    if(id == R.id.action_view_stats){
        Toast.makeText(ItemListActivity.this, "Display Stats Selected", Toast.LENGTH_LONG).show();
        return true;
    }
    return super.onOptionsItemSelected(item);
}







And that's it, you're done.  One functioning menu item on the toolbar.  Next is to make it do something more useful than a Toast and to decide on a nice icon for it.  So, to recap:










    

  1. Check you have the correct dependencies in your Gradle app file
    2. 

  2. Create a menu folder and add a menu xml file
    3. 

  3. Add the code to your activity to inflate the menu file you created
    4. 




Not very exciting at this stage but the above work results in the following:



































Labels:
































Comments











Post a Comment
























Popular posts from this blog





















Android Studio: AVD Emulator with HAXM and Docker or Virtualbox at the same time




























  TL;DR - if you are having problems running the Android Emulator and Docker at the same time check that you actually have the latest version installed and don't rely on what the SDK Manager is reporting   Recently I've been having a problem developing Android Apps on a Mac using Android Studio  whereby when I try and start an AVD  nothing happens.  Not a blank screen, not a crash, not a 'stuck at the Android logo' just nothing.  The trouble started as soon as I installed Docker for Mac alongside Virtualbox.   I noticed that even when I wasn't actively using a container but had Docker itself running I experienced this problem but if I quit Docker the problem went away.  Turns out there's an issue with earlier versions of Intel HAXM  and other virtualisation technologies playing nicely together.  The usual fix in these circumstances in to check you have the latest version installed - a quick check in the SDK manager would suggest I did.  However, turns out despit...




















Post a Comment









Read more






























Using Microsoft Visual Studio Code and Github together




























 I'm currently trying to learn Python using the excellent resources at  https://learnpythonthehardway.org/book/  and, in a move that I'm sure would enrage the author, I want to use Microsoft's Visual Studio Code as my editor.  The reasons for this are mainly that a. I actually quite like it and b. I already use it for a number of other projects.  If you haven't already then I suggest checking it out by downloading it  here .       When I'm developing or learning new stuff I tend to find myself moving between a variety of systems in different locations including but not limited to an iMac, a MacBook, a Windows desktop and a Linux laptop as well as a few other bits and pieces.  This is another reason I went with Code - it works the same across all my platforms.  One thing that annoys me is when I have been working on one machine and want to seamlessly pick up on another with everything nicely synced.  Some time ago, due to wanting to answer the need...




















Post a Comment









Read more




























Android Development - Udacity Capstone




























 I'm currently working my way through the Udacity Android Nanodegree and, way later than planned, I'm finally on the last project.  Overall the course has been good and it has been interesting watching it develop as I have been working through it.  One downside is that the course fees are paid monthly, so for each month that you are on the course you hand over another chunk of money.  If you have lots of spare time and can work uninterrupted then it could be seen as a major bonus - get the course completed quickly and it actually works out pretty cheap compared to other courses.  However, if like me things like work and life in general have got in the way then you'll see one month after another roll past and you'll realise it has actually cost you a pretty penny.  Oh well.   Anyway, here I am, finally(!) on the final half of the final project.  This project is down as a Capstone with the idea being that you create one app that displays everything you have l...




















Post a Comment









Read more