As it can be read in the official doc, a BoxInsetLayout is a FrameLayout with additional features for displaying correctly on Wearable devices.
Using the layout_box attribute when placing Views inside our BoxInsetLayout, we can specify how these views will be positioned in round screens.
If the screen shape is square, the layout_box attribute will be ignored, and views will be positioned as they would in a regular FrameLayout.
Example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.BoxInsetLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/root"
android:layout_width=“match_parent"
android:layout_height=“match_parent">
<TextView
android:id="@+id/topText"
app:layout_box="top|left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Top-Left boxed"/>
<TextView
android:id="@+id/bottomText"
android:layout_width="wrap_content"
android:layout_height=“wrap_content"
android:layout_gravity="bottom|right"
app:layout_box="bottom|right"
android:text="Bottom-Right boxed"/>
</android.support.wearable.view.BoxInsetLayout>
In this code we are placing two TextViews inside our BoxInsetLayout. One will be placed on the bottom right corner, and the other will be placed on the upper left corner. With the layout_box attribute, we are also specifying that we want them to adapt their position on round screens, so the first one will be boxed on the upper left corner, and the second one will be boxed on the bottom right.
If we display this layout in a square Android Wear device, we’ll see no difference between the BoxInsetLayout and a normal FrameLayout.
But when testing our layout on a round screen, we will see that the layout_box rules we added are affecting to the TextView’s position.
As we can see, the TextViews are in the corners of the round screen. If no layout_box attribute is specified, we would have this:
That’s the BoxInsetLayout’s essentials.
Have a nice coding!
Mobile Dev Stories 