Bright Varghese Bright Varghese - 2 months ago 20
Android Question

Could not set the tab titles into the top

I created tabs with

ViewPager
. But the titles of the tabs are appearing in the center of the screen. I would like to keep the titles on the top of the screen. Please check my following xml codes and java files. Kindly let me know how to fix this issue.

This is the xml file for
MainActivity
:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.example.bright.myapplication.MainActivity">

<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent"

android:layout_centerHorizontal="true"
android:id="@+id/tablayout"
android:layout_below="@+id/toolbar">

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left" />

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center" />

<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right" />

</android.support.design.widget.TabLayout>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

/>

<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/toolbar" />
</RelativeLayout>


The following is the xml file for the first fragment:

fragment_blank_fragment1.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.bright.myapplication.BlankFragment1">

<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello_blank_fragment 1" />

</FrameLayout>


The following is the xml file for the second fragment:

fragment_blank_fragment2.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.bright.myapplication.BlankFragment2">

<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hello_blank_fragment 2" />

</FrameLayout>

and one more xml file for a fragment


The following is the
Activity
file:

MainActivity.java

public class MainActivity extends AppCompatActivity {

TabLayout tabLayout;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = (TabLayout)findViewById(R.id.tablayout);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
MyAdapter myAdapter = new MyAdapter(getSupportFragmentManager(),3);
ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
viewPager.setAdapter(myAdapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
}
}


The following is the place where I am returning the fragments to the main activity through
ViewPager
:

MyAdapter.java

public class MyAdapter extends FragmentStatePagerAdapter {
int tabcount;
public MyAdapter(FragmentManager fm, int count) {
super(fm);
tabcount = count;
}

@Override
public Fragment getItem(int position) {
switch (position){
case 0:
BlankFragment1 fragment1 = new BlankFragment1();
return fragment1;
case 1:
BlankFragment2 fragment2 = new BlankFragment2();
return fragment2;
case 2:
BlankFragment3 fragment3 = new BlankFragment3();
return fragment3;
default:
return null;
}

}

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

Answer

The reason your TabLayout is appearing in the center of the screen is because you have the layout_height set to match_parent. The default gravity of the items within a TabLayout is center_vertical.

I am assuming you want the standard look and feel of tabs as per the Material Design Guidelines, in which case the layout file for your MainActivity should look more like this:

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout android:id="@+id/app_bar"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.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/>

        <android.support.design.widget.TabLayout android:id="@+id/tab_layout"
            android:layout_width="match_parent" android:layout_height="wrap_content"
            app:tabIndicatorColor="?attr/colorAccent">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="@string/tab_left"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="@string/tab_center"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content" android:layout_height="wrap_content"
                android:text="@string/tab_right"/>

        </android.support.design.widget.TabLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.ViewPager android:id="@+id/pager"
        android:layout_width="match_parent" android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</android.support.design.widget.CoordinatorLayout>

Also, there is a convenience method for setting up tabs with a ViewPager, instead of calling viewPager.setOnPageChangeListener():

tabLayout.setupWithViewPager(viewPager);