Android Studio Question posted in
The official documentation can be found here.

Android Studio – ViewPager on TabLayout not Showing?

I am just doing my Daily practice and I had a Problem. I’ve created Viewpager on Tab Layout but it not worked.
I don’t know why, I am just doing like the tutorial on the internet and spend for this problem 2 days. :/

The Tablayout showing all tabs but not with the view (fragment tab).

I’ll thank for any help from you all :))))))))

So, here’s what I code,

content_home.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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/content_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".ui.home.ViewPagerActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/content_home_tablayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/colorPrimaryAlternate"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabIndicatorColor="@color/colorPrimary"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabTextColor="@color/colorPrimaryDarkAlternate"
            app:tabIconTint="@color/tab_color_selector"
            app:tabTextAppearance="@style/tabAllCaps">
            
            <com.google.android.material.tabs.TabItem
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:icon="@drawable/ic_waterpark"
                android:text="@string/waterpark" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:icon="@drawable/ic_home_black_24dp"
                android:text="@string/drypark" />

            <com.google.android.material.tabs.TabItem
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:icon="@drawable/ic_human_male_female"
                android:text="@string/facilities" />
            
        </com.google.android.material.tabs.TabLayout>
        
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/content_home_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/content_home_tablayout"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            android:layout_alignParentBottom="true" />

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

ViewPagerActivity:

package com.ardityo.android.transeraapps.ui.home;
import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import com.ardityo.android.transeraapps.R;
import com.ardityo.android.transeraapps.ui.home.tabs.drypark.DryParkFragment;
import com.ardityo.android.transeraapps.ui.home.tabs.facilities.FacilitiesFragment;
import com.ardityo.android.transeraapps.ui.home.tabs.waterpark.WaterParkFragment;
import com.google.android.material.tabs.TabLayout;

public class ViewPagerActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private ViewPager viewPager;

    ViewPagerAdapter adapter;

    WaterParkFragment waterParkFragment;
    DryParkFragment dryParkFragment;
    FacilitiesFragment facilitiesFragment;

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

        viewPager = (ViewPager) findViewById(R.id.content_home_viewpager);
        viewPager.setOffscreenPageLimit(3);

        setupViewPager(viewPager);
        tabLayout = (TabLayout) findViewById(R.id.content_home_tablayout);
        tabLayout.setupWithViewPager(viewPager);

    }



    private void setupViewPager(ViewPager viewPager)
    {
        adapter = new ViewPagerAdapter(getSupportFragmentManager());

//        waterParkFragment=new WaterParkFragment();
//        dryParkFragment=new DryParkFragment();
//        facilitiesFragment=new FacilitiesFragment();
//        adapter.addFragment(waterParkFragment,"WaterPark");
//        adapter.addFragment(dryParkFragment,"DryPark");
//        adapter.addFragment(facilitiesFragment.newInstance(),"Facilities");

        adapter.addFragment(WaterParkFragment.newInstance(),"WaterPark");
        adapter.addFragment(DryParkFragment.newInstance(),"DryPark");
        adapter.addFragment(FacilitiesFragment.newInstance(),"Facilities");
        viewPager.setAdapter(adapter);
    }

}

DryParkFragment (Same with WaterParkFragment & FacilitiesFragment):

package com.ardityo.android.transeraapps.ui.home.tabs.drypark;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
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;
import androidx.lifecycle.Observer;
import androidx.lifecycle.ViewModelProviders;

import com.ardityo.android.transeraapps.R;
import com.ardityo.android.transeraapps.ui.settings.SettingsViewModel;

public class DryParkFragment extends Fragment {

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

    public static DryParkFragment newInstance() {

        Bundle args = new Bundle();

        DryParkFragment fragment = new DryParkFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setHasOptionsMenu(true);

    }


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

//    @Override
//    public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
//        inflater.inflate(R.menu.menu_calls_fragment, menu);
//        super.onCreateOptionsMenu(menu, inflater);
//    }
}

content_home_2.xml:

<?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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".ui.home.tabs.drypark.DryParkFragment"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/mascot_head" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test" />

</LinearLayout>
Tags:

2

Answers


  1. 0

    Try using viewpager 2, dont forget to use newest library
    -> https://developer.android.com/jetpack/androidx/releases/viewpager2?hl=id

    Login or Signup to reply.
  2. 0

    The problem comes from using ViewPager inside NestedScrollView . This may also happen when you use CoordinatorLayout . You have two options to achieve that .

    1 . ViewPager2 :

    The first option is to use ViewPager2 . Just take a look :
    https://developer.android.com/jetpack/androidx/releases/viewpager2

    2 . Use custom ViewPager :

    Here is a class for you that can determine its height based on childs.

    import android.content.Context;
import android.util.AttributeSet;
import android.view.View;

import androidx.viewpager.widget.ViewPager;

public class CustomViewPager extends ViewPager {

    public CustomViewPager(Context context) {
        super(context);
    }

    public CustomViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int biggestHeightMeasureSpec = 0;
        for(int i = 0 ; i < getChildCount() ; i++)
        {
            View child = getChildAt(i);
            if (child != null) {
                child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
                int h = child.getMeasuredHeight();
                heightMeasureSpec = MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY);
                if(heightMeasureSpec >  biggestHeightMeasureSpec)
                    biggestHeightMeasureSpec = heightMeasureSpec;
            }
        }
        super.onMeasure(widthMeasureSpec, biggestHeightMeasureSpec);
    }

}

    Finally just use it in your XML layout :

            <PATH.TO.YOUR.CustomViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search