The same visual technique was also employed in the layout of ArticleDetailFragment, which is comprised of an even more complex hierarchy of components:

Another property of the ArticleDetailFragment in need of cleaning up and formatting was its text. The mock application would receive the text in the following form: 

For starters, let me try to summarize the lessons and intuitions\r\nI've had about ebooks from my release of two novels and most of a\r\nshort story collection online under a Creative Commons license. A\r\nparodist who published a list of alternate titles for the\r\npresentations at this event called this talk, \"eBooks Suck Right\r\nNow,\" [eBooks suck right now] and as funny as that is, I don't\r\nthink it's true.\r\n\r\nNo, if I had to come up with another title for this talk, I'd\r\ncall it: \"Ebooks: You're Soaking in Them.\" [Ebooks: You're\r\nSoaking in Them]

 and present it as :

It was the perfect time to utilize regular expressions which unlike in Perl, were much more verbose in Java. (If you want to know more about regular expression check Advanced Perl Regular Expressions - Extended Constructs and Advanced Perl Regular Expressions - The Pattern Code Expression)

The variables' (a,a1,a2...) incremental naming was done on purpose to make obvious the step by step application of each regular expression in turn.

To do text styling on Android you have to treat the text string as HTML and render it with Html.fromHtml(), which means that we can replace or inject arbitrary HTML elements before that.

String a = b.replaceAll(">", ">");

First let's replace the ">" character with its HTML escaped equivalent, otherwise mixing it with text that uses it as part of the tags as in <br> would pose issues when attempting to render it as HTML.

String a1=a.replaceAll("(\r\n){2}(?!(&gt;))", "<br><br>");

Replace all double \r\n sequences, that is \r\n\r\n, which are not followed by ">" with two blank lines <br><br>

String a2=a1.replaceAll("(\r\n)"," ");

Replace the remaining \r\n sequences with whitespace

String a3=a2.replaceAll("\\[.*?\\]","");

Remove all text between '[' and ']'

String a4=a3.replaceAll("(\\d\\.\\s.*?\\.)","$1<br>");

Put a new line after i.e "1. Ebooks aren't marketing."

String a5=a4.replaceAll("\\*(.*?)\\*", "<b>$1</b>");

Make text between "*" and "*" bold.

String a6=a5.replaceAll("(\\w\\s)&gt;", "$1");

Remove all ">" from text like "> regardless" but leave the very first ">" of the paragraph in tact.

Spanned a7=Html.fromHtml(a6,Html.FROM_HTML_MODE_LEGACY);

bodyView.setText(a7);

Finally, render text as HTML.

Unfortunately no extra points for styling the text since the project is strictly rated according to the rubric's specifications.

Other enchantments included rendering the header photos as full bleed, tweaking all kinds of parameters in design view, making the FAB move along the content, use surfaces, fonts, styles and themes.

The biggest overhaul though was on layouts, with the addition of the following components :

android.support.design.widget.AppBarLayout

android.support.v7.widget.Toolbar

android.support.design.widget.CoordinatorLayout

android.support.v4.view.ViewPager

android.support.design.widget.CollapsingToolbarLayout

android.support.v4.widget.NestedScrollView

android.support.design.widget.FloatingActionButton

 and of course their associated code.

The value of having a separate set of eyes and...machine

In the first few attempts of utilizing a Transition from ArticleListActivity to ArticleDetailActivity things didn't work out as expected. The animation was sluggish and most of the time I was ending up with a blank screen. I double checked the code and it was looking fine so I headed out to the forums for advice.

There, a helpful mentor volunteered to run my code on his own machine, cloning it from my GitHub repo. The verdict was that my code was alright since on his machine everything was running smoothly, something that gave me peace of mind. Turns out that, although we were sharing the same emulator settings, Android SDK and APIs, switching the emulator Graphics from Hardware to Software fixed the issue.

Conclusion

What all the Units had in common is that they were light on code but heavy on theory. Personally, looking at matters from a design point of view benefited me a lot in getting a grasp of the underlying philosophy and applying it in practice. Hopefully I can utilize everything learned on making a great app out of my Capstone project, which is next.

Finally, a couple of pictures of the UI makeover:

More Information

Android Developer Nanodegree

Nikos Vaggalis - "Make Yor App Material" on GitHub

Related Articles

Insider's Guide To Udacity Android Developer Nanodegree - 1

Insider's Guide To Udacity Android Developer Nanodegree - 2

Insider's Guide To Udacity Android Developer Nanodegree - 3

Insider's Guide To Udacity Android Developer Nanodegree - 4

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info