Develop Reference

fitSystemWindows with windowTranlucentStatus and windowTranslucentNavigation makes Toolbar too tall

I'm trying to make my app bleed under the status bar and the navigation bar. I got the layouts to work using fitSystemWindows = true with just the status bar translucent but when I make the navigation bar as well, the toolbar appears to react as if it needs to fill under the status bar and the notification bar.
The toolbar appears to function normally when in landscape for some reason.
This double "translucent" bar effect also makes the NestedScrollView extends beyond the bottom of the page. I am also not sure how to make the FAB fit.
On another note, I originally wrote the layout with a CoordinatorLayout. This added the extra problem that the NestedScrollView then scrolls up to the bottom of where the toolbar should be, not where it is. I think, however, that the NestedScrollView respected the bottom screen boundary properly with CoordinatorLayout.
Here's the xml for the layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.constraint.ConstraintLayout
android:id="#+id/constraint"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/toolbar">
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00000000"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="74dp"/>
</android.support.v4.widget.NestedScrollView>
<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="wrap_content"
app:layout_constraintTop_toTopOf="parent"
android:background="#color/nav_color_1_bright"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:navigationContentDescription="#string/open_nav_menu"
app:navigationIcon="#drawable/ic_dehaze_white_24dp"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="16dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
android:onClick="createNew"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/darkAccent"
app:fabSize="normal" />
</android.support.constraint.ConstraintLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:itemBackground="#drawable/nav_item">
<ListView
android:id="#+id/drawer_list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="#null"
android:dividerHeight="0dp"
android:fitsSystemWindows="true" />
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
I apply the following 'Light Theme' to the Activity programmatically.
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowTranslucentStatus">true</item>
<item name ="android:windowTranslucentNavigation">true</item>
</style>
<style name="LightTheme" parent="AppTheme">
<item name="android:colorPrimary">#color/lightPrimary</item>
<item name="android:colorPrimaryDark">#color/lightPrimaryDark</item>
<item name="android:colorAccent">#color/lightAccent</item>
<item name="android:navigationBarColor">#color/lightPrimaryDark</item>
<item name="actionOverflowButtonStyle">#style/OverflowMenuButtonStyleDark</item>
</style>
Here's a preview of the layout: (bigger version here)

How can i put an ImageView underneath a transparent toolbar?

I'm trying to achieve something like this
. I want a transparent toolbar/statusbar with an ImageView underneath them.
I wasn't able to make the toolbar transparent so I tried using CollapsingToolbarLayout and removing the scroll behaviour. It worked but I wasn't able to make the status bar transparent.
Is there a way to make the toolbar transparent and put an ImageView beneath it or is there a better way to implement it?
Edit:
Standard xml-layout. I didn't change anyhting so far.
<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.support.design.widget.AppBarLayout
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"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" /> </android.support.design.widget.CoordinatorLayout>

Try this.
toolbar.getBackground().setAlpha(0);
Or better -
transparent Actionbar with AppCompat-v7 21

I created a project to try the transparent status bar.
you need add the following to the styles (for v19 and v21)
<!-- Make the status bar traslucent -->
<style name="AppTheme" parent="AppTheme.Base">
<item name="android:windowTranslucentStatus">true</item>
</style>
This is the layout xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
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="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/AppTheme.AppBarOverlay">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/sun"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
... the rest of my xml
this is the output from the layout of a v19 device.

Hide Toolbar on scroll wont work properly [CoordinatorLayout]

I have a viewpager with 3 fragments which are using recyclerviews. I am trying to hide the toolbar when the user scrolls the recycled view. My problem is that the toolbar hides/shows when the user scrolls but it does not hide fully. I don't understand what I am doing wrong. To illustrate what exactly is happening I am including two pictures with the two states of the toolbar (hidden and shown).
NOTE: one thing that I noticed when the toolbar is hiding. It does not go "under" the system status bar like it should but goes above it.
shown:
hidden:
As it can be seen, the toolbar is not fully hidden. I can see parts of the Toolbar title and overflow icon at the right.
This is my main_layout xml:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="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="com.studentsins.lust.MainActivity">
<android.support.design.widget.AppBarLayout
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"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:layout_scrollFlags="scroll|enterAlways" />
<android.support.design.widget.TabLayout
android:id="#+id/sliding_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/NavigationTab"/>
</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"/>
<include layout="#layout/content_main"/>
<com.getbase.floatingactionbutton.FloatingActionsMenu
android:id="#+id/floatingActionMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
fab:fab_addButtonColorNormal="#color/blood_orange"
fab:fab_addButtonColorPressed="#color/dirtyWhite"
fab:fab_addButtonPlusIconColor="#color/dirtyWhite"
fab:fab_addButtonSize = "normal"
fab:fab_labelStyle="#style/menu_labels_style"
fab:fab_labelsPosition="left"
app:layout_anchor="#id/viewpager"
app:layout_anchorGravity="bottom|end">
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/createPlanBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_title="Create a plan"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_event_white_48dp"
fab:fab_colorPressed="#color/dirtyWhite"/>
<com.getbase.floatingactionbutton.FloatingActionButton
android:id="#+id/changeStatusBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="#color/blood_orange"
fab:fab_size="normal"
app:fab_icon="#drawable/ic_textsms_white_48dp"
fab:fab_title="Change status"
fab:fab_colorPressed="#color/dirtyWhite"/>
</com.getbase.floatingactionbutton.FloatingActionsMenu>
</android.support.design.widget.CoordinatorLayout>

