Android Wear 进阶 - 3.1 Creating Custom UIs for Wear Devices-Defining Layouts 创建自定义的手表设备UIs-定义布局

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1：定义布局

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Defining Layouts

Previous Next

This lesson teaches you to

You should also read

Android Wear Design Principles

Video

Full Screen Apps for Android Wear

Wearables use the same layout techniques as handheld Android devices, but need to be designed with specific constraints. Do not port functionality and the UI from a handheld app and expect a good experience. For more information on how to design great wearable apps, read the Android Wear Design Guidelines.

When you create layouts for Android Wear apps, you need to account for devices with square and round screens. Any content placed near the corners of the screen may be cropped on round Android Wear devices, so layouts designed for square screens do not work well on round devices. For a demonstration of this type of problem, see the video Full Screen Apps for Android Wear.

<翻译>手表端和手机端使用相同的布局技术，但是需要用特定的限制（constraint）来设计。布局方面不要使用使用手机端的应用端口功能和UI来实现很好的体验。关于更多的信息请查看怎么设计手表应用，阅读Android Wear Design Guidelines.

当你创建了一个Android 手表应用，你需要考虑圆形后方形的界面。任何的放在边角的内容在运行的android手表设备上面都有可能会阶段。所以为方形的布局设计在运行的设备上面运行的不好。关于这个类型的问题，可以查看这个视频Full Screen Apps for Android Wear.

例如，图片1显示布局在圆形和方形的界面上面的显示

For example, figure 1 shows how the following layout looks on square and round screens:

Figure 1. Demonstration of how a layout designed for square screens does not work well on round screens.

图片1：演示怎么在圆形和方形的手表上面不能运行正常

<span class="tag" style="color: rgb(0, 0, 136);"><LinearLayout</span><span class="pln"> </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:tools</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/tools"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:orientation</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"vertical"</span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln">

    </span><span class="tag" style="color: rgb(0, 0, 136);"><TextView</span><span class="pln">
        </span><span class="atn" style="color: rgb(136, 34, 136);">android:id</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@+id/text"</span><span class="pln">
        </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"wrap_content"</span><span class="pln">
        </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"wrap_content"</span><span class="pln">
        </span><span class="atn" style="color: rgb(136, 34, 136);">android:text</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@string/hello_square"</span><span class="pln"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln">
</span><span class="tag" style="color: rgb(0, 0, 136);"></LinearLayout></span>

The text does not display correctly on devices with round screens.

The Wearable UI Library provides two different approaches to solve this problem:

Define different layouts for square and round devices. Your app detects the shape of the device screen and inflates the correct layout at runtime.
Use a special layout included in the library for both square and round devices. This layout applies different window insets depending on the shape of the device screen.

You typically use the first approach when you want your app to look different depending on the shape of the device screen. You use the second approach when you want to use a similar layout on both screen shapes without having views cropped near the edges of round screens.

<翻译>

内容在环行的屏幕上面显示不正确。

手表UI库提供了两个不同的方法去解决这个问题：
给圆形的和方形的设备定义不同的布局。你的应用在运行的时候检测到设备的界面并且填充正确的布局
使用特别的布局包含了给环行和方形的设备的库。这个布局依据设备的尺寸来应用不同的窗口插入（inset）

Add the Wearable UI Library添加手表UI库

Android Studio includes the Wearable UI Library on your wear module by default when you use the Project Wizard. To compile your project with this library, ensure that the Extras > Google Repository package is installed in the Android SDK manager and that the following dependency is included in the build.gradle file of yourwear module:

<span class="pln">dependencies </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln">
    compile fileTree</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln">dir</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln"> </span><span class="str" style="color: rgb(136, 0, 0);">'libs'</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="pln"> include</span><span class="pun" style="color: rgb(102, 102, 0);">:</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">[</span><span class="str" style="color: rgb(136, 0, 0);">'*.jar'</span><span class="pun" style="color: rgb(102, 102, 0);">])</span><span class="pln">
    </span><span style="color: inherit;"><span class="pln"><span class="pln">compile </span></span><span class="str" style="color: rgb(136, 0, 0);"><span class="str">'com.google.android.support:wearable:+'</span></span></span><span class="pln">
    compile </span><span class="str" style="color: rgb(136, 0, 0);">'com.google.android.gms:play-services-wearable:+'</span><span class="pln">
