I created a viewpager using a fragment adapter which returns a few fragments
however the layout is not taking into acount the tabs height and results in cut and missing items for lower part of the screen (the fragment layout).
i.e it has a toolbar or a button which suppose to show at the bottom of the layout it will look okay in the layout editing tool which shows only the fragment but once inside the pager it will ignore the height of the tabs keep thinking the layout takes the entire screen resulting in the lower part not showing properly (only the higher part of the button is shown)
How can i make it to take into account the height of the tabs in the activity?
the inflation code:
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.fragment_test,container,false);
return view;
}
the viewpager layout
<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" >
<android.support.v7.widget.Toolbar
android:id="#+id/l_acs_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/l_acs_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/l_acs_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
a sample fragment layout
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activity" >
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/l_f_cscp_label_TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ChooseImage:"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/l_f_cscp_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_picture_512" />
</LinearLayout>
<ImageButton
android:id="#+id/l_f_cscp_fab_imageButton"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_gravity="end|bottom"
android:layout_margin="15dp"
android:background="#drawable/fab_circle"
android:src="#drawable/ic_create_black_24px" />
</FrameLayout>
</RelativeLayout>
Related
I want to add a button to a View Pager. Tried adding button, fragment, and layout without success.
I've also tried this:
Add button to ViewPager
But it didn't work.
This 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
This is the screen shot, I want to add the button on the bottom of the page.
Thanks.
You can Wrap this LinearLayout in the Relative layout. If you don't want to change the Linear layout to RelativeLayout. Here is the modified layout XML and It will display Button the Bottom Right. You can modify layout_alignParentRight to left, center depend on your need.
<?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="match_parent">
<LinearLayout
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.airpal.yonatan.airpal.MainActivity_User">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appBarLayout">
<include layout="#layout/app_bar_layout" android:id="#+id/main_page_toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/main_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#android:color/white">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/main_tabPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appBarLayout">
</android.support.v4.view.ViewPager>
</LinearLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"/>
</RelativeLayout>
Try using RelativeLayout for the root view and use :
android:layout_alignParentBottom="true"
With LinearLayout at root view is not possible. Also, instead of RelativeLayout, ConstraintLayout is a good alternative.
I am working on a app in which layout structure is as follows -
Activity A - This activity is a Tab Layout Activity which uses viewpager for tabs and code is given below.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_container"
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">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_marginTop="24dp"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable" />
</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" />
</android.support.design.widget.CoordinatorLayout>
The fragment that is added to the viewpager has a common layout for all tabs and code is given below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:background="#color/background_app"
tools:context="com.peacecorps.pcsa.safety_tools.SafetyPlanActivity">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/primary_text_default_material_dark"
android:textSize="20sp"
android:textStyle="bold"
android:text="#string/safety_plan_subtitle"/>
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/safety_plan_pager"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="320dp" />
<Button
android:id="#+id/actionButton"
style="#style/NavigateButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="15sp"
android:text="#string/see_action"
android:layout_marginTop="10dp" />
</LinearLayout>
As you can see this fragment again contains a viewpager.This viewpager will always be populated by a fragment below.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include android:id="#+id/text_to_show"
layout="#layout/textview"/>
</ScrollView>
where textview is
<?xml version="1.0" encoding="utf-8"?>
<!--This is the common layout used for TextViews-->
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primary_text_default_material_dark"
android:textSize="#dimen/abc_text_size_medium_material"
android:layout_gravity="center_horizontal"
android:background="#drawable/bg_textview_rounded_rectangle"
android:padding="#dimen/textview_padding"
android:scrollbars="vertical"
android:fadeScrollbars="false"
android:layout_marginBottom="#dimen/activity_vertical_margin"
android:autoLink="web|email"
android:textColorLink="#color/text_color_link"
/>
Here textview contains text of different amount which is set dynamically in java for different tabs.
The problem I am facing is that only part of UI is available in landscape mode and some part is lost which is not scrollable too.Please help me, I am stuck on this for a really long time.
The problem you are facing is because you have 2 scrolling behavior. When the phone is on portrait mode it has a lot of space that 320dp height ViewPager won't be able to occupy all the spaces available, but when the phone is on landscape mode 320dp height ViewPager will occupy the whole screen so the layout will only scroll the second view pager, that means that the whole screen on landscape mode will only have access on the second ViewPager.
Remember that the ones on the bottom are the first to be accessed. That means that a view that is on the bottom have a higher z-index - Code Reference not the actual view.
I want to create a layout like the below image:
A CoordinatorLayout which contain :
CollapsingToolbarLayout( contain ImageView & Toolbar)
RecyclerView
TabLayout
ViewPager( that each fragment of it contain a RecyclerView)
I wanna responding to scroll events in this way:
CollapsingToolbarLayout expand and collapse by scrolling
Toolbar sticks to the top until TabLayout reach to the top
After that toolbar scroll up and TabLayout stick to the top
I'm having trouble with the RecyclerView between CollapsingToolbarLayout and TabLayout. I can implement this layout without that RecyclerView( I put CollapsingToolbarLayout and TabLayout inside the AppBarLayout and the ViewPager outside it, inside the CoordinatorLayout).
My Question:
Where should I put that RecyclerView?
Which & where layout_scrollFlags and layout_behavior should I set for each layouts?
It seems that AppBarLayout have a limited height. When I put the RecyclerView inside AppBarLayout, only a portion part of the RecyclerView is visible and also TabLayout disappear.
I read lots of tutorials like this one and lots of questions like this one and this one, but non of them help me.
use this as a main layout
activity_main
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout 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:id="#+id/swipe_refresh_layout_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:ignore="RtlHardcoded">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/co_profile_activity_root_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:visibility="visible">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_img_placeholder_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/rel_top"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop">
<ImageView
android:id="#+id/img_bg_placeholder_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:tint="#11000000"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.9" />
<LinearLayout
android:id="#+id/lin_top_inner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#BF473e6b"
android:orientation="vertical"
android:scaleType="centerCrop">
</LinearLayout>
</RelativeLayout>
<FrameLayout
android:id="#+id/frame_detail_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center|center_horizontal"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3">
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v7.widget.RecyclerView>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_profile"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_toolbar_height"
android:gravity="top|center"
app:layout_anchor="#id/frame_detail_profile"
app:layout_collapseMode="pin"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/profile_toolbar_title_left_margin"
android:gravity="center_vertical|center"
android:ellipsize="end"
android:singleLine="true"
android:layout_gravity="center"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_profile"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginTop="#dimen/profile_tab_layout_top_margin"
android:background="#color/white"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#color/colorPrimary"
app:tabTextColor="#color/charcoal_grey" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
and for grid layout of tabs use adapter classes.
Start with AppBarLayout under which you add CollapsingToolbarLayout with scrollFlags="scroll|exitUntilCollapsed",
add LinearLayout with vertical orientation to CollapsingToolbarLayout and add the
FrameLayout with ImageView + Toolbar
RecyclerView
TabLayout
Two things to be done:-
When the search button is clicked, set the visibility of recycler view to VISIBLE
When the back button is pressed, set the visibility of recycler view to GONE
Following are the implementations:
1. Setting the visibility of recycler view to VISIBLE:
public boolean onOptionsItemSelected(MenuItem item) {
if (item.getItemId() == R.id.searchView) {
rView.setVisibility(VISIBLE);
}
return true;
}
2. Setting the visibility of recycle adapter to GONE
MenuItem searchMenuItem = menu.findItem(R.id.searchView);
MenuItemCompat.setOnActionExpandListener(searchMenuItem, new MenuItemCompat.OnActionExpandListener() {
#Override
public boolean onMenuItemActionExpand(MenuItem item) {
return true;
}
#Override
public boolean onMenuItemActionCollapse(MenuItem item) {
recyclerView.setVisibility(GONE);
return true;
}
});
NOTE: Do not forget to keep the visibilty as GONE initially when the activity is started
I know I might be late to this answer but I have also been trying to implement this for a while. The solution I have feels a bit hacky but it is an option for trying to get the tabs to stick. In a simpler solution lets say we wanted the following:
A Collapsing toolbar layout
Which links to a scroll view.
In that scroll view we want the following:
A recyclerview that say scrolls horizontally
Below the recycler view a tab layout
Below the tab layout we want a view pager that will load dynamic fragments within a fixed space.
activity_scrolling.xml the outer parent xml file may look something like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
android:fitsSystemWindows="true"
tools:context=".temp.ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="5dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_scrolling" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_email" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Then the inner content_scrolling.xml may look something like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".temp.ScrollingActivity"
tools:showIn="#layout/activity_scrolling">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:gravity="center"
android:text="A Heading"
android:textSize="#dimen/text_xl"
android:textStyle="bold" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/recycler_view"
android:layout_gravity="center"
android:minHeight="60dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorAccent"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/colorPrimaryDark" />
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="680dp"
android:layout_below="#+id/tabs" />
</RelativeLayout>
</androidx.core.widget.NestedScrollView>
This will allow you to forcefully place the tab layout in a location of your choosing (even if its after a recyler view).
The hacky part which i dont like is this specific line android:layout_height="680dp" which forces the viewpager height to be something specific. I am not sure why wrap_content or match_parent do not work. But this is the best thing to a solution I can provide for the issue of placing TabLayout and ViewPager in specific places.
This is the activity_main.xml layout for Androids default tab application:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!-- When I add my own view here and use match_parent, it fills ENTIRE screen, even over the Toolbar. The ViewPager right above does not do this. Why? -->
</android.support.design.widget.CoordinatorLayout>
I am trying to add my own buttons/textviews/etc to my activity_main.xml but I do not know where to add them. The android.support.v4.view.ViewPager uses match_parent although it does not fit the whole screen, it expands across the entire screen besides the Toolbar area at the top. However, whenever I add my own view underneath the android.support.v4.view.ViewPager, lets say RelativeView and set it to match_parent, it expands OVER the Toolbar. This led me to believe that I should put my contents inside the ViewPager tags but that does not work either.
Where should I put my views so that they are not overlapping the Toolbar?
You can wrap your ViewPager in an RelativeLayout and you can add the view child also.
Here is the code snippet which may help you-
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable" />
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button"
android:background="#color/colorNeutral"
android:layout_above="#+id/button2" />
<Button
android:layout_marginBottom="56dp"
android:layout_alignParentBottom="true"
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="48dp"
android:text="I am clickable too" />
</RelativeLayout>
I am having an issue with a Tab bar and ViewPager in my android project. What the app does it has an activity which hosts a tab layout and then has 2 fragment which represents each of the tabs.
When the activity is opened it posts to an API to get some data and puts the data into a data adapter for a Recycler View and Card layout in each of the fragments.
The recycler view will contain 3 items but only 2 are being shown as the first is being hidden under the toolbar and/or the tab bar as shown in the screenshot below.
Below is the layout file of my activity
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/toolbar" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
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="match_parent" />
<!--app:layout_behaviour="#string/appbar_scrolling_view_behaviour" />-->
</android.support.design.widget.CoordinatorLayout>
Below is the layout of the fragment
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<view
android:id="#+id/recycler_view"
class="android.support.v7.widget.RecyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true" />
</LinearLayout>
Below is the layout for card layout
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_margin="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:elevation="5dp">
<TextView
android:id="#+id/txtApplicationName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:maxLines="3"
android:padding="8dp"
android:textColor="#222"
android:textSize="15dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
Below is the screenshot as mentioned above which shows the problem. I've pixelated some of the text but it should you what I mean, there should be 3 items but the first item is hiding underneath the tab bar.
Edit: As suggested below by #smeet and #hardik, adding the scroll behavior app:layout_behavior="#string/appbar_scrolling_view_behavior" should fix the problem while preserving the scroll behavior. Scroll behaviors only work if the view is a direct child of the coordinator layout.
Old Answer
Just Wrap your appbar layout and viewpager in a vertical LinearLayout
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.BoardiesITSolution.CritiMonApp.AppsActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
//appbar layout
//viewpager
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
From the docs, CoordinatorLayout is a super-powered FrameLayout. So you can expect the typical "lay views on top of other views" FrameLayout behavior.
Adding :
app:layout_behavior="#string/appbar_scrolling_view_behavior"
in ViewPager resolved issue in my case.
if we will wrap app bar layout with linear layout than toolbar will not hide when you scroll so accepted answer might not help you if you want to hide toolbar when you scroll.
Smeet did it right way but not explained! here is full example with explanation.
add app namspace to CoordinatorLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
......
>
and just add below line in your ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
complete xml will be as below
<?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"
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: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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>