28 December 2012

Styling tab selectors for ActionBarSherlock

This post builds on the previous post for ABS + VPI.

I have gotten a lot of questions on styling the ABS, specifically the tab selected indicators. This task may seem daunting, but in reality it is relatively simple. I am also quite confused why I didn't find any straightforward tutorials when I tried googling this. Anyway, this post will hopefully help developers who aim to style their action bars.

We will need to use Jeff Gilfelt's awesome styling tool. To use it, just input in your app's color scheme for the highlights and what-not then download the generated zip file. If you want to just change the tab underline color, change the value under "Accent color". To make the change obvious from the default settings, I have used a shade of orange for the tab selected indicators. Here are the settings I used for this demo.

Jeff's tool conveniently generates all the XML files and drawables and organizes them into the correct /res/drawable folders. Unzip the file and just drag the generated files into your project, or merge the contents if you already have such existing files.

See how easy it was? Seriously, we should all lie prostrate at Jeff Gilfelt's and Jake Wharton's feet. These guys are AWESOME.

The two photos below show the difference between the old app and the styled app. As you can see, I only changed the tab selected color. You can explore what happens if you use the other styles you can get from Jeff's tool.
DefaultStyled
The hard work is done, let's now try to understand the automagically generated configurations we did.

First, we have to configure the theme to use custom tab indicators. We do this by changing the tab styles in themes.xml. In my sample app, these lines customize the tabs we are using.
<!-- Styling the tabs -->
<style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
   <!-- Tab text -->
   <item name="android:textSize">15dip</item>
   <item name="android:textColor">#FFB33E3E</item>
        
   <!--  Lines under tabs -->
   <item name="background">@drawable/tab_indicator_ab_styling_abs</item>
   <item name="android:background">@drawable/tab_indicator_ab_styling_abs</item>
</style>

The "drawable" tab_indicator_ab_styling_abs is actually a state list drawable that provides different images for each state of a tab -- focused and non-focused, pressed and not pressed.

You can see part of this in action in the image above. Try long pressing on a tab and you can see the tab's background change to use the unselected-pressed drawable.

Again, HUGE thanks to Jeff Gilfelt and Jake Wharton for creating tools that make our lives easier. :)

I have pushed a new branch in github that uses this style. The master branch of that repo still uses the default tab selectors.

03 November 2012

Quick Tip: Pulling an SQLite db file from device

I have always thought that you would need root access to pull an SQLite file from a non-rooted Android device. Turns out I thought wrong! Here's how you do it:
$ adb -d shell
$ run-as your.package.name
$ cat /data/data/your.package.name/databases/yourdatabasename  >/sdcard/yourdatabasename
This will copy your app's SQLite db file to the SD card's root directory. From there, you can copy the file to your computer any way you like.

Props to this SO answer!

28 October 2012

I Can Haz Internetz!

Last week, I was exploring connectivity monitoring and came up with a small app for demo. The app listens for connectivity changes and sends a notification to the user informing them of the change.

