[Android Wear] BoxInsetLayout, explained.

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.

ok2

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.

Captura de pantalla 2015-02-22 a la(s) 18.49.24

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:

Captura de pantalla 2015-02-22 a la(s) 18.51.06That’s the BoxInsetLayout’s essentials.

Have a nice coding!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s