1. Cosc 4735 Collapsing Toolbar Support Pallette

2. Collapsing toolbar. Using a ScrollingView like listview, Recyclerview, or a NestedScrollView – Mostly done with xml with a coordinatorlayout and a AppBarLayout.

3. Collapsing toolbar Basic Xml looks like this: <android.support.design.widget.CollapsingToolbarLayout app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView (as needed) app:layout_collapseMode="parallax">

4. layout_scrollFlags Flags include : – Scroll this flag should be set for all views that want to scroll off the screen - for views that do not use this flag, they’ll remain pinned to the top of the screen. – enterAlways this flag ensures that any downward scroll will cause this view to become visible, enabling the ‘quick return’ pattern. – enterAlwaysCollapsed When your view has declared a minHeight and you use this flag, your View will only enter at its minimum height (i.e., ‘collapsed’), only re-expanding to its full height when the scrolling view has reached it’s top. – exitUntilCollapsed this flag causes the view to scroll off until it is ‘collapsed’ (its minHeight) before exiting. – Note : all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind.

5. layout_collapseMode Parallax allows the image to collapse – Paired with a couple of things you collapse the image with a multipler – app:layout_collapseParallaxMultiplier="0.7“ – Pairing with the app:contentScrim="?attr/colorPrimary" attribute for CollapsingToolbarLayout, adding a full bleed scrim when the view is collapsed.

6. Textsize The default shown in design4 sets the tittle on the CollapsingToolbarLayout, so it shrinks, grows in size. – collapsingToolbarLayout.setTitle(getResources().getString(R.string.appname)); In design3 we set a style with (in style.xml) 32sp 18sp And assign the styles in the java (likely can be done in xml as well) collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar); collapsingToolbarLayout.setTitle(getResources().getString(R.string.appname)); collapsingToolbarLayout.setCollapsedTitleTextAppearance(R.style.collapsedappbar); collapsingToolbarLayout.setExpandedTitleTextAppearance(R.style.expandedappbar);

7. V7 PALETTE LIBRARY

8. Palette library. the v7 palette support library includes the Palette class, which lets you extract prominent colors from an image. – For example, a music app could use a Palette object to extract the major colors from an album cover, and use those colors to build a color- coordinated song title card. – To add it to the project, in the build.gradle (app), in dependencies, compile 'com.android.support:palette-v7:23.1.1'

9. Palette library (2) The extracted colors will be the following – Vibrant, Vibrant Dark, Vibrant Light – Muted, Muted Dark, Muted Light You will need a bitmap loaded and then you can use the palette to generate the colors. The data can be retrieved in a Sync or Async method (Asysnc is recommended) – Palette palette = new Palette.Builder(myBitmap).generate(); – Palette palette = new Palette.Builder(myBitmap).generate(new Palette.PaletteAsyncListener() {}); Then use the listener to retrieve the data.

10. Retrieving the colors You can retrieve the 6 colors via the 6 methods – Int getMutedColor(int defaultColor), getDarkMutedcolor, getDarkVibrantColor, getLightMutedColor, get LightVibrantColor, getVirbrantColor The defaultColor can be Zero, and it returns the color – Or use the a say Theme color, and it the will be more in line with the theme.

11. Retrieving the colors (2) Or you can get Swatches. – This returns an swatch object, has getRgb() for the color, getBodyTextcolor() and getTitleTextcolor() which appropriate color for text which can be seem over the color. Also have a getPolulation() which is the number of pixels represented by this swatch in the bitmap – Names are similar, getVibrantSwatch() example instead of get VibrantColor(). Lastly you can use List getSwatches() – It will return all of the swatches (normally 16) that make up the palette.

12. References http://android-developers.blogspot.com/2015/05/android-design- support-library.html http://android-developers.blogspot.com/2015/05/android-design- support-library.html http://www.tutorialsbuzz.com/2015/11/android- collapsingtoolbarlayout-example_7.html http://www.tutorialsbuzz.com/2015/11/android- collapsingtoolbarlayout-example_7.html http://developer.android.com/reference/android/support/v7/graph ics/Palette.Swatch.html http://developer.android.com/reference/android/support/v7/graph ics/Palette.Swatch.html http://developer.android.com/reference/android/support/v7/graph ics/Palette.html http://developer.android.com/reference/android/support/v7/graph ics/Palette.html https://github.com/codepath/android_guides/wiki/Dynamic-Color- using-Paletteshttps://github.com/codepath/android_guides/wiki/Dynamic-Color- using-Palettes http://willowtreeapps.com/blog/palette-the-new-api-for-android/ https://www.bignerdranch.com/blog/extracting-colors-to-a- palette-with-android-lollipop/https://www.bignerdranch.com/blog/extracting-colors-to-a- palette-with-android-lollipop/

13. Q A &