how to make icons of bottom navigation bar transparent? - android

I am working on an android app where I have to take icons of bottom navigation bar transparent without any tint layer. How can I do that?
I have tried #android:itemIconTint="#color/tranparent" But it is not working
Here is my code :
activity_main.xml:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#drawable/bottom_round_bg"
app:elevation="10dp"
app:itemTextColor="#color/black"
app:labelVisibilityMode="unlabeled"
app:itemHorizontalTranslationEnabled="false"
app:itemIconSize="30dp"
app:menu="#menu/bottom_nav_menu" />
bottom_nav_menu.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"[![enter image description here][1]][1]
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home"
android:title="#string/home"/>
<item
android:id="#+id/nav_trimester"
android:icon="#drawable/ic_trimester_chart"
app:itemIconTint="#android:color/transparent"
android:title="#string/trimester_chart"/>
<item
android:id="#+id/nav_tools"
android:icon="#drawable/ic_tools"
app:itemIconTint="#android:color/transparent"
android:title="#string/tools"/>
<item
android:id="#+id/nav_dairy"
android:icon="#drawable/ic_calendar_and_diary_logo"
app:itemIconTint="#android:color/transparent"
android:title="#string/calendar_and_diary"/>
<item
android:id="#+id/nav_blogs"
android:icon="#drawable/ic_blogs"
app:itemIconTint="#android:color/transparent"
android:title="#string/blogs"/>
</menu>

Related

How to change color of icons in bottom app bar

I wanted to change the color of icons in the bottom app bar. I am using the bottom app bar for the first time so I don't have any prior knowledge of it.
The code of the XML file having bottom app bar is below
<RelativeLayout
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"
tools:context=".NavigActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorAccent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="#color/colorAccent"
app:navigationIcon="#drawable/ic_menu_black_24dp"
app:menu="#menu/menu"
app:buttonGravity="center_vertical"
/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_add_black_24dp"
app:layout_anchor="#id/bottom_app_bar"
android:backgroundTint="#color/colorPrimary"
app:maxImageSize="35dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/content_frame"
/>
</RelativeLayout>
The menu file used in this is below
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/home"
android:title="Home"
android:icon="#drawable/ic_home_black_24dp"
app:showAsAction="ifRoom"
/>
<item
android:id="#+id/my_invoices"
android:title="Invoices"
android:icon="#drawable/ic_receipt_black_24dp"
app:showAsAction="ifRoom"
/>
<item
android:id="#+id/notification"
android:title="Notification"
android:icon="#drawable/ic_notifications_black_24dp"
app:showAsAction="ifRoom"
/>
</menu>
I wanted the color o the icon to change to primaryColor but it is not changing..Any help would be appreciated
You can try on menu.xml
Find the detail on link. (image)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="[URL]http://schemas.android.com/apk/res/android[/URL]"
xmlns:app="[URL]http://schemas.android.com/apk/res-auto[/URL]">
<item
android:id="#+id/menu_color_change"
android:title="Color Plate"
app:showAsAction="ifRoom"
android:icon="#drawable/ic_color_plate">
</item>
<item
android:id="#+id/menu_other"
android:title="Other"
app:showAsAction="never"
android:iconTint="#android:color/white"
android:icon="#drawable/ic_color_plate">
</item>
</menu>

Item showing only on click on BottomNavigationView

