Friday, June 16, 2017

3.0 Work in Progress 3: Album Details + Album Grid transitions

The last 2 weeks I've been working on the album details view along with learning how to do transitions between different views.  As mentioned before I'm currently just focusing on the code portion so the actual UIs themselves are not final and still need a lot of work.


This is the current state of the album details view.  Its using the CoordinaterLayout with a collapseable toolbar, so when you scroll up the album art will basically collapse into the toolbar at the top.  I currently like how the album title moves while you scroll up and eventually becomes the title in the toolbar, but im not 100% sure if that is the direction i will go.


Below is a video that shows the transitions between selecting an album from the album grid and opening the album details.  This was recorded on an old galaxy s3 running Lineage OS (7.1.2) so it appears the actual recording is a bit glitchy.  The Image showing over half of the floating action button doesnt actually happen on the device.


Progress might seem slow but once a lot of the essential capabilities are written, they will be reusable on almost all the other views (IE artist detail view and genre detail view will be pretty similar to the album view, so it wont take long for me to add).  Next up on my list is adding the 3 dot buttons / context menus on to the list / grid items.

Friday, June 2, 2017

3.0 Work in Progress 2: Album Grid

Before I talk about my latest progress I want to reiterate that this is just a work in progress / prototype so nothing shown in the screenshots will be final.  I havent spent too much time on the UIs themselves, but have been focusing on the underlying UI code (presenters / data access / adapters / etc).  I encourage people to give feedback, however just because something is not being shown, does not mean I am getting rid of it.

Recently, google announced a bunch of new architecture libraries https://developer.android.com/topic/libraries/architecture/index.html and since I was in the middle of some major rework, I decided to go ahead and start adapting GMMP to use these new libs.


  • Room is going to greatly simplify access GMMP's database.
  • LiveData combined with Room makes it super simple for my UI to get access to the data and get notified on changes to the database
  • ViewModel allows me to maintain UI state between orientation changes
  • Lifecycle gives my presenters access to the fragment/activity lifecycle without being tightly coupled to the fragment/activity

Google also announced official support for Kotlin in Android Studio.  I have only played around with it a little but from everything I have read it looks amazing and I do have plans to convert some of GMMP over to it.  Since its compatible with the JVM I can mix and match both kotlin and java in the same project.

Anyway for the last 2 weeks I have been working on the album view (its a standalone since I have not done anything with drawer navigation or the viewpager / tab navigation yet).  For now I have created 4 different modes for the albums list.

List


Card List



Grid


Card Grid


There are also nice transitions in between each view mode (and changing the number of grid columns).

I also made the metadata shown in each grid/list item configurable in the same way as now playing.  There will however be less options for the variables depending on the view (IE albums view would only give you access to the artist/album/year and not trackname variable. stuff like that).  I also added another small addition to the markup language used for the metadata lines and that is the ability to set the color.. in a very limited way.  <color=secondary> or <color=primary> can be added to each metadata line.  Primary is the whiter color and secondary is the grayer one.  For a light theme these colors would be different.  Also, each view mode will have its own metadata lines.  In the images above you will see that the list views are aligned left, but the grid views the text is aligned center.

Now Playing

There are 2 minor changes to now playing.



I made the buttons at the bottom configurable.  Besides play/pause you will be able to configure them to show other actions and also choose the icon side (small/medium/large).  In the image above I adjusted the icon sizes a bit: Shuffle/repeat are small, Next/Prev are medium, and Play/Pause is Large

Finally here is a gif if the play/pause animation:  https://media.giphy.com/media/1pvYO3Fs7nPpK/giphy.gif