diff --git a/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js b/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js index 26f03f7c9..ba5541e8a 100644 --- a/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js +++ b/Libraries/Components/ToolbarAndroid/ToolbarAndroid.android.js @@ -125,6 +125,24 @@ var ToolbarAndroid = React.createClass({ * Sets the toolbar title color. */ titleColor: ReactPropTypes.string, + /** + * Sets the content inset for the toolbar starting edge. + * + * The content inset affects the valid area for Toolbar content other than + * the navigation button and menu. Insets define the minimum margin for + * these components and can be used to effectively align Toolbar content + * along well-known gridlines. + */ + contentInsetStart: ReactPropTypes.number, + /** + * Sets the content inset for the toolbar ending edge. + * + * The content inset affects the valid area for Toolbar content other than + * the navigation button and menu. Insets define the minimum margin for + * these components and can be used to effectively align Toolbar content + * along well-known gridlines. + */ + contentInsetEnd: ReactPropTypes.number, /** * Used to set the toolbar direction to RTL. * In addition to this property you need to add diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbarManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbarManager.java index 36aac87e7..0a157d099 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbarManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/toolbar/ReactToolbarManager.java @@ -26,6 +26,7 @@ import com.facebook.react.R; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.ReadableMap; import com.facebook.react.common.MapBuilder; +import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ReactProp; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.UIManagerModule; @@ -100,6 +101,22 @@ public class ReactToolbarManager extends ViewGroupManager { } } + @ReactProp(name = "contentInsetStart", defaultFloat = Float.NaN) + public void setContentInsetStart(ReactToolbar view, float insetStart) { + int inset = Float.isNaN(insetStart) ? + getDefaultContentInsets(view.getContext())[0] : + Math.round(PixelUtil.toPixelFromDIP(insetStart)); + view.setContentInsetsRelative(inset, view.getContentInsetEnd()); + } + + @ReactProp(name = "contentInsetEnd", defaultFloat = Float.NaN) + public void setContentInsetEnd(ReactToolbar view, float insetEnd) { + int inset = Float.isNaN(insetEnd) ? + getDefaultContentInsets(view.getContext())[1] : + Math.round(PixelUtil.toPixelFromDIP(insetEnd)); + view.setContentInsetsRelative(view.getContentInsetStart(), inset); + } + @ReactProp(name = "nativeActions") public void setActions(ReactToolbar view, @Nullable ReadableArray actions) { view.setActions(actions); @@ -148,6 +165,34 @@ public class ReactToolbarManager extends ViewGroupManager { return true; } + private int[] getDefaultContentInsets(Context context) { + Resources.Theme theme = context.getTheme(); + TypedArray toolbarStyle = null; + TypedArray contentInsets = null; + + try { + toolbarStyle = theme + .obtainStyledAttributes(new int[]{R.attr.toolbarStyle}); + + int toolbarStyleResId = toolbarStyle.getResourceId(0, 0); + + contentInsets = theme.obtainStyledAttributes( + toolbarStyleResId, new int[]{ + R.attr.contentInsetStart, + R.attr.contentInsetEnd, + }); + + int contentInsetStart = contentInsets.getDimensionPixelSize(0, 0); + int contentInsetEnd = contentInsets.getDimensionPixelSize(1, 0); + + return new int[] {contentInsetStart, contentInsetEnd}; + } finally { + recycleQuietly(toolbarStyle); + recycleQuietly(contentInsets); + } + + } + private static int[] getDefaultColors(Context context) { Resources.Theme theme = context.getTheme(); TypedArray toolbarStyle = null;