Dibbus.com

Where design meets development

index2

30/08/2012
by Folkert
0 comments

More buttons?

Yes, I do receive lots and lots of emails, questions and comments about those gradient buttons. Awesome! It’s great to hear that I can help other developers building great apps.

Some users do have some problems on how to create those gradient buttons and where to place them, so I decided to go a step further then just writing a post. Why not creating an app to ease the creation of buttons.

So, based upon my Android post, I’ve created a very ordinary Android app with the following features:

  1. Show some ordinary gradient buttons as described in this post
  2. Show some 9 patch glossy images as described in this post
  3. Show some 9 patch matte images as described in this post
  4. Show the iOS look and feel on Android as described in this post
  5. Show lots and lots of buttons as described in this post

The ‘Many gradients’ screen where you see a lot of gradients has an option to send the xml code of the button to an email address. So, pick a color from the list and send the code to your email to use it in your project!!!!


Get it on Google Play

4

23/10/2011
by Folkert
1 Comment

Making screenshots from an Android device

This will be just a short blog post because there is just not a lot of clear information available about just some practical stuff.

How to make a screenshot of an Android device.

  1. Download and install the Android sdk which can be found here
  2. Once installed navigate to the folder: C:\android-sdk-windows\tools (it might be another folder, this is my installed location)
  3. Find the file ddms.bat and double click it to run the batch file.

This batch file will open the Dalvik Debug Monitor application:

This application is able to create screenshots. Right now there is nothing to see, just because no device is linked to the system.

Just grab a usb cable and connect your device to your system:

There is just a single important setting you must not forget to set. This is a setting on your phone to allow the phone to sort of expose the debug and logging information. This information can be viewed using the Dalvik Debug monitor.
This setting can be found on your device. Open the Settings > Applications > Development > check USB debugging.


Once you have checked the USB debugging preference, you will notice ‘some’ information is entering the DDM:

What you see here is actually quite interesting. All processes information and log data from all applications is written to the log output. But that is not the reason of this blogpost.
Once you see all this data running, it means your device is properly set and you can grab screens from your device. How?
Select your device in the window at the top left(your device will be shown as a bunch of numbers) just hit Ctrl + s to ‘save’ the screen. Make sure your device is not sleeping, otherwise your grab will be black also ;-). Another way is to click ‘Device’ on the menu and select ‘Screen capture…’

Running this action will open the ‘Device screen capture’ window.

On top of the screen you will find actions to save the screenshot, rotate it or copy it to paste it somewhere else. You can leave this window open all the time, just change the screen on the device, open another app and just hit the ‘Refresh’ button in this window. The most actual screen will be grabbed.

Pretty easy!

Logcat info

Just a tip for Android users from a developers point of view, sometimes it’s very hard to understand issues on the client’s phone. There are just a lot of variables which may cause the app isn’t working correctly. What can help is to send the log from ‘Logcat’ to the developer. The developer can track possible issues in this window if the app has proper logs set.
To see create a log, select your device in DDMS, select ‘Device’ on the menu bar and select ‘Run logcat’. A new window will open with lots of data. If you are interested in this data, you can check if by yourself, try to find the applications name in the log and maybe the cause of the problem might be exposed. You can send this information to the developer.

3 (2)

20/10/2011
by Folkert
1 Comment

And now for real, app development

The previous article was meant to be an intro but was getting too long so it was just a separate a blog post. In this post I will write about my first experience as a Android developer in Wp7 development.

App development stages