So I want a navigation bar at the bottom of the screen with 4 items but for some reason only the first one is showing and the others appear only when i click them.
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
app:itemTextColor="#color/black"
app:menu="#menu/navigation_bar_bottom_menu" />
My menu:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_home"
android:title="#string/navigation_bar_home_text" />
<item
android:id="#+id/nav_inbox"
android:title="#string/navigation_bar_inbox_text" />
<item
android:id="#+id/nav_notes"
android:title="#string/navigation_bar_notes_text" />
<item
android:id="#+id/nav_profile"
android:title="#string/navigation_bar_profile_text" />
</menu>
The bar is displayed like this just with the first item showing:
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#color/gray_background"
app:itemIconTint="#color/nav_item_state_list"
app:itemTextColor="#color/nav_item_state_list"
app:labelVisibilityMode="labeled"
android:theme="#style/Widget.BottomNavigationView"
app:menu="#menu/bottom_navigation_items"/>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimaryLite"
android:state_pressed="true"/>
<item android:color="#color/colorPrimaryLite"
android:state_checked="true"/>
<item android:color="#color/grayDark"
android:state_checked="false"/>
<item android:color="#color/white"/>
</selector>
Here is the example
Create a color file
navigation_item_text_color.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/black" />
<item android:color="#android:color/darker_gray" />
</selector>
then put to color folder (if you don't have color folder -> just create it manually)
Then
<com.google.android.material.bottomnavigation.BottomNavigationView
...
app:itemTextColor="#color/navigation_item_text_color" />
More
If you bottom menu item have icon, you can change icon color like
app:itemIconTint="#color/navigation_item_text_color"

Ripple effect in BottomNavigation view

In my BottomNavigationView, I want to add ripple effect and then change the background color of my selected navigation item. Here is a screenshot of what i've done so far
My Drawable File
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/colorAccent" android:state_checked="true"/>
<item android:drawable="#color/colorPrimaryDark" android:state_checked="false"/>
</selector>
My Layout File
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:itemBackground="#drawable/navigaton_item_bg"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/navigation" />

Bottom Navigation Bar not showing icons or text

I'm having a little bit of trouble trying to implement a Bottom Navigation Bar with icons and text in my Android application.
The bar currently functions as expected and takes you to the desired fragment but isn't showing icons or text for some reason.
I've done a few searches but haven't been able to find a solution or a reason as to why it is behaving this way.Any help would be appreciated. Thanks.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context=".MainActivity">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="?android:attr/windowBackground"
app:itemBackground="#color/turquoise"
android:foreground="#color/colorPrimary"
app:itemIconTint="#android:color/white"
app:itemTextColor="#android:color/white"
app:menu="#menu/navigation" />
</android.support.design.widget.CoordinatorLayout>
navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/nav_0"
android:icon="#drawable/ic_launcher_foreground"
android:title="home"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_1"
android:icon="#drawable/ic_launcher_foreground"
android:title="email"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_2"
android:icon="#drawable/ic_home"
android:title="profile"
app:showAsAction="ifRoom|withText"/>
<item
android:id="#+id/nav_3"
android:icon="#drawable/ic_home"
android:title="map"
app:showAsAction="ifRoom|withText"/>
</menu>
in MainActivity.java
toolbar = getSupportActionBar();
BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
Remove android:foreground="#color/colorPrimary" attribute inside your BottomNavigationView

Moving navigation drawer items to right

I need your help please help me.
I have a navigation drawer in my app. i want to move navigation drawer to right completely . I moved the navigation itself but i want to move menu items to right too.
My Screenshot of Navigation Drawer
Activity_main:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_marginleft="100dip"
android:fitsSystemWindows="true"
tools:openDrawer="end">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
My items of menu in xml :
Activity_Main_Drawer:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_home"
android:icon="#drawable/ic_home_black_24dp"
android:title="#string/nav_home" />
<item
android:id="#+id/nav_photos"
android:icon="#drawable/ic_photo_library_black_24dp"
android:title="#string/nav_photos" />
<item
android:id="#+id/nav_movies"
android:icon="#drawable/ic_local_movies_black_24dp"
android:title="#string/nav_movies" />
<item
android:id="#+id/nav_notifications"
android:icon="#drawable/ic_notifications_black_24dp"
android:title="#string/nav_notifications" />
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="#string/nav_settings" />
</group>
<item android:title="Other">
<menu>
<item
android:id="#+id/nav_about_us"
android:title="#string/nav_about_us" />
<item
android:id="#+id/nav_privacy_policy"
android:title="#string/privacy_policy" />
</menu>
</item>
</menu>
first: You can put your device in RTL mode, go to develop settings (Force RTL layout direction).
After doing this all the layouts will mirror correctly.
If you don't want to change the whole device into RTL use this code in onCreate method of mainactivity before super and before you inflate the content view
window.decorView.layoutDirection = View.LAYOUT_DIRECTION_RTL
You need to use a custom layout for NavigationView.
According to this: http://www.kamilslesinski.com/home/navigation-drawer-customising-navigationview-items you can override the layout by copying original file and customizing it, or you can add a reference to your custom layout, like that:
how to customize snackBar's layout?
in refs.xml.

Categories

Resources