feat(android): floating bottom navigtion

tidev · Aug 13, 2021 · af619dc · af619dc
1 parent 5fdf4ff
commit af619dc
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 14 deletions.
diff --git a/android/modules/ui/res/drawable/titanium_rounded_corners.xml b/android/modules/ui/res/drawable/titanium_rounded_corners.xml
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android">
+	<solid android:color="#FFFFFF" />
+	<corners android:radius="17dp" />
+</shape>
diff --git a/...ules/ui/src/java/ti/modules/titanium/ui/widget/tabgroup/TiUIBottomNavigationTabGroup.java b/...ules/ui/src/java/ti/modules/titanium/ui/widget/tabgroup/TiUIBottomNavigationTabGroup.java
@@ -6,17 +6,6 @@
  */
 package ti.modules.titanium.ui.widget.tabgroup;
 
-import java.util.ArrayList;
-
-import org.appcelerator.kroll.common.Log;
-import org.appcelerator.titanium.TiBaseActivity;
-import org.appcelerator.titanium.TiC;
-import org.appcelerator.titanium.TiDimension;
-import org.appcelerator.titanium.proxy.TiViewProxy;
-import org.appcelerator.titanium.util.TiConvert;
-import org.appcelerator.titanium.util.TiUIHelper;
-import org.appcelerator.titanium.view.TiCompositeLayout;
-
 import android.annotation.SuppressLint;
 import android.content.res.ColorStateList;
 import android.graphics.Rect;
@@ -25,6 +14,7 @@
 import android.view.MenuItem;
 import android.view.View;
 import android.view.ViewParent;
+
 import androidx.annotation.ColorInt;
 import androidx.core.graphics.ColorUtils;
 
@@ -34,6 +24,18 @@
 import com.google.android.material.bottomnavigation.BottomNavigationView;
 import com.google.android.material.bottomnavigation.LabelVisibilityMode;
 
+import org.appcelerator.kroll.common.Log;
+import org.appcelerator.titanium.TiBaseActivity;
+import org.appcelerator.titanium.TiC;
+import org.appcelerator.titanium.TiDimension;
+import org.appcelerator.titanium.proxy.TiViewProxy;
+import org.appcelerator.titanium.util.TiConvert;
+import org.appcelerator.titanium.util.TiUIHelper;
+import org.appcelerator.titanium.view.TiCompositeLayout;
+import org.appcelerator.titanium.R;
+
+import java.util.ArrayList;
+
 import ti.modules.titanium.ui.TabGroupProxy;
 import ti.modules.titanium.ui.TabProxy;
 
@@ -80,6 +82,11 @@ public void addViews(TiBaseActivity activity)
 															   activity.getPackageName());
 		this.mBottomNavigationHeightValue = activity.getResources().getDimensionPixelSize(resourceID);
 
+		int paddingLeft = proxy.getProperties().optInt(TiC.PROPERTY_PADDING_LEFT, 0);
+		int paddingRight = proxy.getProperties().optInt(TiC.PROPERTY_PADDING_RIGHT, 0);
+		int paddingBottom = proxy.getProperties().optInt(TiC.PROPERTY_PADDING_BOTTOM, 0);
+		boolean isFloating = (paddingLeft != 0 || paddingRight != 0 || paddingBottom != 0);
+
 		// Create the bottom tab navigation view.
 		this.mBottomNavigationView = new BottomNavigationView(activity) {
 			@Override
@@ -101,12 +108,15 @@ protected void onLayout(boolean hasChanged, int left, int top, int right, int bo
 				// Update bottom inset based on tab bar's height and position in window.
 				super.onLayout(hasChanged, left, top, right, bottom);
 				insetsProvider.setBottomBasedOn(this);
+				if (isFloating) {
+					setBackgroundResource(R.drawable.titanium_rounded_corners);
+					setElevation(8);
+				}
 			}
 		};
 		this.mBottomNavigationView.setFitsSystemWindows(true);
 		this.mBottomNavigationView.setItemRippleColor(
 			TiUIAbstractTabGroup.createRippleColorStateListFrom(getColorPrimary()));
