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; } } } }