First off, create a class (I named mine ConnectivityUpdate.java) and make it extend BroadcastReceiver. This class should do what you want when notified of connectivity changes. You will be asked to implement the onReceive() method. Now here's what I want to happen when the system notifies me of changes:
1. Check what kind of change I am being notified of: did I get Internet? Or did I lose Internet?
2. Compare this to what connectivity I had before the notification so I can inform the user (and app-wise do whatever it is I'm supposed to do like start syncing or stop syncing).

In my implementation, this is done as:
@Override
public void onReceive(Context context, Intent intent) {
 
 boolean hasInternet = false;
 Log.d(LOG_TAG, "Received broadcast!");
 
 // Do I have Internet?
 if(intent.getAction().equals(ConnectivityManager.CONNECTIVITY_ACTION)) {
  hasInternet = (new NDUtils()).hasInternet(context);
 }

 // Did I use to have Internet?
 SharedPrefsManager prefs = new SharedPrefsManager();
 boolean prevValue = prefs.hasNetwork(context);
 
 if(prevValue != hasInternet){
  // Remember what we have now
  (new SharedPrefsManager()).saveNetworkState(context, hasInternet);
  sendNotification(hasInternet, context);
 }
}

The actual checking if we have Internet or not is done by a utility class:
public boolean hasInternet(Context context){
 NetworkInfo networkInfo = (NetworkInfo) ((ConnectivityManager) context.getSystemService(Context.CONNECTIVITY_SERVICE)).getActiveNetworkInfo();
 
 // Check if we are connected to Wifi or mobile internet
 // AND if we can actually send data
 if(networkInfo!=null &&
   (networkInfo.getType() == ConnectivityManager.TYPE_WIFI || networkInfo.getType() == ConnectivityManager.TYPE_MOBILE)
   && networkInfo.isConnected()) {
  return true;
 }  

 return false;
}

The Android javadoc on getActiveNetworkInfo() says it may return null, so we check first to avoid NullPointerExceptions, then we check if we have WiFi or mobile internet, THEN (and this is important) we check if we can send data through this network.

You can also refine this filter more by checking the type of mobile network the user has (we want 3G or faster) or by checking if the user is roaming (user should not be roaming). Here is a more complete method describing what I just said:
public boolean hasInternet(Context context){
 NetworkInfo networkInfo = (NetworkInfo) ((ConnectivityManager) context.getSystemService(Context.CONNECTIVITY_SERVICE)).getActiveNetworkInfo();  
 TelephonyManager telephony = (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE); 
 if(networkInfo!=null && networkInfo.isConnected() &&
   (networkInfo.getType() == ConnectivityManager.TYPE_WIFI || 
    (networkInfo.getType() == ConnectivityManager.TYPE_MOBILE  && networkInfo.getSubtype() > TelephonyManager.NETWORK_TYPE_UMTS && 
     !telephony.isNetworkRoaming()))) {
  
  return true;
 }  

 return false;
}

I then compare the returned value of the utility method to the last value saved in my preferences file. That part of the code is straight up saving/getting a boolean value from a SharedPreferences file.

I then inform the user of the network change through a notification. When the user clicks on the expanded notification, I want to open the app. The app can then display details about the network, but right now what my sample app does is simply show the boolean value returned by the utility method. Anyway, here's how I send the notification:
private void sendNotification(boolean hasInternet, Context context) {
 NotificationManager notificationManager = (NotificationManager)context.getSystemService(Context.NOTIFICATION_SERVICE);
 
 // The notification details seen by the user when the drawer is pulled down
 String notificationTitle = "Change in data connection!";
 String notificationText = "We have internet?: " + (hasInternet ? "YES!" : "NO :(");

 // The icon and the text to be displayed in the notification area
 Notification myNotification = new Notification(R.drawable.ic_launcher, "Broadcast received!", System.currentTimeMillis());

 // Create a new intent to launch my app
 Intent myIntent = new Intent(context.getApplicationContext(), NetworkDetector.class);
 PendingIntent pendingIntent = PendingIntent.getActivity(context.getApplicationContext(), 0, myIntent, Intent.FLAG_ACTIVITY_NEW_TASK);
 
 // Send that notification! MY_NOTIFICATION_ID is a value greater than 0.
 myNotification.setLatestEventInfo(context,
   notificationTitle,
   notificationText,
   pendingIntent);
 notificationManager.notify(MY_NOTIFICATION_ID, myNotification);
}

So how do we tell the OS that we have made this receiver and please notify us when the connectivity changes, Mister Android please? We create a broadcast receiver in the app's manifest! We listen to both CONNECTIVITY_CHANGE and WiFi STATE_CHANGE. The value for android:name is the name of the class containing the receiver implementation.
<receiver
    android:name=".util.ConnectivityUpdate"
    android:enabled="true"
    android:exported="true"
    android:label="ConnectivityActionReceiver" >
        <intent-filter>
            <action android:name="android.net.conn.CONNECTIVITY_CHANGE" />
            <action android:name="android.net.wifi.STATE_CHANGE" />
        </intent-filter>
</receiver>

And don't forget to add the permissions to read the network state:
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

The complete source code for this sample app is in github.

14 August 2012

Making ActionBarSherlock and ViewPagerIndicator play nice

EDIT (20121227): I made a new post on changing the tab selector underline.
EDIT (20121014): I received feedback from the comments that rotating the device will cause the tab contents to revert to the default text. In essence, the adapter "loses" the contents of the tabs. I have corrected this in the example below as well as in github.
EDIT (20120905): The full sample source code is now in github.

So ViewPagerIndicator cheerfully claims that it works with ActionBarSherlock. I was trying to test this out today and I can't find a noob-friendly, step-by-step tutorial on how I can do it. I spent almost half a day frantically opening tab after tab in Google Chrome, but nothing seems to straight out say what I should do. So here it is, collated from several StackOverflow answers, blog posts, etc.

Get the ViewPagerIndicator (hereafter referred to as VPI) and ActionBarSherlock (hereafter referred to as ABS) libraries. Create your Android application in Eclipse and add those two projects as dependency library projects. If you do not know how to do that, see here.

First, create a theme. This is required by ABS, and will also help in VPI. What I did was to make the VPI theme inherit from the ABS theme so I don't lose any of the styles I use in other parts of the app. I just add or override items needed by the ViewPagerIndicator. In this example, I just changed the text size and color of the tab labels. You can go one step further and change the selected tab indicator (via state selectors), change how the selectors are drawn, etc.
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<!-- This is our main ActionBarSherlock theme -->
    <style name="Theme.Styled" parent="Theme.Sherlock.Light.DarkActionBar">
        <item name="actionBarStyle">@style/Widget.Styled.ActionBar</item>
        <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
    </style><!-- This is our ViewPagerIndicator theme. We inherit from the ABS theme -->
    <style name="Theme.VPI" parent="Theme.Styled">
       <item name="vpiTabPageIndicatorStyle">@style/CustomTabPageIndicator</item>
    </style>    
    <!-- "Implementation" of our ABS custom theme -->
    <style name="Widget.Styled.ActionBar" parent="Widget.Sherlock.Light.ActionBar.Solid.Inverse">
        <item name="titleTextStyle">@style/TitleText</item>
        <item name="android:titleTextStyle">@style/TitleText</item>
    </style>
    
    <!-- "Implementation" of VPI theme. We just set the text size and color. -->
    <style name="CustomTabPageIndicator" parent="Widget.TabPageIndicator">
        <item name="android:textSize">50dip</item>
        <item name="android:textColor">#FFB33E3E</item>
    </style>
    
    <!-- More customizations for ABS -->
     <style name="TitleText" >
        <item name="android:textColor">@android:color/darker_gray</item>
        <item name="android:textSize">17dip</item>
    </style>
</resources>

Then we create the fragment(s) we need to populate the viewpager. My fragment is a simple layout with just a TextView indicating which tab is being shown.
public class TestFragment extends SherlockFragment {
 private String mContent = "???";
 
     public static TestFragment newInstance(String text) {
        TestFragment fragment = new TestFragment();
        
        // Supply num input as an argument.
        Bundle args = new Bundle();
        args.putString(KEY_TAB_NUM, text);
        fragment.setArguments(args);

        return fragment;
    }
 
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.activity_main, null);
        String text = getString(R.string.tab_page_num) + mContent;
        ((TextView)view.findViewById(R.id.text)).setText(text);
        
        return view;
 }

     @Override
     public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContent =  getArguments() != null ? getArguments().getString(KEY_TAB_NUM) : "???";
     }

}