</span><span class="pun" style="color: rgb(102, 102, 0);">}</span>

The 'com.google.android.support:wearable' dependency is required to implement the layout techniques shown in the following sections.

Browse the API reference documentation for the Wearable UI Library classes.

<翻译>当你使用项目向导的时候，Android Studio 默认的情况下是将手表UI 库包含在了wear 的模型中了。为了让你的项目编译这些库，保证在Extras->Google 资源库（Repository）包已经安装在Android SDK 管理其中，下面的依赖已经包含在你的wear模型的build.gradle的文件中了

这个 'com.google.android.support:wearable' 依赖对于实现下面章节的布局显示是必须的。展开 API reference documentation 查看手表UI库的类

Specify Different Layouts for Square and Round Screens

给方形和圆形屏幕制定不同的布局

The WatchViewStub class included in the Wearable UI Library lets you specify different layout definitions for square and round screens. This class detects the screen shape at runtime and inflates the corresponding layout.

To use this class for handling different screen shapes in your app:

Add WatchViewStub as the main element of your activity's layout.
Specify a layout definition file for square screens with the rectLayout attribute.
Specify a layout definition file for round screens with the roundLayout attribute.

Define your activity's layout as follows:

<翻译>WatchViewStub 类是包含了手表UI的库，可以是你制定不同的布局定义给方形和圆形的界面。这个类在运行的时候检测了屏幕的尺寸并且填充正确的布局

在你的应用中为了使用这个类来处理不同的屏幕尺寸：

1：将WatchViewStub 作为你的activity 布局的main element

2：通过rectLayout 属性来指定方形屏幕的布局定义

3：通过roundLayout属性来指定圆形的屏幕的布局定义

定义你的acitivyt布局如下

<span class="tag" style="color: rgb(0, 0, 136);"><android.support.wearable.view.WatchViewStub</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:app</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res-auto"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:tools</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/tools"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:id</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@+id/watch_view_stub"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
    </span><span style="font-weight: bold;"><span style="font-size: 18px;"><span style="color: inherit;"><span class="atn" style="color: rgb(136, 34, 136);"><span class="atn">app:rectLayout</span></span><span class="pun" style="color: rgb(102, 102, 0);"><span class="pun">=</span></span><span class="atv" style="color: rgb(136, 0, 0);"><span class="atv">"@layout/rect_activity_wear"</span></span></span><span class="pln">
   </span></span></span><span style="color: inherit;"><span style="font-weight: bold;"><span style="font-size: 18px;"><span class="atn" style="color: rgb(136, 34, 136);"><span class="atn">app:roundLayout</span></span><span class="pun" style="color: rgb(102, 102, 0);"><span class="pun">=</span></span></span></span><span class="atv" style="color: rgb(136, 0, 0);"><span class="atv"><strong><span style="font-size: 18px;">"@layout/round_activity_wear</span></strong>"</span></span></span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln">
</span><span class="tag" style="color: rgb(0, 0, 136);"></android.support.wearable.view.WatchViewStub></span>

Inflate this layout in your activity:

<span class="lit" style="color: rgb(0, 102, 102);">@Override</span><span class="pln">
</span><span class="kwd" style="color: rgb(0, 0, 136);">protected</span><span class="pln"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln"> onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Bundle</span><span class="pln"> savedInstanceState</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln">
    </span><span class="kwd" style="color: rgb(0, 0, 136);">super</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln">savedInstanceState</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln">
    setContentView</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">layout</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">activity_wear</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln">
</span><span class="pun" style="color: rgb(102, 102, 0);">}</span>

Then create different layout definition files for square and round screens. In this example, you need to create the files res/layout/rect_activity_wear.xml and res/layout/round_activity_wear.xml. You define these layouts in the same way that you create layouts for handheld apps, but taking into account the constraints of wearable devices. The system inflates the correct layout at runtime depending on the screen shape.

<翻译>然后创建不同的布局定义文件给方形和圆形的界面。在这个例子里面，你需要创建两个文件：res/layout/rect_activity_wear.xml and res/layout/round_activity_wear.xml.（对应的就是上面的属性里面的值）。你定义这些布局可以和你在手机端应用创建布局一样，但是要考虑手表设备的一致性。这个系统运行时依赖屏幕尺寸来添加正确的布局。

Accessing layout views访问布局view视图（很重要）

