ViewPager2 example with Fragment containing a ListView

by

In main.xml of android project, add a TabLayout and a ViewPager.

<androidx.coordinatorlayout.widget.CoordinatorLayout
	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:id="@+id/_coordinator"
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<com.google.android.material.appbar.AppBarLayout
		android:id="@+id/_app_bar"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:theme="@style/AppTheme.AppBarOverlay">
		<androidx.appcompat.widget.Toolbar
			android:id="@+id/_toolbar"
			android:layout_width="match_parent"
			android:layout_height="?attr/actionBarSize"
			android:background="?attr/colorPrimary"
			app:popupTheme="@style/AppTheme.PopupOverlay" />
	</com.google.android.material.appbar.AppBarLayout>
	<LinearLayout
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:orientation="vertical"
		app:layout_behavior="@string/appbar_scrolling_view_behavior">
		<com.google.android.material.tabs.TabLayout
			android:id="@+id/tablayout1"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:background="#008DCD"
			app:tabGravity="fill"
			app:tabMode="fixed"
			app:tabIndicatorHeight="3dp"
			app:tabIndicatorColor="@android:color/white"
			app:tabSelectedTextColor="@android:color/white"
			app:tabTextColor="@android:color/white"
			app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget" />
		<androidx.viewpager2.widget.ViewPager2
			android:id="@+id/viewpager1"
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			android:padding="8dp" />
	</LinearLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Create a layout fragment1.xml and add a TextView in it.

<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">
	<LinearLayout
		android:id="@+id/linear1"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:padding="8dp"
		android:orientation="vertical">
		<TextView
			android:id="@+id/textview1"
			android:focusable="false"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:padding="8dp"
			android:text="This is a TextView."
			android:textSize="20sp"
			android:textColor="#000000" />
	</LinearLayout>
</LinearLayout>

Create a layout fragment2.xml and add a Button in it.

<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">
	<LinearLayout
		android:id="@+id/linear1"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:padding="8dp"
		android:orientation="vertical">
		<com.google.android.material.button.MaterialButton
			android:id="@+id/materialbutton1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:padding="8dp"
			android:gravity="center_horizontal|center_vertical"
			android:text="This is a MaterialButton"
			android:textSize="20sp"
			android:textColor="#FFFFFF"
			android:textAppearance="@style/TextAppearance.MaterialComponents.Button"
			app:backgroundTint="@color/colorPrimary"
			app:cornerRadius="8dp"
			style="@style/Widget.MaterialComponents.Button" />
	</LinearLayout>
</LinearLayout>

Create a layout fragment3.xml and add a ListView in it.

<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">
	<ListView
		android:id="@+id/listview1"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:padding="8dp"
		android:choiceMode="none" />
</LinearLayout>

Create a layout list_item_fruits.xml and add a two TextViews in it.

<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">
	<LinearLayout
		android:id="@+id/linear1"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:padding="8dp"
		android:gravity="center_vertical"
		android:orientation="vertical">
		<TextView
			android:id="@+id/textview1"
			android:focusable="false"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:padding="8dp"
			android:text="TextView"
			android:textSize="20sp"
			android:textColor="#000000" />
		<TextView
			android:id="@+id/textview2"
			android:focusable="false"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:padding="8dp"
			android:text="TextView"
			android:textSize="12sp"
			android:textColor="#000000" />
	</LinearLayout>
</LinearLayout>

Create a Java file ViewPagerAdapter.java and put following codes in it.

package com.my.newproject18;

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

import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentStateAdapter {

    private final List<Fragment> fragments = new ArrayList<>();
    private final List<String> fragmentTitles = new ArrayList<>();

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

    public void addFragment(Fragment fragment, String title) {
        fragments.add(fragment);
        fragmentTitles.add(title);
    }

    @Override
    public int getItemCount() {
        return fragments.size();
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments.get(position);
    }

    public String getPageTitle(int position) {
        return fragmentTitles.get(position);
    }
}

Create a Java file Fragment1.java and put following codes in it.

package com.my.newproject18;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Fragment1 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment1, container, false);
    }
}

Create a Java file Fragment2.java and put following codes in it.

package com.my.newproject18;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import android.widget.Toast;
import com.google.android.material.button.MaterialButton;

public class Fragment2 extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        
        View view = inflater.inflate(R.layout.fragment2, container, false);
        MaterialButton button1 = view.findViewById(R.id.materialbutton1);
        
        button1.setOnClickListener(new View.OnClickListener(){
        @Override
        public void onClick(View v){
            Toast.makeText(requireContext(), "Button clicked", Toast.LENGTH_SHORT).show();
        }
        });
        
        return view;
    }
}

Create a Java file Fragment3.java and put following codes in it.

package com.my.newproject18;

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

import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.HashMap;