When I develop an app I always start with the rough app flow, just get a working app without any designs. Most important thing to remember in that stage is functionality. It’s the most important stage of app development because this is the blue print of your app. This is the moment where you can test if the flow works, if the controls are correctly chosen. Within Android is not very hard to get the rough app flow, just drag some textviews and buttons on the page et voila! Wp7 on the other hand offers great designed, well thought, controls out of the box. The funny thing was, the app was looking great already while I was still in the first stage. Developing apps is just great work. I can really enjoy making things work on these devices. For those people who like to start developing apps I just can say: “just start!”. There are lots of people who are dreaming of developing an app, having great ideas but just don’t start. There are no restrictions in app development! Developers out there, just start! But don’t make it too difficult for yourself. Start with just some small apps to get familiar with the available controls, code, syntax, programs etc. For example, my first app was a temperature converter. This app will not be published because there are already at least 34 million developers who thought the temperature converter was a much needed app in the market. But although it was not interesting for the market, it opened my eyes and gave me great insight in the framework. I’ve created lots of apps since then which resulted in my main app at the moment called Analytix which receives great response from users all over the world. You will not be able to create great apps at your first trials, just keep practicing and read, read and read books. As a former colleague of mine once said. If you don’t know how to make it, you haven’t searched good enough. All information is really out there!

First steps

Let’s get back to the app itself before I have to spend another code-less post ;-) I will not bother you with some dull part about setting up the connection to the Google Data Api using Oauth 2.0 which was actually pretty easy to set up. First I was looking for a Oauth library for wp7 but handling the code myself was easier. The hardest part of creating the app was to make it look similar to the Android app. This was and still is a real challenge. Porting an app is not that hard. Make it look similar without loosing the connection to the base design is extremely hard. Luckily, lots of controls of the Android app are to be used in the same way as for Wp7, for example the ListView and the ListBox. I must admit that working with the ListBox is just like working with datacontrols used in Asp.net like the Repeater control. You can define the listitems in a very comprehensive way. Setting a custom listitems in Android takes some time to set up, a listItem should be defined in a separate xml layout file and called when building up the listView using custom listadapters. So, when building a ListView with listitems having a custom layout(every listitem that doesn’t have 1 or 2 lines is called a custom listitem)  you need:

  1. layout.xml with the ListView defined
  2. listitem.xml for the listitem
  3. activity code file where you set up the binding
  4. custom arrayadapter(this can be placed inside the activity code)

It might seem flexible but it just isn’t. There is no way to organize the layout directory. All layoutfiles should be saved in the root of the folder which will result in a total chaos. For my app Analytix I needed a few different layouts and Wp7 was offering those layouts out of the box. For those list items I could choose between the Panorama control or the pivot control. The pivot control was more interesting because I was dealing with lots if data so I needed the space although the panorama control is a very attractive way to visualize information. In xaml the ListBox just needs:

  1. xaml code where the ListBox is defined
  2. codebehind to set up binding

you have full control within the ListBox! You don’t have to mess around with external listitem files(you can if you want to) but there is no restriction if you don’t want to. Take look at this sample: As you can see, the Listbox itemtemplate can be everything you want to, just direct in the ListBox iteself. When you are familiar with asp.net development, you will recognize this way of databinding controls. To achieve this in Android we have to define the ListView, define custom listviewitem layout and combine all this inside the custom adapter. There you loose some precious development time, setting up all these items if you just want to have a listitem like this:

Redesign

Redesigning and redeveloping an app gave offered me some opportunities to make some improvements to the app flow. In the Android app, I choose to offer all possible queries as tabs at the top. You can disable/enable each tab but it’s getting a bit busy on the topbar. I have changed the UI in the tablet version where there is more space to set up the controls. In the Wp7 version I am using a new app flow, more aimed at the Honeycomb version of my app, using categories in a better and user friendly way. Let just compare a few screens, one from the Android app(left) and one from the Wp7 app(right).

[accounts screen, click to enlarge]

[profilesscreen, click to enlarge]

Designing the wp7 screens I’ve discovered a great tool which came in very handy. I need to design some Icons for the accounts and profiles. Just basic icons to make it clear you’re dealing with accounts or profiles. First I downloaded some existing icons, in png format which was ok, but to modify those icons I had to open Photoshop, make changes, save the changes to png again and load it into the project. There must be a better way, a xaml way. Could that be possible? Yes of course! Taking those image to xaml offers me total control of the image. Make it larger, smaller or change the image could be done just in xaml. All you need is Expression Design, a great tool to help you with designing layouts, icons, drawings etc. This tool is just awesome. I had designed an icon for the accounts, selected the drawing in the designer and just hit ctrl + shift + c. Yes, that’s right, you can copy the design from the designer and just paste it in the xaml code in Visual studio. Is the image pasted? No.. the xaml code of the image is pasted… wow!!! That’s what I call thinking ahead! Select the object, hit ctrl+shift+c, now the xaml of the visual is copied to the clipboard. Open Visual studio or Blend and hit ctrl + v.

