ProductResourcesInstabug SDK for Android

Alright, so hopefully by now, you’ve had a chance to integrate the Instabug SDK for Android into your application and have received your first bug, crash, and feedback report! If you still haven’t, you can read my previous blog post to see how.

For this post, I want to explain some of the features available with the SDK and how you can really tweak and customize behavior to fit your application. User experience is a very crucial part of your app and here at Instabug, we believe that our SDK should be adaptive to allow for the customization of different elements.

In this post we’ll discuss the following options:

  1. SDK Color Customization

  2. SDK Messages

  3. Invocation Trigger

  4. Automatic User Steps Tracking

  5. Additional Information

 

 

1. SDK Color Customization

 

Instabug for Android uses your Android’s application theme to style the annotation activity. There are three style elements that we use to match your application’s experience:

 

actionBarStyle
  1. background: This represents the drawable/color that is used for your ActionBar. We use this drawable for styling the action bar in the Annotation Activity

  2. backgroundSplit: This represents the drawable/color that is used for your split Action Bar (the second half of the action bar on the bottom side of the phone). We use this drawable for styling the bottom bar that contains the Annotation Activity options such as the color picker and the message composer

 

titleTextStyle

textColor: This is the style attribute that is used as the font color in your ActionBar title. This color should have the best contrast with your ActionBar’s background so that users can easily read it. We apply this color to all our icons so that we ensure that these icons are as visible as possible.

By using setting these three style elements you can ensure that the Annotation Activity looks like part of your application and not some external activity, which in turn eliminates the disruption of the user’s experience in your app.

 

 

2. SDK Messages

 

Another extremely important aspect of user experience is your copy. Each and every application has its own brand, colors, identity and the copy in your application is not any less representative of your brand than any of the other aspects. That’s why we’ve exposed methods that allow you to actually customize all the messages that the SDK displays as a response to user actions. Here are these methods:

Instabug.getInstance().setCommentRequired(true);
Instabug.getInstance().setCommentRequired(true,"Mandatory comment alert message");
Instabug.getInstance().setInvalidEmailMessage("Invalid email alert message");
Instabug.getInstance().setPostFeedbackMessage("Thank you for your feedback");
Instabug.getInstance().setPostBugReportMessage("Thank you for the bug feedback");
Instabug.getInstance().setCommentFieldHint("Comment field hint");
Instabug.getInstance().enableEmailField(ENABLED,REQUIRED);
Instabug.getInstance().setEmailFieldHint("Email field hint");
Instabug.getInstance().setDefaultEmail("yourusers@email.com");

We recommend you set every single one of these messages. While we have basic feedback messages for all the above cases, setting custom ones allows you to maintain your app’s and brand’s identity.

 

 

3. Invocation Trigger

 

The reason we chose the shake gesture to invoke the feedback process is that it is the behavior that a lot of frustrated users exhibit. We have all shaken our phones at one point due to something not working right. However, we know that sometimes the shake gesture is used in other applications.

 

ActionBar Overflow Menu

That’s why we’ve added the option of invoking the feedback process through a “Send Feedback” menu item in the ActionBar’s overflow menu.

Getting this to work is fairly simple. Just make sure of the following:

  1. Your activity extends one of our helper base activities

  2. In your onCreateOptionsMenu make sure you call the super method as well

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   // Inflate the menu; this adds items to the action bar if it is present.
   getMenuInflater().inflate(R.menu.settings,menu);
   return super.onCreateOptionsMenu(menu);
}

 

The above code is an example of an onCreateOptionsMenu of our MainActivity in the demo application. If you inflate your menu first then call super.OnCreateOptionsMenu, this will force the “Send Feedback” menu item to be the last item in the overflow menu. If you call the super method before inflating your menu then this will make the “Send Feedback” menu item the first item in the overflow menu. If you want the “Send Feedback” to be the second item in your overflow menu, then define your menu.xml as follows:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.instabug.demo.demoapplication.SettingsActivity" >
    <item android:id="@+id/action_settings"
        android:title="Settings"
        app:showAsAction="never" />
    <item android:id="@+id/third_item"
        android:title="About us"
        android:orderInCategory="200"
        app:showAsAction="never"/>
</menu>

 

In the above menu, there are two items: Settings and About Us. By default, our “Send Feedback” menu item has no orderInCategory. What that means is, if all your items have no order in category and you inflate your menu before calling the super.onCreateOptionsMenu method, all your items will appear first and vice versa. However, if you notice in the above menu, we gave one item an orderInCategory attribute and the other no order. Now if we call the super.onCreateOptionsMenu method after inflating our own menu, the ordering of the items will be:

  1. Settings

  2. Send Feedback

  3. About Us

So if you want to have a specific order for your menu items, everything that you want after the “Send Feedback” menu item should have an orderInCategory above zero.

 

 

Programmatic Invocation

 

If you don’t want to use the shake nor the overflow menu, you can manually invoke the feedback process by calling the method

Instabug.getInstance().invoke();

 

 

4. Automatic User Steps Tracking

 

We’ve all been through the pains of trying to understand how a user has possibly generated a certain bug. That’s why we’ve created the automatic user steps tracking options. By enabling this option you get a log of every tap the user makes inside your app. Each log entry will contain a time+timezone, the name of the current activity, and a description of the action. The following is an example of a user steps log for one of the bugs:

2014-07-24 15:09:01.585+0200 UTC      com.instabug.demo.demoapplication.MainActivity was resumed 
2014-07-24 15:09:08.606+0200 UTC      In activity com.instabug.demo.demoapplication.MainActivity: View(setup_library) of type android.widget.Button received a click event
2014-07-24 15:09:08.657+0200 UTC      com.instabug.demo.demoapplication.SettingsActivity was resumed
2014-07-24 15:09:08.657+0200 UTC      com.instabug.demo.demoapplication.SettingsActivity was paused 
2014-07-24 15:09:12.958+0200 UTC      com.instabug.demo.demoapplication.MainActivity was resumed 
2014-07-24 15:09:14.681+0200 UTC      In activity com.instabug.demo.demoapplication.MainActivity: View(show_intro) of type android.widget.Button received a click event
2014-07-24 15:09:19.799+0200 UTC      In activity com.instabug.demo.demoapplication.MainActivity: View(show_tutorial) of type android.widget.Button received a click event
2014-07-24 15:09:28.956+0200 UTC      In activity com.instabug.demo.demoapplication.MainActivity: the user shook the phone

This log should help you get an idea of what the user was doing at the time the bug occurred and possibly how to replicate these steps.

 

 

5. Additional User Information

 

If all the information that we capture about the user and his device isn’t enough and you’d like to add more information, we have a field in each bug/feedback report for that specific purpose. To add information to the report, just call at your initialization step, or perhaps after a user has logged in.

Instabug.getInstance().setUserData("This is additional information about my user");

 

 

What other customization options would you like to see? E-mail me at contactus@instabug.com with your suggestions and we’ll look into baking them into the Instabug SDK for Android!