How to Set Transparent Color in CirclePageIndicator

Trying to get my blog up and running again, and came across this peculiarity with a useful Android library called CirclePageIndicator. Basically, if you want to set the non-selected fill of one of the circles to transparent, you must do it in java rather than xml.

device-2015-09-24-183029

E.g. This won’t work:

<com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/circlePageIndicator_intro"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="@dimen/margin_large"
        android:clickable="false"
        app:fillColor="@android:color/white"
        app:radius="@dimen/circle_indicator_radius"
        app:pageColor="@android:color/transparent"
        app:strokeWidth="1dp"
        android:layout_above="@+id/textView_login"
        android:paddingTop="@dimen/margin_small"/>

But this will:

mCirclePageIndicator = (CirclePageIndicator) view.findViewById(R.id.circlePageIndicator_intro);
mCirclePageIndicator.setPageColor(android.R.color.transparent);

Adding Genymotion Android Studio Plugin

I just discovered an awesome plug-in for Android Studio today — the Genymotion Plugin. It places a Genymotion icon in your Android Studio toolbar and enables one-click access to your Genymotion emulators.

Genymotion in toolbar

To those of you who aren’t using Genymotion as part of your regular Android development workflow, you should be. Genymotion’s speed will cut tons of time from your development cycles.

Okay, here’s how to install:

  1. In Android Studio, go to File > Settings.
  2. Select Plugins and click Browse Repositories.
  3. Right-click on Genymotion and click Download and install.
  4. To see Genymotion plugin icon, display the toolbar by clicking View > Toolbar.

You can also download and install manually the plugin genymotion-idea-plugin.jar (not recommended).

To use this plugin, Genymotion must be installed on your system.

Mapping iOS Assets to Android

So I’ve got a sweet new job working for Beachbody. We make awesome products like P90X and Brazil Butt Lift. We also make mobile apps. They hired me to essentially port their P90X iOS app to Android.

I’m in the planning stages right now and one of the challenges I’m facing is how to map the existing iOS asset classes to their appropriate Android asset classes. For iOS, it’s still pretty easy, you just have at most three classes of assets to worry about:

  • Small = 480 x 320 (163 dpi)
  • Large = 960 x 640 (326 dpi)
  • Tall = 1136 x 640 (326 dpi)

For Android, you have the following screen sizes classes:

  • Small = at least 426dp x 320dp
  • Medium = at least 470dp x 320dp
  • Large = at least 640dp x 480dp
  • xLarge = at least 960dp x 720dp

Then, you also have different density classes:

  • ldpi = low density (~120dpi)
  • mdpi = medium (baseline) density (~160dpi)
  • hdpi = high density (~240dpi)
  • xhdpi = extra high density (~320dpi)
Looking at this data, if you don’t have the resources to create assets for every Android density class (ldpi, mdpi, hdpi, xhdpi), it looks the following mappings make sense:
  • Small iOS images should work for ldpi and mdpi Android devices.
  • Large iOS images should work for hdpi and xhdpi Android devices.

Unless I hear about a better solution, this will the strategy I’m taking. Please comment on this post if you have any feedback or input! Cheers!

Android: How to Programmatically Lock the Orientation

In mobile application development, there may be times when you want certain screens within your app to always show in landscape or in portrait mode. Android makes this easy to do within your Activity class:

import android.content.pm.ActivityInfo;
...
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

You can also set this in the manifest:

<activity android:name=".YourActivity"
              android:label="@string/app_name"
              android:screenOrientation="landscape">

Android Selectors

Android selectors can be used to give your Buttons or images the feeling that they are being pressed. Essentially, a selector defines a different drawable for different states of an image or Button. Selector files should reside in the /res/drawable/ folder in your project. Here’s what a basic selector looks like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        android:drawable="@drawable/button_state_pressed" />
    <item android:state_focused="true"
         android:drawable="@drawable/button_state_focused" /> 
    <item android:drawable="@drawable/button_state_normal" /> 
</selector>

If this XML resided in /res/drawable/imagebutton_selector, for example you’d set the android:src attribute of your button to android:src=”@drawable/imagebutton_selector”.

Android: How to Hide Keyboard By Touching Screen Outside Keyboard