Some other screenshots

As mentioned before, I’ve redesigned the app flow and added a few new screens. Those screen can give you a better overview of the available queries. The pivot control was the perfect control to visualize the categories and their content.

Making pages like this is actually pretty easy, not as complicated as in Android. Take a look at the code:

Just some ordinary xml. Take some data and bind it to the list:

This is just a very simple setup, but look at the amount of code!!! Wp7 does offer even more elegant ways to bind the data using ObservableCollections which is pretty awesome too.

I’m using this method on the detail pages where the data is loaded async. Using this type of collection and bind it to datacontrols is extremely powerful.

I was planning to write just a sort of an introduction article about some differences between Android and Wp7 development. There are lots and lots of differences just way too many to cover in just a single article. I will continue writing articles about Android, Wp7 or just other stuff ;-)

In my previous article I mentioned some reason for me to start develop for Wp7. After publishing the article I thought about those reasons and forgot the most import one. This has to be mentioned.
Being a .Net programmer from the beginning I can admit that the support within the .Net community is really great. People are eager to help each other.
Developing for Wp7 confirmed my opinion. I’ve written some emails to Brandon Watson and Matthijs Hoekstra and those guys are very helpful and supportive. They encouraged me to start developing for Wp7 and port my app to this great new platform. No regrets!!!

Last but not least, Analytix is still in development and not available in the market yet.

4

17/10/2011
by Folkert
1 Comment

Android vs Wp7 development

In march this year I’ve started to develop Android apps, just because I was very curious about app development and of course I needed a good Google Analytics app for my Android phone.
Have experience in C# programming, the step to Java wasn’t that hard.
Right now I really enjoy Java programming for Android and phones specifically. Programming for phones is perfectly suited for a single person in stead of large corporate websites where complete teams are used to deliver the requested goods during several months or even a year. It’s my daily job ;-)
Programming for phones is just a small program which can be extended when you want to, it’s your own project which can be designed to your wishes. Above all, you can sell the app, have great conversations with the users, make users happy with your app and finally, it’s possible to make some money with the app.

Since this summer I got a few signals after lots of reading about Wp7. Although it’s just a very small player on the market and can’t be compared to Android or iOs, it’s a player to pay attention to.

Why?

  1. Because it has a very unique interface, the Metro style is very well designed. It’s not a copy, it cannot be compared and it just works!
  2. Android is an open OS. Once your phone is rooted there are no boundaries for the user to have access to the complete file system, including stored preferences, applications which have been bought(just copy the apk and refund the money). This has some major security issues when large corporations are using phones for their employees. Complete access to the network in such a vulnerable environment will not be the main weapon of choice for those companies.
    I think Wp7 is a very, very attractive phone for companies. Working together with Exchange without any hassle(Gingerbread, anyone?), offering powerful clients for Sharepoint, Lync etc.
  3. I keep hearing just positive stories about the phone, I do have some colleagues and friends who own a Wp7 device and I just don’t hear any complaints… just none! Well actually just a single one about the calendar view which does not seem to have a default view. That’s all actually. Pretty low number of complains compared to those coming from Android. The Wp7 environment just looks pretty promising.
  4. I think Microsoft is a very tough player. Microsoft knows how to play this type of game, take a look at the Xbox which was released in a market which was dominated by Sony(Playstation) and Nintendo. The stories from that time are pretty equal to the stories about the phone right now. Take a look at the Xbox right now… I rest my case.
  5. Last but not least, I really believe in Wp7 for being the third player in the market. Symbian is dead, Blackberry has suffered seriously from some really nasty internet issues. Users now know how this system works and understand the dependency.

