Android highlighted widget

Hello, dear harazhiteli. This article describes the process of creating a "highlighted" widget, that is, a widget that can be selected using the five-position D-Pad, which is present in many Android devices in the form of trackballs or buttons. This article is aimed at a trained reader who has already written his first Android hello, world. I think you should not talk about the advantages of controlling hardware keys on devices with a capacitive screen in the cold season, so let's get down to business immediately.

Widget configuration file

Let's start with the widget.xml configuration file for the widget, create it in the res / xml / subdirectory of your project.


    xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="72dip"
    android:minHeight="72dip"
    android:focusable="true"
    android:updatePeriodMillis="0"
    android:initialLayout="@layout/widget" />

* This source code was highlighted with Source Code Highlighter.

The android: minWidth and android: minHeight attributes are responsible for the widget size, android: updatePeriodMillis for how often the widget will be updated, in this particular case, we do not need an update, android: initialLayout - indicates which Activity interface will be used for the widget. We are also interested in the android: focusable attribute, which, as the name implies, allows or prohibits focusing the cursor on widget elements.

Widget layout

The widget will consist of an icon and a caption under it, both elements will be clickable and highlighted.

res / layout / widget.xml


    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="72dip"
    android:layout_height="72dip"
    android:orientation="vertical">
        android:id="@+id/icon"
      android:layout_width="48dip"
      android:layout_height="48dip"
      android:clickable="true"
      android:focusable="true"
      android:src="@drawable/icon"
      android:background="@drawable/icon_background"
      android:layout_gravity="center" />
        android:id="@+id/label"
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="wrap_content"
      android:layout_height="22dip"
      android:orientation="vertical"
      android:clickable="true"
      android:focusable="true"
      android:background="@drawable/label_background"
      android:gravity="center">
            android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/label"
        android:textSize="13sp"
        android:textColor="#ffffff" />
  


* This source code was highlighted with Source Code Highlighter.

Here it is worth paying attention to the android: background attribute of the icon and signature. This parameter, as you might guess, allows you to put a background image or color in the background of the object, in this case it points to files that describe the rules for highlighting elements.

Highlight Rules

I called the "Highlighting Rules" StateListDrawable , a tool used to change the background of an object depending on its state. The rules are contained in item tags, the attributes android: state_focused (object in focus) and android: state_pressed (object pressed) are the conditions under which the background image will be set, android: drawable indicates the resource that will be used as the background.

res / drawable / icon_background.xml



        android:state_focused="true"
      android:state_pressed="false"
      android:drawable="@drawable/icon_shadow" />
        android:state_focused="true"
      android:state_pressed="true"
      android:drawable="@drawable/icon_shadow" />
        android:state_focused="false"
      android:state_pressed="true"
      android:drawable="@drawable/icon_shadow" />


* This source code was highlighted with Source Code Highlighter.

In the rules for highlighting the icon, we see three rules that can be stated as follows:

• Highlight if the icon is highlighted but not pressed.
• Highlight if highlighted and pressed;
• Highlight if pressed but not highlighted.

res / drawable / label_background.xml



        android:state_focused="true"
      android:state_pressed="false"
      android:drawable="@drawable/label_shadow" />
        android:state_focused="true"
      android:state_pressed="true"
      android:drawable="@drawable/label_shadow" />
        android:state_focused="false"
      android:state_pressed="true"
      android:drawable="@drawable/label_shadow" />
  


* This source code was highlighted with Source Code Highlighter.

Signature highlighting rules are practically no different, except for the fourth rule without conditions, which sets the default background image.

Conclusion

Now we just have to put the resources in the res / drawable directory and make up Manifest:


    xmlns:android="http://schemas.android.com/apk/res/android"
    package="org.selectdroid"
    android:versionCode="1"
    android:versionName="1.0">
        android:icon="@drawable/icon"
      android:label="@string/app_name">
            android:name=".Widget"
        android:label="@string/app_name">
      
        
      
                android:name="android.appwidget.provider"
          android:resource="@xml/widget" />
    
  


* This source code was highlighted with Source Code Highlighter.

After compilation and launch, we get this widget:


Thank you all for your attention. Hope this article is helpful to someone.

When writing this article, we used documentation from developer.android.com .
The source code of the prototype widget can be downloaded here .
Compiled apk here .