Tag

viewpager2

Browsing

In this post, I’ll learn viewpager2 with fragments implementation in Android. ViewPager2 is an optimized version of ViewPager. In the previous article, I was explained the implementation of ViewPager2 with TabLayout Android.

Internally ViewPager2 uses RecyclerView component to display swipeable content. ViewPager2 have so many new features, In this android example post, we’ll learn ViewPager2 implementation with Fragments.

Steps of Implementation ViewPager2 with Fragments
  • Create a project with androidx
  • Add the ViewPager2 dependencies
  • Update some resource file, that needed for this demo
  • Create fragments for ViewPager2
  • Create a subclass of FragmentStateAdapter
  • Add the ViewPager in activity layout
  • Finally set the FragmentStateAdapter on ViewPager
1. Create a project with Androidx

Let’s open the Android Studio to create a project with AndroidX.

2. Add the ViewPager2 dependencies

Open the app-level build. gradle file and add below dependencies

  implementation 'androidx.viewpager2:viewpager2:1.0.0-beta04'
  implementation 'androidx.fragment:fragment-ktx:1.2.0-alpha04'
  implementation 'com.google.android.material:material:1.1.0-alpha10'
3. Update some resource file

Add few color items in color.xml files

  <?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="colorPrimary">#008577</color>
  <color name="colorPrimaryDark">#00574B</color>
  <color name="colorAccent">#D81B60</color>

  <color name="red_100">#F44336</color>
  <color name="red_300">#3F51B5</color>
  <color name="red_500">#9C27B0</color>
  <color name="red_700">#2196F3</color>
  <color name="blue_100">#00BCD4</color>
  <color name="blue_300">#7BAAF7</color>
  <color name="blue_500">#009688</color>
  <color name="blue_700">#3367D6</color>
  <color name="green_100">#CDDC39</color>
  <color name="green_300">#57BB8A</color>
  <color name="green_500">#673AB7</color>
  <color name="green_700">#0B8043</color>

</resources>
4. Create fragments for ViewPager2

Simply creates a fragment named is CardFragment with XML layout. Open the layout file paste below code.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CardFragment"
    >

  <TextView
      android:id="@+id/tv_counter"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textColor="#fff"
      android:textSize="20sp"
      android:textStyle="bold"
      tools:text="@string/hello_blank_fragment"
      />

</FrameLayout>
Bind above fragment layout with file

Let’s paste below code in the CardFragment.java file. In this fragment have a TextView

package com.viewpager2example;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.core.content.ContextCompat;
import androidx.fragment.app.Fragment;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link CardFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class CardFragment extends Fragment {

  private static final String ARG_COUNT = "param1";
  private Integer counter;

  private int[] COLOR_MAP = {
      R.color.red_100, R.color.red_300, R.color.red_500, R.color.red_700, R.color.blue_100,
      R.color.blue_300, R.color.blue_500, R.color.blue_700, R.color.green_100, R.color.green_300,
      R.color.green_500, R.color.green_700
  };

  public CardFragment() {
    // Required empty public constructor
  }

  public static CardFragment newInstance(Integer counter) {
    CardFragment fragment = new CardFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_COUNT, counter);
    fragment.setArguments(args);
    return fragment;
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
      counter = getArguments().getInt(ARG_COUNT);
    }
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_card, container, false);
  }

  @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    view.setBackgroundColor(ContextCompat.getColor(getContext(), COLOR_MAP[counter]));
    TextView textViewCounter = view.findViewById(R.id.tv_counter);
    textViewCounter.setText("Fragment No " + counter);
  }
}
5. Create a subclass of FragmentStateAdapter
package com.viewpager2example;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerAdapter extends FragmentStateAdapter {
  private static final int CARD_ITEM_SIZE = 10;

  public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
    super(fragmentActivity);
  }

  @NonNull @Override public Fragment createFragment(int position) {
    return CardFragment.newInstance(position);
  }

  @Override public int getItemCount() {
    return CARD_ITEM_SIZE;
  }
}
6. Add the ViewPager in activity layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    >

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/view_pager"
      android:layout_width="0dp"
      android:layout_height="0dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      />

</androidx.constraintlayout.widget.ConstraintLayout>
7. Finally set the FragmentStateAdapter on ViewPager
package com.viewpager2example;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.widget.ViewPager2;

public class MainActivity extends AppCompatActivity {

  ViewPager2 viewPager;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = findViewById(R.id.view_pager);
    viewPager.setAdapter(createCardAdapter());
  }

  private ViewPagerAdapter createCardAdapter() {
    ViewPagerAdapter adapter = new ViewPagerAdapter(this);
    return adapter;
  }
}

Conclusion

In this android app example, we have learned the implementation of ViewPager2 with Fragment in Android. I hope it’s helpful for you.

Keep in touch

If you want to keep in touch and get an email when I write new blog posts, follow me on facebook or subscribe to usIt only takes about 10 seconds to register. 

Read ViewPager2 with TabLayout Android Example

In this post, we’ll learn about ViewPager2, what is it? how does work? For doing this we’ll create a sample app that contains ViewPager2 with TabLayout in Android. So lets started

What is ViewPager2

ViewPager2 is an Android widget that allows us to change the screen with changing activity with a swipeable feature. Recently, Google IO was released beta04 version ViewPager2. ViewPager2 is the replacement of ViewPager, It’s well optimized, smarter and efficient.

How does work?

