I am creating an app with an AppBar and below this one, a (Relative)Layout.
Like in Facebook Messenger :
You can see the AppBar and below it a Layout with three buttons (TOUS, MESSENGER, SMS).
When I scroll, my Layout including the three buttons does not move, it stays "pinned" at the same position (on top). My objective is to make that the Layout with the thress buttons pass behind the AppBar and does not stay in the view.
Here is my actual code :
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways|snap" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
app:tabIndicatorColor="#color/fullWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:background="#color/background_grey_white">
<!-- These part has to scroll and pass behind the AppBar when the user is scrolling, but it does not work at the moment, it stays "pinned" at the top of the screen -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="13sp"
android:id="#+id/content_frame">
<include layout="#layout/tous_messenger_sms"/>
</RelativeLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/separator_color"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
What do I have to change to make it work ?
Can someone help me? Thank you!
Just move the RelativeLayout into the layout of the first element of the ViewPager. In this way when you swipe, the elements in the RelativeLayout will disappear, because the current tab was changed.
Related
I'm trying to pin my toolbar at the top just like a normal 'Action Bar' just like when u click on a twitter post the toolbar up top stays there no matter how much u scroll down.
I found a lot of guides on "how to make the Toolbar collapse and other cool effects" but what i want from it, is to act as an Action bar and stay at the top, is there a simple way of accomplishing that ? without the use of (CoordinatorLayout, CollapsingToolbarLayout, ...) ?
Yes you can pin your toolbar at the top of the activity for that you have to create a layout file named toolbar_layoutlike this
<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="?android:actionBarSize"
android:background="#color/colorPrimary"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:theme="#style/ToolbarStyle"
app:titleTextColor="#color/colorWhite"
app:subtitleTextColor="#color/colorWhite"
app:titleTextAppearance="#style/ToolbarStyle"/>
And in the activity layout i.e activity_main file include it as 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"
android:orientation="vertical">
<include layout="#layout/toolbar_layout"/>
</LinearLayout>
And after that design accordingly the layout
Cheers Happy Coding.
You can make your layout xml like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Your content here -->
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
or put RecyclerView instead of ScrollView + LinearLayout if you have a list
I have a layout coded like 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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activities.HomepageActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/header_copy">
<!--android:background="#072120"-->
<!--android:background="#drawable/header_copy-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#FFFADE09"
app:titleMarginStart="100dp"
app:titleTextAppearance="#style/TabLayoutTextStyle"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay"
>
<!--android:background="#FF008080"-->
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="scrollable"
app:tabGravity="fill"
app:tabTextColor="#FFFADE09"
app:tabSelectedTextColor="#F7FFFFFF"
app:tabTextAppearance="#style/TabLayoutTextStyle" />
</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" />
</android.support.design.widget.CoordinatorLayout>
But this result the below UX
The viewPager is taking space below the bottom bar. But I do not want this behaviour. I want the viewPager take only that visible screen space. Please help me here.
Since your tab bar will always be at the top, and the rest of the views will be under the toolbar, you can replace CoordinatorLayout for a LinearLayout with orientation="vertical" fixes the overflowing issue.
here you are using android.support.design.widget.CoordinatorLayout, the topmost behavior of CoordinatorLayout is appbar_scrolling_view_behavior so is getting extra space in bottom equivalent to the android.support.design.widget.AppBarLayout size.
in this case, you should use LinearLayout or RelativeLayout instead of android.support.design.widget.CoordinatorLayout
So, I have this main activity layout using CoordinatorLayout to display a toolbar and tabs below it:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="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/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="0dp"
local:layout_scrollFlags="scroll|enterAlways"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
local:tabMode="fixed"
local: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"
android:foreground="#drawable/header_shadow"
local:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Then I have 2 fragment layouts, each for each of the 2 tabs I'll have. One fragment displays a ListView on its content:
<FrameLayout
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:foreground="#drawable/header_shadow"
tools:context=".StationsFragment">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_refresh_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<ListView
android:id="#+id/stations_listview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
</FrameLayout>
I want my toolbar to hide when I scroll the listview above, and it should be ok with the code I have, at least from what I read in this answer, but it's not working. At the moment I've tried to remove the FrameLayout from the fragment activity but that didn't solve the issue. I've considered hard coding the scroll event from the listview but if possible I really want this to be working with no code behind..
Thanks in advance.
This is because you are using CoordinatorLayout with ListView. You can change your implementation to RecyclerView to achieve correct scroll.
check my answer here. This may help you.
try change from
local:layout_scrollFlags="scroll|enterAlways"
to
local:layout_scrollFlags="scroll|exitUntilCollapsed"
I have search the Stack Overflow beforewise, but haven't found an appropriate answer to my problem.
I have an Android application with the coordinator layout that has a nested ViewPager inside. If I scroll a RecyclerView that is inside of the first fragment in a View pager, the Toolbar is hidden and shown as intended. However, my other fragments in the ViewPager do not have nested scroll, so I would like to show Toolbar if it is hidden on ViewPager page change. I wonder if I can extend the CoordinatorLayout behavior to have it nicely done.
Thanks in advance! I will be happy to provide more details if needed.
The approximate code is (tried to strip all the unnecessary stuff): main_activity.xml
<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/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tab_layout"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
and a scrolling fragment: fragment.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.CardView
android:id="#+id/add_word_card"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<RelativeLayout
android:id="#+id/add_word_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/highlight">
<!-- some unrelated stuff -->
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.RecyclerView
android:id="#+id/list"
android:layout_below="#id/add_word_card"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:context=".MainActivity"/>
I have found a couple of related questions like: this or this. But they focus mostly on layout problems, while I want to understand if it is real to have a nice solution to triggering Toolbar movement on demand.
So it seems that the answer is the following: wrap the Toolbar in AppBarLayout and in the code use something like: appBarLayout.setExpanded(false, true);
This does the trick for me.
I recently started messing around with the new components of AppCompat 21 and implementing Material Design. Currently, I have an ActionBarActivity with a Toolbar and am trying to have it host a fragment containing a RecyclerView of TextView items (just to test out Recycler). I have items being displayed, but the text in each view is cut off and the entire Recycler is covering the Toolbar like so:
As you can see, there are three TextViews. Their text is cut off halfway and it's overlaying the Toolbar (no Title I know). The TextView item layouts are contained within a RecyclerView layout, which is the layout of the Fragment. The parent Activity has a FrameLayout -> Toolbar, FrameLayout. I am inserting the Fragment into the Activity's sub FrameLayout. Here's the XML:
Each view in the Recycler:
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/textview"
android:layout_width="match_parent"
android:layout_height="48dp"
android:fontFamily="sans-serif"
android:paddingTop="16dp"
android:paddingBottom="20dp"
android:textSize="16sp"/>
The Recycler layout, which is the layout of the Fragment:
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/recycler_tasks"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="stuff.MainActivity$TaskFragment">
</android.support.v7.widget.RecyclerView>
And the parent Activity's layout:
<FrameLayout 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/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</FrameLayout>
I know it must be something simple but I've been stumped on it for a while, trying various things to no avail.
Please do not forget to add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your content 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:layout_width="match_parent"
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:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Use RelativeLayout instead of FrameLayout as top parent. Then just add dependencies like layout_above for the Toolbar or layout_below for the fragment container.