自己的自定义图标未显示在底部导航栏android studio中

Posted 2023-02-16

【中文标题】自己的自定义图标未显示在底部导航栏android studio中

【英文标题】：Own custom icon not showing up in bottomnavigation bar android studio

【发布时间】：2022-01-05 21:57:10

【问题描述】：

我正在尝试制作一个底部导航栏，其中中间的图标是我自己的图标，应该可以点击并且应该适合 like this

在菜单目录中，我创建了bottom_navigation.xml，其中负责我想要的图标的行是：

<item
    android:id="@+id/park"
    android:icon="@drawable/ic_parkcenter"
    android:title="Park here"/>

在我的 maps_activity.xml（我希望显示此内容的主页）中，我使用它：

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:layout_
            android:layout_gravity="bottom"
            android:layout_
            android:id="@+id/bottom_nav"
            map:menu="@menu/bottom_navigation" />

这就是我get的结果

我想把它作为图像视图而不是一个项目，但遗憾的是它在菜单中不起作用。我应该如何在这里进行？ 提前致谢！

编辑：我的 acitivty_maps.xml，

<LinearLayout
    android:layout_
    android:layout_
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_
        android:layout_>
        <!-- Can be ignored -->
        <fragment
            android:id="@+id/map"
            android:name="com.google.android.gms.maps.SupportMapFragment"
            android:layout_
            android:layout_
            android:visibility="visible" />
        <!-- Can be ignored -->
        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:background="@color/purple_500"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            map:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav_left"
            android:layout_
            android:layout_
            android:layout_gravity="bottom"
            map:menu="@menu/bottom_navigation"
            android:background="@color/purple_500"/>

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_gravity="bottom">

            <!-- For the image i want in the middle -->
            <ImageView
                android:id="@+id/parkcenter"
                android:layout_
                android:layout_
                android:layout_gravity="center"
                android:src="@drawable/ic_parkcenter" />
        </LinearLayout>

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav_right"
            android:layout_
            android:layout_
            android:layout_gravity="bottom"
            map:menu="@menu/bottom_navigation"
            android:background="@color/purple_500"/>

        <!-- Can be ignored -->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/parking"
            android:layout_
            android:layout_
            android:layout_gravity="end|center"
            android:layout_margin="16dp"
            android:contentDescription="@string/parking"
            android:src="@drawable/ic_parking" />

    </FrameLayout>

</LinearLayout>

如果有帮助，这一切都在抽屉布局中！再次非常感谢！

【参考方案1】：

只需在您的活动或片段中尝试这段 java 代码：

    bottomNavigationView.setItemIconTintList(null) ;

在使用bottomNavigationView时用你的id初始化它。

【讨论】：

嘿！谢谢您的帮助。使用这个我得到link

hi@Yash Dhanore，您可以尝试将here 中的75dp 更改为wrap_content，看看是否有效。

这也不起作用，它只是让它变小了。我正在使用 Kotlin，我像这样使用了你的 java 代码。你能检查这是否是正确的翻译？ val bottomnav = findViewById<BottomNavigationView>(R.id.bottom_nav) 和 bottomnav.itemIconTintList = null @shirley

【参考方案2】：

可能有更好的方法来做到这一点，但是实现这样的事情的一种hacky方法是

<LinearLayout>
    <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_
                android:layout_gravity="bottom"
                android:layout_
                android:id="@+id/bottom_nav_left"
                map:menu="@menu/bottom_navigation" />
    
        <LinearLayout
             android:layout_
             android:layout_
             android:layout_gravity="bottom">
                <ImageView
                   android:layout_
                   android:layout_
                   src = ... />
                //Add textview or any other view. Otherwise remove linearlayout
       </LinearLayout>
    
       <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_
                android:layout_gravity="bottom"
                android:layout_
                android:id="@+id/bottom_nav_right"
                map:menu="@menu/bottom_navigation" />
</LinearLayout>

这将在显示图像时为您提供额外的灵活性（让中间图像更大而不从底部导航中着色）。对于底部导航左侧，使用图像左侧的图标填充项目，对于底部导航右侧也是如此

【讨论】：

嘿！谢谢你！我有一些疑问，所以我需要创建 2 个不同的 bottom_nav 一个用于左侧，带有 2 个图标，一个用于右侧，带有 2 个图标？并使用此图像显示在栏的左侧和后面，无论我做什么，它都不会移动到中心和顶部？我用它来让它居中（完全靠运气找到它）android:layout_weight="@integer/google_play_services_version"

对不起，我在这里很绝望:( @lyncx

你的问题是图片不在中心吗？你能发布你的代码吗？

是的，这是一个问题，图像显示在底部导航栏的后面。我在帖子中添加了我的代码，并根据您的建议进行了更改。我还标记了您可以忽略的内容。再次感谢！ @lyncx

【参考方案3】：

所以我终于能够弄清楚要做什么，制作一个框架布局并在其中添加底部导航，其中包含 5 个项目和中间项目，没有名称，没有图标并且可以检查为 false，最后在里面添加了一个图像视图框架布局并将其放置在中间图标上。

<FrameLayout
                android:layout_
                android:layout_
                android:layout_gravity="bottom">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_
                android:id="@+id/bottom_nav"
                android:layout_
                android:clipChildren="false"
                android:layout_gravity="bottom"
                android:elevation="15dp"
                map:itemIconSize="34dp"
                android:background="@color/purple_500"
                map:menu="@menu/bottom_navigation"
                android:paddingLeft="5dp"
                map:itemIconTint="@drawable/select"
                map:itemTextColor="@drawable/select"
                android:focusableInTouchMode="true"
                />

            <ImageView
                android:layout_
                android:id="@+id/tofront"
                android:layout_
                android:src="@drawable/ic_parkcenter"
                android:layout_gravity="center"
                android:scaleType="center"
                android:elevation="@android:dimen/app_icon_size"/>

            </FrameLayout>

你可以使用

val front = findViewById<ImageView>(R.id.tofront)
    front.bringToFront()

将图像放在前面。 将侦听器添加到图像后，它就会按预期工作！