ArgbEvaluator example in Android


           There are thousands of classes that can be used to develop an application and many of them are just too awesome. Hold your breath, animation lovers. Here we bring you a subclass of TypeEvaluator, ArgbEvaluator. This pretty class can make the transitions from one colour to another colour a smooth process. This class has just one function evaluate() which has three parameters. The first parameter is a fraction. It is used to calculate the in-between value from start value to end value colours. The second and third parameters are the starting colour and the end colour. This function returns a 4 byte colour, an int value, from a linearly interpolated range from start colour to end colour.

Below is the output of this program - easy to see through gif image :

ArgbEvaluator example in Android
    Let us see its properties through an implementation in ViewPage. We will be developing an application that will have three fragments in a ViewPager and each fragment will have a background colour different from the other. To change background colours we will be using ArgbEvaluator. So let’s get started:

Below are the xml for three fragment with some text to identify the fragment number. We have kept the layout all the three almost same and just changing the background colour using a ViewPager.

fragment_one.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:gravity="center"
tools:context=".FragmentOne">

<TextView
android:id="@+id/text1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="Fragment 1"
android:textColor="@android:color/black"
android:textSize="30dp" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_below="@id/text1" android:text="slide to go to next fragment" android:textColor="@android:color/black" android:textSize="18dp" />

</RelativeLayout> 


fragment_two.xml

<FrameLayout 
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"
tools:context="cte.argbdemo.FragmentTwo">

<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Fragment 2"
android:gravity="center"
android:textSize="30dp"
android:textColor="@android:color/black"/>

</FrameLayout> 

fragment_three.xml


<FrameLayout 
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" 
tools:context="cte.argbdemo.FragmentThree">

<TextView android:layout_width="match_parent" 
android:layout_height="match_parent"
android:text="Fragment 3"
android:gravity="center"
android:textSize="30dp"
android:textColor="@android:color/black"/>

</FrameLayout>


Now coming to the main activity xml, we have used a RelativeLayout. Other parent layouts can also be used, for eg LinearLayout

activity_main.xml


<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/relativeLayout"
tools:context="cte.argbdemo.MainActivity">

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

      Here we have defined a ViewPager that will be holding the three fragments and allow smooth horizontal sliding. For the ViewPager, we need to create a custom PagerAdapter. Since we are inflating Fragments for a page, our adapter will be extending FragmentStatePagerAdapter.

CustomAdapter.java


public class CustomAdapter extends FragmentStatePagerAdapter {
 
 public CustomAdapter(FragmentManager fm) {
 super(fm);
 }
 
 @Override
 public Fragment getItem(int position) {
 //set for which position which fragment is to be inflated switch (position){
 case 0: return new FragmentOne(); 
 case 1: return new FragmentTwo(); 
 case 2: return new FragmentThree();
 }
 return null;
 }
 @Override

 public int getCount() {
 //there are three fragments to be displayed in the viewPager return 3;
 }
}

Coming to main part.

MainActivity.java

public class MainActivity extends AppCompatActivity {

RelativeLayout relativeLayout;
ViewPager viewPager;
CustomAdapter customAdapter;
int[] pagerColors = {R.color.pager1, R.color.pager2, R.color.pager3};

@Override
protected void onCreate(Bundle savedInstanceState)
{ 
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
viewPager = (ViewPager) findViewById(R.id.viewPager);
relativeLayout = (RelativeLayout) findViewById(R.id.relativeLayout); //defining an object of CustomAdapter
customAdapter = new CustomAdapter(getSupportFragmentManager());
viewPager.setAdapter(customAdapter);
// setting pageChangeListener

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() 
{ 
@Override
 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 
 {
  //if android version is lollipop or greater, change the color of status bar as well
  if (Build.VERSION.SDK_INT >= 21)
  {
  // set the color change animation only when page change is from 0 to 1 and from 1 to 2 if (position < 2) {
  getWindow().setStatusBarColor((Integer) new ArgbEvaluator().evaluate(positionOffset, ContextCompat.getColor(getBaseContext(), pagerColors[position]),
  ContextCompat.getColor(getBaseContext(), pagerColors[position + 1])));
  }
   else
  {
  getWindow().setStatusBarColor(ContextCompat.getColor(getBaseContext(), pagerColors[position]));
  }

 }

// set the color change animation only when page change is from 0 to 1 and from 1 to 2 if (position < 2) {

relativeLayout.setBackgroundColor((Integer) new ArgbEvaluator().evaluate(positionOffset, ContextCompat.getColor(getBaseContext(), pagerColors[position]),
ContextCompat.getColor(getBaseContext(), pagerColors[position + 1]))); 
} 
else
{
relativeLayout.setBackgroundColor(ContextCompat.getColor(getBaseContext(),
pagerColors[position]));
}
}
@Override
 public void onPageSelected(int position)
 {
 }
@Override
 public void onPageScrollStateChanged(int state) 
 {
 }

});
}

}



      Here we have first attached our custom adapter to the ViewPager. Now we have to change the backgrounds with the scrolling of pages. For this we have attached an OnPageChangeListener to our ViewPager. Here we override the function onPageScrolled. The second parameter of this function positionOffset serves as the first parameter of the evaluate function of ArgbEvaluator. positionOffset is a fraction which holds a value 0 when there is no scrolling and increases as scrolling starts and reaches 1 when the next page is completely visible and the previous page is completely hidden.

See the gradual changes implemented using ArgbEvaluator. The main part of the project is attached

Download ArgbEvaluator Project here

Hope this tutorial and example helps you to understand ArgbEvaluator in Android..





Reactions:

0 comments :

Post a Comment