WatchViewStub round xml but loads square layout

Question

I'm a noob to android wear developing, and so far so good. I have succesfully created my first hello world app and run this on my LG G watch R.

The problem I'm running into it is the following; I'm using the WatchViewStub as describe in the developer site, the WatchViewStub is suppose to detect in what type of screen the application is running. But apparently the WatchViewStub is half doing what it suppose to do, meaning the apps deploys with the right xml file "round_activity" with the right text but it still shows with a square layout on the device.

To my understanding WatchViewStub is suppose to fix text automatically when detecting a round display. But in my case it gets the right text from the right round_activity xml file but it displays it in a square format. This is my code:

MainActivity:

public class MainActivity extends Activity {

    public TextView mTextView;

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

        WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub);
        stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() {
            @Override public void onLayoutInflated(WatchViewStub stub) {
                // Now you can access your views

                 mTextView = (TextView) stub.findViewById(R.id.text);

            }
        });
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.wearable.view.WatchViewStub
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/watch_view_stub"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rectLayout="@layout/rect_activity_main"
    app:roundLayout="@layout/round_activity_main"
    tools:context=".MainActivity"
    tools:deviceIds="wear">

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

round_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:deviceIds="wear_square">

    <TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_round" />

</RelativeLayout>

square_activity.xml:

 <?xml version="1.0" encoding="utf-8"?>
    <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"
        android:orientation="vertical"
        tools:context=".MainActivity"
        tools:deviceIds="wear_square">

        <TextView android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/hello_square" />

    </RelativeLayout>

The only way I get my hello round world text shown properly is padding it to the center in the xml.

Does somebody knows why is this happening? Thank you guys in advance for the help

Answer 1

Change your round_activity.xml

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    tools:deviceIds="wear_square">

    <TextView android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_round" />

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

Answer 2

Got the same problem with the same watch... Fixed it by changing the Theme to default. The round/square detection is done by the theme.

Make sure your theme in your Manifest is: android:theme="@android:style/Theme.DeviceDefault"

Answer 3

You could make use of the BoxInsetLayout from the Wearable Support Library:

BoxInsetLayout is a screen shape-aware FrameLayout that can box its children in the center square of a round screen by using the layout_boxattribute.