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:
- Check you have the correct dependencies in your Gradle app file
- Create a menu folder and add a menu xml file
- Add the code to your activity to inflate the menu file you created
Not very exciting at this stage but the above work results in the following:
Comments
Post a Comment