Google TV

Adding Screen Dimming to Google TV Applications

Paul Carff - Google TV Developer Relations

Overview

So you've built a really cool app that runs on Google TV. Your users really like your app so much, that they want it to stay on their screen while they do other things. (For example, it could be a dashboard app like my Steampunk clock.) However, your teammate glances over at your old Plasma screen (that you updated to a connected TV using Google TV) and says, "Hey, that is a really cool app, but it is really bright!" You think you could tone this down a bit. You want to dim the screen on your Google TV.

In Android you can use a WindowManager to manage the screen setting with something like:

    WindowManager.LayoutParams lp = getWindow().getAttributes();
        lp.screenBrightness = 0;
        getWindow().setAttributes(lp);
    

However, since for most current Google TV devices, you do not have direct access to the screen hardware. You are most likely connected to the TV screen through a HDMI port. So the example above will not work.

One simple solution is to use an Overlay and control the alpha component. Colors are represented as packed ints, made up of 4 bytes: alpha, red, green, blue. For example let's break down this color value: 0xFF000000 (ARGB).

    0x FF    00   00    00
      alpha  red  blue  green
    

Each component ranges between 0..255 with 0 meaning no contribution for that component, and 255 meaning 100% contribution. Almost everyone understands the RGB components, but the alpha components can come in handy for you to dim your screen. The alpha component sets the transparency of the layer. The higher the value the more transparent the layer is, and the more the RGB components are "transmitted through". The lower the value, the less transparent the layer, hence the "dimmer" the screen appears.

So how do you use this? You could use a RelativeLayout over the top of all other items in your app. For example, if you could add the following code as the last item in your res/layout/main.xml.

      <RelativeLayout>
        android:id="@+id/dimmer_overlay"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/dim2">
      </RelativeLayout>
    

Giving the RelativeLayout an Id @+id/dimmer_overlay to reference later in your app, you are affording yourself the ability to change the background color value.

In res/values/colors.xml you could define some possible dimming factors:

      <resources>
          <color name="dim1">#00000000</color>
          <color name="dim2">#44000000</color>
          <color name="dim3">#88000000</color>
          <color name="dim4">#AA000000</color>
          <color name="dim5">#EE000000</color>
      </resources>
    

Then you just need to change the background value of your RelativeLayout to one of these colors. Two ways to implement this come to mind immediately. First you could set up a timer mechanism to time-out after a period of in-activity and change the background value to dim the screen. Then, on any activity you could awaken and brighten the screen up again.

A second way is to allow the user to manually change the value. For example, you could configured a RadioGroup to change the value depending upon which button was selected.

 
    dimLayout = (View) findViewById(R.id.dimmer_overlay);
    mRadioGroup = (RadioGroup) findViewById(R.id.radiogroup);
    mRadioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

        public void onCheckedChanged(RadioGroup group, int checkedId) {

            switch (checkedId) {
                case R.id.dimbutton1 :
                    dimLayout.setBackgroundResource(R.color.dim1);
                    break;
                case R.id.dimbutton2 : 
                    dimLayout.setBackgroundResource(R.color.dim2);
                    break;
                case R.id.dimbutton3 : 
                    dimLayout.setBackgroundResource(R.color.dim3);
                    break;
                case R.id.dimbutton4 : 
                    dimLayout.setBackgroundResource(R.color.dim4);
                    break;
                case R.id.dimbutton5 : 
                    dimLayout.setBackgroundResource(R.color.dim5);
                    break;
            }
        }
    });
    

You might have to play with the various alpha values to get smooth and even changes between the settings, so as always, you should make sure to test your app.

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.