CODEWITHSUNDEEP
javaandroidandroid-actionbarandroid-toolbarandroid-statusbar
Sandman98M
Sandman98M

Reputation: 181

Transparent action bar and status bar like Uber

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:

enter image description here

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:

enter image description here

Would be cool if anyone has a possible solution for me.

Thanks in advance.

Upvotes: 17

Views: 9894

Answers (6)

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21736

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:

enter image description here

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~

Upvotes: 29

UltimateDevil
UltimateDevil

Reputation: 2847

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

Upvotes: 6

Abdul Waheed
Abdul Waheed

Reputation: 4678

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

Upvotes: -1

user7353609
user7353609

Reputation:

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>

Upvotes: 0

rafsanahmad007
rafsanahmad007

Reputation: 23881

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.

Upvotes: 0

Nitin Patel
Nitin Patel

Reputation: 1651

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.

Upvotes: 0

Related Questions