Align element in corner of round Wear device

Question

I am trying to align an Object into the corner of my round_layout for a round android wear device. As you can see here:

The digitalclock will be out of bounds.

I've seen the android wear documentation at the google IO 2014, and some guy showed, that there's a line of code, in order to align the objects correctly. I want the digitalclock to be in the top left corner, but not out of the screen.

Has anyone got a suggestion?

Here's the XML file:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MyActivity"
tools:deviceIds="wear_round">

<DigitalClock
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@color/text"
    android:textSize="20sp"/>
</RelativeLayout>

Edit:

My xml layout file looks like this right now, for the round activity:

<?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:layout_height="match_parent"
    android:layout_width="match_parent">

   <TextView android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="1234567890"
       app:layout_box="top"/>

</android.support.wearable.view.BoxInsetLayout>

As You can see, I tried to use the BoxInsetLayout, but still, the output is following:

Although I used

app:layout_box="top"

The TextView is out of the screen's bounds. What have I overseen?

Answer 1

According for things shown on Google IO 2014 you should use BoxInsetLayout:
Check out this video <- about 6:04

You can see the usage of BoxInsetLayout in DelayedConfirmation sample code. Here is a content of main_activity.xml file:

<?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:layout_height="match_parent"
    android:layout_width="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/grey"
        app:layout_box="top">

        [...]

    </LinearLayout>
</android.support.wearable.view.BoxInsetLayout>

You can set the app:layout_box to following values: left|top|right|bottom or all. You can use all in your case, then all content will be kept within the box on every side. The effect for this layout is ignored when app is running on square watch.

---

EDIT:

I've just tested the code you've posted as "doesn't work":

<?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:layout_height="match_parent"
    android:layout_width="match_parent">

   <TextView android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="1234567890"
       app:layout_box="all"/>

</android.support.wearable.view.BoxInsetLayout>

With activity:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

I've told you to use the all value in layout_box, but even with top it works as should:

app:layout_box="top": (only offset from top)

app:layout_box="all": (offset from any side)