I'm developing an App using TabLayout and ViewPager.
As a result, I have set images to show in different fragments, eg. fragment_page1, fragment_page2, fragment_page3 etc. But images in Fragment_page1 are visible in all fragments. Please, how do I solve this issue?
This is my FragmentAdapter class
public class SimpleFragmentPageAdapter extends FragmentPagerAdapter {
private String[] tabtitle=new String[]{"Description","Directions","Developers","Chant Page","Chant Page",};
Context context;
private int pagecount=4;
public SimpleFragmentPageAdapter(FragmentManager fm, Context context) {
super(fm);
this.context=context;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0: //Fragment # 0 - This will show DevelopersFragment
return DescriptionFragment.newInstance(0, "page # 0");
case 1: //Fragment # 0 - This will show Page1Fragment
return Page1Fragment.newInstance(1, "Chant # Page1");
case 2: //Fragment # 0 - This will show Page1Fragment
return Page1Fragment.newInstance(2, "Chant # Page2");
case 3: //Fragment # 0 - This will show Page1Fragment
return Page1Fragment.newInstance(3, "Chant # Page2");
//etc
default:
return null;
}
}
@Override
public int getCount() {
return pagecount;
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return "Chant Page" + position;
}
}
This is my fragment_page1 xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="top|fill_vertical"
android:background="#efc393"
tools:context=".Page1Fragment">
<ScrollView
android:id="@+id/scroller"
android:layout_width="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ImPage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/page1_1" />
<ImageView
android:id="@+id/ImPage2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ImPage1"
android:scaleType="fitXY"
android:src="@drawable/page1_2" />
<ImageView
android:id="@+id/ImPage3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ImPage2"
android:scaleType="fitXY"
android:src="@drawable/page1_3" />
<ImageView
android:id="@+id/ImPage4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ImPage3"
android:scaleType="fitXY"
android:src="@drawable/page1_4" />
</RelativeLayout>
</ScrollView>
</RelativeLayout>
This is my fragment_page2
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="top|fill_vertical"
android:background="#efc393"
tools:context=".Page2Fragment">
<ScrollView
android:id="@+id/scroller"
android:layout_width="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ImPage2a"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:src="@drawable/page2_1" />
<ImageView
android:id="@+id/ImPage2b"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ImPage2a"
android:scaleType="fitXY"
android:src="@drawable/page2_2" />
<ImageView
android:id="@+id/ImPage3c"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/ImPage2b"
android:scaleType="fitXY"
android:src="@drawable/page2_3" />
</RelativeLayout>
This is the Activity that runs ViewPager
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab_layout"
app:tabSelectedTextColor="#ffffff"
app:tabMode="scrollable"
app:tabGravity="center"
app:tabTextColor="#A56302"
app:tabBackground="@drawable/pager"
app:tabIndicatorColor="#f10606"
app:tabIndicatorHeight="7dp">
</com.google.android.material.tabs.TabLayout>
<!-- Tab divider -->
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:background="@android:color/black" />
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contextClickable="true"
android:id="@+id/view_pager"
android:layout_marginBottom="70dp"
android:layout_below="@+id/tab_layout"
app:tabMode="fixed"
app:tabGravity="fill"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
</androidx.viewpager.widget.ViewPager>
<!-- view for AdMob Banner Ad -->
<FrameLayout
android:id="@+id/ad_view_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_alignParentBottom="true" />
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tips_7);
ActionBar actionBar = getSupportActionBar();
actionBar.setTitle("CHANT");
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
viewPager.setAdapter(new com.aronti.chanthymnography.SimpleFragmentPageAdapter(getSupportFragmentManager(), this));
//Attach the page change listener inside the activity
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
// This method will be invoked when a new page becomes selected
@Override
public void onPageSelected(int position) {
Toast.makeText(Tips_7.this, "Selected Chant:" + position, Toast.LENGTH_SHORT).show();
}
// This method will be invoked when the current page is scrolled
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetpixels) {
}
// Called when the scroll state changes:
//SCROLL_STATE_IDLE, SCROLL_STATE_DRAGGING, SCROLL_STATE_SETTLING
@Override
public void onPageScrollStateChanged(int state) {
}
});
tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
}
You should set different class in getItem(int position) section.
Return the Fragment associated with a specified position.
@Override
public Fragment getItem(int position) {
switch (position) {
case 0: //Fragment # 0 - This will show DevelopersFragment
return DescriptionFragment.newInstance(0, "page # 0");
case 1: //Fragment # 0 - This will show Page1Fragment
return Page1Fragment.newInstance(1, "Chant # Page1");
case 2: //Fragment # 0 - This will show Page1Fragment
return Page2Fragment.newInstance(2, "Chant # Page2");
case 3: //Fragment # 0 - This will show Page1Fragment
return Page3Fragment.newInstance(3, "Chant # Page2");
//etc
default:
return null;
}
}