0

Estoy creando una onbarding-screen tengo ya las paginas que se conforman en un fragmento con una imagen y texto añadidos en un ViewPager, solo me falta eso cambiar la transición entre las páginas que dependiendo del color de fondo de cada página haga un fundido de color entre ellas.

pagina1 => roja
pagina2 => verde
pagina3 => azul

transición de color rojo a verde a azul

1 respuesta 1

2

Esto podría ser la solución que buscas ArgbEvaluator

Un ejemplo básico de implementación en el método onPageScrolled() del ViewPager:

int mStartColor = Color.RED;
int mEndColor = Color.GREEN;
ArgbEvaluator mArgbEvaluator;

@Override
public void onPageScrolled(final int position, float positionOffset, 
                                 int positionOffsetPixels) {
    //Instanciaamos el objeto ArgbEvaluator
    if (mArgbEvaluator == null)
        mArgbEvaluator = new ArgbEvaluator();
    //Obtenemos el color progresivamente
    int color = (Integer) mArgbEvaluator.evaluate(positionOffset, mStartColor, mEndColor);
    //Cambiamos el color de fondo de la vista
    mBackgroundView.setBackgroundColor(color);
}

Ahora un ejemplo de como implementarlo de forma mas extendida acontinuación:

Teniendo en cuenta que tienes una actividad que extenderá de AppCompatActivity, un adaptador que extenderá de FragmentStatePagerAdapter y un fragmento que extenderá de Fragment.

MyActivity.java:

public class MyActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

private static final String TAG = MyActivity.class.getSimpleName();

private ViewPager mViewPager;
private MyPagerAdapter mAdapter;
private RelativeLayout mBackgroundView;

int[] colorListBackground;
ArgbEvaluator mArgbEvaluator;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);

    colorListBackground = new int[]{
            ContextCompat.getColor(this, R.color.color_red),
            ContextCompat.getColor(this, R.color.color_green),
            ContextCompat.getColor(this, R.color.color_blue)};

    mBackgroundView = (RelativeLayout) findViewById(R.id.root_background);
    mViewPager = (ViewPager) findViewById(R.id.pager);

    mAdapter = new MyPagerAdapter(getSupportFragmentManager());

    setupViewPager(mViewPager);
    mViewPager.setOffscreenPageLimit(1);
    mViewPager.setOnPageChangeListener(this);
    //mViewPager.setPageTransformer(true, new CardPagerTransformer());

    mArgbEvaluator = new ArgbEvaluator();
}

/**
 * Poblamos el adaptador y lo asociamos al viewPager.
 * 
 * @param viewPager     viewPager donde se asociará el
 *                      adaptador con los fragmentos 
 *                      creados.
 */
private void setupViewPager(ViewPager viewPager) {
    mAdapter.addFragment(new MyFragment.Builder()
            .setBackgroundColor(colorListBackground[0])
            .setImageResource(R.drawable.image_page_0)
            .setTitle(getResources().getString(R.string.title_page_0))
            .setDescription(getResources().getString(R.string.description_page_0))
            .build());
    mAdapter.addFragment(new MyFragment.Builder()
            .setBackgroundColor(colorListBackground[1])
            .setImageResource(R.drawable.image_page_1)
            .setTitle(getResources().getString(R.string.title_page_1))
            .setDescription(getResources().getString(R.string.description_page_1))
            .build());
    mAdapter.addFragment(new MyFragment.Builder()
            .setBackgroundColor(colorListBackground[2])
            .setImageResource(R.drawable.image_page_2)
            .setTitle(getResources().getString(R.string.title_page_2))
            .setDescription(getResources().getString(R.string.description_page_2))
            .build());
    viewPager.setAdapter(mAdapter);
}

@Override
public void onPageScrolled(final int position, float positionOffset, int positionOffsetPixels) {
    //Actualizamos el color del background
    int colorUpdate = (Integer) mArgbEvaluator.evaluate(
            positionOffset, colorListBackground[position],
            colorListBackground[position == colorListBackground.length-1 ? position : position + 1]);
    mBackgroundView.setBackgroundColor(colorUpdate);

    //Actualizamos el color del StatusBar
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        getWindow().setStatusBarColor(colorUpdate);
    }
}