Then we create the activity that will hold everything together.
public class VpiAbsTestActivity extends SherlockFragmentActivity {
 
 private static final String[] TAB_TITLES = new String[] { "This", "Is", "A", "ViewPager" };
 
 TestFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;
    
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        setContentView(R.layout.simple_tabs);
        
        mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

        mPager = (ViewPager)findViewById(R.id.pager);
        mPager.setAdapter(mAdapter);

        mIndicator = (TabPageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);
    }
 
 class TestFragmentAdapter extends FragmentPagerAdapter {     
     private int mCount = TAB_TITLES.length;

     public TestFragmentAdapter(FragmentManager fm) {
         super(fm);
     }

     @Override
     public Fragment getItem(int position) {
         return TestFragment.newInstance(String.valueOf(position));
     }

     @Override
     public int getCount() {
         return mCount;
     }
     
     @Override
     public CharSequence getPageTitle(int position) {
      return TAB_TITLES[position];
     }
 }
}
And lastly, we apply the ViewPagerIndicator theme to our activity in the manifest:
<activity android:name="VpiAbsTestActivity" android:theme="@style/Theme.VPI">
</activity>

As it turns out, it IS pretty straightforward!

19 July 2012

Save Logcat contents to file

Note to self: to save the contents of Logcat to a text file:
  1. Navigate to the SDK installation directory.
  2. Go to the /platform-tools folder.
  3. adb logcat -d > my_logcat_dump.txt
