The highlighted widget in Android

Hello, dear habrazhiteli. This article describes the process of creating a “highlighted” widget, that is, a widget that can be distinguished using the D-Pad five-way handle that is present in many Android devices in the form of trackballs or buttons. This article is aimed at a prepared reader who has already written his first “Android hello, world”. I think you should not talk about the benefits of managing hardware keys on devices with a capacitive screen in the cold season, so get down to business right away.

Widget configuration file

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

<? xml version ="1.0" encoding ="utf-8" ? > < appwidget-provider 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 sizes, android: updatePeriodMillis for how often the widget will be updated, in a specific case, we do not need an update, android: initialLayout - indicates which interface the Activity will be used for the widget. We are also interested in the android: focusable attribute, which, as the name implies, allows or denies focusing the cursor on widget elements.

Widget layout

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

')

res / layout / widget.xml

<? xml version ="1.0" encoding ="utf-8" ? > < LinearLayout xmlns:android ="http://schemas.android.com/apk/res/android" android:layout_width ="72dip" android:layout_height ="72dip" android:orientation ="vertical" > < ImageView 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" /> < LinearLayout 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" > < TextView android:layout_width ="wrap_content" android:layout_height ="wrap_content" android:text ="@string/label" android:textSize ="13sp" android:textColor ="#ffffff" /> </ LinearLayout > </ LinearLayout > * This source code was highlighted with Source Code Highlighter .

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

Highlight Rules

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

res / drawable / icon_background.xml

<? xml version ="1.0" encoding ="utf-8" ? > < selector xmlns:android ="http://schemas.android.com/apk/res/android" > < item android:state_focused ="true" android:state_pressed ="false" android:drawable ="@drawable/icon_shadow" /> < item android:state_focused ="true" android:state_pressed ="true" android:drawable ="@drawable/icon_shadow" /> < item android:state_focused ="false" android:state_pressed ="true" android:drawable ="@drawable/icon_shadow" /> </ selector > * This source code was highlighted with Source Code Highlighter .

In the rules for highlighting the icons, we see three rules that can be voiced like this:

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

<? xml version ="1.0" encoding ="utf-8" ? > < selector xmlns:android ="http://schemas.android.com/apk/res/android" > < item android:state_focused ="true" android:state_pressed ="false" android:drawable ="@drawable/label_shadow" /> < item android:state_focused ="true" android:state_pressed ="true" android:drawable ="@drawable/label_shadow" /> < item android:state_focused ="false" android:state_pressed ="true" android:drawable ="@drawable/label_shadow" /> < item android:drawable ="@drawable/label" /> </ selector > * This source code was highlighted with Source Code Highlighter .

The rules for highlighting a signature are almost the same, except for the fourth rule without conditions, which sets the default background image.

Conclusion

Now we just need to put the resources into the res / drawable directory and compile the Manifest:

<? xml version ="1.0" encoding ="utf-8" ? > < manifest xmlns:android ="http://schemas.android.com/apk/res/android" package ="org.selectdroid" android:versionCode ="1" android:versionName ="1.0" > < application android:icon ="@drawable/icon" android:label ="@string/app_name" > < receiver android:name =".Widget" android:label ="@string/app_name" > < intent-filter > < action android:name ="android.appwidget.action.APPWIDGET_UPDATE" /> </ intent-filter > < meta-data android:name ="android.appwidget.provider" android:resource ="@xml/widget" /> </ receiver > </ application > </ manifest > * This source code was highlighted with Source Code Highlighter .

After compiling and running, we will get this widget:

Thank you all for your attention. I hope that this article will be useful to someone.

The article was written using developer.android.com documentation.

The source code of the widget prototype can be downloaded here .

Compiled apk here .

Source: https://habr.com/ru/post/114089/

All Articles

The highlighted widget in Android

Widget configuration file

Widget layout

Highlight Rules

Conclusion

More articles: