SlidingTabView inside Toolbar - android

I have a transparent SlidingTabLayout embedded within my Toolbar and a ViewPager below.
Everything works fine, functionally. However, the SlidingTabLayout isn't showing up in the bottom left corner of the Toolbar. Instead, it is floating in the middle and to the right:
Here is my Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/thunderstorm2"
android:padding="0dp">
<com.mjh.android.weathertestlayout.SlidingTabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#88ffffff"
android:paddingLeft="0dp"
app:tabTextAppearance="#style/TextAppearance.AppCompat.Small">
</com.mjh.android.weathertestlayout.SlidingTabLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcccc">
</android.support.v4.view.ViewPager>
</LinearLayout>
And here is the accompanying code:
adapter = new ViewPagerAdapter(getSupportFragmentManager(), 3);
pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(adapter);
tabs = (SlidingTabLayout) findViewById(R.id.tab_layout);
tabs.setDistributeEvenly(true);
tabs.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
#Override
public int getIndicatorColor(int position) {
return getResources().getColor(R.color.gray);
}});
tabs.setBackgroundColor(getResources().getColor(R.color.clear));
tabs.setViewPager(pager);
Any idea how to get the SlidingTabLayout back to the lower left within my Toolbar?
I've tried it on numerous devices and emulators, but it remains the same.


I suggest you to nest your SlidingTabLayout inside a RelativeLayout.
Then you can use android:layout_alignParentBottom and android:layout_alignParentLeft to place it at the bottom-left corner of the Toolbar.
<android.support.v7.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/thunderstorm2"
android:padding="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.mjh.android.weathertestlayout.SlidingTabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#88ffffff"
android:paddingLeft="0dp"
app:tabTextAppearance="#style/TextAppearance.AppCompat.Small"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true">
</com.mjh.android.weathertestlayout.SlidingTabLayout>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffcccc">
</android.support.v4.view.ViewPager>

Related

TabLayout in single fragment with Bottom navigation

image1
image2
I have searched possible ways of implementing something like what can be seen in the images above but couldn't find any help. let's say I have 4 fragments {dashboard, heart, notifications, info} the bottom navigation will show on all fragments same for the Toolbar also ... for TabLayout it must show only on HeartFragment with 2 tabs (Page1, Page2).
I tried this way but did not work and app crashed :(
fragment_heart.xml
<?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"
android:id="#+id/OSFA"
android:background="#color/background_wb"
tools:context="ChatsFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:background="#color/color_primary"
android:layout_height="wrap_content"
tools:ignore="MissingConstraints">
<com.google.android.material.tabs.TabLayout
android:id="#+id/main_tab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="#+id/main_tab_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout"
tools:ignore="MissingConstraints">
</androidx.viewpager.widget.ViewPager>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/chat_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="#layout/item_chatlist"
android:layout_marginTop="106dp"
/>
HeartFragment.java:
viewPager = view.findViewById(R.id.main_tab_pager);
tabLayout = view.findViewById(R.id.main_tab);
assert getFragmentManager() != null;
TabsAccessorAdapter adapter= new
TabsAccessorAdapter(getFragmentManager());
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);

View pager is overlapping the tab fragments vertically

I am using Viewpager to browse through the tabs. But my viewpager is overlapping the top of the fragment due to which the top of all the fagments are not visible. Adding padding on the top does the work but is there any better way to do it rather than giving padding on the next view.
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=".Activity.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#ffffff">
</android.support.v4.view.ViewPager>
</RelativeLayout>
Activity
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// ActionBar
final ActionBar actionBar = getSupportActionBar();
actionBar.setDefaultDisplayHomeAsUpEnabled(true);
// ViewPage: Slider that helps to create a page that we can swipe
PagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager());
ViewPager tab = (ViewPager) findViewById(R.id.pager);
tab.setAdapter(pagerAdapter);
//Tablayout : Shows the tab bar that helps to find the ViewPager page
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(tab);
}

Hope this can help you..
<LinearLayout 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="match_parent"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:tabGravity="fill" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

You have used Relative Layout and not defined android:layout_below="#id/appbar_layout" . So I have edited your code. Just copy and paste below code in your xml file. It'll solve your problem.
<?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">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appbar_layout"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/appbar_layout"
android:orientation="vertical"
android:background="#ffffff">
</android.support.v4.view.ViewPager>
</RelativeLayout>

Android : TabLayout not responding to clicks