Yes, I do believe in this system so that’s why I’ve started to port my app to Wp7. Not just because I believe in the system but because I really dig developing, I was very curious about Wp7 development and working with .Net from the beginning I just had too… ;-)

I was planning to write just a single post about Android development vs Wp7 development… this will be the next post.

grads_small

24/08/2011
by Folkert
11 Comments

Even more gradient buttons for Android


Because I receive lots and lots of great response to my post for Android gradients, I thought it might be helpfull to post even more gradients in a different way.

This time, all those gradients are created programmatically which gives you total control of the button and the gradient!

First we need a grid in main.xml:

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:background="#ffffff" android:orientation="vertical">
    <GridView
    	android:layout_height="fill_parent"
    	android:layout_width="fill_parent"
    	android:id="@+id/gvButtons"
    	android:verticalSpacing="5dp"
    	android:horizontalSpacing="5dp"
    	android:numColumns="5"/>
</LinearLayout>

Then we need a simple gradient color class:

GradientColor

package com.dibbus.android.demo.gradients;
public class GradientColor {
	private int startColor;
	private int endColor;
	public GradientColor(int start, int end){
		startColor = start;
		endColor = end;
	}
	public int getStartColor() {
		return startColor;
	}
	public void setStartColor(int startColor) {
		this.startColor = startColor;
	}
	public int getEndColor() {
		return endColor;
	}
	public void setEndColor(int endColor) {
		this.endColor = endColor;
	}
}

So, all we need is some colors, well, here you go:

AllGradients

public static ArrayList AllGradients(){
		ArrayList list = new ArrayList();
		list.add(new GradientColor(0xFFcc1c4d, 0xFF9e032e));
		list.add(new GradientColor(0xFFce2029, 0xFF9e030b));
		list.add(new GradientColor(0xFF94121c, 0xFF6e060d));
		list.add(new GradientColor(0xFFa32a00, 0xFF891700));
		list.add(new GradientColor(0xFFe34234, 0xFFad2416));
		list.add(new GradientColor(0xFFff2600, 0xFFbf1d00));
		list.add(new GradientColor(0xFFff0038, 0xFFbf002a));
		list.add(new GradientColor(0xFFff4e00, 0xFFc72b00));
		list.add(new GradientColor(0xFFe85c12, 0xFFb53300));
		list.add(new GradientColor(0xFFff7518, 0xFFaa3e00));
		list.add(new GradientColor(0xFFff8f00, 0xFFf26c0d));
		list.add(new GradientColor(0xFFff9f00, 0xFFf27500));
		list.add(new GradientColor(0xFFff8249, 0xFFf06937));
		list.add(new GradientColor(0xFFd06a3e, 0xFFb55632));
		list.add(new GradientColor(0xFF964b00, 0xFF713a00));
		list.add(new GradientColor(0xFF703422, 0xFF521c13));
		list.add(new GradientColor(0xFF8c3611, 0xFF69270d));
		list.add(new GradientColor(0xFF633826, 0xFF4f1a03));
		list.add(new GradientColor(0xFF73420e, 0xFF593000));
		list.add(new GradientColor(0xFF956642, 0xFF704d32));
		list.add(new GradientColor(0xFFc18e60, 0xFF996a3d));
		list.add(new GradientColor(0xFFd27f29, 0xFFa65c11));
		list.add(new GradientColor(0xFFffb300, 0xFFed7710));
		list.add(new GradientColor(0xFFffd900, 0xFFffa400));
		list.add(new GradientColor(0xFFffca1d, 0xFFf5a71c));
		list.add(new GradientColor(0xFFfff300, 0xFFffd400));
		list.add(new GradientColor(0xFFd4de1b, 0xFFb5bf07));
		list.add(new GradientColor(0xFFc1f900, 0xFF9fde23));
		list.add(new GradientColor(0xFF9cc925, 0xFF7ba60d));
		list.add(new GradientColor(0xFF6c8b1b, 0xFF57730e));
		list.add(new GradientColor(0xFF697800, 0xFF4a5200));
		list.add(new GradientColor(0xFF515918, 0xFF343b04));
		list.add(new GradientColor(0xFF5ba825, 0xFF377d00));
		list.add(new GradientColor(0xFF49b700, 0xFF378900));
		list.add(new GradientColor(0xFF1c881c, 0xFF156615));
		list.add(new GradientColor(0xFF007e3e, 0xFF005b2a));
		list.add(new GradientColor(0xFF009876, 0xFF007259));
		list.add(new GradientColor(0xFF00b3a2, 0xFF009488));
		list.add(new GradientColor(0xFF338594, 0xFF006779));
		list.add(new GradientColor(0xFF0095b7, 0xFF007089));
		list.add(new GradientColor(0xFF00aeef, 0xFF0090bf));
		list.add(new GradientColor(0xFF21d1f7, 0xFF00a2d9));
		list.add(new GradientColor(0xFF3794dd, 0xFF136db5));
		list.add(new GradientColor(0xFF0064bf, 0xFF004f96));
		list.add(new GradientColor(0xFF3983b6 ,0xFF246594));
		list.add(new GradientColor(0xFF0085ff, 0xFF0064bf));
		list.add(new GradientColor(0xFF2870e3, 0xFF1e54aa));
		list.add(new GradientColor(0xFF003494, 0xFF00205d));
		list.add(new GradientColor(0xFF481884, 0xFF33036e));
		list.add(new GradientColor(0xFF7c279b, 0xFF5d1d74));
		list.add(new GradientColor(0xFFce3c92, 0xFFab156d));
		list.add(new GradientColor(0xFFffaac9, 0xFFcc7695));
		list.add(new GradientColor(0xFFff95a3, 0xFFd9737f));
		list.add(new GradientColor(0xFFfb5589, 0xFFc43b67));
		list.add(new GradientColor(0xFFf42376, 0xFFd02261));
		list.add(new GradientColor(0xFFff308f, 0xFFbf246b));
		list.add(new GradientColor(0xFFe33e61, 0xFFb3213e));
		return list;
	}

