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 ^^

Read More

Spread : AppWidget

Description

Here is a VERY simple representation of our AppWidget class inherited from AppWidgetProvider.

A widget is (by default) owned by the home screen app meaning that the methods listed above will be called by the home screen.

onEnabled: called when the first instance of the widget is created
onDisabled: called when the last instance of the widget is deleted
onDeleted: should be called when an instance of widget is deleted from home screen but a known issue exists. This method does not seem to be called properly.
onUpdate: called regularly by the home screen (period is configurable in xml info file)
onReceive: Intent listener (see below)

Interactions

At first, I was lost with this object as I was looking for a way to add a click listener for a button. Well, unlike an Activity, you will have to deal with Intents here.
An Intent can be seen as a mail that can be sent to one or many objects throughout the system (broadcast). We will detail them in a further post.

So here is how the widget will interact with other activities:

Read More

Spread : First steps with Android Studio

Now that I know what I have to do, let's create a new project with Android Studio !

Create New Project

1. File -> New Project
2. Give it the name you want (Spread here) and click Next
3. On next window, select API 15 (which covers more than 84% of android devices out there)

4. Select "Blank Activity"

5. Click on Finish

Add an AppWidget

Now we need to create the home screen widget in the project. Right-click on java folder in your source tree and select Add->Widget->AppWidget

On the next window, configure the widget as shown below:

As you can see, we are creating a resizable home-screen widget with a configuration screen.
Click Finish.

And that's it for this post, we created our project successfully with Android Studio. This is what you should see in your source tree:

Cheers ! :)

Read More

Spread : an AppWidget to broadcast short messages to registered contacts

This is my first application for Android and instead of creating a simple activity that displays "Hello World" and some buttons, I'll try to make something that can be more useful (for me at least ^^).

Spread ? 

Yes, Spread. At some point, you have to give it a name and my imagination let me down today... so Spread it is ! The name gives me the thought of paint sprays where a push on a specific spot releases colour on a wide area. That's more or less what my app will do : a simple push to send a message to several contacts.

How ?

I want it to be a home screen widget with the look of a punch button with a simple message on it:

 A configuration activity will be created to configure:

•  The message 
•  The contact list that will receive it

When pushed, a progress bar will show up during message transmission.
The mode of transmission will be classical SMS. I will se later if I can do the same with popular communication apps (WhatsApp, Messenger, ...).

Where does the idea come from ?

The idea was born at the office when I was sick of texting my colleagues who worked on different floors that it was time to lunch, break, ... So I imagined a simple texting app that will alert all of them on a single button-push.

Read More

Android project, first things first : project files structure

When creating a new android project, a lot of files are generated and appears in our source tree view. Let's a look at what's inside.

Note: The content of java folder will be ignored here.

"XML is your ally"

Hope you like it beacuse XML is used almost everywhere ! Here is a quick description of all of them:

Info file

Defines the Application's main properties : minWidth, minHeight, initialLayout...

Manifest file

There are a lot of similitudes between the manifest file and a C# Assembly. It contains all information about application rights, package name, managed Intents, main components of the application (Activity, Receivers, ...)...
This file will require modifications during development.

Layout file

Graphical definition of an Activity/AppWidget. Most of the time, you will use the graphical interface to edit your screens but a bit of knowledge on layout files can be useful.

Resource files

These files contains user-defined strings, images, style sheets, dimensions... that can be accessed with an id.

<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>

Referenced in a layout file like this:

<Button
        ...
        android:textAppearance="@style/config_message_style"
        ... />

All of those files are related to each other :

Why several folders with "same" names ?

The drawable folders contain images only with different resolutions (densities) in order to have a good rendering on all kind of devices (tablets, mobile phones, ...).

drawable - hdpi: ~240dpi
drawable - mdpi: ~160dpi
drawable - nodpi: ~160dpi (?)
drawable - xhdpi:~320dpi
drawable - xxhdpi:~480dpi

value-vXX indicates the values that should be used for Android API XX and higher.

Read More