Spread : Widget Button design

The default widget that has been created with our project is not what we're expecting. We will customize it so that it fits our needs.

Layout file

Open the file named spread_app_widget.xml in res->layout and select the text tab. Here we can see the graphical structure of the AppWidget : a RelativeLayout that fills the screen with a TextView to display text.

Widget size

We want it to be a button so it should not occupy much space on the home screen. The first thing to do is to modify the layout's size setting. By default, it is set  to match_parent which means that it will occupy the full screen. Change it to wrap_content.

...
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...

You can immediatly see that the background colour is now applied to the TextView only. Speaking of background, remove the following line from the attribute list of the relative layout:

android:background="#09C"

Content

Alright, now we will replace the TextView with a button. To do so, delete the TextView and add the following:

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/Send_Button"
        android:layout_alignParentTop="true"
        android:layout_marginTop="4dp"
        android:layout_gravity="center_horizontal"
        android:paddingLeft="17dp"
        android:paddingRight="17dp"
        android:maxLength="20"
        android:clickable="true"
        android:text="@string/appwidget_text"
        android:singleLine="false"
        android:lines="4"
        android:textStyle="bold|italic"/>

All of the attributes won't be described here, simply use the editor's helper and google to find what you need. We defined a button that can accept multi-line text with a maximum size of 20 characters.

Add a background

To make it look like our push button, we will add an image as background. Drag and drop your image to your source tree under "drawable-nodpi" folder. You can now access it in your layout file with @drawable/<file_name_without_extension>.

android:background="@drawable/spread_button_up"

Add a style to our text

We want the text to be displayed in bold on the button. We will also define a maximum width so that the text remains on the button exclusively.
Open style.xml in res-> values and add the following:

<style name="config_message_style">
        <item name="android:textColor">#ccffffff</item>
        <item name="android:textStyle">bold</item>
        <item name="android:layout_width">35dip</item>
        <item name="android:singleLine">false</item>
    </style>

Finally, refer to this new style in the layout description:

 android:textAppearance="@style/config_message_style"

Here is what you should get:

Configuration Activity launcher

Alright, now I have a button that will be used to start the transmission of messages but before, I will need to configure my widget:

•  Text message
•  Contact list

An activity has been auto-generated for that purpose, I a going to look at it later. Here, I will add a small button right next to the big one that will show the configuration activity when pressed.

In the layout file, add the following lines:

<ImageButton
        style="?android:attr/buttonStyleSmall"
        android:layout_width="60dp"
        android:layout_height="20dp"
        android:id="@+id/Config_Button"
        android:layout_below="@+id/Send_Button"
        android:layout_alignRight="@+id/Send_Button"
        android:layout_alignEnd="@+id/Send_Button"
        android:clickable="true"/>

 As you can see, I am using here an ImageButton which could be used for the other button also. I want the settings button to look like a small cog so I will add a new image in drawable and refer to it in the ImageButton tag.

android:src="@drawable/spread_settings_button"

and add/replace these lines:

android:layout_width="15dp"
android:layout_height="15dp"
android:scaleType="centerInside"
android:background="@null"
android:adjustViewBounds="true" 

Here is the result on the Preview window:

Not so bad for a first version ^^

Cem SOYDING

Author & Editor

Senior software engineer with 12 years of experience in both embedded systems and C# .NET