Designing Layouts for Wearables Android

So while designing layouts for wearable we need to keep both above types in mind so that our layout design looks perfectly fine on both round and square screens.

Android wearable fall's into two categories :

1. Round Shape
2. Square Shape

Now, question is how should we achieve this.Well i encountered some issues on round screen.My screen layout included text and image.So whenever text was large it was cutting in round edges from left side.

So after sometime,i camed to know about BoxInsetLayout which comes under android.support.wearable.view.BoxInsetLayout included in Wearable UI Library .
This helps us define a single layout that works both in round and square screens for wearbles.

Round Shape View

 Square Shape View

Now how to Make use of this lets have a look :

<?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_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff"
    android:padding="20dp">

    <android.support.v4.view.ViewPager
        android:id="@+id/myviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.wearable.view.BoxInsetLayout>

1. android:padding="20dp" : Now this gives the padding to the BoxInsetLayout from all directions which creates a kind of rectangle for us and we've to work inside it.And this paddingapplies only to square screen of wearable as window insets on round devices are larger than 15 dp.

Note :BoxInsetLayout act as a parent and we have to create our layout inside this parent(like we do inside linear layout etc).

 2. android:padding="5dp" for our child view in this case view pager is our child : This padding applies on both round and square screens.
 
    For Square screen : this makes 20+5 = 25 dp padding
    For Round  screen :this makes 5    = 5 dp padding
 
 3. app:layout_box="all" :This line ensures that the ViewPager 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.

References : https://developer.android.com/training/wearables/ui/layouts.html#add-library

happy coding!!

Cheers !!