Implement collapsedTitleBarBackgroundColor style property (#786)

Animate between translucent and solid background in collapsed titlebar

android/app/src/main/java/com/reactnativenavigation/params/CollapsingTopBarParams.java

@@ -7,7 +7,6 @@ import com.reactnativenavigation.views.collapsingToolbar.behaviours.CollapseBeha
 public class CollapsingTopBarParams {
     public @Nullable String imageUri;
     public @Nullable String reactViewId;
-    public int reactViewHeight;
     public StyleParams.Color scrimColor;
     public CollapseBehaviour collapseBehaviour;
     public boolean expendOnTopTabChange;

android/app/src/main/java/com/reactnativenavigation/params/parsers/CollapsingTopBarParamsParser.java

@@ -32,7 +32,6 @@ class CollapsingTopBarParamsParser extends Parser {
         CollapsingTopBarParams result = new CollapsingTopBarParams();
         result.imageUri = params.getString("collapsingToolBarImage", null);
         result.reactViewId = params.getString("collapsingToolBarComponent", null);
-        result.reactViewHeight = params.getInt("collapsingToolBarComponentHeight");
         result.expendOnTopTabChange = params.getBoolean("expendCollapsingToolBarOnTopTabChange");
         result.scrimColor = getColor(params, "collapsingToolBarCollapsedColor", new StyleParams.Color(Color.WHITE));
         result.showTitleWhenCollapsed = hasReactView;

android/app/src/main/java/com/reactnativenavigation/views/TitleBar.java

@@ -72,7 +72,7 @@ public class TitleBar extends Toolbar {
         setTitleTextColor(params);
         setSubtitleTextColor(params);
         colorOverflowButton(params);
-        setTranslucent(params);
+        setBackground(params);
     }
 
     private void colorOverflowButton(StyleParams params) {
@@ -82,7 +82,11 @@ public class TitleBar extends Toolbar {
         }
     }
 
-    private void setTranslucent(StyleParams params) {
+    protected void setBackground(StyleParams params) {
+        setTranslucent(params);
+    }
+
+    protected void setTranslucent(StyleParams params) {
         if (params.topBarTranslucent) {
             setBackground(new TranslucentTitleBarBackground());
         }

android/app/src/main/java/com/reactnativenavigation/views/TranslucentAndSolidTitleBarBackground.java

@@ -0,0 +1,37 @@
+package com.reactnativenavigation.views;
+
+import android.graphics.drawable.ColorDrawable;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.TransitionDrawable;
+
+import com.reactnativenavigation.params.StyleParams;
+
+public class TranslucentAndSolidTitleBarBackground extends TransitionDrawable {
+    private static final int DURATION = 200;
+    private enum DrawableType {Translucent, Solid}
+
+    private DrawableType displayedDrawable = DrawableType.Translucent;
+
+    public TranslucentAndSolidTitleBarBackground(StyleParams.Color color) {
+        super(new Drawable[] {
+                new TranslucentTitleBarBackground(),
+                new ColorDrawable(color.getColor())
+        });
+    }
+
+    public void showTranslucentBackground() {
+        if (displayedDrawable == DrawableType.Translucent) {
+            return;
+        }
+        displayedDrawable = DrawableType.Translucent;
+        reverseTransition(DURATION);
+    }
+
+    public void showSolidBackground() {
+        if (displayedDrawable == DrawableType.Solid) {
+            return;
+        }
+        displayedDrawable = DrawableType.Solid;
+        startTransition(DURATION);
+    }
+}

android/app/src/main/java/com/reactnativenavigation/views/collapsingToolbar/CollapsingTitleBar.java

@@ -1,6 +1,7 @@
 package com.reactnativenavigation.views.collapsingToolbar;
 
 import android.content.Context;
+import android.support.annotation.Nullable;
 import android.view.MotionEvent;
 import android.view.View;
 
@@ -8,12 +9,14 @@ import com.reactnativenavigation.params.CollapsingTopBarParams;
 import com.reactnativenavigation.params.StyleParams;
 import com.reactnativenavigation.utils.ViewUtils;
 import com.reactnativenavigation.views.TitleBar;
+import com.reactnativenavigation.views.TranslucentAndSolidTitleBarBackground;
 
 public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener {
     private CollapsingTextView title;
     private int collapsedHeight;
     private final ScrollListener scrollListener;
     private final CollapsingTopBarParams params;
+    private @Nullable TranslucentAndSolidTitleBarBackground titleBarBackground;
 
     public CollapsingTitleBar(Context context, int collapsedHeight, ScrollListener scrollListener, CollapsingTopBarParams params) {
         super(context);
@@ -39,6 +42,22 @@ public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener
         }
     }
 
+    @Override
+    public void hideTitle() {
+        super.hideTitle();
+        if (titleBarBackground != null) {
+            titleBarBackground.showTranslucentBackground();
+        }
+    }
+
+    @Override
+    public void showTitle() {
+        super.showTitle();
+        if (titleBarBackground != null) {
+            titleBarBackground.showSolidBackground();
+        }
+    }
+
     private void addCollapsingTitle() {
         if (params.hasBackgroundImage()) {
             title = new CollapsingTextView(getContext(), collapsedHeight);
@@ -71,6 +90,20 @@ public class CollapsingTitleBar extends TitleBar implements View.OnTouchListener
         }
     }
 
+    @Override
+    protected void setBackground(StyleParams params) {
+        if (hasTranslucentAndSolidBackground(params)) {
+            titleBarBackground = new TranslucentAndSolidTitleBarBackground(params.collapsingTopBarParams.scrimColor);
+            setBackground(titleBarBackground);
+        } else {
+            setTranslucent(params);
+        }
+    }
+
+    private boolean hasTranslucentAndSolidBackground(StyleParams params) {
+        return params.topBarTranslucent && params.collapsingTopBarParams.scrimColor.hasColor();
+    }
+
     public void collapse(CollapseAmount amount) {
         if (amount.hasExactAmount()) {
             collapse(amount.get());