Building Wear OS Apps with XML UI

While Jetpack Compose is becoming increasingly popular for modern Android UI development, including Wear OS, many existing and simpler applications still utilize XML for defining layouts. Building Wear OS applications with XML UI remains a viable approach, especially for simpler watch faces, notifications, and certain lightweight interactive experiences. This comprehensive guide details how to construct effective Wear OS apps using XML UI, covering essential elements, layouts, and best practices.

Why Use XML for Wear OS UI?

• Simplicity: XML is straightforward for creating basic layouts and UI components, especially for simpler applications.
• Legacy Support: Many older or simpler Wear OS apps were initially developed using XML, maintaining consistency in codebase.
• Readability: XML can be easier to visualize and modify directly without requiring extensive code changes.

Setting Up Your Wear OS Project

Before diving into XML, you need to set up a new or configure an existing Wear OS project:

Step 1: Create a New Project

1. Open Android Studio.
2. Click on “New Project.”
3. Select the “Wear OS” category, and choose a template like “Blank Activity” or “Watch Face.”
4. Configure the project name, package name, and minimum SDK version. Ensure your SDK version is compatible with Wear OS (API level 25 or higher).
5. Click “Finish.”

Step 2: Add Dependencies

Ensure you have the necessary dependencies in your build.gradle file (Module: app):

dependencies {
    implementation 'androidx.wear:wear:1.2.0'
    implementation 'androidx.appcompat:appcompat:1.4.0'
    implementation 'com.google.android.support:wearable:2.8.1' //deprecated but some features are used
    implementation 'com.google.android.gms:play-services-wearable:17.1.0'
    compileOnly 'com.google.android.wearable:wearable:2.8.1' //deprecated but some features are used
}

Step 3: Enable Data Binding (Optional but Recommended)

Data Binding can simplify how you access UI elements from your code:

1. Enable data binding in your build.gradle file:

android {
    ...
    buildFeatures {
        dataBinding true
    }
}

Basic XML Layouts for Wear OS

Wear OS has specific layout constraints due to the circular screen. Using appropriate layouts is essential to accommodate this unique screen shape.

1. BoxInsetLayout

The BoxInsetLayout is specifically designed for Wear OS to handle the inset (status bar and chin) on round screens. It ensures content is displayed within the visible area, preventing overlap.

<androidx.wear.widget.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"
    tools:context=".MainActivity"
    tools:deviceIds="wear">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/box_inset_layout_padding"
        app:layout_boxedEdges="all">

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

    </FrameLayout>

</androidx.wear.widget.BoxInsetLayout>

• tools:deviceIds="wear" ensures the layout is previewed as a Wear OS device in Android Studio.
• app:layout_boxedEdges="all" ensures that the content is inset on all edges. You can specify individual edges like “top,” “bottom,” “left,” and “right.”

2. ConstraintLayout

ConstraintLayout is a versatile layout that allows you to define complex relationships between UI elements using constraints. It’s efficient and flexible for arranging components within the circular screen.

<androidx.constraintlayout.widget.ConstraintLayout
    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">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Wear OS"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="16dp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

3. WearableRecyclerView

WearableRecyclerView is a specialized RecyclerView designed for Wear OS devices. It supports circular scrolling and provides efficient ways to display lists of items on the small screen.

Step 1: Add WearableRecyclerView to Your Layout

<androidx.wear.widget.WearableRecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Step 2: Create an Adapter

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private List<String> mData;
    private LayoutInflater mInflater;

    public MyAdapter(Context context, List<String> data) {
        this.mInflater = LayoutInflater.from(context);
        this.mData = data;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        String item = mData.get(position);
        holder.myTextView.setText(item);
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        TextView myTextView;

        ViewHolder(View itemView) {
            super(itemView);
            myTextView = itemView.findViewById(R.id.item_text);
        }
    }
}

Step 3: Implement the Activity

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.wear.widget.WearableRecyclerView;
import java.util.Arrays;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private WearableRecyclerView mRecyclerView;
    private MyAdapter mAdapter;

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

        mRecyclerView = findViewById(R.id.recycler_view);
        List<String> data = Arrays.asList("Item 1", "Item 2", "Item 3", "Item 4", "Item 5");
        mAdapter = new MyAdapter(this, data);
        mRecyclerView.setAdapter(mAdapter);
    }
}

Step 4: Create the Recycler View Item Layout (recyclerview_item.xml)

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/item_text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textSize="18sp"
    android:gravity="center" />

Creating UI Components

1. Text Views

Text views are essential for displaying textual information. Customize their appearance with attributes like textSize, textColor, and gravity.

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Current Time"
    android:textSize="20sp"
    android:textColor="@android:color/white"
    android:layout_gravity="center_horizontal" />

2. Buttons

Buttons allow users to interact with your Wear OS app. Define button actions in your Activity or Fragment.

<Button
    android:id="@+id/myButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Start" />

3. Images

Displaying images on Wear OS involves using ImageView. Optimize images for small screens to maintain performance.

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"
    android:layout_gravity="center" />

Working with Data Binding

Data Binding streamlines how UI elements are updated based on data. This approach reduces boilerplate code and makes the UI more maintainable.

Step 1: Define Data Variables

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <data>
        <variable
            name="myViewModel"
            type="com.example.wearosapp.MyViewModel" />
    </data>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/timeTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{myViewModel.currentTime}"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Step 2: Update UI in Activity

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import androidx.databinding.DataBindingUtil;
import com.example.wearosapp.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;
    private MyViewModel viewModel = new MyViewModel();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        binding.setMyViewModel(viewModel);

        //Update time regularly or on user interaction
        viewModel.setCurrentTime("12:34 PM");
    }
}

Best Practices

• Optimize for Circular Screens: Ensure your UI elements fit well within the circular screen of Wear OS devices by using BoxInsetLayout and other appropriate layouts.
• Use High-Contrast Colors: Improve readability by using high-contrast color combinations to ensure text and interactive elements are clearly visible.
• Simplify User Interaction: Design straightforward interaction patterns because Wear OS apps often have limited screen space and interaction methods.
• Optimize Assets: Optimize images and other assets to reduce app size and improve performance on the device.
• Avoid Complex Animations: While animations can improve UI appeal, overly complex animations can consume excessive resources and impact device performance.
• Test on Actual Devices: Thoroughly test your Wear OS apps on real devices to ensure that UI components render correctly and performance meets expectations.

Conclusion

Building Wear OS apps with XML UI remains relevant, particularly for simpler apps, offering a streamlined approach with straightforward readability. This guide provides a detailed exploration into how you can construct XML layouts effectively by utilizing Wear OS-specific elements and by integrating powerful components, namely, the Data Binding, for maintainable UI management. Always ensure to prioritize optimization to facilitate both responsiveness and user-centered experiences with a clean intuitive aesthetic when you create wearable applications. Embrace the power that XML still presents within modern application strategies of wearable environments that extend beyond regular devices like smartphones while enhancing and refining a holistic ecosystem geared solely towards enhancing user wearable journeys today.