Change background color on scroll, started implementing circle indica…

…tors
dharmakshetri · Apr 3, 2016 · d9d1dcf · d9d1dcf
1 parent a13b909
commit d9d1dcf
Show file tree

Hide file tree

Showing 8 changed files with 144 additions and 43 deletions.
diff --git a/onboarder/src/main/java/com/chyrta/onboarder/OnboarderActivity.java b/onboarder/src/main/java/com/chyrta/onboarder/OnboarderActivity.java
@@ -1,5 +1,6 @@
 package com.chyrta.onboarder;
 
+import android.animation.ArgbEvaluator;
 import android.os.Build;
 import android.os.Bundle;
 import android.support.v4.content.ContextCompat;
@@ -8,34 +9,54 @@
 import android.view.View;
 import android.widget.Button;
 import android.widget.ImageButton;
+import android.widget.LinearLayout;
+
+import com.chyrta.onboarder.utils.ColorsArrayBuilder;
+import com.chyrta.onboarder.views.CircleIndicatorView;
 
-import java.util.ArrayList;
 import java.util.List;
 
-public class OnboarderActivity extends AppCompatActivity implements View.OnClickListener {
+public class OnboarderActivity extends AppCompatActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {
 
-    ViewPager vpOnboarderPager;
-    OnboarderAdapter onboarderAdapter;
-    ImageButton ibNext;
-    Button btnSkip, btnFinish;
+    private Integer[] colors;
+    private LinearLayout llIndicators;
+    private ViewPager vpOnboarderPager;
+    private OnboarderAdapter onboarderAdapter;
+    private ImageButton ibNext;
+    private Button btnSkip, btnFinish;
+    private ArgbEvaluator evaluator;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
-        setStatusBackgroundColor();
         setContentView(R.layout.activity_onboarder);
+        setStatusBackgroundColor();
+
+        getSupportActionBar().hide();
+
+        llIndicators = (LinearLayout) findViewById(R.id.ll_indicators);
         ibNext = (ImageButton) findViewById(R.id.ib_next);
         btnSkip = (Button) findViewById(R.id.btn_skip);
         btnFinish = (Button) findViewById(R.id.btn_finish);
         vpOnboarderPager = (ViewPager) findViewById(R.id.vp_onboarder_pager);
+        vpOnboarderPager.addOnPageChangeListener(this);
         ibNext.setOnClickListener(this);
         btnSkip.setOnClickListener(this);
         btnFinish.setOnClickListener(this);
+        evaluator = new ArgbEvaluator();
     }
 
     public void setOnboardPagesReady(List<OnboarderPage> pages) {
         onboarderAdapter = new OnboarderAdapter(pages, getSupportFragmentManager());
         vpOnboarderPager.setAdapter(onboarderAdapter);
+        setPageIndicators(pages.size());
+        colors = ColorsArrayBuilder.getPageBackgroundColors(this, pages);
+    }
+
+    public void setPageIndicators(int quantity) {
+        for (int i = 0; i < quantity; i++) {
+            llIndicators.addView(new CircleIndicatorView(this));
+        }
     }
 
     public void setStatusBackgroundColor() {
@@ -51,11 +72,31 @@ public void setStatusBackgroundColor() {
     public void onClick(View v) {
         int i = v.getId();
         if (i == R.id.ib_next) {
+            vpOnboarderPager.setCurrentItem(vpOnboarderPager.getCurrentItem() + 1);
         } else if (i == R.id.btn_skip) {
-        } else if (i == R.id.btn_finish) {
+            vpOnboarderPager.setCurrentItem(onboarderAdapter.getCount());
+        }
+    }
+
+    @Override
+    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
+        if(position < (onboarderAdapter.getCount() - 1) && position < (colors.length - 1)) {
+            vpOnboarderPager.setBackgroundColor((Integer) evaluator.evaluate(positionOffset, colors[position], colors[position + 1]));
         } else {
+            vpOnboarderPager.setBackgroundColor(colors[colors.length - 1]);
         }
     }
 
+    @Override
+    public void onPageSelected(int position) {
+        int lastPagePosition = onboarderAdapter.getCount() - 1;
+        ibNext.setVisibility(position == lastPagePosition ? View.GONE : View.VISIBLE);
+        btnFinish.setVisibility(position == lastPagePosition ? View.VISIBLE : View.GONE);
+    }
+
+    @Override
+    public void onPageScrollStateChanged(int state) {
+
+    }
 
 }
diff --git a/onboarder/src/main/java/com/chyrta/onboarder/OnboarderFragment.java b/onboarder/src/main/java/com/chyrta/onboarder/OnboarderFragment.java
@@ -93,17 +93,14 @@ public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle sa
         }
 
         if (onboarderTitleColor != 0) {
-            Log.v("ONBOARD_TITLE_COLOR", String.valueOf(onboarderTitleColor));
             tvOnboarderTitle.setTextColor(ContextCompat.getColor(getActivity(), onboarderTitleColor));
         }
 
         if (onboarderDescriptionColor != 0) {
-            Log.v("ONBOARD_DESC_COLOR", String.valueOf(onboarderDescriptionColor));
             tvOnboarderDescription.setTextColor(ContextCompat.getColor(getActivity(), onboarderDescriptionColor));
         }
 
         if (onboarderImageResId != 0) {
-            Log.v("ONBOARD_IMAGE", String.valueOf(onboarderImageResId));
             ivOnboarderImage.setImageDrawable(ContextCompat.getDrawable(getActivity(), onboarderImageResId));
         }
 

