Develop Reference

How to create a multi-step registration form using viewpager and multiple fragments?

I want to create a multi-step registration form in my android app. I wish to use the viewpager with multiple fragments and each fragment being a step in a registration.
At the end, I want to submit all the data submitted in each fragment using an activity to a mysql database. Can I get a small sample code for this?
This is what I have tried so far. I am able to implement a viewpager with multiple fragments. I have created an interface in the StepOne.java Fragment so as to communicate to an activity. But I am not able to retrieve data from these fragments. It throws a null-pointer exception on line 52.
Here is my code:
SliderActivity.java:
public class SliderActivity extends AppCompatActivity {
ViewPager viewPager;
EditText edName,edPassword, edConfPass;
TextView tvShowAll;
ViewPagerAdapter mPagerAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_slider);
viewPager = findViewById(R.id.view_pager);
mPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());
viewPager.setAdapter(mPagerAdapter);
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
public void selectIndex(int newIndex) {
viewPager.setCurrentItem(newIndex);
}
#Override
public void onBackPressed() {
int currentPosition = viewPager.getCurrentItem();
if (currentPosition != 0) {
viewPager.setCurrentItem(viewPager.getCurrentItem()-1);
} else {
super.onBackPressed();
}
}
public class ViewPagerAdapter extends FragmentPagerAdapter {
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position)
{
case 0:
return new StepOne();
case 1:
return new StepTwo();
case 2:
return new StepThree();
}
return null;
}
#Override
public int getCount() {
return 3; //three fragments
}
}
}
StepOne.java:
public class StepOne extends Fragment {
Button buttonInFragment1;
EditText edName;
public interface ActivityFragmentCallback {
void onSetName(String name);
}
ActivityFragmentCallback listener;
public StepOne() {
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
super.onCreateView(inflater, container, savedInstanceState);
View rootView = inflater.inflate(R.layout.fragment_step_one, container, false);
edName = rootView.findViewById(R.id.edName);
buttonInFragment1 = rootView.findViewById(R.id.button_one);
if(buttonInFragment1 != null) {
buttonInFragment1.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
Toast.makeText(getContext(),edName.getText().toString(),Toast.LENGTH_SHORT).show();
if(edName != null) {
listener.onSetName(edName.getText().toString());
}
switch (view.getId()){
case R.id.button_one:
((SliderActivity)getActivity()).selectIndex(1);
break;
}
}
});
}
return rootView;
}
#Override
public void onAttach(Context context){
super.onAttach(context);
try {
listener = (ActivityFragmentCallback)context;
}catch (ClassCastException c){
c.printStackTrace();
}
}
}
MessageActivity.java: Here is where I need all the data submitted from all the fragments
public class MessageActivity extends AppCompatActivity implements StepOne.ActivityFragmentCallback {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_message);
}
#Override
public void onSetName(String name){
// tvShowAll = findViewById(R.id.tvShowAll);
// tvShowAll.setText(name);
Toast.makeText(getApplicationContext(),name, Toast.LENGTH_LONG).show();
}
}

Below is some reference link for step by step registration;
Hope you have help
https://github.com/stepstone-tech/android-material-stepper
https://github.com/baoyachi/StepView?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=3774

ViewPager not returning the right Fragment