Having a list of colors we need to create an Adapter with gradient filled buttons:

ButtonAdapter

package com.dibbus.android.demo.gradients;
import android.content.Context;
import android.graphics.Color;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.GridView;
public class ButtonAdapter extends BaseAdapter {
    private Context mContext;
    public ButtonAdapter(Context c) {
        mContext = c;
    }
    public int getCount() {
        return Gradients.AllGradients().size();
    }
    public Object getItem(int position) {
        return null;
    }
    public long getItemId(int position) {
        return 0;
    }
    public View getView(int position, View convertView, ViewGroup parent) {
        Button b;
        if (convertView == null) {
            b = new Button(mContext);
            b.setLayoutParams(new GridView.LayoutParams(LayoutParams.FILL_PARENT, 100));
            b.setPadding(8, 8, 8, 8);
            b.setTextSize(25f);
            b.setTextColor(Color.WHITE);
        } else {
            b = (Button) convertView;
        }
        final GradientColor gd = Gradients.AllGradients().get(position);
        b.setBackgroundDrawable(Gradients.NewGradient(gd));
        b.setText("Button " + (position + 1));
        return b;
    }
}

Notice the Gradients.NewGradient(gd); method which is just a simple helper to generate the brackground drawable from the 2 given colors:

NewGradient

public static GradientDrawable NewGradient(GradientColor gc) {
	GradientDrawable gd = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, new int[] {gc.getStartColor(), gc.getEndColor() });
	gd.setCornerRadius(0f);
	gd.setStroke(2, gc.getStartColor());
	gd.setCornerRadius(3f);
	return gd;
}

And that’s all there is. Quite easy with lots of great gradients!
If you just like the standard way of using the gradients like I mentioned in my other post about gradients, you can just take the two colors from the list and create a xml drawable from there.

More samples

