CODEWITHSUNDEEP
androiddynamicandroid-viewpagerfragment
The Nomad
The Nomad

Reputation: 7425

Android: Using ViewPager with multiple dynamic Fragments

I am using a ViewPager to show 9 fragments. In each of these fragments, I want to just show a different picture. I want to use one single fragment layout, but dynamically add in the picture. Also, would like add a "Continue" button on the last fragment that when pressed will go to another activity.

How do I go about making a fragment layout dynamic?

Main Activity

public class StoryboardPageActivity extends FragmentActivity {
// The number of pages (wizard steps) to show in this demo.
private static final int NUM_PAGES = 9;

// The pager widget, which handles animation and allows swiping horizontally to access previous and next wizard steps.
private ViewPager mPager;

// The pager adapter, which provides the pages to the view pager widget.
private PagerAdapter mPagerAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_storyboard_page);

    // Instantiate a ViewPager and a PagerAdapter.
    mPager = (ViewPager) findViewById(R.id.storyboardPager);
    mPagerAdapter = new StoryboardPagerAdapter(getSupportFragmentManager());
    mPager.setAdapter(mPagerAdapter);
}

@Override
public void onBackPressed() {
    if (mPager.getCurrentItem() == 0) {
        // If the user is currently looking at the first step, allow the system to handle the
        // Back button. This calls finish() on this activity and pops the back stack.
        super.onBackPressed();
    } else {
        // Otherwise, select the previous step.
        mPager.setCurrentItem(mPager.getCurrentItem() - 1);
    }
}

// A simple pager adapter that represents 5 fragment objects, in sequence.
private class StoryboardPagerAdapter extends FragmentStatePagerAdapter {
    public StoryboardPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return StoryboardFragment.newInstance(position);
    }

    @Override
    public int getCount() {
        return NUM_PAGES;
    }
}
}

Fragment

public class StoryboardFragment extends Fragment {
private static final String KEY_POSITION = "position";

static StoryboardFragment newInstance(int position) {
    StoryboardFragment frag = new StoryboardFragment();
    Bundle args = new Bundle();

    args.putInt(KEY_POSITION, position);
    frag.setArguments(args);

    return(frag);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_storyboard_page, container, false);

    ImageView image = (ImageView)rootView.findViewById(R.id.imgStoryboard);
    int position = getArguments().getInt(KEY_POSITION, -1);

    int[] images = {R.drawable.storyboard1, R.drawable.storyboard2, R.drawable.storyboard3,
                    R.drawable.storyboard4, R.drawable.storyboard5, R.drawable.storyboard6,
                    R.drawable.storyboard7, R.drawable.storyboard8, R.drawable.storyboard9};

    image.setImageResource(images[position]);

    return rootView;
}

}

Fragment XML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff" >

<ImageView
    android:id="@+id/imgStoryboard"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:contentDescription="@string/storyboardSlide" />

</RelativeLayout>

Upvotes: 0

Views: 2709

Answers (1)

CommonsWare
CommonsWare

Reputation: 1007554

How do I go about making a fragment layout dynamic?

The same way you make any other "layout dynamic". If you want to put an image in an ImageView, call setImageBitmap() or setImageDrawable() or whatever. For example, the PagerAdapter could supply the position to the fragment (via a factory method), and the fragment could then know what image to load.

This sample project demonstrates populating the hint of an EditText with a custom value based upon the page's position.

With respect to the "Continue" button, either have a separate fragment class for that (and appropriate smarts in your PagerAdapter, or always have the button in your layout, but set to android:visibility="gone" by default, toggling it via setVisibility(View.VISIBLE) for the fragment that needs it.

Upvotes: 2

Related Questions