CODEWITHSUNDEEP
androidandroid-tablayout
Ahsan Akram
Ahsan Akram

Reputation: 31

how to fix elevation of tab layout in android tab fragment

Please help me how to match the border of tab layout with Appbarlayout and finish the line to make it feel it single. why my tab layout is displaying behind the Appbar.

This is my Tab layout Screenshot:

enter image description here

This is my Tablayout xml 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:orientation="vertical"
tools:context="com.example.ahsan.growupwork.ViewProjects">

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/random1"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:id="@+id/tab_layout"
        app:tabTextColor="@color/cardview_light_background"
        app:tabIndicatorColor="@color/cardview_light_background"
        app:tabIndicatorHeight="3dp"
        android:elevation="0dp"
        app:tabSelectedTextColor="@color/cardview_light_background"
        />



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

</LinearLayout>

Upvotes: 2

Views: 1439

Answers (2)

MIA
MIA

Reputation: 16

In order to create the effect you want, you have to apply elevation to AppBarLayout and it will fix it. To use the Toolbar wrap it with AppBarLayout in the code below.

     <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:elevation="0dp">

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                style="@style/Widget.MaterialComponents.Toolbar.Primary"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:title="@string/app_name" />
        </com.google.android.material.appbar.AppBarLayout>

Upvotes: 0

Orvenito
Orvenito

Reputation: 437

you have to increase the elevation of your tablayout: app:elevation="10dp"to show that it is above the toolbar but if you want to remove it just change the line

android:elevation="0dp"

to

app:elevation="0dp"

Upvotes: 1

Related Questions