Saturday, May 20, 2017

3.0 Work In Progress 1: New theme engine and now playing

I'd like to start off by saying that GMMP 3.0 is a long long way from being complete, but I have made some progress so I wanted to share whats been done so far.

New Theme Engine

In 2.x, GMMP had 2 main theme types: Holo and Material.  The holo themes leveraged a library called HoloAccent which reimplemented all of the UI elements in a dynamically color-able holo style.  The material themes used the android compatibility library and required each theme to be predefined in xml.  I generated roughly 1000 or so different color combinations and thats what was available to choose from.  On top of that, a lot of custom code had to be placed through out the UI code to make sure everything colored properly.

GMMP 3.0 will feature a new theme engine that will do the dynamic coloring of Material themes.  That unfortunately means there will no longer be any holo themes.  Google keeps releasing updates that break parts of that holo accent library, so I decided to drop it.  Anyway the new engine will traverse through the entire view and theme things accordingly.  It also allows me to specify different behaviors straight in the UI xml instead of in code.  (Example would be the the play/pause button using the accent color instead of the standard button color).



As of right now, a theme is defined by 6 different colors.  Primary, Primary Light, Primary Dark, Accent, Accent Dark, and Accent Light.  GMMP 3.0 will allow all 6 of these to be chosen by the user.  There will also be tons of predetermined themes available to select from for those who dont want to customize each color.

New Now Playing

The pictures above show the current state of the now playing screen.  The album art area will be where gestures are done.  I will also probably make an option to choose between having the album art extend all the way through the status bar, and having a standard colored toolbar with the album art underneath it.  The floating action button is just a placeholder currently but its purpose is going to be for quick actions.  The actions will be similar to the options available for the gesture actions.  I have not yet determined how they will be presented.

One option is the FAB to expand out to a bunch of smaller floating buttons like below:


It looks nice, but due to the location of the FAB it doesnt leave room for many buttons, so I may have to modify it to show both above and below the FAB or go down a different route all together.  The other thought i had was to make it expand out to a toolbar with buttons that sits on top of where the song information is shown.  I"ll have to prototype both to see which works better.

Below the album art is the metadata display which I will go into more detail later on in this post.  When single tapping the metadata area it will transition the UI to the queue.  I've had a lot of requests for easier queue access and it seems like this allows for that.  Perhaps a long press on that area would open up a popup with all the song details.  Finally the play/pause button will do a nice transition animation when pressed (the one where the play morphs into the pause).

Not everything mentioned here implemented yet, but that is what im shooting for.   I'll most likely do partial implementations of most of the UI views just to see how everything works together first before doing the full implementations.

Metadata View Customization

In GMMP 1.x/2.x, users were giving the option to choose from a long list of different metadata fields for each line or allowed the user to write there own custom lines using variables like %ar% (artist), %al% (album), etc.  I've greatly expanded upon this for 3.0.  There will still be presets that users can choose from if they dont want to mess with writing the lines themselves.

Fields

This has not changed.  %field% will be replaced by metadata from the tags.  The code was completely rewritten so its much more efficient this time around.  It actually parses each line instead of just doing a general replace for each field.

Formatting

Entire lines or specific words in a line can be wrapped with formatting tags (there will be examples later on)

  • <align> : Aligns the text left, right, or centered.  This applies to the entire line of text
  • <b> : Bold
  • <i> : Italics
  • <size> : Text/Font size
  • <typeface> : Choose the font to use
  • <u> : Underline

Functions

Inspired by foobar2000, I've put in a few functions to allow you to apply a little logic to the lines
  • $ifequal(val1, val2, text_if_equal, text_if_not) : Compares 2 integers (val1, val2) and if they are the same it will display [text_if_equal], otherwise show [text_if_not] or nothing if that field is not specified.  
  • $ifgreater(val1, val2, text_if_greater, text_if_not) : Compares 2 integers (val1, val2) and if val > val2 it will display [text_if_greater], otherwise show [text_if_not] or nothing if that field is not specified.  
  • $notempty(val1, val2, val3, etc) : Will display the first parameter that is not empty.
All of these parameters can contain fields (which is really the only way they are useful).  More functions will probably come later, but at least right now with these 3 you can do some nice things like:  
  • Hiding disc number or track number if its 0
  • Show composer or album artist if the field is set, otherwise show artist

Examples


"<align=center><typeface=sans-serif><size=24>%tr%"
"<align=center><typeface=sans-serif><size=20>%ar%"
"<align=center><typeface=sans-serif><size=20>%al%"


"<align=left><b><typeface=sans-serif><size=24>%tr%"
"<align=center><i><typeface=serif><size=20>%ar%"
"<align=right><u><typeface=monospace><size=20>%al%"

"<align=center><b><typeface=sans-serif><size=24>%tr%"
"<align=center><typeface=sans-serif><size=20><b>$notempty(%cp%,   ,%ar%)</b> - <i>%al%</i>"

Multiple alignments on a single line

The last customization that can be done is essentially splitting a single line into multiple segments that take up an equal percentage of the line (2 segments = 50% each or 3 segments is 33.3% each).  Each segment can get their own alignment

This is the java code representing above.  I will try to make this much more user friendly when creating lines in app

"<align=center><typeface=serif><size=24>%tr%"
new String[]
{
 "<align=left><typeface=serif><size=20>$ifequal(%yr%,0,No Year,%yr%)",
 "<align=center><typeface=serif><size=20>%br%",
 "<align=right><typeface=serif><size=20>%sr%",
}
new String[]
{
 "<align=center><typeface=serif><size=20>$ifequal(%yr%,0,No Year,%yr%)",
 "<align=center><typeface=serif><size=20>%sr%"
}

So thats it for now.  I will be doing more posts as things get developed