Found a workarround to the problem. in v21/Styles.xml
I had to change the "android:statusBarColor" from "transperant" to any color.
<resources>>
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/tab_bg</item>
</style>

The overlap is occurring because your tabLayout height is greater than your toolbar height. You can fix it by setting the tabLayout height to:
android:layout_height="?attr/actionBarSize"

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();
}

Android CollapsingToolbarLayout Title background

I'm working with the CollapsingToolbarLayout from the new Android Design Support Library.
I have set its title and it is working fine, the only problem I still have is that when you scroll, the text is lost, depending on the image in the background.
What I'd like to do, is set a background to the CollapsingToolbarLayout title, but I haven't find a way to do it.
Is there anyway to achieve this?
Layout:
<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"
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="#dimen/detail_backdrop_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
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/ivBigImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<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>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_gravity="fill_vertical"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="24dp">
<android.support.v7.widget.CardView
android:id="#+id/cvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<LinearLayout
style="#style/Image.Info.CardContent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/description"
android:textAppearance="#style/TextAppearance.AppCompat.Title"/>
<TextView
android:id="#+id/tvDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=""/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Setting up the CollapsingToolbarLayout title in the activity:
CollapsingToolbarLayout collapsingToolbar =
(CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("Some title here");
Edit:
Here you can see a sequence of images when I collapse the toolbar. You can see how the title text is not readable. The problem is that I don't have control of the images that I show, so for some images it looks ok, but for others, like this example, it doesn't look good at all and it is not readable. What I had in mind was maybe add some kind of background to the text, so there is always the same color at the back of the text and it is always readable.

Use a text protection scrim(scroll down a bit). My example assumes the title text is white, so some tweaks may be necessary to optimize for your case.
Inside your CollapsingToolbarLayout, add the following after ivBigImage:
<View
android:layout_width="match_parent"
android:layout_height="#dimen/sheet_text_scrim_height_top"
android:background="#drawable/scrim_top"
app:layout_collapseMode="pin"/>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/sheet_text_scrim_height_bottom"
android:layout_gravity="bottom"
android:layout_alignBottom="#+id/image"
android:background="#drawable/scrim_bottom"/>
In your Drawable folder, add:
scrim_top.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="270"
android:startColor="#color/translucent_scrim_top"
android:centerColor="#color/translucent_scrim_top_center"
android:endColor="#android:color/transparent"/>
</shape>
and scrim_bottom.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:angle="90"
android:startColor="#color/translucent_scrim_bottom"
android:centerColor="#color/translucent_scrim_bottom_center"
android:endColor="#android:color/transparent"/>
</shape>
For colors, you should make these darker in initial testing so it's more obvious you have it working, but for production I used:
<color name="translucent_scrim_top">#26000000</color>
<color name="translucent_scrim_top_center">#0C000000</color>
<color name="translucent_scrim_bottom">#2A000000</color>
<color name="translucent_scrim_bottom_center">#0D000000</color>
And for dimensions, I used a height of 88dp.

Use a text protection scrim from the example of Amagi82 and add on the CollapsingToolbarLayout the app:expandedTitleTextAppearance parameter.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
.
app:expandedTitleTextAppearance="#style/TextAppearance.Design.CollapsingToolbar.Expanded.Shadow"
.
.
app:layout_scrollFlags="scroll|exitUntilCollapsed">
For example add this on you style xml:
<style name="TextAppearance.Design.CollapsingToolbar.Expanded.Shadow">
<item name="android:shadowDy">0</item>
<item name="android:shadowDx">0</item>
<item name="android:shadowRadius">8</item>
<item name="android:shadowColor">#android:color/black</item>
</style>

Edit:
If you want to change the color of the toolbar once it has "shrunk", you need to set the contentScrim attribute of the collapsing toolbar layout to that color:
<android.support.design.widget.CollapsingToolbarLayout
app:contentScrim="#color/[color you want]"
...>
Pointing the value of this attribute to the color you want the toolbar to turn into will solve your issue, as I understand it.
Hope that answers your question!

That's a lot of work do achieve here by writing that much of code.
I achieved that by 2 ways.
1 A simple workaround by using a View with TransparentBlack color
CODE>>
Code explaination:1 The CollapsingToolbarLayout has a style with only a text size.2 Default CollapsingToolbarLayout margin bottom is overridden to 16dp.3. Our header with parallax collapseMode is a RelativeLayout with an ImaveView and a View.4. This simple View with a BG at the bottom of the top header Relative layout with colour of contrast (here #77000000), acts as the BG for CollapsingToolbarLayout's collapsed Title in white color.
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/redeem_detail_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/color_window_background"
android:fitsSystemWindows="true"
app:expandedTitleMarginBottom="16dp"
app:expandedTitleTextAppearance="#style/CollapsingTitleStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--header view-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/redeem_detail_top_bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/splash" />
<!--A view that draws a semi tranparent black overlay so that title is visible once expanded -->
<View
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentBottom="true"
android:background="#color/black_transparent" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/redeem_detail_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Redeem" />
</android.support.design.widget.CollapsingToolbarLayout>
Images for style 1:
a) When CollapsingToolbarLayout Title is Expanded Fully:
b) When CollapsingToolbarLayout Title is shrinking upon scroll up:
2 Answer above
Method is mentioned already by Joao Ferreira.
Here is what it looks like with shadowRadius=16: Notice the Shadow
PS please update or ask more if any confusions :)