I am working on a simple implementation of ViewPager in android but everytime I swap my screen addOnPageChangeListener works fine but I see unusual values in my logs inside getItem of my FragmentStatePagerAdapter . and my page swaps but I am unable to change fragment into it. and inside my fragment Slider val (log value) remains same and it hits to zero so each-time when Viewpager is swapped i get the same result.
Activity:
public class OnBoardingActivity extends AppCompatActivity {
.....
.....
static final int ITEMS = 3;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_on_boarding);
ButterKnife.bind(this);
StatusBarUtil.setTransparent(this);
StatusBarUtil.setLightMode(this);
initPager();
}
private void initPager() {
sliderAdapter = new SliderAdapter(getSupportFragmentManager());
if(sliderAdapter!=null){
onboard_pager.setAdapter(sliderAdapter);
}
onboard_pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if(position==0){
indicators.setImageResource(R.drawable.step1_dots);
}
else if(position==1){
indicators.setImageResource(R.drawable.step2_dots);
}else if(position==2){
indicators.setImageResource(R.drawable.step3_dots);
}
}
#Override
public void onPageSelected(int position) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
}
public static class SliderAdapter extends FragmentStatePagerAdapter {
public SliderAdapter(FragmentManager fragmentManager) {
super(fragmentManager);
}
#Override
public Fragment getItem(int position) {
Log.d("OnBoarding","position "+position);
return OnBoardingSlider.newInstance(position);
}
#Override
public int getCount() {
return ITEMS;
}
}
}
Fragment:
public class OnBoardingSlider extends Fragment {
View mView;
int index;
ImageView img;
TextView head_text,sub_head_text;
public static OnBoardingSlider newInstance(int index){
OnBoardingSlider f = new OnBoardingSlider();
Bundle args = new Bundle();
args.putInt("index", index);
f.setArguments(args);
return f;
}
#Override
public void onCreate(#Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Nullable
#Override
public View onCreateView(#NonNull LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
mView = inflater.inflate(R.layout.frag_on_boarding_page,container,false);
return mView;
}
#Override
public void onViewCreated(#NonNull View view, #Nullable Bundle savedInstanceState) {
img = mView.findViewById(R.id.onboard_pager_img);
head_text = mView.findViewById(R.id.head_text);
sub_head_text = mView.findViewById(R.id.sub_head_text);
super.onViewCreated(view, savedInstanceState);
switch (index){
case 0:
Log.d("Slider val",""+index);
img.setImageResource(R.drawable.purpleimage_slider);
head_text.setText(getString(R.string.ask));
sub_head_text.setText(getString(R.string.ask_sub_head));
head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.purple_head));
sub_head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.purple_head_sub));
break;
case 1:
Log.d("Slider val",""+index);
img.setImageResource(R.drawable.blueimage_slider);
head_text.setText(getString(R.string.ask));
sub_head_text.setText(getString(R.string.ask_sub_head));
head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.blue_head));
sub_head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.blue_head_sub));
break;
case 2:
Log.d("Slider val",""+index);
img.setImageResource(R.drawable.greenimage_slider);
head_text.setText(getString(R.string.ask));
sub_head_text.setText(getString(R.string.ask_sub_head));
head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.green_head));
sub_head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.green_head_sub));
break;
default:
Log.d("Slider val",""+index);
img.setImageResource(R.drawable.purpleimage_slider);
head_text.setText(getString(R.string.ask));
sub_head_text.setText(getString(R.string.ask_sub_head));
head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.purple_head));
sub_head_text.setTextColor(ContextCompat.getColor(getActivity(),R.color.purple_head_sub));
}
}
}

You are not getting the arguments after setting them. so
in onCreate
Bundle bundle=getArguments();
index = bundle.getInt("index");

Using viewpager with radiogroup to switch between fragments

I have a viewpager with swipeable fragments and also a radiogroup that shows which view is selected. When I start the application, the first radiobutton is not selected, it is only selected when I swipe another view and get back. I am a beginner, so please share your knowledge. Here's my code:
Viewpager Adapter:
public class ViewPagerAdapter extends FragmentPagerAdapter {
public static int int_items = 3;
public ViewPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new WelcomeOneFragment();
case 1:
return new WelcomeTwoFragment();
case 2:
return new WelcomeThreeFragment();
}
return null;
}
#Override
public int getCount() {
return int_items;
}
Fragment with the radiogroup:
public class TabFragment extends BaseFragment implements ViewPager.OnPageChangeListener, View.OnClickListener {
public static ViewPager mViewPager;
private Button mButtonMassage;
private RadioGroup mRadioGroup;
public static TabFragment newInstance() {
return new TabFragment();
}
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_tab, container, false);
initUi(rootView);
return rootView;
}
#Override
public void initUi(View rootView) {
mRadioGroup = (RadioGroup) rootView.findViewById(R.id.radio_group);
mViewPager = (ViewPager) rootView.findViewById(R.id.view_pager);
mButtonMassage = (Button) rootView.findViewById(R.id.buttonMassage);
initListeners();
}
#Override
public void initListeners() {
mButtonMassage.setOnClickListener(this);
mViewPager.addOnPageChangeListener(this);
initData();
}
#Override
public void initData() {
mViewPager.setAdapter(new ViewPagerAdapter(getChildFragmentManager()));
mViewPager.setCurrentItem(0);
}
#Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.buttonMassage:
Intent i = new Intent(getActivity(), MassageActivity.class);
startActivity(i);
break;
default:
break;
}
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
mRadioGroup.check(mRadioGroup.getChildAt(position).getId());
}
#Override
public void onPageScrollStateChanged(int state) {
}
}

