TabLayout 视觉错误：两侧出现灰色透明条

Question

我的TabLayout 两边有两条透明竖条。它看起来像这样：

它在我从 TabLayout 中删除 android:theme="@style/AppTheme.ActionBar" 后出现，因为它没有显示 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>

更新：

解决方案是从 AppBarLayout

中删除 android:background="@null"

Answer 1

这段代码对我有用我希望它对你有用:

<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>

Answer 2

在这里，我将向您展示如何在您的 android 应用程序中实现 material 设计选项卡。

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” 用于导航选项卡重力。 Other 是从 center

放置导航标签的中心

app:tabIndicatorColor=”@color/white” 用于选项卡中的指标。这里可以看到白色的指示器。

app:tabIndicatorHeight=”4dp” 指标高度。

app:tabMode=”fixed” 选项卡模式。其他选项卡可滚动显示更多选项卡。

app:tabTextColor=”@color/semi_yellow” 用于未选择的选项卡文本颜色。

app:tabSelectedTextColor=”@color/yellow” 用于选定的选项卡文本颜色。

如果你想给tab添加图标，你要做的就是调用tab的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]);

结果时间：

无图标

编码愉快！！！

TabLayout 视觉错误：两侧出现灰色透明条

TabLayout visual bug: gray transparent strips on both sides

android

android-support-library

android-tablayout

更新：