Hello so I want to achieve this with the toolbar and I have seen many tutorials which explain how to do it with all the layout in one XML file.
However, I do not know how to solve this problem in the following use case
I have an XML file which defines my 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"
android:background="#color/colorPrimary"
android:paddingTop="#dimen/app_bar_top_padding"
app:theme="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Then I include this toolbar in an activity layout (linear layout root) which contains a frame layout as a container for a fragment
<include
android:id="#+id/app_bar"
layout="#layout/app_bar" />
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
Now this fragment is inflated dynamically and the fragment is a recycler view.
Can someone point me into how I link CoordinatorLayout with this common arrangement?
Thanks !
EDIT Have solved this issue but let me know if there is a mistake
My Activity Layout
<?xml version="1.0" encoding="utf-8"?>
<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.support.design.widget.CoordinatorLayout
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">
<include layout="#layout/toolbar"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
My Toolbar layout which has the scroll flags
<?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:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:theme="#style/ToolbarStyle"
app:theme="#style/ToolbarStyle">
</android.support.v7.widget.Toolbar>
That shouldn't be a problem as long as the Toolbar is added to a CoordinatorLayout, wrapped in an AppBarLayout. If you've tried it and still have problems, show the code you've tried and we can work through that.
Related
I have an AppBarLayout nested inside of a CoordinatorLayout
<?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"
tools:context="com.example.michael.blemanager.Activities.ColorPickerActivity.Color1">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
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_color1"/>
</android.support.design.widget.CoordinatorLayout>
Here is the included layout content_color1
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.example.michael.blemanager.Activities.ColorPickerActivity.Color1"
tools:showIn="#layout/activity_color1">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/default_background"
>
/....
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Now for some reason the AppBarLayout overlaps the ConstraintLayout
See where the tool bar overlaps the color circle? How do I prevent the overlap?
Wrap your include tag inside a FrameLayout using layout_behavior of appbar_scrolling_view_behavior like this:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/content_color1"/>
</FrameLayout>
Change CoordinatorLayout to ConstraintLayout.
I had the same problem and that worked for me.
I've tried to clone the Google Playstore UI.
So, I've a NavigationView, CoordinatorLayout -> AppBarLayout -> Toolbar, TabLayout, ViewPager. A tab has a layout where there are n horizontal RecyclerViews within 1 vertical RecyclerView.
My questions:
Toolbar gets hidden on scrolling up iff the areas of the vertical list where the horizontal list items aren't visible (the gray background in the screenshot attached) are touched to scroll. If I am scrolling up by touching the inner list the scrolling takes place but the toolbar doesn't hide.
How do I hide the tab header as well on scroll up.
My layout files:
activity_navigation_drawer.xml:
Main activity layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/layout_main_content_nav_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<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:headerLayout="#layout/header_navigation_drawer"
app:menu="#menu/menu_navigation_drawer"/>
</android.support.v4.widget.DrawerLayout>
layout_main_content_nav_drawer.xml:
included in the above 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.aishwarya.materialdesign1.NavigationDrawerActivity">
<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"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/layout_content_nav_drawer"/>
</android.support.design.widget.CoordinatorLayout>
layout_content_nav_drawer.xml:
included in the above 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:id="#+id/content_navigation_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.aishwarya.materialdesign1.NavigationDrawerActivity"
tools:showIn="#layout/layout_main_content_nav_drawer">
<FrameLayout
android:id="#+id/fl_main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
fragment_home_screen.xml:
fragment that contains the TabLayout & ViewPager. I open this from my main activity to display the content.
<?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.design.widget.TabLayout
android:id="#+id/tl_sliding"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/color_primary"
app:tabTextColor="#android:color/black"
app:tabIndicatorColor="#color/color_primary"
app:tabIndicatorHeight="2dp"/>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
I am trying to learn Material Design, I am trying to make a layout like current layout of Whatsapp home screen
It all works fine i had set up my tabs and also able to make swipe layout in tabs, now when i tried to make AppBarLayout exit the screen along with content when scroll, so that my content gets some more height while scrolling and my toolbar hide while scrolling. For that,
I had included NestedScrollView as parent of my content_main layout, And i included that content_main inside my activity_main but due to use of nested scroll view the swipe behavior of tabs are gone.
Currently its working like this but tabs are not swippable now, tabs are working properly when i clicked them.
What can be the issue?
content_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_width="match_parent"
android:layout_height="1000dp"/>
</LinearLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</layout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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.support.design.widget.CoordinatorLayout
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activity.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/tb_activity_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways"
/>
<android.support.design.widget.TabLayout
style="#style/MyCustomTabLayout"
android:id="#+id/tabs_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/content_main"
android:id="#+id/content_main"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab_activity_main"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/stat_notify_sync_noanim" />
</android.support.design.widget.CoordinatorLayout>
</layout>
I have weird problem of colliding
My main xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<include
layout="#layout/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="250dp"
android:background="#DDDDDD"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
My content.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=".main.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>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
Adding android:layout_marginTop="?attr/actionBarSize" this to all fragment layouts solves the problem but why? I think it is because of include technique that is used in main layout but since toolbar is always there and framelayout is another widget, but it starts calculationg from top of app bar.
Because you are using a CoordinatorLayout as parent of your Fragment layout.
You haven't any explicit behavior defined there so it will use his default behavior, that's why the Fragment layout is "under" your AppBarLayout.
A simple way to solve this is to add the layout_behavior attribute to fragment_container:
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
Hi i know this question is too silly but this really matters for the application. Working with xml is the big deal. I am facing lots of problems.
Its not allowing me just to drag and drop the things, When i do, its placing in some other position.
I can able to manage inside Relative layout but DrawerLayout I can't able to do what i want. Here is my XML
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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.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"/>
<!-- -->
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragment"
android:name="corp.msf.com.facebookconnect.MainFragment"
tools:layout="#layout/fragment_main"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.v4.widget.DrawerLayout>
I have Toolbar above and below that i want the fragment to come. But fragment occupies all the place ( overlaps on toolbar ) . How can i specify and how can i work with xmls easily. Any help welcomed. Thanks for reading.
Use for your toolbar and fragment.
Set the orientation of linear layout as vertical as below
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<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"/>
<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/fragment"
android:name="corp.msf.com.facebookconnect.MainFragment"
tools:layout="#layout/fragment_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>