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.

Answer 1

Try this:

First of all add custom color in colors.xml like below:

<color name="transparent_white">#80FFFFFF</color>

Then Set this color as background of main layout of your Where to? xml file.

And in this line #80 is opacity(in short, opposite of transparent) of color.

First two letters ahead of color:

1. '#00' - Full Transparent color
2. '#FF' or Not any define - Full Non-Transparent Color

Change in XML with below and try

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/transparent_white">

I hope this will solve your problem.

Answer 2

As my point of view first, you create custom action bar and set a background of action bar transparent.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar 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="60dp"
    android:background="@android:color/transparent"
    android:id="@+id/toolBar"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <ImageButton
        android:background="@android:color/transparent"
        android:id="@+id/btnBackButton"
        android:layout_width="40dp"
        android:layout_height="45dp"
        android:src="@drawable/back" />


   <ImageView
       android:layout_width="wrap_content"
       android:layout_height="39dp"
       android:layout_gravity="center_vertical|center_horizontal"
       android:id="@+id/toolbar_image"
       android:background="@android:color/transparent"
       android:src="@drawable/logo_header_new"
       android:visibility="visible"
       />
</android.support.v7.widget.Toolbar>

Answer 3

Try this: in your activity: Set Fullscreen Flag

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        if (android.os.Build.VERSION.SDK_INT >= 21)
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        super.onCreate(savedInstanceState);
    }

Now in manifest: Apply theme

<activity
        android:name=".YourActivity"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:theme="@style/AppTheme.ActionBar.Transparent"/>

in res/styles.xml

<style name="AppTheme.ActionBar.Transparent" parent="AppTheme">
    <item name="colorPrimary">@android:color/transparent</item>
    <item name="windowActionBarOverlay">false</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowActionBarOverlay">false</item>
</style>

And set android:fitsSystemWindows="false" in your CoordinatorLayout

• fitsSystemWindows="false" : draws the view normally, under the status bar because of the window flags you have set.

• fitsSystemWindows="true" : draws the view under the status bar because of the window flags you have set, but adds a top
  padding so that content is drawn below the status bar and they don't overlap.

Answer 4

Try this.

Add the following code to your activity to set status bar transparent and for action bar you should try a custom action bar with transparent background.

  private void settingStatusBarTransparent() {

        if (Build.VERSION.SDK_INT == Build.VERSION_CODES.KITKAT) {
            Window w = getWindow(); // in Activity's onCreate() for instance
            w.setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }


        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setNavigationBarColor(Color.BLACK);
            getWindow().setFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS, WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);
            getWindow().getDecorView().setSystemUiVisibility(
                    View.SYSTEM_UI_FLAG_LAYOUT_STABLE
                            | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
            //setStatusBarTranslucent(true);
        }
    }

Answer 5

All you need to do is set these properties in your theme:

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

Your activity / container layout you wish to have a transparent status bar needs this property set:

android:fitsSystemWindows=”true”

Hope that helps you

Answer 6

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~