BoxInsetLayout doesn't work

Question

I created sample android wear activity project in android studio v1.2.2. I deleted WatchViewStub and used this example to create activity with BoxInsetLayout. But BoxInsetLayout doesn't work correctly on Round Device. And I tested this on moto 360 android 5.1.1 and before update on moto 360 version 5.0.1. And I tested this on emulator. And It doesn't work at all. All time I see this:

but must be this

My code below:

activity_main.xml

<android.support.wearable.view.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="15dp">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        android:background="@color/red"
        app:layout_box="all">

        <TextView
            android:gravity="center"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="Hello Android Wear"
            android:textColor="@color/black" />

        <ImageButton
            android:background="@drawable/selector_btn_ok"
            android:layout_gravity="bottom|start"
            android:layout_height="50dp"
            android:layout_width="50dp" />

        <ImageButton
            android:background="@drawable/selector_btn_cancel"
            android:layout_gravity="bottom|end"
            android:layout_height="50dp"
            android:layout_width="50dp" />
    </FrameLayout>
</android.support.wearable.view.BoxInsetLayout>

Why doesn't it work? Where did I mistake? And How can I use correctly BoxInsetLayout on devices with Round screen?

Answer 1

The mistake is in your activity_main.xml, where you specified:

android:padding="15dp"

If you remove this, then it should work. BoxInsetLayout uses padding in the implementation, and you have changed the value which gives the incorrect output you observed.

(edit) It is important to note that BoxInsetLayout adjusts the padding in both itself, and also the child views. So make sure you do not change the padding values or things will break. You can try embedding a second FrameLayout if you want to have more control over the padding.

Answer 2

I removed android:padding="15dp" from BoxInsetLayout as Wayne Piekarski said. Now BoxInsetLayout works correctly, but I got a new problem: android:padding="5dp" in FrameLayout doesn't work. I experimented with activity_layout and I added id and changed padding to 20dp and I got this result for Round and Square screen:

My xml code for this

<android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/first_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/red"
        android:padding="20dp"
        app:layout_box="all">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Hello Android Wear"
            android:textColor="@color/black" />

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="bottom|start"
            android:background="@drawable/selector_btn_ok" />

        <ImageButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="bottom|end"
            android:background="@drawable/selector_btn_cancel" />
    </FrameLayout>
</android.support.wearable.view.BoxInsetLayout>

So, padding doesn't work in FrameLayout with id first_frame_layout. But in official documentation You can read about android:padding="5dp" in FrameLayout

This line assigns padding to the inner FrameLayout element. This padding applies to both square and round screens. The total padding between the buttons and the window insets is 20 dp on square screens (15+5) and 5 dp on round screens.

To quick fix this problem: I added new FrameLayout with id second_frame_layout as a child to FrameLayout with id first_frame_layout. I deleted padding from first_frame_layout and added padding="5dp" to second_frame_layout. I got this result:

final activity_main.xml

<android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/first_frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/red"
        app:layout_box="all">

        <FrameLayout
            android:id="@+id/second_frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/green"
            android:padding="5dp">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Hello Android Wear"
                android:textColor="@color/black" />

            <ImageButton
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="bottom|start"
                android:background="@drawable/selector_btn_ok" />

            <ImageButton
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_gravity="bottom|end"
                android:background="@drawable/selector_btn_cancel" />
        </FrameLayout>
    </FrameLayout>
</android.support.wearable.view.BoxInsetLayout>

Now. It works the way I want on Square and Round screens.