CODEWITHSUNDEEP
androidandroid-viewpager
jglom
jglom

Reputation: 23

How to use a TabLayout in Toolbar?

Good Day ! I'm currently creating an android app. My first problem is, Im getting a problem with my TabLayout. I want to display the tablayout IN the Toolbar...

This is my MainActivity:

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

        // Create the adapter that will return a fragment for each section
        mPagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            private final Fragment[] mFragments = new Fragment[] {
                    new MyPostsFragment(),
                    new MyPostsFragment(),
                    new MyPostsFragment(),
            };
            private final String[] mFragmentNames = new String[] {
                    getString(R.string.heading_recent),
                    getString(R.string.heading_recent),
                    getString(R.string.heading_recent)
            };
            @Override
            public Fragment getItem(int position) {
                return mFragments[position];
            }
            @Override
            public int getCount() {
                return mFragments.length;
            }
            @Override
            public CharSequence getPageTitle(int position) {
                return mFragmentNames[position];
            }
        };
        // Set up the ViewPager with the sections adapter.
        mViewPager = (ViewPager) findViewById(R.id.container);
        mViewPager.setAdapter(mPagerAdapter);
        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(mViewPager);

        // Button launches NewPostActivity
        findViewById(R.id.fab_new_post).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(MainActivity.this, NewReportActivity.class));
            }
        });
    }

And this is the Layout:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activities.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/tabs" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab_new_post"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_add_new_report"
        android:layout_margin="16dp"/>

</RelativeLayout>

enter image description here

Upvotes: 1

Views: 7340

Answers (3)

Paresh
Paresh

Reputation: 6857

extending your theme to parent="Theme.AppCompat.Light.NoActionBar" will do the trick

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

By adding this, you're telling the system To not to use ActionBar.

Upvotes: 2

DynamicMind
DynamicMind

Reputation: 4258

Try this, I am able to add tab inside toolbar using the below code.

<android.support.design.widget.AppBarLayout
    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/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextColor="@android:color/white"
        app:tabSelectedTextColor="@color/aqua_marine"
        app:tabIndicatorColor="@color/aqua_marine"
        app:tabMode="fixed"
        app:tabGravity="fill">
    </android.support.design.widget.TabLayout>
    </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

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

<include layout="@layout/content_home" />

Upvotes: 2

hrskrs
hrskrs

Reputation: 4480

You can simply hide the Toolbar to achieve what you want.

Dynamically:

 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);

or through Styles:

android:theme="@android:style/Theme.Holo.Light.NoActionBar.Fullscreen"

Upvotes: 2

Related Questions