CODEWITHSUNDEEP
android
pileup
pileup

Reputation: 3262

How to remove shadow from Appbar and add shadow to the TabLayout

I have the following simple app with 3 tabs: simple app

I want to remove the shadow from the appbar and add shadow to the tablayout. I tried multiple things such as android:elevation or adding <item name="elevation">0dp</item> to the AppTheme, or using <item name="android:windowContentOverlay">@null</item>. Nothing works. I keep having a shadow under the app bar (where is says My App) and no shadow is added under the tabs (Where is says PAGE 1, PAGE2, PAGE3).

These are my xml files:

style.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="elevation">0dp</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!-- Style for a tab that displays a category name -->
    <style name="CategoryTab" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">@android:color/white</item>
        <item name="tabSelectedTextColor">@android:color/holo_purple</item>
        <item name="tabTextAppearance">@style/CategoryTabTextAppearance</item>
    </style>
    <!-- Text appearance style for a category tab -->
    <style name="CategoryTabTextAppearance" parent="TextAppearance.Design.Tab">
        <item name="android:textColor">#000000</item>
    </style>
</resources>

this is the activity_main.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/primary_color"
    android:orientation="vertical"
    tools:context="com.example.barebones.barebones.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        style="@style/CategoryTab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="15dp"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="10dp"/>

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView" />

</LinearLayout>

Upvotes: 2

Views: 814

Answers (2)

Keyvan Norouzi
Keyvan Norouzi

Reputation: 159

just need to add 'android:background="@null"' in XML file

Upvotes: 0

Vikas singh
Vikas singh

Reputation: 3879

add Elevation in AppBarLayout like below

getSupportActionBar().setElevation(0);

Adding shadow to your tablayout just add elevation to your Tablayout. and also for info read Material-Design.

android:background="?attr/colorPrimary"
android:elevation="15dp"

Upvotes: 3

Related Questions