1

I tried this . But the problem I am facing is with <item name="android:windowActionBarOverlay">true</item>

the sliding tab goes behind the Actionbar.

enter image description here

(see the logo and title above tabs) When i set 

android:layout_marginTop="?attr/actionBarSize"

then sliding tab doesn't remain transparent.

What is the correct way to make actionbar transparent without sliding tabs going behind the actionbar?

EDIT: activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/newbg">

    <!-- The sliding tab -->
    <com.github.amitt001.musicapp.stab.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- The pager that allows us to swipe between fragments -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/transparent"/><!--#A6000000" -->
</LinearLayout>

Styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <!-- Customize your theme here. -->
        <item name="android:actionOverflowButtonStyle">@style/ActionButtonOverflow</item>
        <!-- Support library compatibility -->
        <item name="actionOverflowButtonStyle">@style/ActionButtonOverflow</item>

        <item name="android:actionBarStyle">@style/MyActionBar</item>
        <item name="android:windowActionBarOverlay">true</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
        <item name="windowActionBarOverlay">true</item>

    </style>

    <style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
        <item name="android:background">@android:color/transparent</item>

        <item name="background">@android:color/transparent</item>
    </style>

    <style name="ActionButtonOverflow" parent="@style/Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/ic_drawer</item>
    </style>

</resources>
Community
  • 1
  • 1
Amit Tripathi
  • 7,003
  • 6
  • 32
  • 58
  • Can you put your XML and your styles please? – Skizo-ozᴉʞS ツ Feb 12 '15 at 08:30
  • @Joan Colmenero added the code. – Amit Tripathi Feb 12 '15 at 08:36
  • Why do you have `@android:color/transparent @android:color/transparent` – Skizo-ozᴉʞS ツ Feb 12 '15 at 08:40
  • @Joan Colmenero because I want transparent actionbar and i am using both bbackgrounds for compatibility with support library – Amit Tripathi Feb 12 '15 at 08:52
  • @Amit I have the exact same problem as you... Did you find any solution? – Raphael Royer-Rivard May 10 '15 at 21:03
  • @raphael no :( . I don't even have enough reputation to start a bounty – Amit Tripathi May 12 '15 at 02:50
  • 1
    I have 2 leads that may be a solution to our problem. First would be to use the ActionBar tabs with custom views instead of the SlidingTabLayout (see http://developer.android.com/guide/topics/ui/actionbar.html#Tabs). This method is deprecated but it might still work. Second option would be to use a Toolbar instead of the ActionBar so we could customize it with the SlidingTabLayout (I hope it would stick at the right place). See https://medium.com/@dan1ve/android-howto-material-design-tabs-scrolling-like-in-google-play-music-12273ce07bc – Raphael Royer-Rivard May 12 '15 at 14:06

1 Answers1

2

Make an xml with a Toolbar and tabs

tool_bar_tabs.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="wrap_content">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:minHeight="?attr/actionBarSize"
        android:background="@color/ColorPrimary"
        android:elevation="4dp"
        app:theme="@style/ToolbarColors">

    </android.support.v7.widget.Toolbar>

    <com.github.amitt001.musicapp.stab.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    </style>

your activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/newbg">

    <include
    android:id="@+id/tb_tabs"
    layout="@layout/tool_bar_tabs"></include>

    <!-- The pager that allows us to swipe between fragments -->
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        android:background="@android:color/transparent"/><!--#A6000000" -->
</LinearLayout>

Init. toolbar and make it an actionbar in

MainActivity

public class Main extends AppCompatActivity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

            setContentView(R.layout.activity_main);

            Toolbar tb = (Toolbar) findViewById(R.id.tool_bar);
            setSupportActionBar(tb);
}
Marke
  • 189
  • 4
  • 13