Setup Wizard Like Language Selector

Setup Wizard is shown when the phone is first starting up or rested. It will be nice to create a setup wizard like language selector. This tutorial is all about creating setup wizard like language selector. So the app contain a xml file for ui class file to handle the ui and finally a floating action button. First create the ui with a fab (floating action button). We are using slightly modified “NumberPicker” to get the desired look for the ui. Two methods are also created. One for changing the divider color which separating the selected value and the other for changing text color of displayed names.

1. activity_set_up_wizard.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/cStart"
    android:background="@color/colorPrimary"
    tools:context="logicchip.setupwizard.SetUpWizard">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:visibility="gone"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_set_up_wizard" />

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:orientation="vertical">
            <TextView
                android:layout_marginTop="50dp"
                android:focusable="true"
                android:focusableInTouchMode="true"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorText"
                android:textSize="@dimen/text20"
                android:text="@string/select_language"/>
            <NumberPicker

                android:layout_marginTop="20dp"
                android:layout_marginBottom="20dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/picker">
            </NumberPicker>

            <android.support.design.widget.FloatingActionButton
                android:id="@+id/fab"
                android:focusable="true"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:tint="@color/colorPrimaryText"
                app:srcCompat="@drawable/ic_action_name" />
        </LinearLayout>
    </ScrollView>

</android.support.design.widget.CoordinatorLayout>

2.SetUp Wizard.java

Here setDividerColor method is used to change divider color and setNumberPickerTextColor method is for changing text color. Both methods are for getting the desired shape and color of the Setup Wizard.

public class SetUpWizard extends AppCompatActivity {
    public NumberPicker picker;
    public FloatingActionButton fab;
    String TAG="SetUpWizard";
    public CoordinatorLayout cStart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_set_up_wizard);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        cStart=(CoordinatorLayout)findViewById(R.id.cStart);
        fab = (FloatingActionButton) findViewById(R.id.fab);
        picker=(NumberPicker)findViewById(R.id.picker);
        String[] social = {"English (United Kingdom)", "English (United States)","German","Chinese"};
        picker.setMinValue(0);
        picker.setMaxValue(2);

        picker.setValue(1);//display initial selected value

        picker.setDescendantFocusability(NumberPicker.FOCUS_BLOCK_DESCENDANTS);
        picker.setDisplayedValues(social);
        setNumberPickerTextColor(picker, Color.WHITE);
        setDividerColor(picker,Color.WHITE);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                switch (picker.getValue()){
                    case 0:
                        Log.d(TAG, "onClick: 0 ");
                        Snack("English (United Kingdom)");break;
                    case 1:
                        Log.d(TAG, "onClick: 1 ");
                        Snack("English (United States)");break;
                    case 2:
                        Log.d(TAG, "onClick: 2 ");
                        Snack("German");break;
                    case 3:
                        Log.d(TAG, "onClick: 3 ");
                        Snack("Chinese");break;
                }

            }
        });
    }
    public void Snack(String message){
        Snackbar.make(cStart, message, Snackbar.LENGTH_LONG).setAction("Action", null).show();
    }

    //setting number picker text color
    private  boolean setNumberPickerTextColor(NumberPicker numberPicker, int color)
    {
        final int count = numberPicker.getChildCount();
        for(int i = 0; i < count; i++){
            View child = numberPicker.getChildAt(i);
            if(child instanceof EditText){
                try{
                    Field selectorWheelPaintField = numberPicker.getClass().getDeclaredField("mSelectorWheelPaint");
                    selectorWheelPaintField.setAccessible(true);
                    ((Paint)selectorWheelPaintField.get(numberPicker)).setColor(color);
                    ((EditText)child).setTextColor(color);
                    numberPicker.invalidate();
                    return true;
                }
                catch(NoSuchFieldException e){

                }
                catch(IllegalAccessException e){
                }
                catch(IllegalArgumentException e){
                }
            }
        }
        return false;
    }


    //setting divider color
    private void setDividerColor(NumberPicker picker, int color) {

        java.lang.reflect.Field[] pickerFields = NumberPicker.class.getDeclaredFields();
        for (java.lang.reflect.Field pf : pickerFields) {
            if (pf.getName().equals("mSelectionDivider")) {
                pf.setAccessible(true);
                try {
                    ColorDrawable colorDrawable = new ColorDrawable(color);
                    pf.set(picker, colorDrawable);
                } catch (IllegalArgumentException e) {
                    e.printStackTrace();
                } catch (Resources.NotFoundException e) {
                    e.printStackTrace();
                }
                catch (IllegalAccessException e) {
                    e.printStackTrace();
                }
                break;
            }
        }
    }
}