Hello I am trying to put a TabLayout inside the ActionBar, not below it. Is it possible to be done?
I have searched around and found the ActionBar.Tab class, but it is already deprecated. Any other ideas please?
You can create your own Layout with back button and Tab Layout. You can use this layout at top with no ActionBar. On Back click programmatically call onBackPressed() method.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="48dp"
android:layout_height="48dp"
android:background="?selectableItemBackgroundBorderless"
android:src="#drawable/ic_back" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
I used the library below for tabs in example code. (Add the line to your app's gradle)
compile 'com.jpardogo.materialtabstrip:library:1.1.0'
And than you can use a toolbar layout like below:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
style="#style/Widget.MyApp.Toolbar.Solid" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:layout_below="#+id/toolbar">
<com.astuetz.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:background="#color/AppPrimary"
app:pstsIndicatorColor="#fff"
app:pstsIndicatorHeight="4dp"
app:pstsTabTextAllCaps="false"
app:pstsTabTextColor="#color/tabTextColor"
app:pstsTabTextSize="16sp"
app:pstsUnderlineColor="#color/AppPrimary"
app:pstsUnderlineHeight="4dp" />
</RelativeLayout>
</RelativeLayout>
Here are the styles i used in example layout:
<style name="Widget.MyApp.Toolbar.Solid" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/AppPrimary</item>
<item name="android:theme">#style/ThemeOverlay.MyApp.ActionBar</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">#dimen/abc_action_bar_default_height_material</item>
</style>
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<!-- Parent theme sets colorControlNormal to textColorPrimary. -->
<item name="android:textColorPrimary">#android:color/white</item>
</style>
In your activity's layout you have to include your toolbar like below:
<include
android:id="#+id/toolbar_main"
layout="#layout/toolbar_tabs" />
And you have to set your toolbar as support actionbar and to use it as an actonbar.
Toolbar mToolbar = (Toolbar)findviewById(R.id.toolbar_main);
setSupportActionBar(mToolbar);
Add a viewpager to your activity's layout: (Where you add your toolbar)
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
/>
Create an adapter for your viewpager like below:
public class TabsAdapter extends FragmentPagerAdapter {
private List<YourModel> mObjects;
public TabsAdapter(FragmentManager fm, List<YourModel> mObjects) {
super(fm);
this.mObjects = mObjects;
}
#Override
public Fragment getItem(int position) {
return new YourPagerFragment();
}
#Override
public int getCount() {
return mObjects.size();
}
#Override
public CharSequence getPageTitle(int position) {
return mObjects.get(position).getName();
}
}
Finally, find your viewpager, pager sliding tab strip, create a new pager adapter and set it to your viewpager like below:
ViewPager mViewPager = (ViewPager) findViewById(R.id.viewpager);
PagerSlidingTabStrip mTabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
TabsAdapter mAdapter = new TabsAdapter(getSupportFragmentManager(), objects);
mViewPager.setAdapter(mAdapter);
mTabs.setViewPager(mViewPager);
Good luck.
Related
i need Slide two item, and show and indicator at bottom, RecyclerView or ViewPager should use?
You can use viewpager and override getPageWidth in the PagerAdapter implementation for having two items in each view like below :
#Override
public float getPageWidth(int position) {
return (super.getPageWidth(position) / 2);
}
and for showing indicator, you can use TabLayout and connect that with ViewPager programmatically like this:
<androidx.viewpager.widget.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
app:tabBackground="#drawable/tab_selector"
app:tabGravity="center"
app:tabIndicatorHeight="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
and
ViewPager pager = (ViewPager) view.findViewById(R.id.viewpager);
PagerAdapter adapter = new CustomAdapter(getChildFragmentManager(), items);
pager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(pager, true);
and some custom tab_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/selected_dot"
android:state_selected="true"/>
<item android:drawable="#drawable/default_dot"/>
</selector>
Please teach me how to add navigation drawer in this activity.
MainActivity (Tab Layout)
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
assert tabLayout != null;
tabLayout.addTab(tabLayout.newTab().setText(R.string.welcome));
tabLayout.addTab(tabLayout.newTab().setText(R.string.venue));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new WelcomeFragment();
case 1:
return new pptp();
}
return null;
}
#Override
public int getCount() {
return 2;
}
};
assert viewPager != null;
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) {
}
});
}
public void refreshNow() {
finish();
overridePendingTransition(0,0);
startActivity(getIntent());
overridePendingTransition(0,0);
}
}
Teach me how to add navigation drawer it will helps me a lot.
Thank you in advance for those who willing to help me.
add the following dependencies to your apps module's build.gradle file:
dependencies {
implementation 'com.android.support:appcompat-v7:27.0.2'
implementation 'com.android.support:design:27.0.2'
}
Inside the DrawerLayout, add a layout for the main content for the UI (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.
For example, the following layout uses a DrawerLayout with two child views: a FrameLayout to contain the main content (which could, for example, by populated by a Fragment at runtime), and a NavigationView for the contents of the navigation drawer.
<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Container for contents of drawer - use NavigationView to make configuration easier -->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true" />
</android.support.v4.widget.DrawerLayout>
To configure the menu items listed in the drawer, specify a menu resource with the app:menu attribute, as shown in the example code below:
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/drawer_view" />
Create the menu resource with the corresponding file name. For example, at res/menu/drawer_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_camera"
android:icon="#drawable/ic_menu_camera"
android:title="#string/import" />
<item
android:id="#+id/nav_gallery"
android:icon="#drawable/ic_menu_gallery"
android:title="#string/gallery" />
<item
android:id="#+id/nav_slideshow"
android:icon="#drawable/ic_menu_slideshow"
android:title="#string/slideshow" />
<item
android:id="#+id/nav_manage"
android:icon="#drawable/ic_menu_manage"
android:title="#string/tools" />
</group>
</menu>
In my application I am using actionbar tabs at bottom. I have searched many tutorials but I am not understanding the solutions. Most of the answers said to use TabActivity, but that is deprecated. So can any one tell me how can approach this?
The best way to implement tabs now is to use a TabLayout from the design library.
Here is an example of a TabLayout aligned at the bottom of the screen.
First set up the dependencies in the build.gradle file:
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.0.1'
compile 'com.android.support:design:23.0.1'
}
Here is the layout xml for the Main Activity:
<RelativeLayout
android:id="#+id/main_layout"
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=".MainActivity">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
app:tabMode="fixed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
app:tabTextColor="#d3d3d3"
app:tabSelectedTextColor="#ffffff"
app:tabIndicatorColor="#ff00ff"
android:minHeight="?attr/actionBarSize"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
Here is the Activity code:
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
// Get the ViewPager and set it's PagerAdapter so that it can display items
ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
PagerAdapter pagerAdapter =
new PagerAdapter(getSupportFragmentManager(), MainActivity.this);
viewPager.setAdapter(pagerAdapter);
// Give the TabLayout the ViewPager
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
// Iterate over all tabs and set the custom view
for (int i = 0; i < tabLayout.getTabCount(); i++) {
TabLayout.Tab tab = tabLayout.getTabAt(i);
tab.setCustomView(pagerAdapter.getTabView(i));
}
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
class PagerAdapter extends FragmentPagerAdapter {
String tabTitles[] = new String[] { "Tab One", "Tab Two", "Tab Three", };
Context context;
public PagerAdapter(FragmentManager fm, Context context) {
super(fm);
this.context = context;
}
#Override
public int getCount() {
return tabTitles.length;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
return new BlankFragment();
case 1:
return new BlankFragment();
case 2:
return new MapFragment();
}
return null;
}
#Override
public CharSequence getPageTitle(int position) {
// Generate title based on item position
return tabTitles[position];
}
public View getTabView(int position) {
View tab = LayoutInflater.from(MainActivity.this).inflate(R.layout.custom_tab, null);
TextView tv = (TextView) tab.findViewById(R.id.custom_text);
tv.setText(tabTitles[position]);
return tab;
}
}
}
custom_tab.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/custom_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:textSize="16dip"
android:textColor="#ffffff"
android:singleLine="true"
/>
</LinearLayout>
App theme in styles.xml:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#3F51B5</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#303F9F</item>
<!-- theme UI controls like checkboxes and text fields -->
<item name="colorAccent">#FF4081</item>
</style>
Result:
If you want to hide the ActionBar, just remove the toolbar from the layout xml, and remove the toolbar code from the Activity, and make sure to use Theme.AppCompat.Light.NoActionBar in the AppTheme. The result of those changes would make it look like this:
this is an example
Toolbar toolbarBottom = (Toolbar) findViewById(R.id.toolbar_bottom);
toolbarBottom.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
#Override
public boolean onMenuItemClick(MenuItem item) {
switch(item.getItemId()){
case R.id.action_settings:
// TODO
break;
// TODO: Other cases
}
return true;
}
});
// Inflate a menu to be displayed in the toolbar
toolbarBottom.inflateMenu(R.menu.menu_main);
and this xml
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_bottom"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:layout_alignParentBottom="true"
android:minHeight="?attr/actionBarSize" />
Step 1 - Create a custom layout for your toolbar.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
Step 2 - Include this layout into your activity layout. Give it the bottom position.
<include
android:id="#+id/toolbar_main"
layout="#layout/main_toolbar" />
Step 3 - Call the toolbar into your activity and done. It will behave as any toolbar but positioned at bottom.
I'm not sure if that is possible. I'm trying to do a screen with tabs and lists in every tabs (I've done that already) and I've done a custom ActionBar for the title and some icons on it, now, i want to change the text color of the tabs, I've solved the background color but i can't find anything related to the text color, here is a piece of my code .java and my manifest.xml
addMenu();
// Set up the action bar.
final ActionBar actionBar = getSupportActionBar();
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
actionBar.setStackedBackgroundDrawable(new ColorDrawable(Color.parseColor("#ffffff")));
actionBar.show();
actionBar.setDisplayOptions(actionBar.getDisplayOptions() | ActionBar.DISPLAY_SHOW_CUSTOM);
// Create the adapter that will return a fragment for each of the three
// primary sections of the activity.
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
// Set up the ViewPager with the sections adapter.
mViewPager = (ViewPager) findViewById(R.id.pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
// When swiping between different sections, select the corresponding
// tab. We can also use ActionBar.Tab#select() to do this if we have
// a reference to the Tab.
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
#Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
// For each of the sections in the app, add a tab to the action bar.
for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
// Create a tab with text corresponding to the page title defined by
// the adapter. Also specify this Activity object, which implements
// the TabListener interface, as the callback (listener) for when
// this tab is selected.
actionBar.addTab(
actionBar.newTab()
.setText(mSectionsPagerAdapter.getPageTitle(i))
.setTabListener(this)
);
}
the addMenu method (Only changes the Action Bar):
getSupportActionBar().setDisplayOptions(android.support.v7.app.ActionBar.DISPLAY_SHOW_CUSTOM);
LayoutInflater inflater = (LayoutInflater) getApplicationContext().getSystemService(LAYOUT_INFLATER_SERVICE);
View view = inflater.inflate(R.layout.order_title, null);
TextView textView = (TextView) view.findViewById(R.id.mytext);
textView.setWidth(getWindow().getWindowManager().getDefaultDisplay().getWidth());
textView.setPadding(0, 0, 50, 0);
textView.setGravity(Gravity.CENTER);
Typeface segoeui = Typeface.createFromAsset(getAssets(),"fonts/segoeui.ttf");
textView.setTypeface(segoeui);
textView.setText("Some Text");
getSupportActionBar().setCustomView(view);
getSupportActionBar().setHomeAsUpIndicator(R.drawable.arrow_left);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#afafaf")));
and my Manifest.xml:
<activity
android:name=".Activity1"
android:label="#string/title_activity1"
android:parentActivityName=".MainActivity"
android:screenOrientation="portrait"
>
<meta-data
android:name="android.support.PARENT_ACTIVITY"
android:value="cleanpress.cleanpress.MainActivity" />
</activity>
This is how it looks:
http://i.stack.imgur.com/0hRbv.png
As you can see, the screen that i'm working is related to another one (if that's relevant).
I want to change just the text color of the Tabs (there are 3 tabs), anyone can help me please?
(I've already worked with HTML format and didn't work)
You should use android.support.design.widget.TabLayout to handle Tabs
so you can adjust:
app:tabIndicatorColor="#color/colorAccent" //indicator color
app:tabSelectedTextColor="#EEE" // text color on selected tab
app:tabTextColor="#EEE" // text color on tab
you should also use android.support.v7.widget.Toolbar for ActionBar.
Exmaple:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".MainActivity"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:layout_alignParentTop="true"
android:text="#string/app_name"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_below="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:tabIndicatorColor="#color/colorAccent"
app:tabSelectedTextColor="#EEE"
app:tabTextColor="#EEE" />
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tab_layout" />
</RelativeLayout>
In activity in onCreate
Toolbar toolbar = (Toolbar) findViewById(R.id.app_bar);
setSupportActionBar(toolbar);
mAdapter = new YourPagerAdapter(getSupportFragmentManager());
mPager.setAdapter(mAdapter);
mTabLayout.setupWithViewPager(mPager);
Remember to add
compile 'com.android.support:appcompat-v7:23.0.0'
compile 'com.android.support:design:23.0.0'
compile 'com.android.support:support-v4:23.0.0'
in gradle dependencies
try this in styles
<style name="MyTheme" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarTabTextStyle">#style/Widget.MyTabText</item>
</style>
<style name="Widget.MyTabText" parent="#style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">#color/#your_color</item>
</style>
So I've recently been working on updating my app to use the new material design support library. My application has one main activity with a drawerLayout and navigation view. The main content of app is shown in a frameLayout, through fragments. However, I am trying now to add material tabs to one of the navigation drawer's fragments. However, I am not sure how to implement this while keeping my fragments in the nav drawer functioning. A good example of what I am trying to achieve is shown below:
In this app (Google play music), only some of the navigation drawer's items have tabs while others do not. So my question is, how would I implement this? (Not looking for code, just an overview of how my layout should be organized)
To recap/clarify:
I have a main layout with a frameLayout (for my app's content), and a navigationView (for navigating the different item fragments). I then have a listener which replaces the main layout's frameLayout with the item's respective fragment. Now, I need to add tabs to just one of these fragments (to navigate between 4 other fragments). I am also using a toolbar which I include as a separate layout.
Any advice is appreciated. I'm sorry if my description is a little confusing; I will clarify any necessary details.
Ok suppose your NavigationView has two options, the first one displays the fragment with tabs (tab layout) and the second one displays just a fragment with a toolbar. You have two options then:
You can have a main layout with just a frame layout and replace it with all what you want
You can have a main layout with coordinator layout -> app bar -> toolbar -> tab layout and a frame layout to put content
I prefer the second option to avoid having to always configure the toolbar so this is what I did once:
<!-- layout_main -->
<android.support.v4.widget.DrawerLayout
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"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<!-- The NavigationView -->
<fragment
android:id="#+id/navigation_fragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="some.path.to.the.NavigationViewFragment"
tools:layout="#layout/fragment_navigation_view" />
</android.support.v4.widget.DrawerLayout>
As you see I change the visibility of TabLayout to "gone" so that the fragment with tabs take care to set as visible. The Fragment with the tabs just have the ViewPager in the Layout:
<!-- fragment_with_tabs -->
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Now the fragment with tabs initialize the ViewPager with the fragments for each page:
#Override
public onViewCreated(View view, Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
// The getChildFragmentManager() is Very important! Because fragments inside fragments are
// not supported with the tipical fragmentManager, it requires NestedFragments and those
// uses a childFragmentManager(). In other case a strange behaviour occurs
ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
adapter.addFragment(new TabOneFragment(), "Tab 1");
adapter.addFragment(new TabTwoFragment(), "Tab 2");
viewPager.setAdapter(adapter);
tabLayout = (TabLayout) getActivity().findViewById(R.id.tab_layout);
tabLayout.setVisibility(View.VISIBLE);
tabLayout.setupWithViewPager(viewPager);
}
And finally do whatever you want in your TabFragments, this works fine for me and I hope this be useful for you too. Sorry for some problem with code syntax, I develop android with Kotlin and not with Java.
I can't recommend what Yiyo suggested. If you are going to have Fragments with different layouts, you should let the Fragments customize these layouts in the XML. This is why the introduction of Toolbar made so much sense for Android development. In the future, you might even have more requirements that differ between each Fragment. Some of them might not want a Toolbar, some of them might need another View above the Toolbar, some of them will have a RecyclerView that you would like to be accessible to the CoordinatorLayout and AppBar so that the scrolling behavior works properly.
I recommend you to put only a FrameLayout as the content of your DrawerLayout (as Yiyo mentioned in point 1). Here you will load each Fragment from the callbacks of the NavigationView.
<android.support.v4.widget.DrawerLayout
...
android:fitsSystemWindows="true"
>
<FrameLayout
android:id="#+id/drawer_content"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.design.widget.NavigationView
...
/>
</android.support.v4.widget.DrawerLayout>
In each Fragment's XML you will put, if required by that Fragment, a Toolbar. In your tabbed Fragment's XML you will put the TabLayout, and if you so wish, the CoordinatorLayout and AppBarLayout. From each Fragment that has a Toolbar, you will set the Toolbar as the ActionBar:
Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
AppCompatActivity activity = (AppCompatActivity) getActivity();
activity.setSupportActionBar(toolbar);
That's all there is to it. Of course you don't want to repeat yourself in every Fragment, so you can, for example, put this code in a DrawerFragment and subclass it for fragments with a Toolbar. You will also want to put your Toolbar XML configuration in a single file and include it in the Fragment's XML <include layout="#layout/toolbar" />. Or you might want to remove the Toolbar from some fragments, or change its color, theme, etc.
You can do it like this. I have checked by doing it myself and it works very well
Step 1 : Create a layout of your main activity like this
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout" android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar" android:layout_width="match_parent"
android:layout_height="wrap_content" android:background="#color/blue"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:titleTextAppearance="#style/TextAppearance.AppCompat.Small"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout" style="#style/FreeWiFiTabLayout"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:layout_gravity="center" android:background="#color/blue"
android:visibility="gone" android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/wifi_type_pager" android:layout_width="match_parent"
android:layout_height="match_parent" android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<fragment android:id="#+id/navigation_drawer"
android:name="com.easyway.freewifi.NavigationDrawerFragment"
android:layout_width="wrap_content" android:layout_height="match_parent"
android:layout_gravity="start|bottom" android:layout_marginTop="?attr/actionBarSize"
tools:layout="#layout/navigation_drawer_fragment" />
Step 2 :
In your activity you need to set onpagechangelistener on your viewpager:
viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
if(position ==0){
tabLayout.setVisibility(View.GONE);
}else{
tabLayout.setVisibility(View.VISIBLE);
}
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
After this you need to add
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
Step 3 :
This is how you can make your adapter for viewpager :
public class WiFiPagerAdapter extends FragmentPagerAdapter {
private final List registeredFragments = new ArrayList<>();
public WiFiPagerAdapter(final FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(final int pos) {
Fragment fragment;
fragment = WiFiFragment.newInstance(pos);
registeredFragments.add(pos, fragment);
return fragment;
}
#Override
public int getCount() {
return tabLayout.getTabCount();
}
public List<Fragment> getRegisteredFragmentsList() {
return registeredFragments;
}
#Nullable
public Fragment getRegisteredFragment(final int position) {
final Fragment wr = registeredFragments.get(position);
if (wr != null) {
return wr;
} else {
return null;
}
}
#Override
public void notifyDataSetChanged() {
super.notifyDataSetChanged();
for (int i = 0; i < registeredFragments.size(); i++) {
WiFiFragment wiFiFragment = ((WiFiFragment) registeredFragments.get(i));
wiFiFragment.setWiFiFragmentRecyclerViewAdapter();
}
}
}