Transparent action bar and status bar like Uber

android, android-actionbar, android-statusbar, android-toolbar, java

Solution

1. First, you have to change your `layout` structure to show `MAP` under transparent `Toolbar` & `StatusBar` and also to remove left and right `gap` from your existing `Toolbar`.

activity_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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false">

    <RelativeLayout
        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="?attr/actionBarSize"
            android:layout_marginTop="24dp"
            android:elevation="1dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/sample_map">

            <!-- put your content here -->

        </LinearLayout>
    </RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

2. In your `MainActivity`, do below things to initialize `Toolbar` and make `Toolbar` and `StatusBar` as `transparent`.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Toolbar :: Transparent
    toolbar.setBackgroundColor(Color.TRANSPARENT);

    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("StackOverflow");
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    // Status bar :: Transparent
    Window window = this.getWindow();

    if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)
    {
        window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
        window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        window.setStatusBarColor(Color.TRANSPARENT);
    }

    ...........
    .................. 
}

3. Apply below theme to your `MainActivity`.

values/styles.xml:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    .......
    ...........

</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

AndroidManifest.xml:

<activity
    android:name=".EmptyActivity"
    android:theme="@style/AppTheme.NoActionBar">

</activity>

OUTPUT:

FYI, I have just used an sample image of map in my content `LinearLayout` to show the behavior. For your case put all of your content(`searchbar, map`) inside it.

Hope this will help~

Problem

I've done a few researches on this topic but I couldn't found some solution for my App/ Activity. - I have tried to get a transparent action bar. First, I have tried to change the themes in my AndroidManifest.xml: values/styles.xml: ``` <style name="AppTheme.ActionBar.Transparent" parent="AppTheme"> <item name="android:windowContentOverlay">@null</item> <item name="windowActionBarOverlay">true</item> <item name="colorPrimary">@android:color/transparent</item> ``` and values-v21/styles.xml: ``` <style name="AppTheme.ActionBar.Transparent" parent="AppTheme"> <item name="colorPrimary">@android:color/transparent</item> </style> ``` But thats the result: So I only get some light grey action bar with some gaps on the left/ right side. Second, I have tried using `fitsSystemWindow="true"` and `android:background="@android:color/transparent"` in my layouts, but it also didn't fix the issue. ``` <?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" tools:context="com.example.poweranimal.letsgo.Application.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/transparent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"/> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> </android.support.design.widget.CoordinatorLayout> ``` But I get the same output as before:( 2. In addition I have tried also the get a transparent status bar with: ``` getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); ``` and ``` <item name="android:statusBarColor">@android:color/transparent</item> ``` but this didn't work too (nothing has changed). What I actually want is something like this: Would be cool if anyone has a possible solution for me. Thanks in advance.

Original source