Home > android, ui > Making a launcher shortcut-like widget

Making a launcher shortcut-like widget

So I am making a widget, and i want i to blend in nicely with other graphics on the home screen. Most small graphics items on my home screen are launcher shortcuts. So, naturally, I want my widget to look similar, including a small text label below.

Now, Android team tells us this is a bad idea.

Android Widget design guidelines sort of tell you not to.

Android sample widget (Wikipedia “Word of the day”) doesn’t look like launcher icons.

But still – in my personal opinion – small widgets that look different from launcher icons just don’t blend in. So I’ve decided to take the risks and make my widget look like a launcher icon.

This is what I ended up with for my Wifi widget, I think it blends in quite nicely (note, this is work in progress).

Here is how this widget was created:

  • First, I defined a drawable for the text label’s background. Note that it’s a rounded rectangle with 9dp corner radius and some padding for text on both sides
  • <!-- drawable/drawable_corners.xml -->
    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    	<solid android:color="#aa222222" />
    	<corners android:radius="9dip" />
    	<padding android:left="6dp" android:right="6dp" />
  • Second, I have a background image that’s 220 by 57 pixels. This is 3 by 1 tiles, again, non-standard, but this is what I wanted for this widget.
  • Finally, this is the widget layout
  • <!-- layout/appwidget.xml -->
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    	android:layout_width="220dp" android:layout_height="wrap_content"
    	<AbsoluteLayout android:id="@+id/wifi_widget"
    		android:layout_marginTop="5dp" android:layout_width="fill_parent"
    		android:layout_height="57dp" android:background="@drawable/widget_bg">
              <!-- Views for the top part of the wiget are defined here -->
    	<RelativeLayout android:layout_marginTop="4dp"
    		android:layout_width="fill_parent" android:layout_height="wrap_content">
    		<TextView android:id="@+id/WidgetLabel" android:layout_width="wrap_content"
    			android:layout_height="18dp" android:layout_centerHorizontal="true"
    			android:text="@string/app_name" android:textColor="#ffffff"
    			android:textSize="13dip" android:singleLine="true" android:ellipsize="end"
    			android:background="@drawable/drawable_corners" />

    Things to note:

  • I am using a vertically-oriented LinearLayout as the top building block.
  • Views that appear on top of the graphical part of the widget are laid out using AbsoluteLayout. Maybe I’ll work out a better way later.
  • The widget label is a TextView that uses the rounded-rectanlg drawable .xml file from up above.
  • It’s important to get spacing right, that’s why the graphical part of the widget has android:layout_marginTop="5dp", and the text label’s RelativeLayout has android:layout_marginTop="4dp".
  • Speaking of which, the RelativeLayout‘s function is to allow the text label to be horizontally centered
  • I think that’s it.

    Categories: android, ui
    1. Sven
      October 17, 2010 at 3:22 pm

      Thx for this. I was searching how to make the text background!

      • Kostya Vasilyev
        October 17, 2010 at 10:59 pm

        Sure. You are wellcome.

    1. No trackbacks yet.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out /  Change )

    Google photo

    You are commenting using your Google account. Log Out /  Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out /  Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out /  Change )

    Connecting to %s