Develop Reference

transparent status bar with fitsSystemwindows toolbar pushed up

Android Studio 2.3 RC 1
I have created an app that uses a transparent status bar that works ok as the status bar is transparent. The problem is with my toolbar as it seems to get pushed up. I have been trying to solve this issue using fitsSystemWindows to true. However, this has not worked.
Just wondering if there is something I am doing wrong.
The 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:fitsSystemWindows="true"
tools:context="me.androidbox.busbymovies.movielist.MovieListViewImp">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
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:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#color/primary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<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/tool_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/primary"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="parallax">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvMovieList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/tool_bar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.v4.widget.ContentLoadingProgressBar
android:id="#+id/pbMovieList"
style="#style/Widget.AppCompat.ProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</android.support.design.widget.CoordinatorLayout>
My styles:
<style name="AppTheme" parent="BaseTheme">
<item name="android:statusBarColor">#android:color/transparent</item>
<item name="android:navigationBarColor">#android:color/transparent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
And in my onCreate(..) in the main activity
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
final Window window = getWindow();
window.setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
}

I would suggest, since you have this element:
app:layout_collapseMode="parallax"
that you do actually want some kind of parallax when scrolling. So this tells me that what you really meant to do is use a CoordinatorLayout. So this isn't a direct answer to your question but it will work if you use this method and you can fix both problems. I'm taking into account the image I can see in your screenshot.
<android.support.design.widget.CoordinatorLayout
android:fitsSystemWindows="true"
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">
<! -- Your Scrollable View -->
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:fitsSystemWindows="true"
android:layout_height="192dp"
android:layout_width="match_parent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
https://android-developers.googleblog.com/2015/05/android-design-support-library.html

Collapsing toolbar with TabLayout not showing Toolbar

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)

Android draw status bar

So I'm trying to get my app drawing under the status bar. Not quite sure how to achieve this though...
Current layout XML:
<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:fitsSystemWindows="true"
android:orientation="horizontal"
tools:context=".activity.CharacterActivity">
<ImageView
android:id="#+id/img_header"
android:layout_width="#dimen/nav_drawer_width"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
<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=".activity.CharacterActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:fitsSystemWindows="true"
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:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_character" />
</android.support.design.widget.CoordinatorLayout>
The style used for the layout:
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>
A screenshot of what I'm getting:
And a quickly edited screenshot of what I want to be getting:
Any suggestions or pointers would be fantastic!

Well I've just discovered how to do almost exactly what I wanted to. All I had to do was remove the android:fitsSystemWindows="true" attribute and all worked out fine.

How to implement animation like UBER main Screen in android?

I am trying to make an application like UBER and I have completed it to some extant but the problem I am facing is that on main screen when pickUp location animation is shown, an animation is implement that lift whole screen Up and down. I tried a lot to do this but I am not getting any idea. So please can anybody tell me how can I achieve this animation. I am uploading a .gif image for getting the idea

You have to handle scrolls with CoordinatorLayout and use a CollapsingToolbarLayout of Design Support Library.
This two examples may help you :
Collapsing Toolbar Layout
Handling Scrolls with CoordinatorLayout

Set BottomSheetBehaviour class as the layout_behavior of the desired view.
Put the below view inside a layout that has CoordinatorLayout as the root.
Example :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:keepScreenOn="true"
android:orientation="vertical"
android:gravity="center"
android:id="#+id/bottom_sheet"
android:clickable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<!--Add your child views.-->
</LinearLayout>
In your activity, initalise the BottomSheetDialog as :
final View bottomSheet = view.findViewById(R.id.bottom_sheet);
behavior = BottomSheetBehavior.from(bottomSheet);
To open the BottomSheet, add the following code in the onClickListener of your desired widget.
behaviorProfile.setState(BottomSheetBehavior.STATE_EXPANDED);

layout/main.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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="64dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="64dp"
app:expandedTitleMarginEnd="64dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="parallax"
/>
</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:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="72sp"
android:lineSpacingExtra="8dp"
android:text="#string/lotsOfText"
android:padding="#dimen/activity_horizontal_margin"
/>
<!--PUT VIEWs HERE-->
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
values/styles.xml
<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>
1)Import design library in android studio (version may differ)
compile 'com.android.support:appcompat-v7:22.1.1'

The layout can be shown like this:
private void showViews() {
ll_toolBar.animate().translationY(0).setInterpolator(new DecelerateInterpolator (2));
cardview.animate().translationY(0).setInterpolator(new DecelerateInterpolator (2));
ll_selectTime.animate().translationY(0).setInterpolator(new AccelerateInterpolator (2));
fl_carsCategory.animate().translationY(0).setInterpolator(new AccelerateInterpolator(2)).start();
}

Toolbar behind status bar with API 21

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>