使Tabindicator比Tabicon更大

发布于 2025-02-04 20:28:27 字数 1894 浏览 2 评论 0原文

我想使Tabindicator在我的tabs中大于图标,以使其看起来像选定的按钮。尽管我在本机tableOut中没有看到任何选项。我需要在图标周围进行一些填充,因此指示器不会“拥抱”图标边框 - ImageButton具有图标效果。

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingTop="@dimen/padding_small"
    android:paddingBottom="@dimen/padding_medium"
    app:tabIconTint="@color/tab_icon_tint"
    app:tabIndicator="@drawable/tab_indicator"
    app:tabIndicatorColor="@color/tab_primary"
    app:tabIndicatorGravity="center"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="22dp"
    app:tabRippleColor="@null">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

</com.google.android.material.tabs.TabLayout>

指示器:

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="oval"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/tab_primary" />
</shape>

预览:

“在此处输入图像描述”

I want to make tabIndicator bigger than icon in my Tabs to make it looks like selected Button. Although I don't see any option for this in native TabLayout. I need some padding around icon so indicator will not "hug" icon borders - ImageButton with icon effect.

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:paddingTop="@dimen/padding_small"
    android:paddingBottom="@dimen/padding_medium"
    app:tabIconTint="@color/tab_icon_tint"
    app:tabIndicator="@drawable/tab_indicator"
    app:tabIndicatorColor="@color/tab_primary"
    app:tabIndicatorGravity="center"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="22dp"
    app:tabRippleColor="@null">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:icon="@drawable/tab_account_icon"/>

</com.google.android.material.tabs.TabLayout>

indicator:

<?xml version="1.0" encoding="utf-8"?>
<shape
    android:shape="oval"
    android:useLevel="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/tab_primary" />
</shape>

Preview:

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文