CODEWITHSUNDEEP
androidandroid-actionbarandroid-toolbarandroid-styles
sollo
sollo

Reputation: 15

Transparent action bar

I had to develop transparent action bar. After some research I was able to achieve the desired result only on LG2 device. When i run the code on LG3 it's not working (action bar not transperent).

That's how my style folder looks:

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
      <item name="android:itemBackground">@color/black</item>
        <item name="android:textColor">@color/white</item>
    </style>

    <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>
    </style>

  </resources>

Someone has a suggestion how to solve this issue ?

Upvotes: 0

Views: 3864

Answers (1)

Anuj Sharma
Anuj Sharma

Reputation: 4324

You just need to define style having no actionbar. Use toolbar and set its color transparent.

<!-- Your App Theme -->

    <style name="MyMaterialTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
            <item name="windowNoTitle">true</item>
            <item name="windowActionBar">false</item>
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>

<!-- Your custom ActionBar Style -->

<style name="CustomActionBar" parent="@style/MyMaterialTheme.Base">
    <item name="android:windowActionBarOverlay">true</item>
    <!-- Support library compatibility -->
    <item name="windowActionBarOverlay">true</item>
</style>

Your `

toolbar.xml

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:theme="@style/CustomActionBar"/>

Use this toolbar in any layout.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- Toolbar should be above content-->
    <include layout="@layout/toolbar" />

</RelativeLayout>

`

Upvotes: 3

Related Questions