Placing TabLayout in the middle of screen

Question

I want to place my tab layout in the middle of my screen, similar to how this image is shown:

This is exactly how I would want it, but I seem to be having trouble with it. Below is my attempt:

profile.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:fresco="http://schemas.android.com/tools"
    android:id="@+id/profile_layout"
    android:layout_height="match_parent">

    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_marginTop="32dp"
        android:id="@+id/profile_picture"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_marginLeft="16dp"
        fresco:roundingBorderColor="@color/white"
        fresco:roundingBorderWidth="10dp"
        fresco:placeholderImageScaleType="centerCrop"
        fresco:placeholderImage="@mipmap/blank_prof_pic"
        fresco:roundAsCircle="true"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="32dp"
        android:layout_toRightOf="@id/profile_picture"
        android:textStyle="bold"
        android:id="@+id/profile_name"/>

    <Button
        android:stateListAnimator="@null"
        android:layout_marginLeft="64dp"
        android:layout_below="@id/profile_picture"
        android:text="@string/followers"
        android:background="?android:attr/selectableItemBackground"
        android:id="@+id/followers_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:stateListAnimator="@null"
        android:layout_marginLeft="72dp"
        android:layout_below="@id/profile_picture"
        android:text="@string/following"
        android:background="?android:attr/selectableItemBackground"
        android:layout_toRightOf="@+id/followers_button"
        android:id="@+id/following_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />


    <com.cengalabs.flatui.views.FlatButton
        android:id="@+id/follow_button"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:fontFamily="sans-serif-medium"
        android:textSize="12sp"
        android:layout_width="wrap_content"
        android:layout_height="36dp"
        android:paddingLeft="24dp"
        android:paddingRight="24dp"
        android:visibility="gone"
        android:textColor="@color/white"
        android:layout_toRightOf="@id/profile_picture"
        android:layout_below="@id/profile_name"
        android:layout_marginBottom="16dp"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/comments_post_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_below="@+id/app_bar"
        android:background="?attr/colorPrimary"
        android:elevation="6dp"
        app:tabIndicatorColor="#00BCD4"
        android:minHeight="60dp"
        app:tabGravity="fill"
        app:tabMode="fixed"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/comments_posts_pager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/tab_layout"/>

</RelativeLayout>

Profile.java:

public class ProfileTab extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    fragmentView = inflater.inflate(R.layout.profile, container, false);
    setupPostsAndCommentsTabLayout(fragmentView);
    ...
    }
    private void setupPostsAndCommentsTabLayout(View fragmentView) {
        tabLayout = (TabLayout) fragmentView.findViewById(R.id.comments_post_tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("Posts"));
        tabLayout.addTab(tabLayout.newTab().setText("Comments"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

        final ViewPager viewPager = (ViewPager) fragmentView.findViewById(R.id.comments_posts_pager);
        viewPager.setOffscreenPageLimit(2);
        final PagerAdapter adapter = new PagerAdapter
            (getFragmentManager(), tabLayout.getTabCount());
        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                viewPager.setCurrentItem(tab.getPosition());
            }

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

            }

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

            }
        });
    }
}

However the problem with my attempt is that the TabLayout is placed at the top of the layout and not the middle, even though I tried to set the android:gravity=center in the layout. Also, 4 tabs seem to appear, not just 2 which I am also confused about because I don't see where or how more than 2 would be created. Lastly, the layout ends up being very very laggy for some reason and my application suddenly crashes after some time. Any ideas where I could be going wrong? Thanks! Here is what my screen looks like when I navigate to the Profile fragment:

Answer 1

When using TabLayout, make sure that the parent of the TabLayout control is the outermost control on that screen layout.

If you nest TabLayout in another container like LinearLayout, the tab might display, but it can be empty and the swipe will not work.

Remember that there can be other controls above the TabLayout, just that this cannot be enclosed in another container unless it is the top most one.

Answer 2

That worked for me. You can change to LinearLayout and gravity:center or use marginTop/Bottom for other adjusts. Good luck!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/gradient_background"
    android:orientation="vertical">

    <!-- don't display any text views or image views here, this is only for swipe bar -->
    <!-- if you do, they will be displayed in all fragments of this activity -->
    <!-- to add them, do this in each fragment -->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/swipe_app_bar"
        android:layout_width="match_parent"
        android:layout_centerVertical="true"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.TabLayout
            android:id="@+id/swipe_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/darkOrange"
            app:tabTextColor="#000" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/swipe_elements"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_below="@+id/swipe_app_bar" />
</RelativeLayout>

Answer 3

Add this line to your TabLayout:

android:layout_centerInParent="true"