Transparent action bar and status bar like Uber

Question

I've done a few researches on this topic but I couldn't found some solution for my App/ Activity.

1. 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.

Answer 1

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~