Java Android App Development Course, View Pager 2 - Screen Composition with Swipe

In Android application development, user experience is very important, and various UI components are needed to help users navigate the app naturally. Among them, the ViewPager provides an experience for users to swipe through multiple screens. In this post, we will learn how to configure swipeable screens using ViewPager2.

Overview of ViewPager

ViewPager is a UI component that allows users to navigate by swiping left and right through multiple pages. It helps users easily move to the desired page as they swipe the screen. ViewPager2 is an improved version of the existing ViewPager, providing better performance and flexibility based on RecyclerView.

Features of ViewPager2

RecyclerView Based: ViewPager2 integrates with RecyclerView to offer more features and optimizations.
Vertical and Horizontal Scroll: It supports horizontal scrolling by default, and vertical scrolling can be enabled through settings.
Fragment Support: ViewPager2 allows you to use fragments directly, making it easy to organize multiple screens.

Setting Up the Development Environment

To use ViewPager2, you need to create a new project using Android Studio and Gradle. Please follow the steps below.

Open Android Studio and select File > New > New Project.
Select Empty Activity and set the project name and package name.
Add the ViewPager2 dependency to the Gradle file.

Adding Gradle Dependency

dependencies {
    implementation 'androidx.viewpager2:viewpager2:1.0.0'
}

After adding the above dependency to the build.gradle (Module: app) file, sync the project.

Implementing ViewPager2

1. Configuring the Layout

First, add ViewPager2 to the activity_main.xml file as follows.

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

2. Creating the Adapter

Next, you need to create an adapter that manages the data for the ViewPager2. The adapter must inherit from RecyclerView.Adapter.

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class MyPagerAdapter extends RecyclerView.Adapter {

    private String[] data;

    public MyPagerAdapter(String[] data) {
        this.data = data;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(android.R.layout.simple_list_item_1, parent, false);
        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        holder.textView.setText(data[position]);
    }

    @Override
    public int getItemCount() {
        return data.length;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {
        TextView textView;

        public ViewHolder(View itemView) {
            super(itemView);
            textView = itemView.findViewById(android.R.id.text1);
        }
    }
}

3. Implementing MainActivity

Now, we will initialize the ViewPager2 in the main activity and connect it to the created adapter.

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

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private MyPagerAdapter adapter;

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

        viewPager = findViewById(R.id.viewPager);
        String[] data = {"Screen 1", "Screen 2", "Screen 3", "Screen 4"};
        adapter = new MyPagerAdapter(data);
        viewPager.setAdapter(adapter);
    }
}

Using Fragments with ViewPager2

Now, we will use fragments in ViewPager2 to create a more complex UI. Using fragments is useful for implementing various screens.

1. Creating Fragments

We will create new fragments to configure each screen.

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.fragment.app.Fragment;

public class ScreenSlidePageFragment extends Fragment {
    private static final String ARG_OBJECT = "object";

    public static ScreenSlidePageFragment create(int position) {
        ScreenSlidePageFragment fragment = new ScreenSlidePageFragment();
        Bundle args = new Bundle();
        args.putInt(ARG_OBJECT, position);
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(android.R.layout.simple_list_item_1, container, false);
        TextView textView = view.findViewById(android.R.id.text1);
        textView.setText("Fragment " + getArguments().getInt(ARG_OBJECT));
        return view;
    }
}

2. Modifying the Adapter

We will modify the adapter to use fragments.

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

public class ScreenSlidePagerAdapter extends FragmentStateAdapter {

    public ScreenSlidePagerAdapter(FragmentActivity fa) {
        super(fa);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return ScreenSlidePageFragment.create(position);
    }

    @Override
    public int getItemCount() {
        return 4; // Number of fragments
    }
}

3. Setting the Adapter in MainActivity

Finally, we will set the adapter in MainActivity.

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

public class MainActivity extends AppCompatActivity {

    private ViewPager2 viewPager;
    private ScreenSlidePagerAdapter adapter;

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

        viewPager = findViewById(R.id.viewPager);
        adapter = new ScreenSlidePagerAdapter(this);
        viewPager.setAdapter(adapter);
    }
}

Advantages and Use Cases of ViewPager2

Excellent User Experience: Provides smooth screen transitions and interactive UI, enhancing the naturalness of app navigation.
Variety of Screen Layouts: Almost any type of screen can be configured using fragments, making it easy to reuse and maintain.
ViewPager and Animation: ViewPager2 supports various animation effects, allowing for more attractive UI/UX.

Conclusion

In this post, we learned how to create swipeable screens for users using ViewPager2. We learned how to manage data using adapters and how to configure complex UIs using fragments. By leveraging these techniques, you can develop more attractive and user-friendly Android applications.

In future posts, we will cover a variety of topics related to Android development, so please stay tuned!

Java Android App Development Course, View Pager 2 – Screen Composition with Swipe