A fully featured Hacker News client needs to allow the user to sign in, vote stories and reply to comments. Finally, all those features are now available in Yahnac. If you are curious to read about the journey to complete those features and the use of the Design Support Library to do so please read on.
There are, literally, hundreds of posts about how to use the Design Support Library. This is not going to be one of those, my goal here is to explain what I’ve used and why. As you know, there are a huge number of Widgets, Behaviours and other goodies available in this library. It also means that there are a lot of decisions that need to be made before starting implementing them.
It’s very easy to get lost in the vast ocean of possibilities, and to me that’s the most difficult step to integrate with the Design Support Library. So many options, that is very easy to start adding animations, transitions and effects that are just pretty but are just there for a mere aesthetic reason and not to bring value to the user.
When deciding which was going to be the first component I wanted to update it was very simple, the old
NavigationDrawer was a clear winner.
There was using was a lot of boilerplate used and several classes in order to display a simple
Drawer, thanks to the new NavigationView it’s all much easier and cleaner
1 2 3 4 5 6 7 8
Thanks to the
headerLayout attribute one can define a specific view to be inflated as a header.
Since we are going to show a different header if the user is signed in or not, we can make use of the custom view to decide which layout to inflate.
1 2 3 4 5 6 7 8 9 10 11 12
In order to reply to comments and vote stories, one need to be signed into Hacker News. Even though there is an API, it’s not possible to authenticate against HN. Therefore, the only way to do that is to go through the actual website.
Yahnac does not store any private or sensible information from the user, the only data stored is the cookie that allows to authenticate the requests. That being said, there is a known issue with this workaround. Every time the cookie is expired (if you sign out from the HN website) you’ll need to sign in again. Don’t worry, you’ll be notified if that happens and you’ll be able to sign in again.
Toolbar and TabLayout
It was pretty simple to migrate from the old ActionBar to the new Toolbar. One of those things that make us developers happy. In terms of the new features available, following the trend started a while back by several applications we’ll be hiding the toolbar when scrolling the list.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
One can see the reference to Scroll View Behaviour which is by the
ViewPager which can scroll vertically and support nested scrolling to automatically scroll any
The new attribute
scroll:flags is used to determine how the
Toolbar will behave. In our case, we want the
Toolbar to hide when scrolling up but appear again as soon as we scroll down.
A lot has been written about the CoordinatorLayout, its possibilities and ways of achieving them are out of the scope of this post. However, there is a screen in Yahnac where it made sense to make use of that so called super-powered
The Comments screen deserved some love, I wasn’t very happy with the actual layour of the comments and it surely could be improved. Also, adding the vote and reply action to each one of the comments needed a bit more thinking. In the end, the best solution I came up with was to add action icons to the old comment list items and change the background to improve the reading experience.
After these changes, it’s much easier to follow the conversation and much easier to read through a long list of comments.
Transitions and Animations
As said earlier, it’s very easy to fall into the trap of adding too much animations and transitions. It’s been hard to restrain myself but I think the outcome is what I wanted to achieve.
In an application like this with no images, there not much space for transitions between master and detail screens. However, one can also use color as a foundation for these transitions. That being said, there are only two places where it makes sense to animate the transition between screens. One of them being the transition to the login screen.
Both are pretty straight forward Activity transitions, where the content from one screen is animated to the next screen by changing its bounds.
1 2 3 4 5 6 7
The animation itself is set in the
1 2 3
Last but not least, we need to set the
Views that will form the transition.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
The majority of logic is set in the origin
Activity, now the only missing piece is to set the
TransitionName in the target
1 2 3 4 5 6 7 8
In terms of animations, I’ve been particularly interested in the circular reveal). When prompting the user for some input it’s normal to use
Dialogs but they are always limiting the amount of space available. In Hacker News is usual to find comments that take more than just 4 lines, if only there was a way of replying to a comment AND have enough space to review it…
As you also know, this animation is only available for Lollipop and above. Even though there are several libraries that create this animation before Lollipop, I’m of the opinion that the OS requirements are there for a reason. Don’t back-port them to previous versions since you’ll be modifying the default platform behaviour. Same goes for
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
One of the most interesting new feature that
CoordinatorLayout brings is the use of
Behaviours. One can set dependencies between
Views and react to the changes in the dependent view.
The Design Library already has several examples of
Behaviours and those are a very good starting point for us. In this case, the idea was to hide the
FloatingActionBar when scrolling up the comments list so the reading experience wasn’t compromised.
In order to do so, we want the
FAB to scroll anchored to the
AppBarLayout and disappear once the its dependent view is no longer visible.
For this purpose we are going to extend the FloatingActionButton.Behavior. Basically, we only react to vertical scroll and default to the
CoordinatorLayout scroll. Called when a descendant of the
CoordinatorLayout attempts to initiate a nested scroll.
AppBarLayout is hidden then the
FloatingActionBar needs to be hidden as well. In order to do so we just have to check the vertical offset and start the out animation. To make things a bit more interesting we’ll use a scaling animation to make the button disappear as opposed to simply hiding it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
Design Support Library is a huge improvement in the Android development world. It’s never been so easy to follow the design patterns that Google puts in place, there are no more excuses now. We have all the tools needed in order to build proper Material Design applications on Android.
In terms of Yahnac. The application is now updated with what you’ve seen here and it’s now a much better Hacker News client.
In case you are interested, I’ve created a Google+ Community where you are more than welcome to provide feedback, bug reports or any other related question. Looking forward to it!