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.
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
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 a layout (as generated by android studio) where i added a RelativeLayout to the AppBarLayout. The code is below and it looks like this:
Where i am stuck: What i want to achieve is when scrolling the Recyclerview down i want that the green relative layout (which has the id 'controlContainer') scrolls out with it, and when i scroll up it should scroll in (not just on the top but at any place i scroll up in the list)
The Toolbar on top should stay where it is.
<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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
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:popupTheme="#style/AppTheme.PopupOverlay"
/>
<RelativeLayout
android:id="#+id/controlContainer"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#android:color/holo_green_dark"
app:layout_scrollFlags="scroll|enterAlways"></RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/venue_list" />
</FrameLayout>
I thought that using app:layout_scrollFlags="scroll|enterAlways" in the view that should scroll away combined with app:layout_behavior="#string/appbar_scrolling_view_behavior"should achieve that, but it does not do anything. alternatively, when i add those fields to the toolbar itself both layouts scroll away - which is not what i want, i want the toolbar to stay always fixed.
would be nice if anyone could point me in the right direction here? (i hoped it would be possible with using coordinator layout and not hacking some layout manipulation with onscroll listeners?)
Try this in your toolbar code:
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
I found this link helpful: Scrolling Toolbar
I'm must getting started with android app development. I'm using Android Studio and working through the tutorial. I keep having 2 elements lay on top of each other, whereas one should be below the first element. It is probably a very noob mistake, but hey, I'm a noob and I don't know what it is. :) Code follows:
<?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"
android:orientation="horizontal"
tools:context="org.kehrli.testapp.MyActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
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/colorPrimaryDark"
/>
</LinearLayout>
<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="horizontal" >
<EditText android:id="#+id/edit_message"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:hint="#string/enter_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/button_send"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:background="?attr/colorPrimary"
android:src="#android:drawable/ic_dialog_email" />
Can anyone see where I went wrong?
Whenever there is a LinearLayout , you must specify android:orientation, that says whether the child elements should stack horizontal or vertical.
Since you want to stack vertically, update the android:orientation value to vertical.
Your linear layout orientation is set to horizontal, make it vertical and you should be seeing them one below the other.
Change android:orientation="horizontal"
to android:orientation="vertical"
Since you are using a CoordinatorLayout, you want your ToolBar inside an AppBarLayout instead of a LinearLayout. A bit like this:
<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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
</android.support.design.widget.AppBarLayout>
You should checkout the AppBarLayout for more information on the scroll flags, etc.
In addition the 2nd linear layout may need a layout behavior so it sits below the app bar. So if you see that you may need to add this attribute:
app:layout_behavior="#string/appbar_scrolling_view_behavior"