how to fill the color of image according to percentage of textview in android

Question

How to fill the image according to percentage of textview.and it should change according to percentage of textview.below is my code so please check.

              private void displayData(String data) {
    if (data != null) { 
        battery.setText(data);
    }
    }

this is my textview i am getting data as 100 or some 60 like that.what ever value i got that much level my imageview should fill with color and display.

             <TextView  android:id="@+id/batterylevel"
android:layout_width="wrap_content"
android:layout_height="150dp" android:text="BRV Battery"  android:layout_below="@+id/sos"/>

  <ImageView 
      android:id="@+id/image_level"
android:layout_width="wrap_content"
android:layout_height="100dp"
android:src="@drawable/ic_launcher" 
android:layout_toRightOf="@+id/batterylevel"
android:layout_below="@+id/sos"
android:layout_above="@+id/portbearmode"

android:alpha="1"
android:adjustViewBounds="true"

 android:contentDescription="@string/app_name"/>

in the layout i did like this i should apply any animations or simply setting any options please tell me. if battery textview is 60 it should fill blue color upto 60 and remaining 40 as white color.

Answer 1

the following my method to get the battery percentage and pass that value to imagelevel button to display level.

          private void displayData(String data) {
    Log.v("______________________No serives_______________",data );
    if (data != null) { 
        battery.setText(data);
        int x=Integer.parseInt(battery.getText().toString());
     image_level.getLayoutParams().height =  x*2;
        Log.v("______BATERY LEVEL_________", "__IN DISPLAYDATA()___DCA__________"+data);
    }

and the following code is in layout to display.

               <RelativeLayout
    android:id="@+id/image_layout"
    android:layout_width="100dp"
android:layout_height="100dp"

android:layout_below="@+id/linearlayout"
  android:background="@drawable/ic_launcher"
>
      <Button
      android:id="@+id/image_level"
android:layout_width="100dp"
 android:layout_height="100dp"
    android:layout_alignParentBottom="true"
    android:background="#8099FFFF"
 android:contentDescription="@string/app_name"/>

Answer 2

See the now i hardcoded u can change it to dynamic

package com.example.testapp;

import android.app.Activity;
import android.os.Bundle;
 import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
Button image_level;
EditText battery_level;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

 battery_level = (EditText) findViewById(R.id.batterylevel);
    image_level = (Button) findViewById(R.id.image_level);
    battery_level.addTextChangedListener(new TextWatcher() {

        @Override
        public void onTextChanged(CharSequence s, int start, int before,
                int count) {
            if(!battery_level.getText().toString().equals("")){
 x =                   Integer.parseInt(battery_level.getText().toString());
            }
            image_level.getLayoutParams().height = (int) (1.5 * x);

        }

        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
        }

        @Override
        public void afterTextChanged(Editable s) {
        }
    });

}


}

now the xml

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/batterylevel"
    android:layout_width="wrap_content"
    android:layout_height="150dp"
    android:layout_below="@+id/sos"
     android:inputType="number"
    android:text="10" />

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="100dp"
    android:layout_above="@+id/portbearmode"
    android:layout_below="@+id/sos"
    android:layout_toRightOf="@+id/batterylevel"
    android:background="#ffffff" >

    <Button
        android:id="@+id/image_level"
        android:layout_width="wrap_content"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:background="#ff0000"
        android:contentDescription="@string/app_name" />
</RelativeLayout>

</RelativeLayout>

Answer 3

if u want to change the opacity then you can simply set the opacity according to the value in textview usinf setalpha method.

I have a good idea to solve this simply try it your self.

Put your imageview in a linear/relative layout set the heightto the max width that u want to assign for the image view.

Then initially set the heightof the image view to zero

Then depending on the value from textview set the height of the image view programatically

 int x=Integer.parseInt(battery.getText().toString());

 image_level.getLayoutParams().height = x;