Next, we'll add an icon image to the view.

For now, let's just use a generic icon, such as android_robot.png. A copy of this can be found on the Internet, and there's a copy included with the files for this chapter. Paste the android_robot.png file into your project's app/res/drawable/ folder. Don't worry, we'll be using the actual app icons later.

We want to display both the text and an icon together, so we can add the code in order to add the image views to the addContent method.

In the onCreate method of MainActivity, modify the addContent call to pass the icon as a second parameter:

        Drawable icon = getResources()
            .getDrawable(R.drawable.android_robot, null);
        overlayView.addContent("Hello Virtual World!", icon);

In addContent of OverlayView, add the icon parameter and pass it to the OverlayEye views:

    public void addContent(String text, Drawable icon) {
        leftEye.addContent(text, icon);
        rightEye.addContent(text, icon);
    }

Now for the OverlayEye class. At the top of OverlayEye, add a variable to the ImageView instance:

    private class OverlayEye extends ViewGroup {
        private TextView textView;
        private ImageView imageView;

Modify addContent of OverlayEye in order to also take a Drawable icon and create the ImageView instance for it. The modified method now looks like this:

        public void addContent(String text, Drawable icon) {
            textView = new TextView(context, attrs);
            textView.setGravity(Gravity.CENTER);
            textView.setTextColor(textColor);
            textView.setText(text);
            addView(textView);

            imageView = new ImageView(context, attrs);
            imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            imageView.setAdjustViewBounds(true);
            // preserve aspect ratio
            imageView.setImageDrawable(icon);
            addView(imageView);
        }

Using imageView.setScaleType.CENTER_INSIDE tells the view to scale the image from its center. Setting setAdjustViewBounds to true tells the view to preserve the image's aspect ratio.

Set the layout parameters of ImageView in the onLayout method of OverlayEye. Add the following code to the bottom of the onLayout method:

            final float imageSize = 0.1f;
            final float verticalImageOffset = -0.07f;
            float imageMargin = (1.0f - imageSize) / 2.0f;
            topMargin = (height * (imageMargin + verticalImageOffset));
            float botMargin = topMargin + (height * imageSize);
            imageView.layout(0, (int) topMargin, width, (int) botMargin);

When the image is drawn, it will fit within the top and bottom margins, scaled automatically. In other words, given a desired image size (such as 10% of the screen height, or 0.1f), the image margin factor is (1 - size)/2, multiplied by the pixel height of the screen to get the margin in pixels. We also add a small vertical offset (negative, to move it up) for spacing between the icon and the text below it.

Finally, add the imageView offset to the setHeadOffset method:

        public void setHeadOffset(int headOffset) {
            textView.setX( headOffset + depthOffset );
            imageView.setX( headOffset + depthOffset );
        }

Run the app. Your screen will look like this. When you move your head, both the icon and text will scroll.