The layouts that you specify for square or round screens are not inflated until WatchViewStub detects the shape of the screen, so your app cannot access their views immediately. To access these views, set a listener in your activity to be notified when the shape-specific layout has been inflated:

<翻译>你给方形和圆形屏幕制定的布局，只有在WatchViewStub 检测到了屏幕尺寸的时候才会来填充这个布局。所以你的应用不能够立马访问到他们的view视图。

为了访问到这些视图，设置一个监听器在你的activity 中，当特定尺寸布局被填充的时候会通知这个监听器。

<span class="lit" style="color: rgb(0, 102, 102);">@Override</span><span class="pln">
</span><span class="kwd" style="color: rgb(0, 0, 136);">protected</span><span class="pln"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln"> onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">Bundle</span><span class="pln"> savedInstanceState</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln">
    </span><span class="kwd" style="color: rgb(0, 0, 136);">super</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">onCreate</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln">savedInstanceState</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln">
    setContentView</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">layout</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">activity_wear</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln">

    </span><span class="typ" style="color: rgb(102, 0, 102);">WatchViewStub</span><span class="pln"> stub </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">WatchViewStub</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln"> findViewById</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">id</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">watch_view_stub</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln">
    stub</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">setOnLayoutInflatedListener</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="kwd" style="color: rgb(0, 0, 136);">new</span><span class="pln"> </span><span class="typ" style="color: rgb(102, 0, 102);">WatchViewStub</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="typ" style="color: rgb(102, 0, 102);">OnLayoutInflatedListener</span><span class="pun" style="color: rgb(102, 102, 0);">()</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln">
        </span><span class="lit" style="color: rgb(0, 102, 102);">@Override</span><span class="pln"> </span><span class="kwd" style="color: rgb(0, 0, 136);">public</span><span class="pln"> </span><span class="kwd" style="color: rgb(0, 0, 136);">void</span><span class="pln"> onLayoutInflated</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">WatchViewStub</span><span class="pln"> stub</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">{</span><span class="pln">
            </span><span class="com">// Now you can access your views</span><span class="pln">
            </span><span class="typ" style="color: rgb(102, 0, 102);">TextView</span><span class="pln"> tv </span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="pln"> </span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="typ" style="color: rgb(102, 0, 102);">TextView</span><span class="pun" style="color: rgb(102, 102, 0);">)</span><span class="pln"> stub</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">findViewById</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="pln">R</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">id</span><span class="pun" style="color: rgb(102, 102, 0);">.</span><span class="pln">text</span><span class="pun" style="color: rgb(102, 102, 0);">);</span><span class="pln">
            </span><span class="pun" style="color: rgb(102, 102, 0);">...</span><span class="pln">
        </span><span class="pun" style="color: rgb(102, 102, 0);">}</span><span class="pln">
    </span><span class="pun" style="color: rgb(102, 102, 0);">});</span><span class="pln">
</span><span class="pun" style="color: rgb(102, 102, 0);">}</span>

Use a Shape-Aware Layout 使用尺寸感应布局。

Figure 2. Window insets on a round screen.

The BoxInsetLayout class included in the Wearable UI Library extends FrameLayout and lets you define a single layout that works for both square and round screens. This class applies the required window insets depending on the screen shape and lets you easily align views on the center or near the edges of the screen.

The gray square in figure 2 shows the area whereBoxInsetLayout can automatically place its child views on round screens after applying the required window insets. To be displayed inside this area, children views specifythe layout_boxatribute with these values:

A combination of top, bottom, left, and right. For example, "left|top" positions the child's left and top edges inside the gray square in figure 2.
The all value positions all the child's content inside the gray square in figure 2.

On square screens, the window insets are zero and the layout_box attribute is ignored.

<翻译>BoxInsetLayout (Inset 有插入，插图的意思)类包含了手表UI库，它集成了FrameLayout并且可以让你定义一个单独的布局，这个布局可以在方形和圆形的手表上面很好的运行。这个类依据屏幕尺寸应用需要的窗口插入，这个类还让你容易把view视图对其到中心或者靠近屏幕的边缘的位置。

在图片2中的灰色的正方形中显示了区域，BoxInsetLayout在应用了需要的窗口视图时候，可以自动的将他的子视图view 放到这个区域。为了能够显示在这个区域，子视图需要制定layout_box属性为一下的值：