If there is more than one device connected to adb, specify which device's log to dump:
adb -s emulator-5558 logcat -d > my_logcat_dump.txt

05 July 2012

Cloning a remote branch in git

My current project at work uses git, and I have always been a CVS/SVN baby so I'm still trying to find my way around it. Today I wanted to clone a remote branch to my local computer. This remote branch also has submodules, so I want to get those too.

This assumes that you use Git Bash. First, navigate to the folder in you local computer where you want git to clone the remote branch. Once there, we can start cloning the repo. The following steps do the dirty work:
$ git init
$ git fetch <git url> <branch name>:refs/remotes/origin/<branch name>
$ git checkout -b <branch name> origin/<branch name>

This retrieves the contents of the remote branch and copies it to our local computer in a local branch (confused yet?). To update our copy of the submodules, the following commands should work:
$ git submodule init
$ git submodule update

22 May 2012

Adding Preferences On-The-Fly

(Make appropriate whooshing sounds)

Today, I will show you how to add preferences to your SharedPreferences (confused yet?) programatically. In an app that I am doing, I wanted to present a ListPreference to the user from the SharedPreferences page. However, the values contained in this list is not known at compile time. (Think Facebook groups that differ per user, or Twitter lists, or things like such, and I want to set a default option.)

Anyway, here's what I did to make this work. I added a preference in my PreferenceScreen, a sort of placeholder, if you will. Here is my ListPreference:
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

 <PreferenceCategory android:title="@string/pref_settings_header">
  <ListPreference android:key="@string/pref_key_default_group" android:title="@string/pref_default_group"/>
 </PreferenceCategory>

</PreferenceScreen>
And then in the class that handles the SharedPreferences, I get the values that I want displayed and plug them in to the placeholder preference. I will not bother to explain here, just heavily commenting the code:
public class UserPreferences extends PreferenceActivity {

 private static final String LOG_TAG = "UserPreferences";
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);

  // Load the preferences from an XML resource
  addPreferencesFromResource(R.xml.my_apps_prefs);
  
  // Manage the "Default Group" preference
  addDefaultGroupPrefs();  
 }
 
 
 private void addDefaultGroupPrefs() {
  // Get our "placeholder" preference. I prefer to use strings instead of hard-coding the preference key.
  // The value passed into findPreference is the value in the android:key parameter in the preference XML file.
  ListPreference groupsListPrefs = (ListPreference) findPreference(getString(R.string.pref_key_default_group));
  
  // Get your groups, this may come from a utility class or wherever
  // In this example, I have a custom object that has a "name" and an "id"
  List<CustomGroup> myGroups = getMyGroups();
  if (myGroups == null) {
   // Disable the preference if we don't have a list
   groupsListPrefs.setEnabled(false);
  } else {
   // Enable the preference if we have a list
   groupsListPrefs.setEnabled(true);

   // We split the list into names and IDs
   // We show the names in the list, and the values as the entries
   List<String> groupNames = new ArrayList<String>();
   List<String> groupIds = new ArrayList<String>();
   for (CustomGroup group : myGroups){
    groupIds.add(group.getId());
    groupNames.add(group.getName());
    
    // I guess you can add directly to a String[]
    // just make sure the order is preserved (name1=id1, name2=id2, etc)
   }
   
   // These should be user-readable strings
   groupsListPrefs.setEntries(groupNames.toArray(new String[groupNames.size()]));
   
   // These are the actual values to be saved in the XML file
   groupsListPrefs.setEntryValues(groupIds.toArray(new String[groupIds.size()]));
  }
 }
 
 private List<customgroup> getMyGroups(){
  // do work here, query server or db or whatever
  // return the list of groups
 }
}