just call this
mRadioGroup.check(mRadioGroup.getChildAt(0).getId());
after
mViewPager.setCurrentItem(0);
as listner will not callup in starting and you have to set it for manually after setting adapter to viewpager
hope it will work for you!! :)

This is a pretty common issue with ViewPager. onPageSelected is not called upon start, so I would just call:
mRadioGroup.check(mRadioGroup.getChildAt(0).getId());
In your initUi() method.

android add setOnClickListener function in view pager fragment

i have a fragment activity which has 4 child fragments ....
i've success to add swipe function (sliding), but i don't know how to add setOnClickListener function when i click tab menu, i want my app can provide 2 ways to access an activity (sliding page and click tab menu)....how can i do that?
thank in advance
this is my MainActivity
public class ViewPagerStyle1Activity extends FragmentActivity {
private ViewPager _mViewPager;
private ViewPagerAdapter _adapter;
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
setUpView();
setTab();
}
private void setUpView(){
_mViewPager = (ViewPager) findViewById(R.id.viewPager);
_adapter = new ViewPagerAdapter(getApplicationContext(),getSupportFragmentManager());
_mViewPager.setAdapter(_adapter);
_mViewPager.setCurrentItem(0);
}
private void setTab(){
_mViewPager.setOnPageChangeListener(new OnPageChangeListener(){
#Override
public void onPageScrollStateChanged(int position) {}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {}
#Override
public void onPageSelected(int position) {
// TODO Auto-generated method stub
switch(position){
case 0:
findViewById(R.id.first_tab).setVisibility(View.VISIBLE);
findViewById(R.id.second_tab).setVisibility(View.INVISIBLE);
break;
case 1:
findViewById(R.id.first_tab).setVisibility(View.INVISIBLE);
findViewById(R.id.second_tab).setVisibility(View.VISIBLE);
break;
}
}
});
}
}
and this is my ViewPagerAdapter
public class ViewPagerAdapter extends FragmentPagerAdapter {
private Context _context;
public ViewPagerAdapter(Context context, FragmentManager fm) {
super(fm);
_context=context;
}
#Override
public Fragment getItem(int position) {
Fragment f = new Fragment();
switch(position){
case 0:
f=LayoutOne.newInstance(_context);
break;
case 1:
f=LayoutTwo.newInstance(_context);
break;
}
return f;
}
#Override
public int getCount() {
return 2;
}
}

Animation inside a fragment that is in viewpager

I have a problem. As said i have ViewPager with 5 Fragments inside. On the last fragment i have two relative layouts with some widgets inside. On button click i have animations that changes relative layouts to visible.
My problem is that when i scroll back the view that is gone becomes visible all by himself... Anybody experienced something similar???
public class WelcomeActivity extends FragmentActivity{
private FragmentAdapter adapter;
private ViewPager viewPager;
#Override
protected void onCreate(Bundle arg0) {
super.onCreate(arg0);
setContentView(R.layout.welcome_activity);
viewPager = (ViewPager) findViewById(R.id.pager);
adapter = new FragmentAdapter(getSupportFragmentManager(), viewPager);
viewPager.setAdapter(adapter);
}
public class FragmentAdapter extends FragmentPagerAdapter{
private ViewPager pager;
private Fragment mFragmentAtPos0;
private FragmentManager mFragmentManager;
public FragmentAdapter(FragmentManager fm, ViewPager p) {
super(fm);
this.pager = p;
this.mFragmentManager = fm;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new ScreenWelcome(pager, this);
case 1:
return new ScreenTutorial1();
case 2:
return new ScreenTutorial2();
case 3:
return new ScreenTutorial3();
case 4:
return new ScreenTutorial4();
case 5:
return new FlipAnimationFragment();
default:
return null;
}
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
#Override
public int getCount() {
return 6;
}
public class FlipAnimationFragment extends Fragment{
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.flip_animation, container, false);
layout = (RelativeLayout) view.findViewById(R.id.layout);
sign_up = (RelativeLayout) view.findViewById(R.id.relativeLayoutSignUp);
log_in = (RelativeLayout) view.findViewById(R.id.relativeLayoutLogIn);
create_account_page = (Button) view.findViewById(R.id.buttonCreateAccount);
log_in_page = (Button) view.findViewById(R.id.buttonSignUpLogIn);
log_in_page.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(!pressed){
pressed = true;
layout.startAnimation(flip);
}
}
});
create_account_page.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
if(!pressed){
pressed = true;
layout.startAnimation(flip);
}
}
});
}
#Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
flip = new FlipAnimator(sign_up, log_in, 240, 400);
}