TopTabs icons (#680)

This commit adds support for icons in TopTabs.
It’s possible to have icons with text, or only icons.
Use topTabIconColor and selectedTopTabIconColor to color the icons

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

@@ -1,5 +1,6 @@
 package com.reactnativenavigation.params;
 
+import android.graphics.drawable.Drawable;
 import android.os.Bundle;
 
 import java.util.List;
@@ -8,6 +9,7 @@ public class BaseScreenParams {
     public String screenId;
     public String title;
     public String subtitle;
+    public Drawable tabIcon;
     public NavigationParams navigationParams;
     public List<TitleBarButtonParams> rightButtons;
     public TitleBarLeftButtonParams leftButton;

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

@@ -1,12 +1,9 @@
 package com.reactnativenavigation.params;
 
-import android.graphics.drawable.Drawable;
-
 import java.util.List;
 
 public class ScreenParams extends BaseScreenParams {
     public String tabLabel;
-    public Drawable tabIcon;
     public List<PageParams> topTabParams;
 
     public boolean hasTopTabs() {

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

@@ -56,7 +56,9 @@ public class StyleParams {
     public boolean backButtonHidden;
 
     public Color topTabTextColor;
+    public Color topTabIconColor;
     public Color selectedTopTabTextColor;
+    public Color selectedTopTabIconColor;
     public int selectedTopTabIndicatorHeight;
     public Color selectedTopTabIndicatorColor;
 

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

@@ -1,12 +1,10 @@
 package com.reactnativenavigation.params.parsers;
 
-import android.graphics.drawable.Drawable;
 import android.os.Bundle;
 
 import com.reactnativenavigation.params.NavigationParams;
-import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.params.PageParams;
-import com.reactnativenavigation.react.ImageLoader;
+import com.reactnativenavigation.params.ScreenParams;
 
 import java.util.List;
 
@@ -46,21 +44,13 @@ public class ScreenParamsParser extends Parser {
         result.fabParams = ButtonParser.parseFab(params, result.navigationParams.navigatorEventId, result.navigationParams.screenInstanceId);
 
         result.tabLabel = getTabLabel(params);
-        result.tabIcon = getTabIcon(params);
+        result.tabIcon = new TabIconParser(params).parse();
 
         result.animateScreenTransitions = params.getBoolean("animated", true);
 
         return result;
     }
 
-    private static Drawable getTabIcon(Bundle params) {
-        Drawable tabIcon = null;
-        if (hasKey(params, "icon")) {
-            tabIcon = ImageLoader.loadImage(params.getString("icon"));
-        }
-        return tabIcon;
-    }
-
     private static String getTabLabel(Bundle params) {
         String tabLabel = null;
         if (hasKey(params, "label")) {

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

@@ -44,6 +44,8 @@ public class StyleParamsParser {
         result.topTabsHidden = getBoolean("topTabsHidden", getDefaultTopTabsHidden());
 
         result.topTabTextColor = getColor("topTabTextColor", getDefaultTopTabTextColor());
+        result.topTabIconColor = getColor("topTabIconColor", getDefaultTopTabIconColor());
+        result.selectedTopTabIconColor = getColor("selectedTopTabIconColor", getDefaultSelectedTopTabIconColor());
         result.selectedTopTabTextColor = getColor("selectedTopTabTextColor", getDefaultSelectedTopTabTextColor());
         result.selectedTopTabIndicatorHeight = getInt("selectedTopTabIndicatorHeight", getDefaultSelectedTopTabIndicatorHeight());
         result.selectedTopTabIndicatorColor = getColor("selectedTopTabIndicatorColor", getDefaultSelectedTopTabIndicatorColor());
@@ -106,6 +108,10 @@ public class StyleParamsParser {
         return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.selectedTopTabTextColor;
     }
 
+    private StyleParams.Color getDefaultSelectedTopTabIconColor() {
+        return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.selectedTopTabIconColor;
+    }
+
     private StyleParams.Color getDefaultNavigationColor() {
         return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.navigationBarColor;
     }
@@ -158,6 +164,10 @@ public class StyleParamsParser {
         return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.topTabTextColor;
     }
 
+    private StyleParams.Color getDefaultTopTabIconColor() {
+        return AppStyle.appStyle == null ? new StyleParams.Color() : AppStyle.appStyle.topTabIconColor;
+    }
+
     private boolean getDefaultBackButtonHidden() {
         return AppStyle.appStyle != null && AppStyle.appStyle.backButtonHidden;
     }

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

@@ -0,0 +1,23 @@
+package com.reactnativenavigation.params.parsers;
+
+import android.graphics.drawable.Drawable;
+import android.os.Bundle;
+
+import com.reactnativenavigation.react.ImageLoader;
+
+class TabIconParser extends Parser {
+
+    private Bundle params;
+
+    TabIconParser(Bundle params) {
+        this.params = params;
+    }
+
+    public Drawable parse() {
+        Drawable tabIcon = null;
+        if (hasKey(params, "icon")) {
+            tabIcon = ImageLoader.loadImage(params.getString("icon"));
+        }
+        return tabIcon;
+    }
+}

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

@@ -8,7 +8,7 @@ import com.reactnativenavigation.params.PageParams;
 
 import java.util.List;
 
-public class TopTabParamsParser extends Parser {
+class TopTabParamsParser extends Parser {
     private static final String KEY_SCREEN_ID = "screenId";
     private static final String KEY_TITLE = "title";
     private static final String NAVIGATION_PARAMS = "navigationParams";
@@ -28,6 +28,7 @@ public class TopTabParamsParser extends Parser {
         PageParams result = new PageParams();
         result.screenId = params.getString(KEY_SCREEN_ID);
         result.title = params.getString(KEY_TITLE);
+        result.tabIcon = new TabIconParser(params).parse();
         result.navigationParams = new NavigationParams(params.getBundle(NAVIGATION_PARAMS));
         result.leftButton = ButtonParser.parseLeftButton(params);
         result.rightButtons = ButtonParser.parseRightButton(params);

android/app/src/main/java/com/reactnativenavigation/screens/ViewPagerScreen.java

@@ -5,13 +5,12 @@ import android.support.design.widget.TabLayout;
 import android.support.v4.view.ViewPager;
 import android.support.v7.app.AppCompatActivity;
 
-import com.reactnativenavigation.events.Event;
-import com.reactnativenavigation.events.ViewPagerScreenChangedEvent;
 import com.reactnativenavigation.params.BaseScreenParams;
 import com.reactnativenavigation.params.PageParams;
 import com.reactnativenavigation.params.ScreenParams;
 import com.reactnativenavigation.views.ContentView;
 import com.reactnativenavigation.views.LeftButtonOnClickListener;
+import com.reactnativenavigation.views.TopTabs;
 
 import java.util.ArrayList;
 import java.util.List;
@@ -35,10 +34,11 @@ public class ViewPagerScreen extends Screen {
 
     @Override
     protected void createContent() {
-        TabLayout tabLayout = topBar.initTabs();
+        TopTabs topTabs = topBar.initTabs();
         createViewPager();
         addPages();
-        setupViewPager(tabLayout);
+        setupViewPager(topTabs);
+        setTopTabIcons(topTabs);
     }
 
     private void createViewPager() {
@@ -79,6 +79,16 @@ public class ViewPagerScreen extends Screen {
         tabLayout.setupWithViewPager(viewPager);
     }
 
+    private void setTopTabIcons(TopTabs topTabs) {
+        for (int i = 0; i < topTabs.getTabCount(); i++) {
+            PageParams pageParams = screenParams.topTabParams.get(i);
+            if (pageParams.tabIcon != null) {
+                topTabs.getTabAt(i).setIcon(pageParams.tabIcon);
+            }
+        }
+        topTabs.setTopTabsIconColor(screenParams.styleParams);
+    }
+
     private void addContent(ContentView contentView) {
         LayoutParams params = new LayoutParams(MATCH_PARENT, MATCH_PARENT);
         viewPager.addView(contentView, params);

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

@@ -4,7 +4,6 @@ import android.content.Context;
 import android.graphics.Color;
 import android.os.Build;
 import android.support.design.widget.AppBarLayout;
-import android.support.design.widget.TabLayout;
 import android.view.ViewGroup;
 import android.widget.FrameLayout;
 
@@ -93,7 +92,7 @@ public class TopBar extends AppBarLayout {
         titleBar.setRightButtons(titleBarButtons, navigatorEventId);
     }
 
-    public TabLayout initTabs() {
+    public TopTabs initTabs() {
         topTabs = new TopTabs(getContext());
         addView(topTabs);
         return topTabs;

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

@@ -5,6 +5,7 @@ import android.content.res.ColorStateList;
 import android.support.design.widget.TabLayout;
 
 import com.reactnativenavigation.params.StyleParams;
+import com.reactnativenavigation.views.utils.TopTabsIconColorHelper;
 
 public class TopTabs extends TabLayout {
 
@@ -37,4 +38,18 @@ public class TopTabs extends TabLayout {
 
         setTabTextColors(tabTextColor, selectedTabColor);
     }
+
+    public void setTopTabsIconColor(StyleParams style) {
+        new TopTabsIconColorHelper(this, style).colorIcons(getSelectedIconColor(), getUnselectedIconColor());
+    }
+
+    private int getSelectedIconColor() {
+        ColorStateList originalTabColors = getTabTextColors();
+        return originalTabColors != null ? originalTabColors.getColorForState(TabLayout.SELECTED_STATE_SET, -1) : -1;
+    }
+
+    private int getUnselectedIconColor() {
+        ColorStateList originalTabColors = getTabTextColors();
+        return originalTabColors != null ? originalTabColors.getColorForState(TabLayout.SELECTED_STATE_SET, -1) : -1;
+    }
 }

android/app/src/main/java/com/reactnativenavigation/views/utils/TopTabsIconColorHelper.java

@@ -0,0 +1,65 @@
+package com.reactnativenavigation.views.utils;
+
+import android.content.res.ColorStateList;
+import android.graphics.drawable.Drawable;
+import android.support.v4.graphics.drawable.DrawableCompat;
+
+import com.reactnativenavigation.params.StyleParams;
+import com.reactnativenavigation.views.TopTabs;
+
+public class TopTabsIconColorHelper {
+    private final TopTabs topTabs;
+    private final StyleParams styleParams;
+
+    public TopTabsIconColorHelper(TopTabs topTabs, StyleParams styleParams) {
+        this.topTabs = topTabs;
+        this.styleParams = styleParams;
+    }
+
+    public void colorIcons(int selectedIconColor, int unselectedIconColor) {
+        ColorStateList colorStateList = getIconColorStateList(styleParams, selectedIconColor, unselectedIconColor);
+        colorIcons(colorStateList);
+    }
+
+    private ColorStateList getIconColorStateList(StyleParams style, int selectedIconColor, int unselectedIconColor) {
+        int selectedColor = selectedIconColor;
+        int unselectedColor = unselectedIconColor;
+        if (style.topTabIconColor.hasColor()) {
+            unselectedColor = style.topTabIconColor.getColor();
+        }
+        if (style.selectedTopTabIconColor.hasColor()) {
+            selectedColor = style.selectedTopTabIconColor.getColor();
+        }
+        return createColorStateList(selectedColor, unselectedColor);
+    }
+
+    private ColorStateList createColorStateList(int selectedColor, int unselectedIconColor) {
+        int[][] states = new int[][] {
+                new int[]{android.R.attr.state_pressed},
+                new int[]{android.R.attr.state_selected},
+                new int[]{android.R.attr.state_enabled},
+                new int[]{android.R.attr.state_focused, android.R.attr.state_pressed},
+                new int[]{-android.R.attr.state_enabled},
+                new int[]{}
+        };
+        int[] colors = new int[]{
+                selectedColor,
+                selectedColor,
+                unselectedIconColor,
+                unselectedIconColor,
+                unselectedIconColor,
+                unselectedIconColor
+        };
+        return new ColorStateList(states, colors);
+    }
+
+    private void colorIcons(ColorStateList colorStateList) {
+        for (int i = 0; i < topTabs.getTabCount(); i++) {
+            Drawable icon = topTabs.getTabAt(i).getIcon();
+            if (icon != null) {
+                icon = DrawableCompat.wrap(icon);
+                DrawableCompat.setTintList(icon, colorStateList);
+            }
+        }
+    }
+}

src/deprecated/platformSpecificDeprecated.android.js

@@ -43,6 +43,7 @@ function adaptTopTabs(screen, navigatorID) {
       tab.navigatorID = navigatorID;
     }
     tab.screen = tab.screenId;
+    addTabIcon(tab);
     addNavigatorButtons(tab);
     adaptNavigationParams(tab);
     addNavigationStyleParams(tab);
@@ -139,6 +140,8 @@ function convertStyleParams(originalStyleObject) {
     drawBelowTopBar: !originalStyleObject.drawUnderNavBar,
 
     topTabTextColor: processColor(originalStyleObject.topTabTextColor),
+    topTabIconColor: processColor(originalStyleObject.topTabIconColor),
+    selectedTopTabIconColor: processColor(originalStyleObject.selectedTopTabIconColor),
     selectedTopTabTextColor: processColor(originalStyleObject.selectedTopTabTextColor),
     selectedTopTabIndicatorHeight: originalStyleObject.selectedTopTabIndicatorHeight,
     selectedTopTabIndicatorColor: processColor(originalStyleObject.selectedTopTabIndicatorColor),