If you’ve ever worked for a mobile software company that builds both an iOS app and an Android app, many times the product people will ask that a certain feature be implemented consistently across both platforms.  This week I was tasked with implementing a popular iOS feature, the ability to hide the virtual keyboard when the user touches outside of the keyboard, on Android.

The methodology is simple, but not entirely intuitive. Let’s look at how it’s done. Basically, you get a handle on the layout in question. In this example, we’ll use a LinearLayout:

LinearLayout layout = (LinearLayout) findViewById(R.id.layout);

 

Then, override the layout’s OnTouchListener.onTouch() like so:

layout.setOnTouchListener(new OnTouchListener()
{
    @Override
    public boolean onTouch(View view, MotionEvent ev)
    {
        hideKeyboard(view);
        return false;
    }
});

 

The code to hide the keyboard is fairly popular:

/**
* Hides virtual keyboard
*
* @author kvarela
*/
protected void hideKeyboard(View view)
{
    InputMethodManager in = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
    in.hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
}

Android: How to Include Line Numbers, Class Names, and Method Names in Your Log Statements

Today, I’m going to share with you a handy tip for getting the most out of your Android log. I recommend that you create a wrapper class around the native Android Log class in order to:

  1. Have the ability to turn on or off logging.
  2. Have the ability to log handy things like line number, class names, and method names.

I’m going to show you a simple implementation of a Logger class that does these things:

import android.util.Log;

public class Logger
{
    private static boolean LOGGING_ENABLED;

    private static final int STACK_TRACE_LEVELS_UP = 5;

    public static void verbose(String tag, String message)
    {
	if (LOGGING_ENABLED)
	{
            Log.v(tag, getClassNameMethodNameAndLineNumber() + message);
	}
    }

    /**
     * Get the current line number. Note, this will only work as called from
     * this class as it has to go a predetermined number of steps up the stack
     * trace. In this case 5.
     * 
     * @author kvarela
     * @return int - Current line number.
     */
    private static int getLineNumber()
    {
	return Thread.currentThread().getStackTrace()[STACK_TRACE_LEVELS_UP].getLineNumber();
    }

    /**
     * Get the current class name. Note, this will only work as called from this
     * class as it has to go a predetermined number of steps up the stack trace.
     * In this case 5.
     * 
     * @author kvarela
     * @return String - Current line number.
     */
    private static String getClassName()
    {
	String fileName = Thread.currentThread().getStackTrace()[STACK_TRACE_LEVELS_UP].getFileName();

	// kvarela: Removing ".java" and returning class name
	return fileName.substring(0, fileName.length() - 5);
    }

    /**
     * Get the current method name. Note, this will only work as called from
     * this class as it has to go a predetermined number of steps up the stack
     * trace. In this case 5.
     * 
     * @author kvarela
     * @return String - Current line number.
     */
    private static String getMethodName()
    {
	return Thread.currentThread().getStackTrace()[STACK_TRACE_LEVELS_UP].getMethodName();
    }

    /**
     * Returns the class name, method name, and line number from the currently
     * executing log call in the form <class_name>.<method_name>()-<line_number>
     * 
     * @author kvarela
     * @return String - String representing class name, method name, and line
     *         number.
     */
    private static String getClassNameMethodNameAndLineNumber()
    {
	return "[" + getClassName() + "." + getMethodName() + "()-" + getLineNumber() + "]: ";
    }
}

 
As you can see, this uses Thread.currentThread().getStackTrace()[] to climb up the stack trace and get the information from the proper line of code. In my case, it has to climb 5 levels up to get this information. Yours could be different depending on how many levels of abstraction you have when you call getStackTrace(). I found the easiest way is just to experiment with different numbers.

Android FrameLayout Example

The Android FrameLayout is one of the lesser used layouts in the Android system, but it definitely has its purposes. The main reason you’d use a FrameLayout is when you only want to show one View at a time inside that FrameLayout. You can think of the Views as if they were in a stack with the most recently added View at the top.
Let’s walk through a simple example. The following code will first draw a red square with width 250dp in the FrameLayout and then draw a white square with width 150dp in the FrameLayout. Since the white square comes after the red square, the white square will be drawn on top of the red square.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainlayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <!-- kvarela: Red square -->
    <View
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="#FFFF0000" />

    <!-- kvarela: White square -->
    <View
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#FFFFFFFF" />
</FrameLayout>

Here’s a screen shot:

FrameLayout Example
FrameLayout Example