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