public class Fragment3 extends Fragment {
    private ListView listview1;
    private ArrayList<HashMap<String, Object>> fruitList;
    
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment3, container, false);
        
        listview1 = view.findViewById(R.id.listview1);
        
        // Initialize data
        initializeData();
        
        // Setup adapter
        listview1.setAdapter(new Listview1Adapter(fruitList));
        ((BaseAdapter)listview1.getAdapter()).notifyDataSetChanged();
        
        // Setup click listener
        setupClickListener();
        
        return view;
    }
    
    private void initializeData() {
        fruitList = new ArrayList<>();
        
        // Create sample data
        HashMap<String, Object> fruit1 = new HashMap<>();
        fruit1.put("name", "Apple 🍎");
        fruit1.put("color", "Red");
        
        HashMap<String, Object> fruit2 = new HashMap<>();
        fruit2.put("name", "Banana 🍌");
        fruit2.put("color", "Yellow");
        
        HashMap<String, Object> fruit3 = new HashMap<>();
        fruit3.put("name", "Grapes 🍇");
        fruit3.put("color", "Purple");
        
        HashMap<String, Object> fruit4 = new HashMap<>();
        fruit4.put("name", "Mango 🥭");
        fruit4.put("color", "Yellow");
        
        fruitList.add(fruit1);
        fruitList.add(fruit2);
        fruitList.add(fruit3);
        fruitList.add(fruit4);
    }
    
    public class Listview1Adapter extends BaseAdapter {
		
		ArrayList<HashMap<String, Object>> _data;
		
		public Listview1Adapter(ArrayList<HashMap<String, Object>> _arr) {
			_data = _arr;
		}
		
		@Override
		public int getCount() {
			return _data.size();
		}
		
		@Override
		public HashMap<String, Object> getItem(int _index) {
			return _data.get(_index);
		}
		
		@Override
		public long getItemId(int _index) {
			return _index;
		}
		
		@Override
		public View getView(final int _position, View _v, ViewGroup _container) {
			LayoutInflater _inflater = getLayoutInflater();
			View _view = _v;
			if (_view == null) {
				_view = _inflater.inflate(R.layout.list_item_fruits, null);
			}
			
			final LinearLayout linear1 = _view.findViewById(R.id.linear1);
			final TextView textview1 = _view.findViewById(R.id.textview1);
			final TextView textview2 = _view.findViewById(R.id.textview2);
			
			textview1.setText(_data.get((int)_position).get("name").toString());
			textview2.setText(_data.get((int)_position).get("color").toString());
			
			return _view;
		}
	}
    
    private void setupClickListener() {
        listview1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                
                String fruitName = (String) fruitList.get(position).get("name");
                Toast.makeText(getActivity(), fruitName, Toast.LENGTH_SHORT).show();
            }
        });

    }
    
}

In MainActivity.java put following codes.

package com.my.newproject18;

import android.animation.*;
import android.app.*;
import android.content.*;
import android.content.res.*;
import android.graphics.*;
import android.graphics.drawable.*;
import android.media.*;
import android.net.*;
import android.os.*;
import android.text.*;
import android.text.style.*;
import android.util.*;
import android.view.*;
import android.view.View.*;
import android.view.animation.*;
import android.webkit.*;
import android.widget.*;
import androidx.annotation.*;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import androidx.fragment.app.DialogFragment;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import com.google.android.material.appbar.AppBarLayout;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayout.OnTabSelectedListener;
import java.io.*;
import java.text.*;
import java.util.*;
import java.util.regex.*;
import org.json.*;
import androidx.viewpager2.widget.ViewPager2;

import com.google.android.material.tabs.TabLayoutMediator;


public class MainActivity extends AppCompatActivity {
	
	private Toolbar _toolbar;
	private AppBarLayout _app_bar;
	private CoordinatorLayout _coordinator;
	
	private TabLayout tablayout1;
	private ViewPager2 viewpager1;
	
	@Override
	protected void onCreate(Bundle _savedInstanceState) {
		super.onCreate(_savedInstanceState);
		setContentView(R.layout.main);
		initialize(_savedInstanceState);
		initializeLogic();
	}
	
	private void initialize(Bundle _savedInstanceState) {
		_app_bar = findViewById(R.id._app_bar);
		_coordinator = findViewById(R.id._coordinator);
		_toolbar = findViewById(R.id._toolbar);
		setSupportActionBar(_toolbar);
		getSupportActionBar().setDisplayHomeAsUpEnabled(true);
		getSupportActionBar().setHomeButtonEnabled(true);
		_toolbar.setNavigationOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View _v) {
				onBackPressed();
			}
		});
		tablayout1 = findViewById(R.id.tablayout1);
		viewpager1 = findViewById(R.id.viewpager1);
	}
	
	private void initializeLogic() {
		final ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(this);
		
		viewPagerAdapter.addFragment(new Fragment1(), "TextView");
		viewPagerAdapter.addFragment(new Fragment2(), "Button"); viewPagerAdapter.addFragment(new Fragment3(), "ListView");
		
		viewpager1.setAdapter(viewPagerAdapter);
		
		new TabLayoutMediator(
		        tablayout1,
		        viewpager1,
		        new TabLayoutMediator.TabConfigurationStrategy() {
			            @Override
			            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
				                tab.setText(viewPagerAdapter.getPageTitle(position));
				            }
			        }
		).attach();
	}
	
}

Now run the app.

Leave a Reply

Discover more from Apktutor

Subscribe now to keep reading and get access to the full archive.

Continue reading