@Override
public void onPageSelected(int position) {
    //Otras acciones a realizar si es necesario
}

@Override
public void onPageScrollStateChanged(int state) {
    //Otras acciones a realizar si es necesario
}

@Override
public void onBackPressed() {
    if (!(mViewPager.getCurrentItem() == 0)) {
        mViewPager.setCurrentItem(mViewPager.getCurrentItem() - 1);
    } else {
        super.onBackPressed();
    }
}

}

MyPagerAdapter.java:

public class MyPagerAdapter extends FragmentStatePagerAdapter {

private final List<Fragment> mFragmentList = new ArrayList<>();

public MyPagerAdapter(FragmentManager fm) {
    super(fm);
}

@Override
public Fragment getItem(int position) {
    return mFragmentList.get(position);
}

@Override
public int getCount() {
    return mFragmentList.size();
}

public void addFragment(Fragment fragment) {
    mFragmentList.add(fragment);
}

}

MyFragment.java:

public class MyFragment extends Fragment {

private static final String TAG = MyFragment.class.getSimpleName();

public static final String EXTRA_PAGER_BACKGROUND = "com.myPackage.android.PAGER_BACKGROUND";
public static final String EXTRA_PAGER_IMAGE = "com.myPackage.android.PAGER_IMAGE";
public static final String EXTRA_PAGER_TITLE = "com.myPackage.android.PAGER_TITLE";
public static final String EXTRA_PAGER_DESCRIPTION = "com.myPackage.android.PAGER_DESCRIPTION";

public static final int NO_IMAGE = -1;

public static class Builder {

    private int mBackgroundColor;
    private int mImageResource;
    private String mTitle;
    private String mDescription;

    public Builder() {
        mImageResource = NO_IMAGE;
    }

    public Builder setBackgroundColor(int color) {
        mBackgroundColor = color;
        return this;
    }

    public Builder setImageResource(int image) {
        mImageResource = image;
        return this;
    }

    public Builder setTitle(String title) {
        mTitle = title;
        return this;
    }

    public Builder setDescription(String description) {
        mDescription = description;
        return this;
    }

    public MyFragment build() {
        return MyFragment.newInstance(mBackgroundColor, mImageResource, mTitle, mDescription);
    }
}

private int background_color;
private int imagen_drawable;
private String title, description;

ImageView mImageView;
TextView mTitleView;
TextView mDescriptionview;

public static MyFragment newInstance(int background_color, int imagen_drawable, String title, String description) {
    MyFragment fragment = new MyFragment();
    Bundle bundle = new Bundle();
    bundle.putInt(EXTRA_PAGER_BACKGROUND, background_color);
    bundle.putInt(EXTRA_PAGER_IMAGE, imagen_drawable);
    bundle.putString(EXTRA_PAGER_TITLE, title);
    bundle.putString(EXTRA_PAGER_DESCRIPTION, description);
    fragment.setArguments(bundle);
    //fragment.setRetainInstance(true);
    return fragment;
}

@SuppressLint("MissingSuperCall")
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onActivityCreated(savedInstanceState);
    background_color = getArguments().getInt(EXTRA_PAGER_BACKGROUND);
    imagen_drawable = getArguments().getInt(EXTRA_PAGER_IMAGE);
    title = getArguments().getString(EXTRA_PAGER_TITLE);
    description = getArguments().getString(EXTRA_PAGER_DESCRIPTION);
}

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_my, container, false);

    mImageView = (ImageView) rootView.findViewById(R.id.img_pager_image);
    mTitleView = (TextView) rootView.findViewById(R.id.txt_pager_title);
    mDescriptionView = (TextView) rootView.findViewById(R.id.txt_page_description);

    mTitleView.setText(this.title);
    mDescriptionView.setText(this.description);

    if (imagen_drawable != NO_IMAGE)
        mImageView.setImageDrawable(getResources().getDrawable(this.imagen_drawable));

    return rootView;
}

@Override
public void onDestroyView() {
    super.onDestroyView();
}

@Override
public void onPause() {
    super.onPause();
}

@Override
public void onResume() {
    super.onResume();
}

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.