I have just created a layout that has a DrawerLayout and inside this there is the toolbar, tablayout and viewpager. However the in the tablayout, the tabs are not responding on clicking on them, but is changing on swiping. Here is the code:
<android.support.v4.widget.DrawerLayout 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"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.HomeActivity">
<LinearLayout
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_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<!-- Content for screen without action bar-->
<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="#color/theme_color"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:background="#color/theme_color"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#color/sub_theme_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/toolbar_shadow" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"/>
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/header_navigation_drawer"
app:menu="#menu/menu_drawer_links"
/>
And in MainActivity.java
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
// Initializing Toolbar and setting it as the actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Intializing tab-layout and viewpager for tabs
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Tasks"));
tabLayout.addTab(tabLayout.newTab().setText("Updates"));
tabLayout.addTab(tabLayout.newTab().setText("Redeem"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
// Initializing viewpager to hold the tab-layout
final ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), 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) {
}
});
Now here is the weird part: It is clickable in Lollipop, but is not working in pre-lollipop version.

You can easily solve this by checking the layout view in "design" tab of XML page. Better put the tablayout and viewpager inside a relativelayout.
The activity is fine.
Here is the corrected XML:
<LinearLayout
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.HomeActivity">
<LinearLayout
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_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<!-- Content for screen without action bar-->
<!-- Move toolbar above drawerlayout so that on opening drawer, it is visible -->
<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="#color/theme_color"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/theme_color"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:tabIndicatorColor="#color/sub_theme_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<View
android:id="#+id/shadow_toolbar"
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#drawable/toolbar_shadow" />
</RelativeLayout>
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="#layout/header_navigation_drawer"
app:menu="#menu/menu_drawer_links"
/>
</android.support.v4.widget.DrawerLayout>

Why is my Actionbar not moving up while scrolling?

I have an activity with a drawer layout and a toolbar is included as follows:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<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="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar"
>
</include>
<!-- The main content view -->
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<!-- The navigation drawer list-->
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
The toolbar looks like this:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/background_floating_material_dark"
android:elevation="4dp"
android:paddingTop="1dp"
app:layout_scrollFlags="scroll|enterAlways">
</android.support.v7.widget.Toolbar>
To this activity I keep on adding/replacing fragments #id/frame_container
Now I have a situation where I have a fragment with 2 tabs, which in turn have recycler views fed to a view pager:
And I am setting it up in java as follows:
TabLayout tabLayout = (TabLayout) rootView.findViewById(R.id.tab_layout2);
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
viewPager = (ViewPager) rootView.findViewById(R.id.pager2);
adapter = new MyFragmentAdapter(
getFragmentManager(), 2);
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
Layout of this Fragment:
<RelativeLayout ...
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.view.ViewPager
android:layout_marginTop="#dimen/abc_action_bar_stacked_max_height"
android:id="#+id/pager2"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="#id/tab_layout"
/>
</RelativeLayout>
The fragments in the view pager have the recycler view.:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/listViewPO"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginBottom="2px">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
The problem is the action bar is not hiding when I try to scroll. I am not able to figure out the issue. I have spent days with this. Please help!

Toolbar not collapsing with TabLayout

I would like to let the Toolbar collapse when the user scrolls in one of the TabLayout's tabs (supplied by ViewPager).
This is the functionality I desire:
However, my layout does not only not scroll, but also cuts off content at the bottom (to be exact, it cuts off 48dp - the height of a toolbar):
I use the ViewPager to display each Fragment as a tab. The Fragments consist of a simple ScrollView holding a TextView. Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/ueber_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/ueber_tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#android:color/white"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/ueber_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Each fragment has the following layout:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/ueber_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"
android:textColor="#000000"
android:linksClickable="false"
android:textColorLink="#000000"
android:fontFamily="serif"
android:padding="16dp"/>
</ScrollView>
The ViewPager is set up by a ViewPagerAdapter:
ViewPager viewPager = (ViewPager) findViewById(R.id.ueber_viewpager);
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFrag(new ContentFragment(), "Über");
adapter.addFrag(new ContentFragment(), "Impressum");
adapter.addFrag(new ContentFragment(), "Lizenzen");
viewPager.setAdapter(adapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.ueber_tabLayout);
tabLayout.setupWithViewPager(viewPager);

Use a NestedScrollView instead of a ScrollView.
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

When the user scrolls in to the fragment, hide the toolbar:
getSupportActionBar().hide();
When they scroll back to the top, show the toolbar:
getSupportActionBar().show();

Categories

Resources