top，bottom，left和right的合并，例如“left|top” 表示子视图的位置显示在灰色方块的左上边缘

all的值将所有的子视图内容放置在灰色区域内部

在方形屏幕，这个窗口插入是0，并且layout_box 属性会被忽略。

Figure 3. A layout definition that works on both square and round screens.

The layout shown in figure 3 uses the <BoxInsetLayout> element and works on square and round screens:

<翻译> 图片3 一个在方形和圆形屏幕上面都运行的很好的布局定义

在图片3中布局使用了<BoxInsetLayout> 项目并且布局在方形和圆形屏上面运行的很好

<span class="tag" style="color: rgb(0, 0, 136);"><</span><span style="color: inherit;"><span class="tag" style="color: rgb(0, 0, 136);">android.support.wearable.view.BoxInsetLayout</span></span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:android</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res/android"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">xmlns:app</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"http://schemas.android.com/apk/res-auto"</span><span class="pln">
    </span><span style="color: inherit;"><span style="font-weight: bold;"><span class="atn" style="color: rgb(136, 34, 136);"><span class="atn">android:background</span></span><span class="pun" style="color: rgb(102, 102, 0);"><span class="pun">=</span></span><span class="atv" style="color: rgb(136, 0, 0);"><span class="atv">"@drawable/robot_background"</span></span></span></span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
    </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
   <strong> </strong></span><span style="font-weight: bold;"><span style="color: inherit;"><span class="atn" style="color: rgb(136, 34, 136);"><span class="atn">android:padding</span></span><span class="pun" style="color: rgb(102, 102, 0);"><span class="pun">=</span></span><span class="atv" style="color: rgb(136, 0, 0);"><span class="atv">"15dp"</span></span></span><span class="tag" style="color: rgb(0, 0, 136);">></span></span><span class="pln">

    </span><span class="tag" style="color: rgb(0, 0, 136);"><FrameLayout</span><span class="pln">
        </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
        </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
        </span><span style="color: inherit;"><span style="font-weight: bold;"><span class="atn" style="color: rgb(136, 34, 136);"><span class="atn">android:padding</span></span><span class="pun" style="color: rgb(102, 102, 0);"><span class="pun">=</span></span><span class="atv" style="color: rgb(136, 0, 0);"><span class="atv">"5dp"</span></span></span></span><span class="pln">
       <span style="font-size: 32px;"> </span></span><span style="font-size: 32px; color: rgb(255, 0, 0);"><strong><span class="atn"><span class="atn">app:layout_box</span></span><span class="pun"><span class="pun">=</span></span><span class="atv"><span class="atv">"all"</span></span></strong></span><span class="tag" style="color: rgb(0, 0, 136);">></span><span class="pln">

        </span><span class="tag" style="color: rgb(0, 0, 136);"><TextView</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:gravity</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"center"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"wrap_content"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"match_parent"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:text</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@string/sometext"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:textColor</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@color/black"</span><span class="pln"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln">

        </span><span class="tag" style="color: rgb(0, 0, 136);"><ImageButton</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:background</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@null"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_gravity</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"bottom|left"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"50dp"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"50dp"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:src</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/ok"</span><span class="pln"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln">

        </span><span class="tag" style="color: rgb(0, 0, 136);"><ImageButton</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:background</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@null"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_gravity</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"bottom|right"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_height</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"50dp"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:layout_width</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"50dp"</span><span class="pln">
            </span><span class="atn" style="color: rgb(136, 34, 136);">android:src</span><span class="pun" style="color: rgb(102, 102, 0);">=</span><span class="atv" style="color: rgb(136, 0, 0);">"@drawable/cancel"</span><span class="pln"> </span><span class="tag" style="color: rgb(0, 0, 136);">/></span><span class="pln">
    </span><span class="tag" style="color: rgb(0, 0, 136);"></FrameLayout></span><span class="pln">
</span><span class="tag" style="color: rgb(0, 0, 136);"></android.support.wearable.view.BoxInsetLayout></span>

Notice the parts of the layout marked in bold:

android:padding="15dp"

This line assigns padding to the <BoxInsetLayout> element. Because the window insets on round devices are larger than 15dp, this padding only applies to square screens.
android:padding="5dp"

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.
app:layout_box="all"

This line ensures that the FrameLayout element and its children are boxed inside the area defined by the window insets on round screens.This line has no effect on square screens.