I am trying to make collapsing toolbar with TabLayout as follows
https://i.stack.imgur.com/76m5h.gif
but my result is like this
as you can see the toolbar is not showing at all.
in java I am setting toolbar as actionbar using
setSupportActionBar(toolbar);
I tried many so answers and other sites but not able to solve my problem.
below is the xml I am using.
<?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="vertical"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/bg_main"
android:orientation="vertical">
<com.gigamole.navigationtabstrip.NavigationTabStrip
android:id="#+id/nts_strip"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_gravity="top"
android:background="#color/colorPrimary"
app:layout_collapseMode="parallax"
app:nts_active_color="#color/white"
app:nts_animation_duration="300"
app:nts_color="#color/white"
app:nts_corners_radius="1.5dp"
app:nts_inactive_color="#color/white_transparent"
app:nts_titles="#array/nts_titles" />
<android.support.v4.view.ViewPager
android:id="#+id/pager_photos"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white_transparent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
here is the styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
Please let me know if you need anything else.
CoordinatorLayout is a FrameLayout, thus the last view in order overlaps the first ones.
Add app:layout_behavior="#string/appbar_scrolling_view_behavior" to LinearLayout to anchor it to the bottom of AppBarLayout.
you can do this with default android tabbed activity from gallery. For this right clickon package where you want to create->click on new navigate to gallery->choose Tabbed activity -> in the window choose Navigation style as Action bar tabs(with viewpager)
Related
I have very complex ConstraintLayout inside NestedScrollView. I have to set margin 72dp to see the button on the bottom. I haven't tested, but I think that on devices without NavigationBar like Xiaomi or Meizu I will find big gap of 72dp on the bottom of this screen.
Interesting fact, but if I change behavior from appbar_scrolling_view_behavior to bottom_sheet_behavior my margins shown as expected and I can see that big gap, but scrolling behavior is for sure is unexpected, so I cannot go with this approach. Here's some of my code:
My theme:
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/grapefruit</item>
<item name="colorControlActivated">#color/grapefruit</item>
<item name="colorControlNormal">#color/lightgrey</item>
<item name="android:overScrollMode">never</item>
<item name="android:windowContentOverlay">#null</item>
<item name="android:buttonStyle">#style/SalmonButtonStyle</item>
<item name="android:spinnerStyle">#style/SpinnerStyle</item>
And a layout:
<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:background="#color/bodyBg">
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="270dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/image_closing_club"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_overlapTop="30dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
...Here is constraint layout with a big number of views
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
So how can I see proper bottom of NestedScrollView above NavigationBar?
Actual:
Expected:
I can even see on a preview, that my main container is behind NavigationBar
EDIT Looks like this problem appears only from API 28
i'm trying to create app with 2 tablayout i follow some steps and every things works fine but i have this problem with Tablayout show me big space between Toolbar and tablayout like this photo when i scroll up tablyout Space disappears i want to remove this space
when i scroll up :
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#ffffff">
<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"
app:layout_scrollFlags="scroll|snap"
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|snap"
android:elevation="5dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</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:background="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
Style.xml :
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
In your case the extra space is an toolbar in your xml on above tab layout and you are using theme
"Theme.AppCompat.Light.DarkActionBar"
which become causing two actionbar here, if you dont using toolbar just remove it
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#ffffff">
<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"
app:layout_scrollFlags="scroll|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</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:background="#FFFFFF"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.CoordinatorLayout>
this will be your final xml after removing toolbar,
else you want toolbar then set the them which dont have actionbar
Problem: I didn't see your Manifest file but it looks like you have one default Toolbar coming from your Theme and one you are setting yourself. To fix it, you can remove default Toolbar and use the one you added.
To fix this follow these steps.
Step 1: Add NoActionBar style to your Style.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Step 2: Set AppTheme.NoActionBar to your Activity in Manifest.xml
<activity
android:name="YourActivity"
android:theme="#style/AppTheme.NoActionBar">
</activity>
Now your Activity will not have a system Toolbar. You can add your own Toolbar customise it as you want.
Step 3: Set your layout Toolbar as default Toolbar inside your Activity.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Now you can use this Toolbar:
setTitle("Some Title");
The extra space is the second toolbar which is written by you in appbarlayout. First toolbar is by default toolbar.
you can remove extra space which is a toolbar by writing below code in your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Instead of
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
Or
you can modify your appbarlayout code like below. You have just remove the toolbar from appbarlayout.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|snap"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMaxWidth="0dp"
app:layout_scrollFlags="snap|enterAlways"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabIndicatorHeight="4dp"
android:elevation="10dp"/>
</android.support.design.widget.AppBarLayout>
I am developing a tabbed application and for some tabs I want to hide the toolbar. I am setting the visibility as gone to accomplish that. Below is my XML file,
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout android:id="#+id/main_content"
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.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/appbar_padding_top"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:visibility="gone"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay">
</android.support.v7.widget.Toolbar>
</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.TabLayout
android:id="#+id/tabs"
android:layout_gravity="bottom"
android:background="#color/offwhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
But I am seeing some item still on the top section of the screen. please check the screen shot. Am i doing it correctly? Is there any better way to hide Toolbar.
Thanks.
You can hide the toolbar programmatically using the following code
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setVisibility(View.GONE);`
And if that doesn't fix the problem, try removing from your AppBarLayout,
android:paddingTop="#dimen/appbar_padding_top"
and change your toolbar to this
app:layout_scrollFlags="scroll"
This would fix your problems
To hide the toolbar in your App, just add two lines in your style.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
I'm using CoordinatorLayout to create a parallax effect in my details activity, however the ActionBar is not transparent, I mean the imageview I've added to the CollapsingToolbarLayout is not being displayed as the background of the ActionBar, like here:
This way I cannot have the back button to go to the parent activity. Also, my status bar is not becoming transparent too, but probably because my device is running Android 4.4.4 (right?).
What can I do to fix at least the ActionBar thing?
Here is how my activity currently is:
<?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"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ui.BookActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="210dip"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true"
android:id="#+id/collapsing_toolbar">
<com.facebook.drawee.view.SimpleDraweeView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
android:id="#+id/imageViewProfile"
fresco:placeholderImage="#mipmap/hq_item_background"
fresco:placeholderImageScaleType="centerCrop"
android:fitsSystemWindows="true"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_book" /> <!-- Just a LinearLayout with random content -->
</android.support.design.widget.CoordinatorLayout>
Please check this answer taken from: Material Design Transparent ActionBar
You just need to put <item
name="colorPrimary">#android:color/transparent</item> and set
windowActionBarOverlay to true on your app theme like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="android:textColorPrimary">#color/my_text_color</item>
<item name="colorPrimary">#android:color/transparent</item>
<item name="windowActionBarOverlay">true</item>
</style>
</resources>
Final result should look like this:
It should work
set app:contentScrim="#color/colorPrimary" to app:contentScrim="#android:color/transparent"
in
<android.support.design.widget.CollapsingToolbarLayout
same as above if you want statusbar transparent
Thanks for the other answers, but correct solution to my problem was to use the Theme.AppCompat.Light.NoActionBar theme and set the android.support.v7.widget.Toolbar as the ActionBar, like this:
setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
I've a fragment with a CoordinatorLayout
When i run the app with API 19 the behavior is right :
The toolbar is below the status bar and the FAB button of the main_activity go away :
But with the API 21 and + :
The toolbar is behind the status bar and the FAB button of the main_activity don't go away :
Layout file:
<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/caves_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/caves_appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/caves_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimaryDark"
app:expandedTitleMarginStart="78dp"
app:expandedTitleMarginEnd="124dp">
<ImageView
android:id="#+id/caves_backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/drawer_header_bg"
app:layout_collapseMode="parallax"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/caves_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/caves_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/caves_fab"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/caves_appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
I've add a specify style-v21 xml file
<resources>
<style name="AppTheme" parent="Base.Theme.Design">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowSharedElementsUseOverlay">false</item>
</style>
</resources>
I'dont find and understand the problem.
add android:fitsSystemWindows="false"to the CoordinatorLayout
Had a similar problem (exemplified here)
How I made it work was to add android:fitsSystemWindows="false" to the AppBarLayout and have it on true on the CoordinatorLayout
take off this line:
<item name="android:windowTranslucentStatus">true</item>