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
Related
Right now, I have a normal looking Toolbar. What I want to do is add a custom layout between the Toolbar and the TabLayout, as shown in the picture below:
On the left is what my Toolbar looks like now, and on the right is what I want it to look like.
As you can see, I want to add an ImageView and two TextViews to the layout.
How can I achieve this?
Here is my current 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: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/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
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="48dp"
app:layout_scrollFlags="scroll|enterAlways" />
</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>
AppBarLayout extends LinearLayout, so you can add any number of views to your AppBarLayout: there's no reason to add the views specifically to your Toolbar.
You'll want to make sure you use the same layout_scrollFlags as your Toolbar if you want them to scroll the same.
Toolbar is just a ViewGroup, you can customize is as much as you want.
Try this :
<android.support.v7.widget.Toolbar
style="#style/ToolBarStyle"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="#dimen/abc_action_bar_default_height_material">
<ImageView
android:layout_width="wrap_content"
android:contentDescription="#string/logo"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/ic_launcher"/>
This should bring your imageView in center of toolbar.
How to have a good Toolbar when using the <item name="android:windowTranslucentStatus">true</item> flag ?
I tried to add almost every combinaison of fitSystemWindow to my view hierarchy but none is working !
Here is my layout with the best result :
<?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/activity_main"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
tools:context="fr.pdegand.fullscreentoolbar.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
app:title="Test"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical">
<EditText
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<View
android:background="#FF00FF"
android:layout_height="400dp"
android:layout_width="match_parent"/>
<View
android:background="#00FF00"
android:layout_height="400dp"
android:layout_width="match_parent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
But it has 2 problems : first, the Coordinator is using the colorPrimaryDark to fill the gap of the status bar and when the view is fully scrolled, the Toolbar doesnt disapear totally at the top of the screen.
The best result would be that the Toolbar itself stretch it's top to fill the gap so that the color behind the status bar would always match the color of the toolbar (my toolbar actually have dynamic coloring in my real app) and when the view is fully scrolled the toolbar should totally disappear at the top. And if possible without code. I know I could add some OnApplyWindowInsetsListener and manually handle the insets but I'm looking for a more generic solution that could be applied to all my screens.
Thank you for the help.
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.
I have this layout :
<LinearLayout>
<LinearLayout>
<!--This layout is fixed at the top-->
</LinearLayout>
<ScrollView>
</ScrollView>
<LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
xmlns:a
</LinearLayout>
</LinearLayout>
I think this appbar should look fixed at the bottom, but the appbar doesn't look at all. How can I make appbar look at the bottom? Thanks.
if you wish to use toolbar as the footer you may,
Things you need to take care of is that you are using ScrollView which happens to take all the space on the layout, so to manage that you can use the layout_weight attribute, by setting it to 1, ScrollView will take the rest of the space in layout which is left after accommodating the toolbar
<?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:background="#android:color/holo_blue_dark"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_weight="1"
android:background="#android:color/darker_gray">
</ScrollView>
<android.support.design.widget.AppBarLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/my_custom_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</LinearLayout>
OutPut
Currently, there are no straightforward ways of doing it. As per Google's design guidelines, App Bar should not appear at the bottom. Read this document.
If you really wanna do this, you can follow this article. It is for aligning ActionBar at the bottom. But you can use it to align AppBar too.
I followed different example to insert the Toolbar in my PreferenceActivity. I eventually found a conclusion, but the FrameLayout overlaps the Toolbar, as you see in the image.
This is the XML file.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:theme="#style/ToolbarColoredBackArrow"
app:popupTheme="#style/MyDarkToolbarStyle"/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="false"
android:layout_below="#+id/toolbar" />
</RelativeLayout>
Well your layout says so.
The RelativeLayout needs to be told that the toolbar is on top of the framelayout or alternatively the framelayout told to be below the toolbar.
So either add this to the framelayout:
android:layout_below="#id/toolbar"
Or this to the toolbar:
android:layout_above="#id/content_frame"