Added an example of how to use custom fonts with StepperLayout

Author: Piotr Zawadzki

README.md

@@ -317,7 +317,7 @@ For an example of how to use it with views please see the sample app.
 Basic styling can be done by choosing the active and inactive step colors. 
 There are some additional properties which can be changed directly from StepperLayout's attributes e.g. the background of bottom navigation buttons (see <a href="#stepperlayout-attributes">StepperLayout attributes</a>)
 For advanced styling you can use `ms_stepperLayoutTheme` StepperLayout's attribute and provide your custom style to be used.
-See 'Custom StepperLayout theme - progress bar' and 'Custom StepperLayout theme - Tabs dark' in the sample app for an example.
+See 'Custom StepperLayout theme' in the sample app for an example.
 
 ### Advanced usage
 For other examples, e.g. persisting state on rotation, displaying errors, changing whether the user can go to the next step, etc. check out the sample app.

build.gradle

@@ -27,6 +27,7 @@ configure(allprojects) {
 
         /* Sample only */
         butterknifeVersion                  = "7.0.1"
+        calligraphyVersion                  = "2.2.0"
     }
 
 }

material-stepper/src/main/java/com/stepstone/stepper/internal/StepTab.java

@@ -66,7 +66,11 @@ public class StepTab extends RelativeLayout {
 
     private int mDividerWidth = StepperLayout.DEFAULT_TAB_DIVIDER_WIDTH;
 
-    private boolean hasError;
+    private boolean mHasError;
+
+    private Typeface mNormalTypeface;
+
+    private Typeface mBoldTypeface;
 
     public StepTab(Context context) {
         this(context, null);
@@ -91,6 +95,10 @@ public StepTab(Context context, AttributeSet attrs, int defStyleAttr) {
         mStepTitle = ((TextView) findViewById(R.id.ms_stepTitle));
 
         mTitleColor = mStepTitle.getCurrentTextColor();
+
+        Typeface typeface = mStepTitle.getTypeface();
+        mNormalTypeface = Typeface.create(typeface, Typeface.NORMAL);
+        mBoldTypeface = Typeface.create(typeface, Typeface.BOLD);
     }
 
     /**
@@ -111,7 +119,7 @@ public void toggleDividerVisibility(boolean show) {
      */
     public void updateState(final boolean done, final boolean showErrorOnBack, final boolean current) {
         //if this tab has errors and the user decide not to clear when going backwards, simply ignore the update
-        if (this.hasError && showErrorOnBack) {
+        if (this.mHasError && showErrorOnBack) {
             return;
         }
 
@@ -120,10 +128,10 @@ public void updateState(final boolean done, final boolean showErrorOnBack, final
         mStepErrorIndicator.setVisibility(GONE);
         colorViewBackground(done ? mStepDoneIndicator : mStepNumber, done || current);
 
-        this.hasError = false;
+        this.mHasError = false;
 
         mStepTitle.setTextColor(mTitleColor);
-        mStepTitle.setTypeface(current ? Typeface.DEFAULT_BOLD : Typeface.DEFAULT);
+        mStepTitle.setTypeface(current ? mBoldTypeface : mNormalTypeface);
         mStepTitle.setAlpha(done || current ? OPAQUE_ALPHA : INACTIVE_STEP_TITLE_ALPHA);
     }
 
@@ -148,7 +156,7 @@ public void updateErrorState(boolean isLastStep, boolean hasError) {
             mStepTitle.setTextColor(mTitleColor);
         }
 
-        this.hasError = hasError;
+        this.mHasError = hasError;
     }
 
     /**

sample/build.gradle

@@ -26,4 +26,5 @@ dependencies {
     compile project(':material-stepper')
     compile ("com.android.support:appcompat-v7:$androidSupportLibraryVersion")
     compile ("com.jakewharton:butterknife:$butterknifeVersion")
+    compile ("uk.co.chrisjenx:calligraphy:$calligraphyVersion")
 }

sample/src/main/AndroidManifest.xml

@@ -34,10 +34,7 @@
         <activity android:name=".ReturnButtonActivity" />
         <activity android:name=".NoFragmentsActivity" />
         <activity
-            android:name=".CustomStepperLayoutThemeProgressBarActivity"
-            android:theme="@style/AppTheme.CustomStepperLayoutThemeProgressBarSample" />
-        <activity
-            android:name=".CustomStepperLayoutThemeTabsActivity"
+            android:name=".CustomStepperLayoutThemeActivity"
             android:theme="@style/AppThemeDark" />
     </application>
 

sample/src/main/assets/fonts/Oswald-Stencbab.ttf

@@ -16,11 +16,20 @@
 
 package com.stepstone.stepper.sample;
 
-public class CustomStepperLayoutThemeProgressBarActivity extends AbstractStepperActivity {
+import android.content.Context;
+
+import uk.co.chrisjenx.calligraphy.CalligraphyContextWrapper;
+
+public class CustomStepperLayoutThemeActivity extends AbstractStepperActivity {
 
     @Override
     protected int getLayoutResId() {
-        return R.layout.activity_custom_stepper_layout_theme_progress_bar;
+        return R.layout.activity_custom_stepper_layout_theme;
+    }
+
+    @Override
+    protected void attachBaseContext(Context newBase) {
+        super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
     }
 
 }

sample/src/main/java/com/stepstone/stepper/sample/CustomStepperLayoutThemeProgressBarActivity.java renamed to sample/src/main/java/com/stepstone/stepper/sample/CustomStepperLayoutThemeActivity.java

@@ -113,14 +113,9 @@ public void onNoFrag(View view){
         startActivity(new Intent(this, NoFragmentsActivity.class));
     }
 
-    @OnClick(R.id.customStepperLayoutThemeWithProgressBar)
-    public void onCustomStepperLayoutThemeWithProgressBar(View view){
-        startActivity(new Intent(this, CustomStepperLayoutThemeProgressBarActivity.class));
-    }
-
-    @OnClick(R.id.customStepperLayoutThemeWithTabs)
+    @OnClick(R.id.customStepperLayoutTheme)
     public void onCustomStepperLayoutThemeWithTabs(View view){
-        startActivity(new Intent(this, CustomStepperLayoutThemeTabsActivity.class));
+        startActivity(new Intent(this, CustomStepperLayoutThemeActivity.class));
     }
 
 }

sample/src/main/java/com/stepstone/stepper/sample/CustomStepperLayoutThemeTabsActivity.java

@@ -111,18 +111,11 @@
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="@string/no_fragments" />
-
-        <Button
-            android:id="@+id/customStepperLayoutThemeWithProgressBar"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:text="@string/custom_stepperlayout_theme_progress_bar" />
-
         <Button
-            android:id="@+id/customStepperLayoutThemeWithTabs"
+            android:id="@+id/customStepperLayoutTheme"
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
-            android:text="@string/custom_stepperlayout_theme_tabs" />
+            android:text="@string/custom_stepperlayout_theme" />
 
     </LinearLayout>
 </ScrollView>

sample/src/main/java/com/stepstone/stepper/sample/MainActivity.java

@@ -16,8 +16,7 @@
     <string name="different_navigation_buttons">Different navigation buttons</string>
     <string name="show_back_button">Show Back button on first step</string>
     <string name="no_fragments">No Fragment Stepper</string>
-    <string name="custom_stepperlayout_theme_progress_bar">Custom StepperLayout theme - progress bar</string>
-    <string name="custom_stepperlayout_theme_tabs">Custom StepperLayout theme - Tabs dark</string>
+    <string name="custom_stepperlayout_theme">Custom StepperLayout theme</string>
 
     <string name="tab_title">Tab title</string>
     <string name="lorem_ipsum">Lorem ipsum dolor sit amet, sale viris intellegam usu eu, persius patrioque sea at. Ne salutandi repudiandae mei, cu mollis accusam mediocrem mea. Altera dolorem praesent at vis. Torquatos philosophia ad quo. Omnis adipiscing has ea, mel no hinc iudico percipit.</string>

sample/src/main/res/layout/activity_custom_stepper_layout_theme_progress_bar.xml renamed to sample/src/main/res/layout/activity_custom_stepper_layout_theme.xml

@@ -10,15 +10,11 @@
         <item name="ms_stepperStyle">@style/DotStepperStyle</item>
     </style>
 
-    <style name="AppTheme.CustomStepperLayoutThemeProgressBarSample">
-        <item name="ms_stepperStyle">@style/CustomStepperLayoutThemeProgressBarSample</item>
-    </style>
-
     <style name="AppThemeDark" parent="Theme.AppCompat">
         <item name="colorPrimary">@color/darkColorPrimary</item>
         <item name="colorPrimaryDark">@color/darkColorPrimaryDark</item>
         <item name="colorAccent">@color/colorAccent</item>
-        <item name="ms_stepperStyle">@style/CustomStepperLayoutThemeTabsSample</item>
+        <item name="ms_stepperStyle">@style/CustomStepperLayoutThemeSample</item>
         <item name="ms_showErrorState">true</item>
     </style>
 
@@ -33,50 +29,36 @@
         <item name="ms_bottomNavigationBackground">?attr/colorAccent</item>
     </style>
 
-    <style name="CustomStepperLayoutThemeTabsSample">
+    <style name="CustomStepperLayoutThemeSample">
         <item name="ms_stepperType">tabs</item>
         <item name="ms_stepperLayoutTheme">@style/DarkCustomStepperLayoutTheme</item>
         <item name="ms_activeStepColor">#006867</item>
         <item name="ms_inactiveStepColor">#62807f</item>
     </style>
 
-    <style name="CustomStepperLayoutThemeProgressBarSample">
-        <item name="ms_stepperType">progress_bar</item>
-        <item name="ms_stepperLayoutTheme">@style/CustomStepperLayoutTheme</item>
-    </style>
-
     <style name="DarkCustomStepperLayoutTheme" parent="MSDefaultStepperLayoutTheme">
         <item name="ms_bottomNavigationStyle">@style/DarkBottomNavigationStyle</item>
         <item name="ms_tabsContainerStyle">@style/DarkStepTabsContainerStyle</item>
         <item name="ms_stepTabTitleStyle">@style/DarkStepTabTitleStyle</item>
-    </style>
-
-    <style name="CustomStepperLayoutTheme" parent="MSDefaultStepperLayoutTheme">
-        <item name="ms_bottomNavigationStyle">@style/CustomBottomNavigationStyle</item>
         <item name="ms_backNavigationButtonStyle">@style/CustomBackButtonStyle</item>
         <item name="ms_nextNavigationButtonStyle">@style/CustomNextButtonStyle</item>
         <item name="ms_completeNavigationButtonStyle">@style/CustomCompleteButtonStyle</item>
-        <item name="ms_colorableProgressBarStyle">@style/CustomColorableProgressBarStyle</item>
     </style>
 
     <style name="CustomBottomNavigationStyle" parent="MSBottomNavigation">
         <item name="android:layout_height">40dp</item>
     </style>
 
     <style name="CustomBackButtonStyle" parent="MSNavBarButton.Back">
-        <item name="android:textSize">12sp</item>
+        <item name="fontPath">fonts/Oswald-Stencbab.ttf</item>
     </style>
 
     <style name="CustomNextButtonStyle" parent="MSNavBarButton.Next">
-        <item name="android:textSize">12sp</item>
+        <item name="fontPath">fonts/Oswald-Stencbab.ttf</item>
     </style>
 
     <style name="CustomCompleteButtonStyle" parent="MSNavBarButton.Complete">
-        <item name="android:textSize">12sp</item>
-    </style>
-
-    <style name="CustomColorableProgressBarStyle" parent="MSColorableProgressBar">
-        <item name="android:layout_height">6dp</item>
+        <item name="fontPath">fonts/Oswald-Stencbab.ttf</item>
     </style>
 
     <style name="DarkBottomNavigationStyle" parent="MSBottomNavigation">
@@ -89,6 +71,7 @@
 
     <style name="DarkStepTabTitleStyle" parent="MSStepTabTitle">
         <item name="android:textColor">@color/ms_white</item>
+        <item name="fontPath">fonts/Oswald-Stencbab.ttf</item>
     </style>
 
 </resources>