Pete's Tablet Programming: Create a Compound Widget for Android Lollipop: Part 2

Create a layout for a compound widget

This is the second in a four part article detailing the implementation of a compound widget for Android Lollipop. In this part I will implement the layout file for my widget. It will contain 4 sub widgets - 3 sliders to adjust the quantity of red, green, and blue in the color and a preview area to show the color.

The orange rectangle represents the preview area and the red, green, and blue bars represent their respective color sliders. The gray rectangles represent layout elements. The outer layout will be a horizontal LinearLayout. The inner layout will hold the three color sliders and be a vertical LinearLayout.

Create the layout file

To create the new layout file I am going to right click on the layout folder and select New - Layout resource file. I will call my layout view_color_picker.xml and accept the default creation parameters.

This creates a new XML file which has a Linear Layout as its root element. The first thing I need to do is change the orientation of this layout to horizontal.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal" android:layout_width="match_parent"    android:layout_height="match_parent">

</LinearLayout>

Add the inner layout and preview

The next step is to add the inner layout and the preview area. The preview area will be implemented as an ImageView widget.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal" android:layout_width="match_parent"    android:layout_height="match_parent">
    <LinearLayout

        android:orientation="vertical"

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="match_parent">
        
    </LinearLayout>

    <ImageView

        android:layout_width="0dp"

        android:layout_weight="1"

        android:layout_height="fill_parent"

        android:id="@+id/preView"

        android:contentDescription="@string/preview_content_description" />
    
</LinearLayout>

Setting the layout_width to 0dp and setting layout_weight to 1 causes the inner layout and the preview to share the screen width equally. However I only want the preview to take 1/5 of the width. To achieve this I need to change the weight for the inner layout to 4 so that it gets 4/5 of the width.

I want the preview to be visible even when the selected color is the same as the background so I am going to add an elevation to it. This gives it a shadow which defines its edges. I will also need to add a margin to allow room for the shadow and set a background color which seems to be necessary to have the shadow rendered.

<ImageView

    android:layout_width="0dp"

    android:layout_weight="1"

    android:layout_height="fill_parent"

    android:id="@+id/preView"

    android:contentDescription="@string/preview_content_description"

    android:elevation="10dp"

    android:layout_margin="10dp"

    android:background="#ffffff"/>

Add the color sliders

The next step is to add three SeekBar widgets to the inner layout. These will be my three color sliders.

<LinearLayout    android:orientation="vertical"    android:layout_width="0dp"    android:layout_weight="4"    android:layout_height="match_parent">
    <SeekBar

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@+id/redBar"/>

    <SeekBar

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@+id/greenBar"/>

    <SeekBar

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:id="@+id/blueBar"/>

</LinearLayout>

At this point I am going to make a slight adjustment and change the layout_height attribute of both layouts to wrap_content. This will make the widget only as high as is needed to fit the three Seek Bars.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="horizontal" android:layout_width="match_parent"    android:layout_height="wrap_content">

    <LinearLayout

        android:orientation="vertical"

        android:layout_width="0dp"

        android:layout_weight="4"

        android:layout_height="wrap_content">

Colorize the SeekBars

Android Lollipop introduced the ability to easily set the color used for the SeekBar's progress bar and thumb control. I'm going to set the progress and thumb controls for each of my SeekBars to shades of their respective colors.