I'm using TabLayout and I attach two tabs.
tabLayout.addTab(tabLayout.newTab().setText("Featured"));
tabLayout.addTab(tabLayout.newTab().setText("Filter"));
Then onTabSelected() I display the fragment I want according to which tab user selected.
The layout of my Activity is :
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/ll_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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"/>
<FrameLayout
android:id="#+id/fl_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
and the layout of the fragments is just a TextView in a LinearLayout :
<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:text="Projects List Fragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
But the result I get is the following :
as you can see the content of the fragment overlaps Tab's text when it should appear underneath.
Thanks
Finally, I found alternative solution for this problem.
You can give top padding on your each Tab fragment's layout.
Eg,
android:paddingTop="?attr/actionBarSize"
For instance, my first tab xml looks like below:
<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="wrap_content"
android:paddingTop="?attr/actionBarSize"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.upgautam.uddhav.productassignment.uicontrollers.ProductListFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/product_list_string" />
</android.support.design.widget.CoordinatorLayout>
Now, the screen looks like below:
Related
I have an Activity with 4 tabs. The TabLayout is placed at the bottom (I know this is a violation of guidelines, but that's the design). One of the Fragment also has tabs which should be placed at the top, but it's shadowed by the title bar.
.
How can I add tabs to Fragment, so that it's not shadowed by the Toolbar?
Here is activity_layout.xml
<?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:background="#color/bg_main"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/fragments"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bg_main_tabs"
app:elevation="#dimen/elevation"
app:tabIndicatorHeight="0dp"/>
</LinearLayout>
and fragment_with_tabs.xml:
<?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:background="#color/bg_main"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/clothes_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:tabIndicatorColor="#color/colorPrimaryDark"
app:tabSelectedTextColor="#color/colorPrimaryDark"
app:tabTextColor="#android:color/white" />
<android.support.v4.view.ViewPager
android:id="#+id/clothes_fragments"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
Set the elevation to 0. Setting the elevation from the AppBarLayout is ideal but anyway you can do something like this
getSupportActionBar().setElevation(0);
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 created a Tabs one for Footer menu and another for just a fragment class inside this i have 3 Tabs.
I want to call Footer menu (Tabfragment.java)in another fragment(DeliveryTab.java).
I search it on google and revise the stackoverflow's question but none are helping me..
Here i post complete code.
activity_deliverytab.xml
<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"
tools:context=".TabFragment"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs_delivery"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/tabMedium" />
<include
layout="#layout/tabfragment"></include>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_delivery"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white">
</android.support.v4.view.ViewPager>
</LinearLayout>
You should include Fragment in your layout using the fragment tag. Like this:
<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"
tools:context=".TabFragment"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs_delivery"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#color/tabMedium" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager_delivery"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white">
</android.support.v4.view.ViewPager>
<!-- Since you want it to be in the footer -->
<fragment android:name="xyz.xyz.xyz.TabFragment"
android:id="#+id/tabFragment"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Hi i am not sure but you can try like this
inside DeliveryTab.java
ParentActivity activity = (ParentActivity) getActivity();
(ParentActivity is name of your activity which calls both TabsFragment and DeliveryTab )
Now get TabsFragment from FrameLayout or fragment whatever you set your TabsFragment like
((TabsFragment ) getSupportFragmentManager().findFragmentById(R.id.FragmentContainer))
How to add tag to Fragment see this -https://stackoverflow.com/a/23370128/4741746
Now you have TabsFragment now get ViewPager
mViewPager.setCurrentItem(getPosition);
I am trying to add a button bar at the bottom of a screen which already contains a recycler view. When i do so the button bar overlaps the last item of the recycler view and if i try to click on the button bar the item under it in the recycler view gets clicked. Here is my xml:
<?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:fitsSystemWindows="true"
tools:context="com.example.owaisnizami.navigation.MainActivity">
<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.AppBarLayout>
<include layout="#layout/content_main"/>
<LinearLayout
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar"
android:background="#F44336"
android:layout_gravity="bottom|end">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_gravity="center"
android:text="Advertisements Here"
android:textColor="#FFFFFF"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
content_main contains the recycler view and here is its 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical"/>
</RelativeLayout>
I have had and have now solved this problem and the solution is not as complicated as I was thinking.
In the layout in content_main that holds your RecyclerView, set
android:layout_marginBottom="<height-of-your-button-bar>"
Set this for the RelativeLayout which holds your RecyclerView, not your RecyclerView itself.
Now, when you scroll to the bottom of your list it will continue to scroll so that the last item is not hidden by the button bar.
Looking at your layout, you may need to identify the height of your button bar so that you can set this margin accordingly.
Hope this helps.
Full disclosure, I used this solution with a NestedScrollView instead of a RelativeLayout though don't know why it wouldn't work - also, if you switch to a NestedScrollView your CollapsableToolbar will be able to collapse.
Move your button bar layout inside your content_main as below
<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"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/buttonBar"
android:scrollbars="vertical"/>
<LinearLayout
android:id="#+id/buttonBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#android:style/ButtonBar"
android:background="#F44336"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30sp"
android:layout_gravity="center"
android:text="Advertisements Here"
android:textColor="#FFFFFF"/>
</LinearLayout>
</RelativeLayout>
This way you can be sure that recyclerView ends before button bar layout
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>