I have posted this code on code.google.com so you can download the complete project:
http://code.google.com/p/android-gradients-sample/

analytixHD

17/08/2011
by Folkert
0 comments

Update for AnalytixHD

I had some serious troubles last weeks. I am using an Asus tablet which should receive an upgrade to Honeycomb 3.2. Unfortunately the upgrade failed but my Asus Transformer was flagged as ‘updated’ on the Asus update system so I could not redo the update.

The problem was that after the 3.2 upgrade, my Tablet version of Analytix crashed. So I was receiving lots of complaints about the app but was not able to start debugging against the latest version. The emulator does not allow using Google Accounts so I was really stuck.
Thank God for the existence of xda-developers where I found the update file.

The fix wasn’t hard to find but I wondered about the reason for the crash. It’s pretty weird that my app crashed after the update, had something to do with the background threading which was working in 3.1 and not anymore in 3.2. Pretty nasty, hopefully the code in 3.1 was buggy and it’s solved now by Google.

The best update for my app is of course the implementation of Google Account Manager. Some uses complained about the way of authenticating the app, even worse, in some cases,some users were not able to authenticate at all! So I decided to remove the Oauth mechanism and replaced is by the Account Manager.
I had to reprogram lots of code to maintain the favorites option. But after many nights work, the final version is completed and uploaded to the market.

The pro version will have the Google Account Manager option also in the near future, so stay tuned!

Before ending this post I definitely must mention Ayman Suleiman who really gave me lots(and I mean LOTS) of really helpful tips for my app! He has stuffed the roadmap for the upcoming releases! Ayman, thanks for all your input!

featured_image

02/07/2011
by Folkert
1 Comment

Honeycomb optimized Analytix

I’ve just released the new Honeycomb optimized version of Analytix. I’ve rebuild the interface using new UI elements from Honeycomb like the actionbar, tabs etc. I’ve used more charts to visualize the data because there is just lots of space now ;-)

I was receiving many requests about a Honeycomb version of Analytix, but the problem was the availability of Honeycomb tablets in The Netherlands. So finally, 2 weeks ago, I was able to buy a Asus Transformer, started to develop a new version et voila, here it is. If you are a Google Analytics user, using a Honeycomb tablet, this is your app!

Take a look at:

https://market.android.com/details?id=com.dibbus.analytixHD

Update:

W00t! I’ve reached the front-page of xda-developers!!!!!!!!!!!!!!!!!!

http://www.xda-developers.com/android/analytix-updated-for-honeycomb/

I’ve just wet my pants!!!

9patch images

02/06/2011
by Folkert
4 Comments

How to set styles programmatically in Android


When you’re using different kind of styles in your project, the best way to accomplish this is to use the styles.xml file where you can define different style definitions for your views. These styles can be applied very easily, like:

<TextView android:id="@+id/txtName" android:text="TextView" style="@style/NameText" />

This is all done, using declarative xml syntax. But what if you are forced to create views programmatically?
There is no view.setStyle(“NameText”) method, so how do can we define them in code?
There is a small workaround which might come in handy:
Final syntax:

Button b = (Button) getLayoutInflater().inflate(R.layout.template_button, null);
b.setText(category.getName());

This code is creating a button, using the layoutinflator method. This method is using xml layout template to use a base for the button.

This layout file is looking like this:

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android" android:text="Date" style="@style/WhiteButton"/>

As you can see, just a definition of a button with style included.

All quit simple but very powerfull. If you’ve to use styling programmatically, this is a option. The downside is that you have to create layouts for each option. But if you’re using just a few options, this surely is the way to go!
Besides that, it’s very maintainable.

final_result

01/06/2011
by Folkert
15 Comments

Apple look on Android, the horror!


Okay, uhm, this is actually going to be a weird post. Everyone who knows me, can admit I’m not a big Apple lover. I don’t hate it, I really like the beautiful designs, a great UI, a beautiful phone, but… it’s Apple, it’s Steve Jobs, it’s the blind making religion that makes lots of people unrealistic. It’s the overall assumption that it’s better than everything else. That’s why I’ll never buy Apple products!