diff --git a/onboarder/src/main/java/com/chyrta/onboarder/OnboarderPage.java b/onboarder/src/main/java/com/chyrta/onboarder/OnboarderPage.java
@@ -15,6 +15,7 @@ public class OnboarderPage {
     @DrawableRes public int imageResourceId;
     @ColorRes public int titleColor;
     @ColorRes public int descriptionColor;
+    @ColorRes public int backgroundColor;
 
     public OnboarderPage(String title, String description) {
         this.title = title;
@@ -90,4 +91,11 @@ public int getImageResourceId() {
         return imageResourceId;
     }
 
+    public void setBackgroundColor(int backgroundColor) {
+        this.backgroundColor = backgroundColor;
+    }
+
+    public int getBackgroundColor() {
+        return backgroundColor;
+    }
 }
diff --git a/onboarder/src/main/java/com/chyrta/onboarder/utils/ColorsArrayBuilder.java b/onboarder/src/main/java/com/chyrta/onboarder/utils/ColorsArrayBuilder.java
@@ -0,0 +1,21 @@
+package com.chyrta.onboarder.utils;
+
+import android.content.Context;
+import android.support.v4.content.ContextCompat;
+
+import com.chyrta.onboarder.OnboarderPage;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class ColorsArrayBuilder {
+
+    public static Integer[] getPageBackgroundColors(Context context, List<OnboarderPage> pages) {
+        List<Integer> colorsList = new ArrayList<>();
+        for (OnboarderPage page : pages) {
+            colorsList.add(ContextCompat.getColor(context, page.getBackgroundColor()));
+        }
+        return colorsList.toArray(new Integer[pages.size()]);
+    }
+
+}
diff --git a/onboarder/src/main/java/com/chyrta/onboarder/views/CircleIndicatorView.java b/onboarder/src/main/java/com/chyrta/onboarder/views/CircleIndicatorView.java
@@ -0,0 +1,37 @@
+package com.chyrta.onboarder.views;
+
+import android.content.Context;
+import android.graphics.Canvas;
+import android.graphics.Color;
+import android.graphics.Paint;
+import android.graphics.drawable.shapes.OvalShape;
+import android.view.View;
+import android.view.ViewGroup;
+
+public class CircleIndicatorView extends View {
+
+    OvalShape oval;
+
+    public CircleIndicatorView(Context context) {
+        super(context);
+        Canvas canvas = new Canvas();
+        Paint paint = new Paint();
+        oval = new OvalShape();
+        oval.draw(canvas, paint);
+    }
+
+    @Override
+    protected void onDraw(Canvas canvas) {
+        super.onDraw(canvas);
+        canvas.drawColor(Color.WHITE);
+    }
+
+    @Override
+    public void setLayoutParams(ViewGroup.LayoutParams params) {
+        super.setLayoutParams(params);
+        params.height = 8;
+        params.width = 8;
+    }
+
+
+}
diff --git a/onboarder/src/main/res/layout/activity_onboarder.xml b/onboarder/src/main/res/layout/activity_onboarder.xml
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<android.support.design.widget.CoordinatorLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:id="@+id/cl_onboarder"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
+    tools:context=".OnboarderActivity">
 
     <android.support.v4.view.ViewPager
         android:id="@+id/vp_onboarder_pager"
@@ -11,51 +13,39 @@
         android:paddingBottom="?attr/actionBarSize"/>
 
     <View
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="1dp"
         android:layout_gravity="bottom"
-        android:layout_marginBottom="?attr/actionBarSize"/>
+        android:layout_marginBottom="?attr/actionBarSize"
+        android:alpha="0.12"
+        android:background="@android:color/white"/>
 
     <FrameLayout
-        android:layout_width="wrap_content"
+        android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:layout_gravity="bottom"
-        android:padding="@dimen/activity_margin">
+        android:paddingEnd="@dimen/activity_margin"
+        android:paddingLeft="@dimen/activity_margin"
+        android:paddingRight="@dimen/activity_margin"
+        android:paddingStart="@dimen/activity_margin">
+
 
         <Button
             android:id="@+id/btn_skip"
+            style="@style/Widget.AppCompat.Button.Borderless"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            style="@style/Widget.AppCompat.Button.Borderless"
-            android:layout_gravity="start|center"/>
+            android:layout_gravity="start|center"
+            android:text="@string/button.skip"
+            android:textColor="@color/white"/>
 
         <LinearLayout
+            android:id="@+id/ll_indicators"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center"
             android:orientation="horizontal">
 
-            <ImageView
-                android:id="@+id/intro_indicator_0"
-                android:layout_width="@dimen/indicator_size"
-                android:layout_height="@dimen/indicator_size"
-                android:layout_marginEnd="@dimen/activity_half_margin"
-                android:layout_marginRight="@dimen/activity_half_margin" />
-
-            <ImageView
-                android:id="@+id/intro_indicator_1"
-                android:layout_width="@dimen/indicator_size"
-                android:layout_height="@dimen/indicator_size"
-                android:layout_marginEnd="@dimen/activity_half_margin"
-                android:layout_marginRight="@dimen/activity_half_margin"/>
-
-            <ImageView
-                android:id="@+id/intro_indicator_2"
-                android:layout_width="@dimen/indicator_size"
-                android:layout_height="@dimen/indicator_size"
-                android:layout_marginEnd="@dimen/activity_half_margin"
-                android:layout_marginRight="@dimen/activity_half_margin" />
-
         </LinearLayout>
 
         <Button
@@ -64,6 +54,7 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="end|center"
+            android:text="@string/button.finish"
             android:textColor="@color/white"
             android:visibility="gone"/>
 

diff --git a/onboarder/src/main/res/values/strings.xml b/onboarder/src/main/res/values/strings.xml
@@ -1,3 +1,6 @@
 <resources>
     <string name="app_name">Android Onboarder</string>
+    <string name="button.finish">Finish</string>
+    <string name="button.next">Next</string>
+    <string name="button.skip">Skip</string>
 </resources>
diff --git a/sample/src/main/java/com/chyrta/androidonboarder/IntroActivity.java b/sample/src/main/java/com/chyrta/androidonboarder/IntroActivity.java
@@ -18,12 +18,15 @@ protected void onCreate(Bundle savedInstanceState) {
         OnboarderPage onboarderPage1 = new OnboarderPage("Title 1", "Title 2", R.drawable.ic_chevron_right);
         onboarderPage1.setTitleColor(R.color.colorPrimary);
         onboarderPage1.setDescriptionColor(R.color.colorAccent);
+        onboarderPage1.setBackgroundColor(R.color.colorPrimaryDark);
         OnboarderPage onboarderPage2 = new OnboarderPage("Title 2", "Description 2");
         onboarderPage2.setTitleColor(R.color.colorPrimaryDark);
         onboarderPage2.setDescriptionColor(R.color.colorAccent);
+        onboarderPage2.setBackgroundColor(R.color.colorPrimary);
         OnboarderPage onboarderPage3 = new OnboarderPage("Title 3", "Description 3");
-//        onboarderPage3.setTitleColor(R.color.colorPrimaryDark);
-//        onboarderPage3.setDescriptionColor(R.color.colorAccent);
+        onboarderPage3.setTitleColor(R.color.colorPrimaryDark);
+        onboarderPage3.setDescriptionColor(R.color.colorAccent);
+        onboarderPage3.setBackgroundColor(R.color.colorAccent);
 
         List<OnboarderPage> pages = new ArrayList<>();