Визуальная ошибка TabLayout: серые прозрачные полосы с обеих сторон

Question

На обеих сторонах моего TabLayout есть две прозрачные вертикальные полосы.Это выглядит так:

Появилось после того, как я удалил android:theme="@style/AppTheme.ActionBar" из TabLayout, потому что не показывал индикатор TabLayout:

В чем может быть проблема?

Мой макет:

 <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="my.beeline.kz.ui.ScrollableController">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@null"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme.ActionBar"
            app:layout_collapseMode="none"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:titleMarginStart="@dimen/toolbar_title_margin"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@null"
            app:tabMinWidth="120dp"
            app:tabSelectedTextColor="@color/black"
            app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
            app:tabTextColor="@color/gray_solid"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray_very_light"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Обновление:

Решениедолжен был удалить android:background="@null" из AppBarLayout

Answer 1

Здесь я собираюсь показать вам, как реализовать вкладки дизайна материалов в вашем приложении для Android.

1.Откройте build.gradle уровня приложения и добавьте библиотеку поддержки дизайна, поскольку TabLayout является частью библиотеки поддержки дизайна Android:

compile 'com.android.support:design:27.0.2'

2.Добавить макет вкладки и просмотреть пейджер в макете activity_main.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/app_bar" />

    <android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?actionBarSize"
    app:tabGravity="fill"
    app:tabIndicatorColor="@color/white"
    app:tabIndicatorHeight="4dp"
    app:tabBackground="@color/colorPrimary"
    app:tabMode="fixed">
    </android.support.design.widget.TabLayout>

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

</LinearLayout>

3.app_bar.xml для панели инструментов

<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:gravity="center_vertical"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:theme="@style/MyToolbarTheme"
app:title="@string/app_name"/>

4.style.xml

<style name="MyToolbarTheme"
parent="@style/ThemeOverlay.AppCompat.Dark">
 <item name="colorControlNormal">@color/white</item>
 <item name="titleTextColor">@color/white</item>
</style>

• Некоторые параметры для настройки внешнего вида вкладок:

app:tabGravity=”fill” для гравитации вкладки навигации.Другой - это центр для размещения навигационных вкладок из центра

app:tabIndicatorColor=”@color/white” для индикатора во вкладках.Здесь вы можете увидеть белый индикатор.

app:tabIndicatorHeight=”4dp” для высоты индикатора.

app:tabMode=”fixed” для режима табуляции.Другие можно прокручивать для многих других вкладок.

app:tabTextColor=”@color/semi_yellow” для невыбранного цвета текста вкладки.

app:tabSelectedTextColor=”@color/yellow” для выбранного цвета текста вкладки.

Если вы хотите добавить значкичтобы перейти на вкладку, вы должны вызвать метод setIcon () вкладки.Создайте массив значков и назначьте каждый для каждой вкладки следующим образом:

Вкладки со значком:

private int[] tabIcons = {
 R.drawable.home,
 R.drawable.notification,
 R.drawable.star
};
tabLayout.getTabAt(0).setIcon(tabIcons[0]);
tabLayout.getTabAt(1).setIcon(tabIcons[1]);
tabLayout.getTabAt(2).setIcon(tabIcons[2]);

И время результата:

Без значка

Happy Coding!!!

Answer 2

Этот код работал для меня, надеюсь, он работал для вас:

<android.support.design.widget.CoordinatorLayout 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="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"  />
</android.support.design.widget.CoordinatorLayout>