Besides that, I’m born and raised in the Microsoft dev shed, so I really dig programming C#, which is, in my opinion, absolutely, the best language available. Linq, need I say more?

My latest program however is an Android application, but programming Android is done in Java(Java is quit similar to C# syntax) and programming Android is really fun!

The most read post on my blog is Android for gradients and I’ve received some mail about writing a post about getting the Apple look on Android(no! no! no! no!).
So, based upon my respect for my readers, here’s….. this is hard….. a kind of Apple look for Android.
It’s using pure xml and 9 patch images for a better look. Apple is using some really subtle effects for text and shadows which is not possible using xml drawables only.

Okay here we go. The file is using include files which might be handy if you are using this kind of elements as a topbar in all of your activities. Here’s the code for the main.xml

Main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <include layout="@layout/inc_blue_bar" android:id="@+id/inc_blue"/>
    <include layout="@layout/inc_black_bar" android:id="@+id/inc_black"/>
    <include layout="@layout/inc_blue_bar_2" android:id="@+id/inc_black"/>
    <include layout="@layout/inc_blue_bar_3" android:id="@+id/inc_black"/>
    <include layout="@layout/inc_gray_bar" android:id="@+id/inc_gray"/>
    <include layout="@layout/inc_gray_bar_2" android:id="@+id/inc_gray_2"/>
</LinearLayout>

As you can see there is just a couple of includes here, representing different toolbars.

Let’s take a look at the first include, inc_blue_bar:

inc_blue_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:id="@+id/relativeLayout1" android:layout_height="wrap_content" android:background="@drawable/bar_blue" android:layout_marginBottom="1dp">
    <Button android:id="@+id/button1" android:layout_width="wrap_content" android:text="Back" android:layout_alignParentLeft="true" android:layout_height="wrap_content" android:background="@drawable/button_blue" style="@style/ButtonText"></Button>
    <TextView android:id="@+id/textView1" android:layout_height="wrap_content" android:layout_alignTop="@+id/button1" android:layout_alignBottom="@+id/button1" android:layout_width="fill_parent" android:text="Pagetitle" style="@style/PageTitle" android:layout_toLeftOf="@+id/button2" android:layout_toRightOf="@+id/button1"></TextView>
    <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:background="@drawable/button_blue" style="@style/ButtonText" android:text="Forward"></Button>
</RelativeLayout>

All basic Android layout stuff. The buttons are using drawable and styles to minimize code.

Buttons

Buttons drawable(@drawable/button_blue):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
        <shape>
            <solid
                android:color="#2c68e7" />
            <stroke
                android:width="1dp"
                android:color="#2c68e7" />
           <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
        <shape>
            <gradient
                android:startColor="#859dbc"
                android:endColor="#4a6c9b"
                android:angle="270" />
            <stroke
                android:width="1dp"
                android:color="#375075" />
            <corners
                android:radius="4dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

Just a basic blue button, using the apple colors. I’ve created a black variant also. As you can see, a lot of subtle details are missing but it’s getting close. It’s useable as a great button and toolbar look. If you want it to look more like Apple, you to use 9-path images. This is just a sort of a brackground image with small black lines around the background. This might look kind of weird but is very powerfull. Those lines define the “padding” inside the button and the regions of the background which should be stretched. The advantage of this technique is of course using png files, so no limitations. You can create every effect possible.
Creating real Apple buttons is made easy thanks to 9-patch images.

The first 9-patch image is:

A basis blue button. Take a look at the example, third row.
The code for this button:

<Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" style="@style/ButtonText"  android:layout_toLeftOf="@+id/button2" android:background="@drawable/bt_blue_bmp" android:text="Main menu"></Button>

Notice the android:background=”@drawable/bt_blue_bmp” !
So, using the 9-pact images, I can create the famous Apple Back button, quite easy:
Image:

And the button xml:

<Button android:id="@+id/button1" android:layout_width="wrap_content" android:text="Back" android:layout_alignParentLeft="true" android:layout_height="wrap_content" style="@style/ButtonText" android:background="@drawable/bt_blue_back_bmp"></Button>

I’ve created some more Apple look-a-like buttons:


Final result

Almost forgot the Styles.xml

Styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="BaseTopBar">
	    <item name="android:layout_width">fill_parent</item>
	    <item name="android:layout_height">wrap_content</item>
	    <item name="android:textColor">#ffffff</item>
	    <item name="android:gravity">center</item>
	    <item name="android:layout_margin">3dp</item>
	    <item name="android:textStyle">bold</item>
	    <item name="android:shadowColor">#000000</item>
	    <item name="android:shadowDx">0</item>
	    <item name="android:shadowDy">-1</item>
	    <item name="android:shadowRadius">1</item>
	</style>
	<style name="ButtonText" parent="BaseTopBar">
	    <item name="android:textSize">14dp</item>
	</style>
	<style name="ButtonTextBlack" parent="BaseTopBar">
	    <item name="android:textSize">14dp</item>
	    <item name="android:textColor">#000000</item>
	    <item name="android:shadowColor">#ffffff</item>
	    <item name="android:shadowDx">0</item>
	    <item name="android:shadowDy">1</item>
	    <item name="android:shadowRadius">1</item>
	</style>
	<style name="PageTitle" parent="BaseTopBar">
	    <item name="android:textSize">20dp</item>
	</style>
</resources>

The goal of this post is not getting the Apple look on the Android phone. Personally I really like the matte look, take a look at my latest Android app Analytix for Google Analytix. No gradients there, just matte colors.
I wanted to show you how to use 9-patch images in combination with xml drawables to create a nice looking kind of toolbar using Apple design as an example.
You can use the images and code without any restrictions. The gradients will be patented by Apple of course, using patented iHex colors, I don’t know. Use your own images, it better and safer. Stay away from those fanatics! and drugs of course!
Whoaha!

36

24/05/2011
by Folkert
0 comments

Analytix v8 released, WIDGETS!!!


I must admint,the past week was not easy. I’ve created Analytix for Google Analytix on the Android platform and the response is great! Of course I receive lots of requests from users.
Top request was of course “WIDGETS,WE WANT WINDGETS!”. If you take al look at the Android market, I think all least a third of all apps are widgets,so how hard can it be? Mistake #1

I started with lots positive energy and had a widget up and running in a few hours. But then,the problems arise. I had a very precise idea what I would like to see as the perfect widget. Profile picker, style picker, refresh picker and a metric picker.
I think I’ve created over 10 widgets doing all just a small part of the perfect widget. I just didn’t succeed in combining all these pieces of code.
One moment I thought I had a breakthrough, having created a perfect widget which was updating every 5 seconds(for testing only). But after I removed the widget, the update was still going on. I forgot to remove the contract with the alarm manager.
Another issue was to get unique references to the widgets, so all widgets are processed in his own unique thread.
Phew, 3 weeks(just working in the nightly hours) of testing and coding.
Finally I could release the perfect widget for my app. If you’re interested in this app, search the market for Analytix.

I’ve tried to create widget on a 2*1 tile but it was impossible to make it work with some sites having large numbers. The widget is covering 3*1 tiles.

The widget is covering lots of data, so here you can read what is all means:
On top you’ll see the profile name and the date/time from the last update. This is dependent of the preferred refresh rate.
Then you’ll see three data options with a colored dot in front. Here you can see the selected metric. After the metric you’ll see two numbers. The first is the metric from yesterday, the second is from today so you can easily compare if your site is doing fine. On each update the latest data is received from Google Analytics and compared to the data from yesterday. If it’s equal or higher, the colored dot will turn green. (Bouncerate will turn green if it’slower ofcourse ;-)).
Bottom right corner shows the update sequence you’ve selected.

You can use several midgets on you homescreen, so you can monitor many sites in a glimpse!!!

Page optimized by WP Minify WordPress Plugin