0

I am working on an android app, in which I need to make transparent the Status bar and Toolbar.

How to remove the left and right space coming in Toolbar, highlighted in red line ?

I am doing this as follows :

main.xml

<?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"
    tools:openDrawer="start">

    <include
        layout="@layout/action_bar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/main_activity_drawer" />

</android.support.v4.widget.DrawerLayout>

And action_bar_main.xml is :

<?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"
    tools:context="de.slowpoke.android.news.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/newsAppToolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#51000000"
            android:clickable="false" />

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_main" />
</android.support.design.widget.CoordinatorLayout>

Style used is as follows : 

<style name="AppTheme.NoActionBar" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">#51000000</item>
    <item name="android:windowTranslucentNavigation">true</item>
</style>

enter image description here

ʍѳђઽ૯ท
  • 16,646
  • 7
  • 53
  • 108
Mayank Sharma
  • 35
  • 3
  • 11

1 Answers1

0

That's because of :

<item name="android:statusBarColor">#51000000</item>

Which you already have :

android:background="#51000000"

As the background for your Toolbar.

You may also want to use this:

android:layout_height="?actionBarSize"

Instead of:

android:layout_height="wrap_content"

And one thing more, That Toolbar shouldn't be there, you should use that with :

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

For StatusBar color.

ʍѳђઽ૯ท
  • 16,646
  • 7
  • 53
  • 108
  • Then where should I place the Toolbar – Mayank Sharma Jan 26 '16 at 09:45
  • `Toolbar`'s position is good, but seems like that `statusBarColor` screwed up the layout, just use `colorPrimaryDark` – ʍѳђઽ૯ท Jan 26 '16 at 09:48
  • But I want to make Status bar and Tool bar of same color, i.e. 50% Transparent.I guess, colorPrimaryDark will not be useful for 50% transparency. – Mayank Sharma Jan 26 '16 at 09:53
  • Since that will pass the rules, you can use `@color/colorPrimary @color/colorPrimaryDark` these codes will set whatever colors you want to toolbar and statusbar see: http://developer.android.com/design/material/index.html – ʍѳђઽ૯ท Jan 26 '16 at 09:55
  • Is it possible to use Tool bar outside AppBarLayout. As I did this, so the space is removed from left and right in the Tool bar, what I actually want but the data is not getting populated. – Mayank Sharma Jan 26 '16 at 09:58
  • You can use that with a Root tag like `RelativeLayout`, but it's not recommended, you can achieve a lot of effects for materialdesgin with CoordinatorLayout and AppbarLayout.and this question already has answers i guess: http://stackoverflow.com/questions/26702000/change-status-bar-color-with-appcompat-actionbaractivity – ʍѳђઽ૯ท Jan 26 '16 at 10:04