- Added an option to set different compound drawables for navigation buttons (issue #54 & #55)

- Aligned navigation button text size and padding with design guides

Author: Piotr Zawadzki

README.md

@@ -243,9 +243,10 @@ public class DelayedTransitionStepFragmentSample extends Fragment implements Blo
 }
 ```
 
-### Changing Back/Next button labels per step
+### Changing Back/Next button labels & compound drawables per step
 Sometimes you might want to have different labels on the Next and/or Back navigation buttons on different steps e.g. use the default labels on the first few steps,
 but display 'Summary' just before the last page.
+You might also want to use your custom icons instead of the default navigation button compound drawables or not show the compound drawables for some of the buttons.
 <p><img src ="./gifs/different-next-buttons.gif" width="360" height="640"/></p>
 In such case you need to override the `getViewModel(int)` method from the `StepAdapter` e.g.
 ```java
@@ -257,13 +258,16 @@ In such case you need to override the `getViewModel(int)` method from the `StepA
         switch (position) {
             case 0:
                 builder
-                        .setNextButtonLabel("This way")
-                        .setBackButtonLabel("Go to first");
+                    .setNextButtonLabel("This way")
+                    .setBackButtonLabel("Cancel")
+                    .setNextButtonEndDrawableResId(R.drawable.ms_forward_arrow)
+                    .setBackButtonStartDrawableResId(StepViewModel.NULL_DRAWABLE);
                 break;
             case 1:
                 builder
-                        .setNextButtonLabel(R.string.go_to_summary)
-                        .setBackButtonLabel("Go to first");
+                    .setNextButtonLabel(R.string.go_to_summary)
+                    .setBackButtonLabel("Go to first")
+                    .setBackButtonStartDrawableResId(R.drawable.ms_back_arrow);
                 break;
             case 2:
                 builder.setBackButtonLabel("Go back");

material-stepper/src/main/java/com/stepstone/stepper/StepperLayout.java

@@ -427,8 +427,27 @@ private void initNavigation() {
         mNextNavigationButton.setText(mNextButtonText);
         mCompleteNavigationButton.setText(mCompleteButtonText);
 
-        //FIXME: 16/03/16 this is a workaround for tinting TextView's compound drawables on API 16-17 - when set in XML only the default color is used...
-        Drawable chevronEndDrawable = ResourcesCompat.getDrawable(getContext().getResources(), R.drawable.ic_chevron_end, null);
+        setBackgroundIfPresent(mBackButtonBackground, mBackNavigationButton);
+        setBackgroundIfPresent(mNextButtonBackground, mNextNavigationButton);
+        setBackgroundIfPresent(mCompleteButtonBackground, mCompleteNavigationButton);
+
+        mBackNavigationButton.setOnClickListener(mOnBackClickListener);
+        mNextNavigationButton.setOnClickListener(mOnNextClickListener);
+        mCompleteNavigationButton.setOnClickListener(mOnCompleteClickListener);
+    }
+
+    private void setCompoundDrawablesForNavigationButtons(@DrawableRes int backDrawableResId, @DrawableRes int nextDrawableResId) {
+        Drawable chevronStartDrawable = backDrawableResId != StepViewModel.NULL_DRAWABLE
+                ? ResourcesCompat.getDrawable(getContext().getResources(), backDrawableResId, null)
+                : null;
+        Drawable chevronEndDrawable = nextDrawableResId != StepViewModel.NULL_DRAWABLE
+                ? ResourcesCompat.getDrawable(getContext().getResources(), nextDrawableResId, null)
+                : null;
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
+            mBackNavigationButton.setCompoundDrawablesRelativeWithIntrinsicBounds(chevronStartDrawable, null, null, null);
+        } else {
+            mBackNavigationButton.setCompoundDrawablesWithIntrinsicBounds(chevronStartDrawable, null, null, null);
+        }
         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR1) {
             mNextNavigationButton.setCompoundDrawablesRelativeWithIntrinsicBounds(null, null, chevronEndDrawable, null);
         } else {
@@ -438,14 +457,6 @@ private void initNavigation() {
         TintUtil.tintTextView(mBackNavigationButton, mBackButtonColor);
         TintUtil.tintTextView(mNextNavigationButton, mNextButtonColor);
         TintUtil.tintTextView(mCompleteNavigationButton, mCompleteButtonColor);
-
-        setBackgroundIfPresent(mBackButtonBackground, mBackNavigationButton);
-        setBackgroundIfPresent(mNextButtonBackground, mNextNavigationButton);
-        setBackgroundIfPresent(mCompleteButtonBackground, mCompleteNavigationButton);
-
-        mBackNavigationButton.setOnClickListener(mOnBackClickListener);
-        mNextNavigationButton.setOnClickListener(mOnNextClickListener);
-        mCompleteNavigationButton.setOnClickListener(mOnCompleteClickListener);
     }
 
     private void setBackgroundIfPresent(@DrawableRes int backgroundRes, View view) {
@@ -629,12 +640,14 @@ private void onUpdate(int newStepPosition, boolean animate) {
 
         final StepViewModel viewModel = mStepAdapter.getViewModel(newStepPosition);
 
-        updateBackButtonText(viewModel);
+        updateBackButton(viewModel);
 
         if (!isLast) {
-            updateNextButtonText(viewModel);
+            updateNextButton(viewModel);
         }
 
+        setCompoundDrawablesForNavigationButtons(viewModel.getBackButtonStartDrawableResId(), viewModel.getNextButtonEndDrawableResId());
+
         //needs to be here in case user for any reason decide to change whether or not to show errors when going back.
         mStepperType.showErrorStateOnBack(mShowErrorStateOnBack);
         mStepperType.onStepSelected(newStepPosition);
@@ -645,7 +658,7 @@ private void onUpdate(int newStepPosition, boolean animate) {
         }
     }
 
-    private void updateNextButtonText(@NonNull StepViewModel viewModel) {
+    private void updateNextButton(@NonNull StepViewModel viewModel) {
         CharSequence nextButtonTextForStep = viewModel.getNextButtonLabel();
         if (nextButtonTextForStep == null) {
             mNextNavigationButton.setText(mNextButtonText);
@@ -654,7 +667,7 @@ private void updateNextButtonText(@NonNull StepViewModel viewModel) {
         }
     }
 
-    private void updateBackButtonText(@NonNull StepViewModel viewModel) {
+    private void updateBackButton(@NonNull StepViewModel viewModel) {
         CharSequence backButtonTextForStep = viewModel.getBackButtonLabel();
         if (backButtonTextForStep == null) {
             mBackNavigationButton.setText(mBackButtonText);

material-stepper/src/main/java/com/stepstone/stepper/viewmodel/StepViewModel.java

@@ -1,24 +1,34 @@
 package com.stepstone.stepper.viewmodel;
 
 import android.content.Context;
+import android.support.annotation.DrawableRes;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
 import android.support.annotation.StringRes;
 
+import com.stepstone.stepper.R;
+
 /**
  * Contains view information about the step.
  *
  * @author Piotr Zawadzki
  */
 public class StepViewModel {
 
+    /**
+     * Drawable resource ID to be used for back/next navigation button compound drawables when we do not want to show them.
+     * @see #mNextButtonEndDrawableResId
+     * @see #mBackButtonStartDrawableResId
+     */
+    public static final int NULL_DRAWABLE = -1;
+
     private StepViewModel() {}
 
     /**
      * The displayable name of the step.
      */
     @Nullable
-    private CharSequence title;
+    private CharSequence mTitle;
 
     /**
      * Allows to override the text on the Next button for this step.
@@ -29,7 +39,7 @@ private StepViewModel() {}
      * This is not used for the last step.
      */
     @Nullable
-    private CharSequence nextButtonLabel;
+    private CharSequence mNextButtonLabel;
 
     /**
      * Allows to override the text on the Back button for this step.
@@ -39,44 +49,74 @@ private StepViewModel() {}
      * By default this is {@code null}.
      */
     @Nullable
-    private CharSequence backButtonLabel;
+    private CharSequence mBackButtonLabel;
+
+    /**
+     * Drawable resource ID to be used for next button's end compound drawable.
+     * {@link com.stepstone.stepper.R.drawable#ic_chevron_end} is the default.
+     */
+    @DrawableRes
+    private int mNextButtonEndDrawableResId;
+
+    /**
+     * Drawable resource ID to be used for back button's start compound drawable.
+     * {@link com.stepstone.stepper.R.drawable#ic_chevron_start} is the default.
+     */
+    @DrawableRes
+    private int mBackButtonStartDrawableResId;
 
     @Nullable
     public CharSequence getTitle() {
-        return title;
+        return mTitle;
     }
 
     @Nullable
     public CharSequence getNextButtonLabel() {
-        return nextButtonLabel;
+        return mNextButtonLabel;
     }
 
     @Nullable
     public CharSequence getBackButtonLabel() {
-        return backButtonLabel;
+        return mBackButtonLabel;
+    }
+
+    @DrawableRes
+    public int getNextButtonEndDrawableResId() {
+        return mNextButtonEndDrawableResId;
+    }
+
+    @DrawableRes
+    public int getBackButtonStartDrawableResId() {
+        return mBackButtonStartDrawableResId;
     }
 
     public static class Builder {
 
         @NonNull
-        private final Context context;
+        private final Context mContext;
 
         @Nullable
-        private CharSequence title;
+        private CharSequence mTitle;
 
         @Nullable
-        private CharSequence nextButtonLabel;
+        private CharSequence mNextButtonLabel;
 
         @Nullable
-        private CharSequence backButtonLabel;
+        private CharSequence mBackButtonLabel;
+
+        @DrawableRes
+        private int mNextButtonEndDrawableResId = R.drawable.ic_chevron_end;
+
+        @DrawableRes
+        private int mBackButtonStartDrawableResId = R.drawable.ic_chevron_start;
 
         /**
          * Creates a builder for the step info.
          *
          * @param context the parent context
          */
         public Builder(@NonNull Context context) {
-            this.context = context;
+            this.mContext = context;
         }
 
         /**
@@ -86,7 +126,7 @@ public Builder(@NonNull Context context) {
          * @return This Builder object to allow for chaining of calls to set methods
          */
         public Builder setTitle(@StringRes int titleId) {
-            this.title = context.getString(titleId);
+            this.mTitle = mContext.getString(titleId);
             return this;
         }
 
@@ -97,7 +137,7 @@ public Builder setTitle(@StringRes int titleId) {
          * @return This Builder object to allow for chaining of calls to set methods
          */
         public Builder setTitle(@Nullable CharSequence title) {
-            this.title = title;
+            this.mTitle = title;
             return this;
         }
 
@@ -108,7 +148,7 @@ public Builder setTitle(@Nullable CharSequence title) {
          * @return This Builder object to allow for chaining of calls to set methods
          */
         public Builder setNextButtonLabel(@StringRes int nextButtonLabelId) {
-            this.nextButtonLabel = context.getString(nextButtonLabelId);
+            this.mNextButtonLabel = mContext.getString(nextButtonLabelId);
             return this;
         }
 
@@ -119,7 +159,7 @@ public Builder setNextButtonLabel(@StringRes int nextButtonLabelId) {
          * @return This Builder object to allow for chaining of calls to set methods
          */
         public Builder setNextButtonLabel(@Nullable CharSequence nextButtonLabel) {
-            this.nextButtonLabel = nextButtonLabel;
+            this.mNextButtonLabel = nextButtonLabel;
             return this;
         }
 
@@ -130,7 +170,7 @@ public Builder setNextButtonLabel(@Nullable CharSequence nextButtonLabel) {
          * @return This Builder object to allow for chaining of calls to set methods
          */
         public Builder setBackButtonLabel(@StringRes int backButtonLabelId) {
-            this.backButtonLabel = context.getString(backButtonLabelId);
+            this.mBackButtonLabel = mContext.getString(backButtonLabelId);
             return this;
         }
 
@@ -141,7 +181,29 @@ public Builder setBackButtonLabel(@StringRes int backButtonLabelId) {
          * @return This Builder object to allow for chaining of calls to set methods
          */
         public Builder setBackButtonLabel(@Nullable CharSequence backButtonLabel) {
-            this.backButtonLabel = backButtonLabel;
+            this.mBackButtonLabel = backButtonLabel;
+            return this;
+        }
+
+        /**
+         * Set the drawable resource ID to be used for next button's end compound drawable.
+         *
+         * @param nextButtonEndDrawableResId drawable resource ID to be used for next button's end compound drawable.
+         * @return This Builder object to allow for chaining of calls to set methods
+         */
+        public Builder setNextButtonEndDrawableResId(@DrawableRes int nextButtonEndDrawableResId) {
+            this.mNextButtonEndDrawableResId = nextButtonEndDrawableResId;
+            return this;
+        }
+
+        /**
+         * Set the drawable resource ID to be used for back button's start compound drawable.
+         *
+         * @param backButtonStartDrawableResId drawable resource ID to be used for back button's start compound drawable.
+         * @return This Builder object to allow for chaining of calls to set methods
+         */
+        public Builder setBackButtonStartDrawableResId(@DrawableRes int backButtonStartDrawableResId) {
+            this.mBackButtonStartDrawableResId = backButtonStartDrawableResId;
             return this;
         }
 
@@ -152,9 +214,11 @@ public Builder setBackButtonLabel(@Nullable CharSequence backButtonLabel) {
          */
         public StepViewModel create() {
             final StepViewModel viewModel = new StepViewModel();
-            viewModel.title = this.title;
-            viewModel.backButtonLabel = this.backButtonLabel;
-            viewModel.nextButtonLabel = this.nextButtonLabel;
+            viewModel.mTitle = this.mTitle;
+            viewModel.mBackButtonLabel = this.mBackButtonLabel;
+            viewModel.mNextButtonLabel = this.mNextButtonLabel;
+            viewModel.mNextButtonEndDrawableResId = this.mNextButtonEndDrawableResId;
+            viewModel.mBackButtonStartDrawableResId = this.mBackButtonStartDrawableResId;
             return viewModel;
         }
 

material-stepper/src/main/res/drawable-hdpi/ic_chevron_left.png

@@ -4,7 +4,7 @@
 
     <item android:id="@android:id/mask">
 
-        <inset xmlns:android="http://schemas.android.com/apk/res/android"
+        <inset
             android:insetBottom="@dimen/ms_nav_bar_button_margin"
             android:insetLeft="@dimen/ms_nav_bar_button_margin"
             android:insetRight="@dimen/ms_nav_bar_button_margin"

material-stepper/src/main/res/drawable-hdpi/ic_chevron_right.png

@@ -3,7 +3,7 @@
 
     <item android:state_pressed="true">
 
-        <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetBottom="@dimen/ms_nav_bar_button_margin" android:insetLeft="@dimen/ms_nav_bar_button_margin" android:insetRight="@dimen/ms_nav_bar_button_margin" android:insetTop="@dimen/ms_nav_bar_button_margin">
+        <inset android:insetBottom="@dimen/ms_nav_bar_button_margin" android:insetLeft="@dimen/ms_nav_bar_button_margin" android:insetRight="@dimen/ms_nav_bar_button_margin" android:insetTop="@dimen/ms_nav_bar_button_margin">
             <shape android:shape="rectangle">
                 <corners android:radius="@dimen/ms_material_button_corner_radius" />
                 <solid android:color="@color/ms_defaultButtonBackgroundColor" />
@@ -14,7 +14,7 @@
 
     <item>
 
-        <inset xmlns:android="http://schemas.android.com/apk/res/android" android:insetBottom="@dimen/ms_nav_bar_button_margin" android:insetLeft="@dimen/ms_nav_bar_button_margin" android:insetRight="@dimen/ms_nav_bar_button_margin" android:insetTop="@dimen/ms_nav_bar_button_margin">
+        <inset android:insetBottom="@dimen/ms_nav_bar_button_margin" android:insetLeft="@dimen/ms_nav_bar_button_margin" android:insetRight="@dimen/ms_nav_bar_button_margin" android:insetTop="@dimen/ms_nav_bar_button_margin">
             <shape android:shape="rectangle">
                 <corners android:radius="@dimen/ms_material_button_corner_radius" />
                 <solid android:color="@android:color/transparent" />

material-stepper/src/main/res/drawable-mdpi/ic_chevron_left.png

@@ -19,7 +19,8 @@ limitations under the License.
     <dimen name="ms_dotted_progress_bar_dot_size">10dp</dimen>
     <dimen name="ms_tabs_container_lateral_padding">24dp</dimen>
 
-    <dimen name="ms_nav_bar_button_padding">8dp</dimen>
+    <dimen name="ms_nav_bar_button_padding_vertical">8dp</dimen>
+    <dimen name="ms_nav_bar_button_padding_lateral">16dp</dimen>
     <dimen name="ms_nav_bar_button_margin">8dp</dimen>
 
     <dimen name="ms_material_button_corner_radius">2dp</dimen>
@@ -29,7 +30,7 @@ limitations under the License.
     <dimen name="ms_progress_bar_width">96dp</dimen>
     <dimen name="ms_progress_bar_height">3dp</dimen>
     <dimen name="ms_error_drawable_padding">8dp</dimen>
-    <dimen name="ms_navigation_button_text_size">16sp</dimen>
+    <dimen name="ms_navigation_button_text_size">14sp</dimen>
 
     <!-- TABS -->
     <dimen name="ms_step_tab_height">72dp</dimen>