ViewPager2 has a variety of new features. the most important feature is that ViewPager2 is built on RecyclerView component. So you can add or remove fragment dynamically. Basically, PagerAdapter is replaced by RecyclerView.Adapter and FragmentStatePagerAdapter is replaced by FragmentStateAdapter. So it’s easy to maintainable and scalable.

In this article, I’m focusing on ViewPager2 implementation only. For more details, I will write a separate article on ViewPager2.

Step of implantation ViewPager2 with TabLayout

  • Project creation and adding dependencies
  • Add needed resource in the directory
  • Prepare layout with ViewPager2 and TabLayout
  • Create Fragment with Layout
  • Prepare FragmentStateAdapter
  • Finally, set the adapter on ViewPager2
ViewPager2 with TabLayout (Demo App)

1. Project creation and adding dependencies

Let’s open Android Studio and create fresh project with a default template (such as EmptyActivity with androidx). Once project sync completed open the project app/build.gradle and add following dependencies

  implementation 'androidx.viewpager2:viewpager2:1.0.0-beta04'
  implementation 'androidx.fragment:fragment-ktx:1.2.0-alpha04'
  implementation 'com.google.android.material:material:1.1.0-alpha10'

2. Add needed resource in the directory

Open color.xml resource file nd adds below code.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="colorPrimary">#008577</color>
  <color name="colorPrimaryDark">#00574B</color>
  <color name="colorAccent">#D81B60</color>

  <color name="red_100">#F44336</color>
  <color name="red_300">#3F51B5</color>
  <color name="red_500">#9C27B0</color>
  <color name="red_700">#2196F3</color>
  <color name="blue_100">#00BCD4</color>
  <color name="blue_300">#7BAAF7</color>
  <color name="blue_500">#009688</color>
  <color name="blue_700">#3367D6</color>
  <color name="green_100">#CDDC39</color>
  <color name="green_300">#57BB8A</color>
  <color name="green_500">#673AB7</color>
  <color name="green_700">#0B8043</color>

</resources>

3. Prepare layout with ViewPager2 and TabLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:background="#FFFFFF"
    >

  <com.google.android.material.tabs.TabLayout
      android:id="@+id/tabs"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      app:tabMode="scrollable"
      />

  <androidx.viewpager2.widget.ViewPager2
      android:id="@+id/view_pager"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"
      />

</LinearLayout>

4. Create Fragment with Layout

In this sample app, I’m using a single fragment you can use based on need. Let’s create a fragment with the layout .

4.1 open the layout file and paste below code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".CardFragment"
    >

  <TextView
      android:id="@+id/tv_counter"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:textColor="#fff"
      android:textSize="20sp"
      android:textStyle="bold"
      tools:text="@string/hello_blank_fragment"
      />

</FrameLayout>
4.2 Now bind the view with Fragment file just like below
package com.viewpager2example;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.core.content.ContextCompat;
import androidx.fragment.app.Fragment;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link CardFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class CardFragment extends Fragment {

  private static final String ARG_COUNT = "param1";
  private Integer counter;

  private int[] COLOR_MAP = {
      R.color.red_100, R.color.red_300, R.color.red_500, R.color.red_700, R.color.blue_100,
      R.color.blue_300, R.color.blue_500, R.color.blue_700, R.color.green_100, R.color.green_300,
      R.color.green_500, R.color.green_700
  };

  public CardFragment() {
    // Required empty public constructor
  }

  public static CardFragment newInstance(Integer counter) {
    CardFragment fragment = new CardFragment();
    Bundle args = new Bundle();
    args.putInt(ARG_COUNT, counter);
    fragment.setArguments(args);
    return fragment;
  }

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    if (getArguments() != null) {
      counter = getArguments().getInt(ARG_COUNT);
    }
  }

  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,
      Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_card, container, false);
  }

  @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);
    view.setBackgroundColor(ContextCompat.getColor(getContext(), COLOR_MAP[counter]));
    TextView textViewCounter = view.findViewById(R.id.tv_counter);
    textViewCounter.setText("Fragment No " + (counter+1));
  }
}

5. Prepare FragmentStateAdapter

package com.viewpager2example;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class ViewPagerAdapter extends FragmentStateAdapter {
  private static final int CARD_ITEM_SIZE = 10;

  public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
    super(fragmentActivity);
  }

  @NonNull @Override public Fragment createFragment(int position) {
    return CardFragment.newInstance(position);
  }

  @Override public int getItemCount() {
    return CARD_ITEM_SIZE;
  }
}

6. Finally, set the adapter on ViewPager2

package com.viewpager2example;

import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;

public class MainActivity extends AppCompatActivity {

  TabLayout tabLayout;
  ViewPager2 viewPager;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = findViewById(R.id.view_pager);
    tabLayout = findViewById(R.id.tabs);

    viewPager.setAdapter(createCardAdapter());
    new TabLayoutMediator(tabLayout, viewPager,
        new TabLayoutMediator.TabConfigurationStrategy() {
          @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            tab.setText("Tab " + (position + 1));
          }
        }).attach();
  }

  private ViewPagerAdapter createCardAdapter() {
    ViewPagerAdapter adapter = new ViewPagerAdapter(this);
    return adapter;
  }
}

Conclusion

In this android app example, we have learned the implementation of ViewPager2 with TabLayout. I hope it’s helpful for you.

Keep in touch

If you want to keep in touch and get an email when I write new blog posts, follow me on facebook or subscribe to usIt only takes about 10 seconds to register. 

Still, if you have any queries please put your comment below.