And we're done. :)

17 May 2012

Inspecting your Shared Preferences

Did you know that you can look at your SharedPreferences file?

If during development you want to inspect what your SharedPreferences now contain, you can pull a copy of the XML file from the emulator.

In Eclipse, you can do that by following these steps:

  1. Open the DDMS perspective (Window > Open Perspective > Other > DDMS).
  2. Click on the File Explorer tab and navigate to your app's data folder (that's under data/data/<your package name>/shared_prefs/).
  3. Choose the file you want to download.
  4. Click on the Pull file from device button.

13 April 2012

Adding a float value to your resources

Earlier today, I was trying to figure out how to add a float value to constants file. What I used to do was add a string value in my strings.xml, retrieve the string value, and convert it to float.
float floatFromFile = Float.valueOf(getResources().getString(R.string.my_float));
I was trying out something new but it wasn't working, so I decided to look for a more accepted solution. Google led me to this StackOverflow question. I was on the right track after all! I think the accepted answer is incomplete, or not clear enough for my purposes. I ended up having this entry in my dimensions.xml file:
<item name="face_feature_marker_size" type="vals" format="float">2.0</item>
And then in my code, I retrieve the value as:
TypedValue tempVal = new TypedValue();
getResources().getValue(R.vals.face_feature_marker_size, tempVal, true);
float markerSize = testVal.getFloat();
I ended up having more lines of code with no idea if this is more optimized. Let me know what you think!

10 April 2012

Quick Tip: git cloning

A user-friendly way of cloning a git repo is through the eGit plug-in in Eclipse. But sometimes, especially on Windows machines, Eclipse has trouble cleaning up after itself after completing a clone operation. The best workaround for this is to clone the repo from git bash and then import the repo in Eclipse.
default@ZDOMINGUEZ-T420 ~
$ git clone git@github.com:<your git repo> <local folder to check out to>
When git finishes cloning your repo, import it to Eclipse.
Browse to the folder you checked out to, click OK, and the newly-cloned repo should now appear on the Git Repositories view.

14 February 2012

Selenium and File Downloads

Lately, one of my tasks has been to automate regression tests on one of our apps. Since this is a web app, we are using Selenium. Here, I enumerate the steps to configure Firefox for file downloading using Selenium and JUnit by foregoing the downloads dialog box.

Setting up the profile
We will create a new profile to be used for testing. A profile is simply a set of configuration that Firefox will use when you start it. You can use your existing profile as well, but I opted to create a new one so that the Firefox instance for testing will be as pristine as possible (i.e. no unnecessary plugins, no bookmarks, etc). A note: I am working on a Windows machine.
  1. Bring up the command prompt and start the profile chooser by typing in firefox.exe -ProfileManager -no-remote
  2. Click on Create Profile.
  3. Enter the profile name you wish to use. I suggest you include the name of your project instead of just naming it "Test".
  4. Click on Choose Folder and navigate to the folder where you wish to store the profile files. Make sure you can access that folder easily; write the path down because you will need this in JUnit.
  5. Click on Finish.
  6. You will be brought back to the profile chooser dialog. Click on the Don't ask at start-up checkbox.
Note: To make Firefox use your original configurations when you are browsing, bring up the profile chooser dialog, choose the profile named default, and start Firefox.