-
 		// Add tab bar and view pager to the root Titanium view.
 		// Note: If getFitsSystemWindows() returns false, then Titanium window's "extendSafeArea" is set true.
 		//       This means the bottom tab bar should overlap/overlay the view pager content.
@@ -115,15 +125,22 @@ protected void onLayout(boolean hasChanged, int left, int top, int right, int bo
 			TiCompositeLayout.LayoutParams params = new TiCompositeLayout.LayoutParams();
 			params.autoFillsWidth = true;
 			params.autoFillsHeight = true;
-			if (compositeLayout.getFitsSystemWindows()) {
+
+			if (compositeLayout.getFitsSystemWindows() && !isFloating) {
 				params.optionBottom = new TiDimension(mBottomNavigationHeightValue, TiDimension.TYPE_BOTTOM);
 			}
 			compositeLayout.addView(this.tabGroupViewPager, params);
 		}
 		{
 			TiCompositeLayout.LayoutParams params = new TiCompositeLayout.LayoutParams();
 			params.autoFillsWidth = true;
-			params.optionBottom = new TiDimension(0, TiDimension.TYPE_BOTTOM);
+			if (isFloating) {
+				params.optionLeft = new TiDimension(paddingLeft, TiDimension.TYPE_LEFT);
+				params.optionRight = new TiDimension(paddingRight, TiDimension.TYPE_RIGHT);
+				params.optionBottom = new TiDimension(paddingBottom, TiDimension.TYPE_BOTTOM);
+			} else {
+				params.optionBottom = new TiDimension(0, TiDimension.TYPE_BOTTOM);
+			}
 			compositeLayout.addView(this.mBottomNavigationView, params);
 		}
 

diff --git a/apidoc/Titanium/UI/TabGroup.yml b/apidoc/Titanium/UI/TabGroup.yml
@@ -333,7 +333,34 @@ properties:
         A value of `transparent` results in a semi-opaque black bar style.
     type: [String, Titanium.UI.Color]
     platforms: [iphone, ipad, android, macos]
+
+  - name: paddingLeft
+    summary: Left padding of bottom navigation
+    description: |
+        When using [TABS_STYLE_BOTTOM_NAVIGATION](Titanium.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION) you can set the padding to have
+        a floating bottom navigation
+    since: "10.1.0"
+    type: Number
+    platforms: [android]
+
+  - name: paddingRight
+    summary: Right padding of bottom navigation
+    description: |
+        When using [TABS_STYLE_BOTTOM_NAVIGATION](Titanium.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION) you can set the padding to have
+        a floating bottom navigation
+    since: "10.1.0"
+    type: Number
+    platforms: [android]
 
+  - name: paddingBottom
+    summary: Bottom padding of bottom navigation
+    description: |
+        When using [TABS_STYLE_BOTTOM_NAVIGATION](Titanium.UI.Android.TABS_STYLE_BOTTOM_NAVIGATION) you can set the padding to have
+        a floating bottom navigation
+    since: "10.1.0"
+    type: Number
+    platforms: [android]
+
   - name: translucent
     summary: Boolean value indicating if the nav bar (typically for the **More** tab), is translucent.
     platforms: [iphone, ipad, macos]
@@ -459,6 +486,15 @@ properties:
         the TabGroup with a list of Tabs in a controller at the bottom of the screen. The recommended usage of this 
         style is for items count between three and five: (https://material.io/design/components/bottom-navigation.html#usage) 
         In Android it is limited to supporting a maximum number of five tabs.
+        You can use paddingLeft, paddingRight, paddingBottom to create a floating bottom navigation. If you want to change the
+        radius or background color you'll need to create `/app/platform/android/res/drawable/titanium_rounded_corners.xml` and set it to
+        ```xml
+        <?xml version="1.0" encoding="UTF-8"?>
+        <shape xmlns:android="http://schemas.android.com/apk/res/android">
+            <solid android:color="#FFFFFF" />
+            <corners android:radius="7dp" />
+        </shape>
+        ```
 
     availability: creation
     constants: Titanium.UI.Android.TABS_STYLE_*