Screen 1 |
Settings page like update profile
In my previous blog, I had given you the brief idea about the GuidedStepFragment, and modify its basic override method to use it as confirmation dialog on android TV.
Today in this post we will learn about the various actions to perform desire views task which happen in android mobile.
So, here we are going to start,
Editable Description Fields
Screen -2 |
It's now possible to input text in an action. Have you ever tried entering your email on TV with remote? Use GuidedAction.Builder.descriptionEditable(true) to make your actions editable. You can listen for completion on this field via onGuidedActionEditedAndProceed . You will all see GuidedAction.Builder.descriptionInputType in this to provide keyboard type.
I have created small actionable methods for the ease of usage , i.e.
private static void addEditable(List<GuidedAction> actions, int iconResId, Context context, String title, String desc) { actions.add(new GuidedAction.Builder() .id(iconResId) .title(title) .descriptionEditable(true) .description(desc) .build()); }
GuidedAction SubAction Drop Down
Screen - 3 |
This has feature of drop down and selecting particular option and editing to main action's description. All you need to use is GuidedAction.Builder.subActions to add more sub actions to your main action. You can listen to any of your sub action by overriding GuidedStepFragment.onSubActionClicked. Here is my code for showing drop down as in screen - 3:
private static void addCheckedSubAction(List<GuidedAction> actions, int id, String title,
String desc, boolean checked) { GuidedAction guidedAction = new GuidedAction.Builder() .title(title) .description(desc) .checkSetId(OPTION_CHECK_SET_ID) .build(); guidedAction.setChecked(checked); actions.add(guidedAction); }
private static void addDropDownAction(List<GuidedAction> actions, long id, String title,String desc, List<GuidedAction> selectionActions) { actions.add(new GuidedAction.Builder() .id(id) .title(title) .description(desc) .subActions(selectionActions) .build()); }
Guided Date Picker Action
Screen - 4 |
Simply put, this is just a date picker within action view just like editable Guided Actions.
You listen for completion from within the onGuidedActionEditedAndProceed method.
Here is my implementation.
private static void addDateAction(Context context, List<GuidedAction> actions,
long id, String title, long date) { actions.add(new GuidedDatePickerAction.Builder(context) .id(id) .date(date) .datePickerFormat("DMY") .maxDate(new Date().getTime()) .title(title) .build()); }
I am providing you the full working code for screen -1
public static class UpdateProfileStepFragment extends GuidedStepFragment { String name, mDob, email, mGender;private static final int NAME = 0; private static final int EMAIL = 1; private static final int DOB = 2; private static final int MALE = 3; private static final int FEMALE = 4; private static final int ACTION_GENDER = 5; private static final int OK = 6;public static UpdateProfileStepFragment newInstance(final int option) { final UpdateProfileStepFragment f = new UpdateProfileStepFragment(); // final Bundle args = new Bundle();// args.putInt(ARG_OPTION_IDX, option);// f.setArguments(args); return f; } @Override
@NonNull
public Guidance onCreateGuidance(Bundle savedInstanceState) { String title = "Update Profile"; String email = "your email"; String description = email; return new Guidance(title, description, null, null); } @Override
public void onCreateActions(@NonNull List<GuidedAction> actions, Bundle savedInstanceState) { name = "name"; email = "email"; mDob = "01/01/1980"; long dob = 0; mGender = ""; if (mGender != null && !TextUtils.isEmpty(mGender) && mGender.equalsIgnoreCase("female")) { isMale = false; } Calendar calendar = Calendar.getInstance(); dob = calendar.getTime().getTime(); addEditable(actions, NAME, getActivity(), "Name", name); addEditable(actions, EMAIL, getActivity(), "Email", email); addDateAction(getActivity(), actions, DOB, "Date of Birth", dob); List<GuidedAction> genderActions = new ArrayList<>(); if (isMale) { mGender = "Male"; addCheckedAction(genderActions, MALE, "Male", "", true); addCheckedAction(genderActions, FEMALE, "Female", "", false); } else { mGender = "Female"; addCheckedAction(genderActions, MALE, "Male", "", false); addCheckedAction(genderActions, FEMALE, "Female", "", true); } addDropDownAction(actions, ACTION_GENDER, "Gender", mGender, genderActions); addAction(actions, OK, getString(R.string.ok), ""); addAction(actions, BACK, "Cancel", ""); } @Override public boolean onSubGuidedActionClicked(GuidedAction action) { if (action.getLabel1().toString().equalsIgnoreCase("male")) { isMale = true; mGender = "Male"; findActionById(ACTION_GENDER).setDescription("Male"); notifyActionChanged(findActionPositionById(ACTION_GENDER)); } else if (action.getLabel1().toString().equalsIgnoreCase("female")) { isMale = false; mGender = "Female"; findActionById(ACTION_GENDER).setDescription("Female"); notifyActionChanged(findActionPositionById(ACTION_GENDER)); } return super.onSubGuidedActionClicked(action); } @Override public void onGuidedActionClicked(GuidedAction action) { if (action.getId() == OK) { } else if (action.getLabel1().toString().equalsIgnoreCase("Cancel")) { getActivity().finish(); } } @SuppressLint("LongLogTag") @Override
public long onGuidedActionEditedAndProceed(GuidedAction action) { if (action.getId() == NAME) { name = action.getDescription().toString(); } else if (action.getId() == EMAIL) { email = action.getDescription().toString(); } else if (action.getId() == DOB) { GuidedDatePickerAction daction = (GuidedDatePickerAction) action; Log.d(TAG, "onGuidedActionClicked() [ACTION_DOB] : " +
new Date(daction.getDate())); } return super.onGuidedActionEditedAndProceed(action); } }
If i have missed something, feel free to write in comments and let me know.
i have small doubt,If i want to show only keyboard with numbers ,how it will be possible,I mean I want to get the mobile number from user
ReplyDeleteI am looking for solution of customise ActionView UI.
ReplyDeleteplease can this be implemented as Signup form before browser fragment, if yes how can i go about it?
ReplyDelete