ViewPager + tabs on tab with activity

Question

I have three tabs on activity: "camera", "gallery", "added in posts" and I would to make camera fragment whole screen. Screenshots shows everything what i would to do.

It is my app: screenshot

and i would to make it like whatsapp (actionbar is hiding): whatsapp screenshot , or Facebook (if like whatsapp is too hard): facebook screenshot

GalleryActivity code:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_gallery);
        galleryToolbar = findViewById(R.id.galleryToolbar);
        viewPagerGallery = findViewById(R.id.viewPagerGallery);
        galleryTabLayout = findViewById(R.id.galleryTabLayout);
        galleryFragment = new RecyclerGalleryFragment();
        addedPhotosFragment = new AddedPhotosFragment();
        setSupportActionBar(galleryToolbar);


        galleryTabLayout.addTab(galleryTabLayout.newTab().setText("Camera"));
        galleryTabLayout.addTab(galleryTabLayout.newTab().setText("Gallery"));
        galleryTabLayout.addTab(galleryTabLayout.newTab().setText("Added in posts"));
        galleryTabLayout.setTabGravity(TabLayout.MODE_FIXED);

        tabsGalleryAdapter = new TabsGalleryAdapter(getSupportFragmentManager(),
                galleryTabLayout.getTabCount());

        viewPagerGallery.setAdapter(tabsGalleryAdapter);
        viewPagerGallery.setCurrentItem(1);
        viewPagerGallery.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(galleryTabLayout));
        galleryTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPagerGallery.setCurrentItem(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }

TabsGalleryAdapter code:

public class TabsGalleryAdapter extends FragmentPagerAdapter {

    int mNoOfTabs;

    public TabsGalleryAdapter(FragmentManager fm) {
        super(fm);
    }

    public TabsGalleryAdapter(FragmentManager fm, int numberOfTabs) {
        super(fm);
        mNoOfTabs = numberOfTabs;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position) {
            case 0:
                return new CameraGalleryFragment();
            case 1:
                return new RecyclerGalleryFragment();
            case 2:
                return new AddedPhotosFragment();
        }
        return null;
    }

    @Override
    public int getCount() {
        return mNoOfTabs;
    }
}

GalleryActivity layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="com.stagap.stagap.chooseimage.GalleryActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/galleryToolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
        app:titleTextColor="#fff"
        app:title="Choose a photo" />

    <android.support.design.widget.TabLayout
        android:id="@+id/galleryTabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/galleryToolbar"
        app:tabIndicatorColor="@android:color/transparent"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabMode="scrollable"/>

    <View
        android:id="@+id/galleryDivider"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        style="@style/Divider"
        app:layout_constraintTop_toBottomOf="@+id/galleryTabLayout"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPagerGallery"
        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_toBottomOf="@+id/galleryDivider">

    </android.support.v4.view.ViewPager>


</android.support.constraint.ConstraintLayout>

and CameraFragment layout:

<FrameLayout 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="com.stagap.stagap.chooseimage.camera.CameraGalleryFragment">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <FrameLayout
            android:id="@+id/cameraLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>


        <ImageButton
            android:id="@+id/takePhotoBtn"
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentTop="true"
            android:layout_marginBottom="30dp"
            android:background="@android:color/transparent"
            android:scaleType="centerCrop"
            android:src="@drawable/done"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent" />

    </android.support.constraint.ConstraintLayout>

</FrameLayout>

Maybe someone have some idea? Please feedback, have a nice day

Answer 1

I solved this by translating the AppbarLayout using its translationY attribute, in onPageScrolled() callback of the ViewPager's OnPageChangeListener using the AppbarLayout's bottom value.

refer to this answer https://stackoverflow.com/a/54286160/8114428

or visit this repository for more help https://github.com/goody-h/ResidingTab

Answer 2

You can use a Callback in the activity, whenever you navigate to that fragment, let Camera Fragment in your case. In the callback method, set tabLayout.setVisibility(View.GONE) and similarly when for some other fragment position value tabLayout.setVisibility(View.VISIBLE).