Configuring Firefox
Now we will configure Firefox to behave like how we want it to.
  1. From the profile chooser dialog, highlight your test profile and click the Start Firefox button.
  2. (Optional if Firefox is not your default browser) Uncheck "Always perform this check when starting Firefox".
  3. Click on Tools > Options. We will go through the steps for each tab in the Options dialog box.
  4. General tab
    • Under Startup, choose Show a blank page from the When Firefox starts dropdown.
    • Under Downloads, uncheck the Show the Downloads window when downloading a file checkbox.
    • Still under Downloads, click on Browse for the Save files to option. Navigate to the folder where you want Firefox to put downloaded files. Take note of this folder as well because we will use this in JUnit.
  5. Tabs tab
    • Uncheck Open new windows in a new tab instead and uncheck all warnings.
  6. Content tab
    • Uncheck Block pop-up windows.
  7. (Optional) Privacy tab
    • Under History, choose Never remember history from the Firefox will: dropdown.
  8. Advanced tab
    • Under the General sub-tab, uncheck Use autoscrolling and uncheck Always check to see if Firefox is the default browser on startup.
    • If you will be using a proxy server, choose the Network sub-tab and input your proxy settings there.
Adding MIME Types
Now we need to tell Firefox how to handle downloading each specific type of file.
  1. Navigate to the folder where you saved your custom profile and open the mimeTypes.rdf file in a text editor.
  2. Add the following lines towards the end of the file, right above the closing </RDF:RDF> tag.
  3. <RDF:Seq RDF:about="urn:mimetypes:root">
     <RDF:li RDF:resource="urn:mimetype:text/plain"/>
    </RDF:Seq>
       
    <RDF:Description RDF:about="urn:mimetype:handler:text/plain" NC:alwaysAsk="false" NC:saveToDisk="true">
            <NC:externalApplication RDF:resource="urn:mimetype:externalApplication:text/plain"/>
    </RDF:Description>
    
    <RDF:Description RDF:about="urn:mimetype:text/plain" NC:value="text/plain" NC:editable="true" NC:fileExtensions="txt" NC:description="Text Document">
     <NC:handlerProp RDF:resource="urn:mimetype:handler:text/plain"/>
    </RDF:Description>

    What we did there is we told Firefox to directly download files with MIME type text/plain. If you need to test downloading other file types like .doc or .pdf, you would need to add their MIME types to this file too.
  4. There are two ways to add MIME types to the mimeTypes.rdf file.
    • Via the Firefox Applications GUI
      • From Firefox, choose Tools > Options > Applications
      • If you have previously downloaded a file of the required MIME type, look for it in the list. In the dropdown menu on the right, under Action choose Save File.
      • If the MIME type you want is not in the list, you would need to go to a website that allows you to download a sample file. If the file downloads automatically without showing the download pop-up, you would not have to do anything. If the pop-up shows up, activate the Save File radio button and check the Do this automatically for files like this from now on checkbox and click Okay.
    • Manually editing the file
    •  Note: This is generally not the advised way to edit the file due to its complexity. Care is required!
      • Open the mimeTypes.rdf file.
      • Look for the RDF:Seq node and add your desired MIME type.
      • <RDF:Seq RDF:about="urn:mimetypes:root">
           <RDF:li RDF:resource="urn:mimetype:text/plain"/>
           <RDF:li RDF:resource="urn:mimetype:application/pdf"/>
        </RDF:Seq>
      • Add the RDF: Description nodes for that MIME type.
      • <RDF:Description RDF:about="urn:mimetype:application/pdf" NC:fileExtensions="pdf" NC:description="Adobe Acrobat Document" NC:value="application/pdf" NC:editable="true">
         <NC:handlerProp RDF:resource="urn:mimetype:handler:application/pdf"/>
        </RDF:Description>
        
        <RDF:Description RDF:about="urn:mimetype:handler:application/pdf" NC:saveToDisk="true" NC:alwaysAsk="false" />
To use this profile in our Selenium test:
FirefoxProfile profile = new FirefoxProfile(new File("path/to/your/profile"));
  
// We can also set the download folder via code
File testFile = new File("path/to/download/folder");
String downloadFolder = testFile.getAbsolutePath();
profile.setPreference("browser.download.dir", downloadFolder);
  
WebDriver driver = new FirefoxDriver(profile);
And you're done. :)