Android Create Stepper Wizard Light

Android Create Stepper Wizard Light


1. Project Structure


2. Gradle

plugins {
  id 'com.android.application'
}

android {
  compileSdkVersion 30
  buildToolsVersion "30.0.3"

  defaultConfig {
    applicationId "com.stepper.wizardlight"
    minSdkVersion 19
    targetSdkVersion 30
    versionCode 1
    versionName "1.0"

    testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
  }

  buildTypes {
    release {
      minifyEnabled false
      proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
    }
  }
  compileOptions {
    sourceCompatibility JavaVersion.VERSION_1_8
    targetCompatibility JavaVersion.VERSION_1_8
  }
}

dependencies {
  implementation 'com.balysv:material-ripple:1.0.2'
  implementation 'androidx.appcompat:appcompat:1.3.0'
  implementation 'com.google.android.material:material:1.4.0'
  implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
  implementation 'com.crystal:crystalrangeseekbar:1.1.3'
  testImplementation 'junit:junit:4.+'
  androidTestImplementation 'androidx.test.ext:junit:1.1.3'
  androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}


3. Main Activity

package com.stepper.wizardlight;

import android.content.Context;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager;
import com.stepper.wizardlight.utils.Tools;

public class MainActivity extends AppCompatActivity {

  private static final int MAX_STEP = 4;

  private ViewPager viewPager;
  private MyViewPagerAdapter myViewPagerAdapter;
  private Button btnNext;
  private String about_title_array[] = {
      "Ready to Travel",
      "Pick the Ticket",
      "Flight to Destination",
      "Enjoy Holiday"
  };
  private String about_description_array[] = {
      "Choose your destination, plan Your trip. Pick the best place for Your holiday",
      "Select the day, pick Your ticket. We give you the best prices. We guarantee!",
      "Safe and Comfort flight is our priority. Professional crew and services.",
      "Enjoy your holiday, Dont forget to feel the moment and take a photo!",
  };
  private int about_images_array[] = {
      R.drawable.img_wizard_1,
      R.drawable.img_wizard_2,
      R.drawable.img_wizard_3,
      R.drawable.img_wizard_4
  };

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

    initComponent();
    Tools.setSystemBarColor(this, R.color.grey_5);
    Tools.setSystemBarLight(this);
  }

  private void initComponent() {
    viewPager = (ViewPager) findViewById(R.id.view_pager);
    btnNext = (Button) findViewById(R.id.btn_next);

    // adding bottom dots
    bottomProgressDots(0);

    myViewPagerAdapter = new MyViewPagerAdapter();
    viewPager.setAdapter(myViewPagerAdapter);
    viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
    btnNext.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        int current = viewPager.getCurrentItem() + 1;
        if (current < MAX_STEP) {
          // move to next screen
          viewPager.setCurrentItem(current);
        } else {
          finish();
        }
      }
    });

    ((ImageButton)findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        finish();
      }
    });
  }

  private void bottomProgressDots(int current_index) {
    LinearLayout dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
    ImageView[] dots = new ImageView[MAX_STEP];

    dotsLayout.removeAllViews();
    for (int i = 0; i < dots.length; i++) {
      dots[i] = new ImageView(this);
      int width_height = 15;
      LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(width_height, width_height));
      params.setMargins(10, 10, 10, 10);
      dots[i].setLayoutParams(params);
      dots[i].setImageResource(R.drawable.shape_circle);
      dots[i].setColorFilter(getResources().getColor(R.color.grey_20), PorterDuff.Mode.SRC_IN);
      dotsLayout.addView(dots[i]);
    }

    if (dots.length > 0) {
      dots[current_index].setImageResource(R.drawable.shape_circle);
      dots[current_index].setColorFilter(getResources().getColor(R.color.orange_400), PorterDuff.Mode.SRC_IN);
    }
  }

  // viewpager change listener
  ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

    @Override
    public void onPageSelected(final int position) {
      bottomProgressDots(position);

      if (position == about_title_array.length - 1) {
        btnNext.setText(getString(R.string.GOT_IT));
        btnNext.setBackgroundColor(getResources().getColor(R.color.orange_400));
        btnNext.setTextColor(Color.WHITE);

      } else {
        btnNext.setText(getString(R.string.NEXT));
        btnNext.setBackgroundColor(getResources().getColor(R.color.grey_10));
        btnNext.setTextColor(getResources().getColor(R.color.grey_90));
      }
    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {

    }

    @Override
    public void onPageScrollStateChanged(int arg0) {

    }
  };

  /**
   * View pager adapter
   */
  public class MyViewPagerAdapter extends PagerAdapter {
    private LayoutInflater layoutInflater;

    public MyViewPagerAdapter() {
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
      layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

      View view = layoutInflater.inflate(R.layout.item_stepper_wizard, container, false);
      ((TextView) view.findViewById(R.id.title)).setText(about_title_array[position]);
      ((TextView) view.findViewById(R.id.description)).setText(about_description_array[position]);
      ((ImageView) view.findViewById(R.id.image)).setImageResource(about_images_array[position]);
      container.addView(view);

      return view;
    }

    @Override
    public int getCount() {
      return about_title_array.length;
    }

    @Override
    public boolean isViewFromObject(View view, Object obj) {
      return view == obj;
    }


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
      View view = (View) object;
      container.removeView(view);
    }
  }
}


4. Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/white"
  android:fitsSystemWindows="false"
  android:orientation="vertical">

  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="5">

    <androidx.viewpager.widget.ViewPager
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="@android:color/white" />

    <ImageButton
      android:id="@+id/bt_close"
      android:layout_width="?android:attr/actionBarSize"
      android:layout_height="?android:attr/actionBarSize"
      android:layout_alignParentRight="true"
      android:background="?attr/selectableItemBackgroundBorderless"
      android:tint="@color/grey_40"
      app:srcCompat="@drawable/ic_close" />

  </RelativeLayout>

  <LinearLayout
    android:id="@+id/layoutDots"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:background="@android:color/white"
    android:gravity="center|top"
    android:orientation="horizontal" />

  <com.balysv.materialripple.MaterialRippleLayout
    style="@style/RippleStyleBlack"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <Button
      android:id="@+id/btn_next"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/grey_10"
      android:text="@string/NEXT"
      android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
      android:textColor="@color/grey_90"
      android:textStyle="bold" />

  </com.balysv.materialripple.MaterialRippleLayout>

</LinearLayout>


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/lyt_parent"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@android:color/white"
  android:padding="@dimen/spacing_xlarge">

  <LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <ImageView
      android:id="@+id/image"
      android:layout_width="250dp"
      android:layout_height="250dp"
      android:padding="@dimen/spacing_xlarge"
      android:src="@drawable/img_wizard_1" />

    <TextView
      android:id="@+id/title"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Ready to Travel"
      android:textAppearance="@style/TextAppearance.AppCompat.Medium"
      android:textColor="@color/grey_80"
      android:textStyle="bold" />

    <TextView
      android:id="@+id/description"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="@dimen/spacing_middle"
      android:text="Find Featured and Premium \nItem From Our Store"
      android:textAlignment="center"
      android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
      android:textColor="@color/grey_60" />

  </LinearLayout>

</RelativeLayout>


5. Value

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:ns1="urn:oasis:names:tc:xliff:document:1.2">

  <style name="TextAppearance.AppCompat.Subhead" parent="Base.TextAppearance.AppCompat.Subhead"/>
  <style name="TextAppearance.AppCompat.Medium" parent="Base.TextAppearance.AppCompat.Medium"/>

</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>

  <color name="grey_3">#f7f7f7</color>
  <color name="grey_5">#f2f2f2</color>
  <color name="grey_10">#e6e6e6</color>
  <color name="grey_20">#cccccc</color>
  <color name="grey_40">#999999</color>
  <color name="grey_60">#666666</color>
  <color name="grey_80">#37474F</color>
  <color name="grey_90">#263238</color>
  <color name="grey_95">#1a1a1a</color>
  <color name="grey_100_">#0d0d0d</color>

</resources>