javaandroidandroid-animationandroid-drawerstepper

Animate while setBackgroundColor in android


I'm working on a custom stepper. Everything is working fine.

What I want to do now is animate the stepper while filling the current step.

this Image shows my idea:

this Image shows my idea:

This is my code while setting the color of the line, title, and the icon src:

private void DrawStepper(int position) {
    switch (position) {

        case 0:
            imgStepShipper.setImageResource(R.drawable.ic_current_step);
            txtStepShipper.setTextColor(getResources().getColor(R.color.colorPrimary));
            line.setBackgroundColor(getResources().getColor(R.color.colorDarkWhite));

            imgStepConsignee.setImageResource(R.drawable.ic_unselected_step);
            txtStepConsignee.setTextColor(getResources().getColor(R.color.colorDarkSuperWhite));
            line2.setBackgroundColor(getResources().getColor(R.color.colorDarkWhite));

            imgStepShipment.setImageResource(R.drawable.ic_unselected_step);
            txtStepShipment.setTextColor(getResources().getColor(R.color.colorDarkSuperWhite));
            line3.setBackgroundColor(getResources().getColor(R.color.colorDarkWhite));

            imgStepCharges.setImageResource(R.drawable.ic_unselected_step);
            txtStepCharges.setTextColor(getResources().getColor(R.color.colorDarkSuperWhite));

            break;

        case 1:
            imgStepShipper.setImageResource(R.drawable.ic_done_step);
            txtStepShipper.setTextColor(getResources().getColor(R.color.colorPrimary));
            line.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

            imgStepConsignee.setImageResource(R.drawable.ic_current_step);
            txtStepConsignee.setTextColor(getResources().getColor(R.color.colorPrimary));
            line2.setBackgroundColor(getResources().getColor(R.color.colorDarkWhite));

            imgStepShipment.setImageResource(R.drawable.ic_unselected_step);
            txtStepShipment.setTextColor(getResources().getColor(R.color.colorDarkSuperWhite));
            line3.setBackgroundColor(getResources().getColor(R.color.colorDarkWhite));

            imgStepCharges.setImageResource(R.drawable.ic_unselected_step);
            txtStepCharges.setTextColor(getResources().getColor(R.color.colorDarkSuperWhite));

            break;

        case 2:
            imgStepShipper.setImageResource(R.drawable.ic_done_step);
            txtStepShipper.setTextColor(getResources().getColor(R.color.colorPrimary));
            line.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

            imgStepConsignee.setImageResource(R.drawable.ic_done_step);
            txtStepConsignee.setTextColor(getResources().getColor(R.color.colorPrimary));
            line2.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

            imgStepShipment.setImageResource(R.drawable.ic_current_step);
            txtStepShipment.setTextColor(getResources().getColor(R.color.colorPrimary));
            line3.setBackgroundColor(getResources().getColor(R.color.colorDarkWhite));

            imgStepCharges.setImageResource(R.drawable.ic_unselected_step);
            txtStepCharges.setTextColor(getResources().getColor(R.color.colorDarkSuperWhite));

            break;

        case 3:
            imgStepShipper.setImageResource(R.drawable.ic_done_step);
            txtStepShipper.setTextColor(getResources().getColor(R.color.colorPrimary));
            line.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

            imgStepConsignee.setImageResource(R.drawable.ic_done_step);
            txtStepConsignee.setTextColor(getResources().getColor(R.color.colorPrimary));
            line2.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

            imgStepShipment.setImageResource(R.drawable.ic_done_step);
            txtStepShipment.setTextColor(getResources().getColor(R.color.colorPrimary));
            line3.setBackgroundColor(getResources().getColor(R.color.colorPrimary));

            imgStepCharges.setImageResource(R.drawable.ic_current_step);
            txtStepCharges.setTextColor(getResources().getColor(R.color.colorPrimary));
            break;
    }
}

Position is the current step.

and this is my UI:

and this is my UI:

As I said, I want to animate the line each time a move from step to another.

Thank you :)


Solution

  • well, u can make that line to be progressBar and animate setting its progress.

    This how animation is done: Animate ProgressBar update in Android

    Or you can animate the view background, just using drawables with animations, check here: Animate change of view background color on Android