How do you rate this blog

Saturday, May 3, 2014

Changing the color of an app based on Light Sensor

Recently I got a strange requirement that the theme of the app should change based on the light conditions. So my initial approach was to inflate a new theme as and when the conditions change but that was a bad idea since it would be a very bad user experience since there would be a period where in the app would reinitialize, so I  stopped over engineering about the problem and used a simple approach of recoloring the layouts. In this post I will just go ahead and create a simple app which shows the current reading of brightness in terms of lux, if the brightness is below 10 lux the background becomes black and the text becomes white and if the brightness the logic is simple given below are steps :

1. Register the Light sensor if it is present.
2. Read the sensor value.
3. if the value is above 10 LUX then change the theme having black background and white text else have white background and black text.

Now that we know the logic lets go ahead and code this.

Step 1: Create a new project using andoroid 4.3 in my case I have called it as LightSensor
Step 2: Go to the LightSensor.java file within src folder of the project and lets implement the logic that we have discussed above.
   
    Step a: We need to see if the Light sensor is present or not and if present we need to register the light sensor to obtain readings. This can be done using the code below:
        if(curSensor!=null){
            SM.registerListener(this, curSensor, SM.SENSOR_DELAY_FASTEST);
           
        }
        else{
            Values=(TextView) findViewById(R.id.textView1);
            Values.setText("Unable to register sensor");
        }
    If you want to know in detail how to use light sensor then go my post given in this link LightSensor
   
    Step b: Now that we have registered we need to obtain the value, this is done using the code below on the onSensorChanged function which you have to override if you implement SensorEventListener.
       

        if(event.sensor.getType()==Sensor.TYPE_LIGHT){
            // to obtain the light sensor value
            Values.setText("Value= "+event.values[0]+" lux");
            LSVal=event.values[0];
            //to call the theme changer based on the light condition
            if(event.values[0] > 100){
                changeTheme(1);
                displays.setText("Good Light Conditions");
            }
            else{
                changeTheme(0);
                displays.setText("bad Light Conditions");       
            }
        }
       
Step 3: You have now completed the code for reading the light sensor value, now we need to write a simple code to change the layout based on the condition. I have used a parameter which helps me to find out which layout I should shift to when there is a change light condition, you can do it in a much better way, this is just for an example.

     public void changeTheme(int theme){
        if(theme==1){
            //Layout Background
            LL.setBackgroundColor(Color.WHITE);
            //Text Background
            Values.setBackgroundColor(Color.WHITE);
            Values.setTextColor(Color.BLACK);
            displays.setBackgroundColor(Color.WHITE);
            displays.setTextColor(Color.BLACK);
            sensorSetting.setBackgroundColor(Color.WHITE);
            sensorSetting.setTextColor(Color.BLACK);
            //Edit Text
            sensortresh.setBackgroundColor(Color.WHITE);
            sensortresh.setTextColor(Color.BLACK);           
        }
        else{
            //Layout Background
            LL.setBackgroundColor(Color.BLACK);
            //Text Background
            Values.setBackgroundColor(Color.BLACK);
            Values.setTextColor(Color.WHITE);
            displays.setBackgroundColor(Color.BLACK);
            displays.setTextColor(Color.WHITE);
            sensorSetting.setBackgroundColor(Color.BLACK);
            sensorSetting.setTextColor(Color.WHITE);
            //Edit Text
            sensortresh.setBackgroundColor(Color.BLACK);
            sensortresh.setTextColor(Color.WHITE);
        }
    }

    The above code changes the background and the text colors, you can modify the colors based on your need. You can do various things like if the light conditions are bad you can auto adjust the brightness of the screen (although this is already done by the phone). Given below is are screen shots of the app in different light conditions.

Good light Condition

Bad Light Condition

If you have a better way of doing the same please do let me know.

No comments:

Post a Comment