Getting Started with App development, Android and Material Design

Seeing that I joined the ranks of the Xamarin Certified Developers last month, and working as a Sales Engineer at Xamarin, I figured it was about time to actually try my hand at building an app. Upon getting started I quickly realized that it is one thing to know all the pieces and the technical theory behind development, it is another to actually be capable of using it in practice.

For now, my goal is to work on an Android app which will ultimately be scaled to include iOS, (Maybe Windows Phone), and then write different technical aspects and learn things like Xamarin.Forms, MVVM Cross, Azure Mobile Services and others. Really it will just be my attempts to be more active in the development community.

The current app I have planned will be themed after a Character Sheet for Dungeons and Dragons, using the 5th generation ruleset. Nerdy, but rather straight forward in its use case.

If you would like to follow the app, you can find the Github repository here:

https://github.com/psycosyd/DnD5e_CBMobile

Getting started, one of my biggest stumbling blocks has actually been UI design and development. Normally I am a huge fan of UI development and design but I admit that Android is not the most intuitive, nor simple.

Part of the problem is theory vs implementation. Google has really done a wonderful job driving direction through their documents on Material Design, found here:

http://www.google.com/design/spec/material-design/introduction.html

It helps give good clarity, color, layout and foundational principles to creating a great android application.

I'm glad you have this great mock up, but where do I sign up for this?

The problem is, while it gives some great rules to follow, it is not as helpful on how the job gets done. As I started this process on my own Dungeons and Dragons app, this is what I started seeing:

I don't know about you, but something seems lacking. I can't quite tell

The big missing factor is the bridge between design and implementation. I conceptually get what Google is preaching, but have no foundation on how to make it happen. Luckily, I am a rather stubborn individual, and like to hammer at something until it works. One thing that I found helped was to start organizing/grouping logical data groups into CardViews. Additionally, coloring backgrounds helped to visually display where my layouts were being positioned.

A couple new factors coming into play here. The CardViews added a nice layer to group logical data. I also had to do some discovery with RelativeLayout and positioning. I had to right justify my entry/input fields, and then centered them by aligning their baselines to the labels on the left. Much cleaner. Now to do a custom adapter to my Spinner controls so we don't have obvious whitespace and we are in business!

To get the top portion organized, most of my actual layout placement was done with my settings using layout_below, alignParentRight (on the right hand elements), and alignBaseLine to get each row lined up. You can see code below:

           <TextView
                android:text="Character Level:"
                android:id="@+id/charLevelLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/charName"
                android:textSize="@dimen/textTitle" />
           <EditText
                android:id="@+id/charLevel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignBaseline="@id/charLevelLabel"
                android:numeric="integer" />


Still this is a promising start. This next week will focus on getting a custom adapter set up for my spinner controls as well as work on the attributes layout, and code behind. Most of this initial phase has been just blocking UI and getting basic pairings set up.