Search code examples
androidandroid-layoutandroid-viewpagerandroid-collapsingtoolbarlayout

Appbar layout hiding ViewPager's background


I'm trying make collapsingtoolbar layout. Everything is working fine except the fact that the background that I set for viewpager is hidden by appbarlayout. I changed the background of appbarlayout to transparent but it resulted in a semi transparent view. I tried out changing the backgrounds of various layout but not luck. Help me out please.

Below is the screenshot:

enter image description here

Xml:

<RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/relativeLayout">



<android.support.design.widget.CoordinatorLayout
    android:id="@+id/coordinate_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >





    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        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="wrap_content"
    android:paddingTop="30dp"
    android:minHeight="?attr/actionBarSize"
    app:layout_scrollFlags="scroll|enterAlways">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="AAAAAAAA"
        android:typeface="sans"
        android:textAllCaps="false"
        android:textColor="#ffffff"
        android:textSize="25sp" />



    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/viewpagertab"
        android:clickable="true"
        app:srcCompat="@drawable/ic_action_keyboard_arrow_right" />


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







<com.ogaclejapan.smarttablayout.SmartTabLayout
    android:id="@+id/viewpagertab"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_below="@+id/toolbar"
    android:layout_marginTop="35dp"
    app:stl_indicatorAlwaysInCenter="false"
    app:stl_indicatorWithoutPadding="false"
    app:stl_indicatorInFront="false"
    app:stl_indicatorInterpolation="smart"
    app:stl_indicatorGravity="center"
    app:stl_indicatorColor="#6a000000"
    app:stl_indicatorThickness="30dp"
    app:stl_indicatorWidth="110dp"
    app:stl_indicatorCornerRadius="10dp"
    app:stl_overlineColor="#4D000000"
    app:stl_overlineThickness="0dp"
    app:stl_underlineColor="#ffffff"
    app:stl_underlineThickness="0dp"
    app:stl_dividerColor="#ffffff"
    app:stl_dividerThickness="0dp"
    app:stl_defaultTabBackground="?attr/selectableItemBackground"
    app:stl_defaultTabTextAllCaps="false"
    app:stl_defaultTabTextColor="#ffffff"
    app:stl_defaultTabTextSize="16sp"
    app:stl_defaultTabTextHorizontalPadding="30dp"
    app:stl_defaultTabTextMinWidth="0dp"
    app:stl_distributeEvenly="false"
    app:stl_clickable="true"
    app:stl_titleOffset="24dp"
    app:stl_drawDecorationAfterTab="false"
    app:stl_customTabTextLayoutId="@layout/custom_tab_with_typeface"
    app:stl_customTabTextViewId="@+id/custom_text"

    />



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



        <li.yohan.parallax.ParallaxViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/party"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />







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



</RelativeLayout>

Solution

  • remove this app:stl_defaultTabBackground="?attr/selectableItemBackground" line from com.ogaclejapan.smarttablayout.SmartTabLayout thats the reason why its showing less transparent .. give the main RelativeLayout a background:@drawable\party and remove background from viewPager library.. or remove app:layout_behavior="@string/appbar_scrolling_view_behavior"