I use the bottom navigation view to display my menu.
when I run the app it's not displaying selected icon and text see below image.(App uses svg(xml) images files)
And TextSize cutting when its length bigger and tab are more than 3 or 4
See this image for text cutting
Here My Code
MainActivity xml file
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="0dp"
android:layout_marginStart="0dp"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="#menu/navigation"/>
<?xml version="1.0" encoding="utf-8"?>
Navigation Menu
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_home_light"
android:title="#string/str_home"/>
<item
android:id="#+id/navigation_medidate"
android:icon="#drawable/ic_meditation_light"
android:title="#string/str_meditade"/>
<item
android:id="#+id/navigation_lessions"
android:icon="#drawable/ic_lesson_light"
android:title="#string/str_lessions"/>
<item
android:id="#+id/navigation_sleep"
android:visible="false"
android:icon="#drawable/ic_sleep_light"
android:title="#string/str_sleep"/>
<item
android:id="#+id/navigation_cources"
android:icon="#drawable/ic_course_light"
android:visible="false"
android:title="#string/str_courses"/>
Navigation Listener
private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.navigation_home -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_cources -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_lessions -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_medidate -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_sleep -> {
return#OnNavigationItemSelectedListener true
}
}
false
}
Try to add a selector for tint icon selector_navigation.xml. Use app:itemIconTint attribute.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#color/blue" />
<item android:color="#android:color/darker_gray" />
</selector>
and set to BottomNavigationView
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="start"
android:elevation="4dp"
android:background="#color/white"
app:itemTextColor="#color/darker_gray"
app:menu="#menu/navigation"
app:layout_behavior="BottomNavigationBehavior"
app:itemIconTint="#drawable/selector_navigation" />
You can modified text size of selected or unselected tab.Add below code in dimens.xml
<dimen name="design_bottom_navigation_text_size">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size">12sp</dimen>
Below code for other custom sizes
<dimen name="design_bottom_navigation_active_item_max_width">168dp</dimen>
<dimen name="design_bottom_navigation_active_item_min_width">96dp</dimen>
<dimen name="design_bottom_navigation_elevation">8dp</dimen>
<dimen name="design_bottom_navigation_height">56dp</dimen>
<dimen name="design_bottom_navigation_icon_size">20dp</dimen>
<dimen name="design_bottom_navigation_item_max_width">96dp</dimen>
<dimen name="design_bottom_navigation_item_min_width">56dp</dimen>
<dimen name="design_bottom_navigation_margin">8dp</dimen>
<dimen name="design_bottom_navigation_shadow_height">1dp</dimen>
<color name="design_bottom_navigation_shadow_color">#14000000</color>
Need to return as "true" instead of false on onNavigation click listner
private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.navigation_home -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_cources -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_lessions -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_medidate -> {
return#OnNavigationItemSelectedListener true
}
R.id.navigation_sleep -> {
return#OnNavigationItemSelectedListener true
}
}
true
}
Related
<com.google.android.material.navigation.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorMenuBg"
android:fitsSystemWindows="true"
android:maxWidth="268dp"
app:headerLayout="#layout/nav_header"
app:menu="#menu/nav_menu"
app:itemHorizontalPadding="28dp"
app:itemIconPadding="18dp"
app:itemIconSize="24dp"
app:itemIconTint="#drawable/drawer_item"
app:itemTextColor="#drawable/drawer_item">
Part of nav_menu:
<item
android:id="#+id/nav_videos"
android:icon="#drawable/cat_icon_videos"
android:checkable="true"
android:title="#string/all_videos"/>
<item
android:id="#+id/nav_pics"
android:icon="#drawable/cat_icon_gallery"
android:checkable="true"
android:title="#string/all_pics"/>
<item
android:id="#+id/nav_gifs"
android:icon="#drawable/cat_icon_gif"
android:checkable="true"
android:title="#string/all_gifs"/>
it's over 15 items
After selecting one item, the text of one or two unselected random items is becoming bold.
Any idea how to fix?
Maybe preventing it programmatically inside:
override fun onNavigationItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.nav_latest -> {
if (currentGal != "latest") {
getMemes("latest")
}
}
R.id.nav_top -> {
if (currentGal != "top") {
getMemes("top")
}
}
R.id.nav_random -> {
if (currentGal != "random") {
getMemes("random")
}
}
?
Thanks in adance
As in title - it looks correct until i click a button. It's happening only if i implement a listener. Here's the code:
Kotlin
navigationView.setNavigationItemSelectedListener{item ->
when (item.itemId) {
R.id.list_BT -> {
supportFragmentManager.beginTransaction().apply {
replace(R.id.fragmentContainer1, MenuFragment())
commit()
}
item.isChecked = true
}
R.id.info_BT -> {
supportFragmentManager.beginTransaction().apply {
replace(R.id.fragmentContainer1, AboutFragment())
commit()
}
item.isChecked = true
}
R.id.preferences_BT -> {
val intent = Intent(applicationContext, OptionsActivity::class.java)
startActivity(intent)
}
}
true
}
XML - Activity
<com.google.android.material.navigation.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/drawer_menu"
app:headerLayout="#layout/drawer_header"
android:clipChildren="false"
android:theme="#style/Theme.JaBotMobile.Drawer"/>
XML - theme (kinda simple 4 now)
<style name="Theme.Base.JaBotMobile.Drawer">
<item name="fontFamily">#font/open_sans_regular</item>
</style>
<style name="Theme.JaBotMobile.Drawer" parent="Theme.Base.JaBotMobile.Drawer" />
Ok, I've found a solution thanks to #johnnyzen on GitHub. Thanks #ashu for pointing me to the source of the problem.
Make sure NavigationView DOES NOT use:
android:theme="#style/MyCustomNavStyle"
but use:
app:itemTextAppearance="#style/MyCustomNavStyle"
#font/montserrat_regular
I am using native BottomNavigationView and I want to change selected icon size bigger than unselected icon sizes. (exp. selected icon 40dp, other icon sizes 20dp).
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_centerVertical="true"
android:scaleType="center"
style="#style/Widget.Design.BottomNavigationView"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/navigation_menu" />
<item
android:id="#+id/homePageFragment"
android:icon="#drawable/selector_nav_home"
android:orderInCategory="1"
android:title="" />
<item
android:id="#+id/discoverPageFragment"
android:icon="#drawable/selector_nav_discover"
android:orderInCategory="2"
android:title="" />
<item
android:id="#+id/qrPageFragment"
android:icon="#drawable/selector_nav_qr"
android:orderInCategory="3"
android:title="" />
<item
android:id="#+id/myAccountFragment"
android:icon="#drawable/selector_nav_profile"
android:orderInCategory="4"
android:title="" />
<item android:drawable="#drawable/ic_bottom_navigation_profile" android:state_checked="true"/>
<item android:drawable="#drawable/ic_navigation_profile" android:state_checked="false"/>
You can change text size of selected item like this:
styles.xml:
<style name="bottomNavigationView.Active" parent="#style/TextAppearance.AppCompat.Caption">
<item name="android:textSize">16sp</item>
</style>
bottom_navigation_view.xml:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.bottomnavigation.BottomNavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/bottomNavView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_nav_menu"
app:labelVisibilityMode="labeled"
app:itemIconSize="24dp"
android:scaleType="center"
app:itemTextAppearanceActive="#style/bottomNavigationView.Active" />
As a result of increased text size the selected item's icon lifts up and as a whole this looks like the selected element was increased in size:
like this
Try this to change the selected item icon size
override fun onNavigationItemSelected(item: MenuItem): Boolean {
changeItemIconSize(item.itemId)
return true
}
private fun changeItemIconSize(selectedItemId: Int) {
val displayMetrics = resources.displayMetrics
val menuView = bottomMenu.getChildAt(0) as BottomNavigationMenuView
bottomMenu.itemIconSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 24f, displayMetrics).toInt()
val iconViewSelected =
menuView.findViewById<View>(selectedItemId).findViewById<View>(com.google.android.material.R.id.icon)
val layoutParams = iconViewSelected.layoutParams
layoutParams.height =
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32f, displayMetrics).toInt()
layoutParams.width =
TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32f, displayMetrics).toInt()
iconViewSelected.layoutParams = layoutParams
}
I created a options menu in my toolbar which shows up with 3 dots icon. I has 2 problems. First, it's not looking like options menu in other apps (text misaligned) and when I run the app on phone it doesn't responds to touch, even the ripples don't show up. On the other hand options menu works when I run it in the emulator(Pixel 2 API 24)
Here's my MainActivity code:
override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.options_menu, menu)
return true
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
return when (item.itemId) {
R.id.option_about -> {
Toast.makeText(this, "About", Toast.LENGTH_SHORT).show()
return true
}
R.id.option_exit -> {
Toast.makeText(this, "Exit", Toast.LENGTH_SHORT).show()
return true
}
else -> super.onOptionsItemSelected(item)
}
}
Here is the options_menu.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/search"
android:icon="#drawable/ic_search_primary"
android:title="#string/search_title"
app:actionViewClass="androidx.appcompat.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom" />
<item
android:id="#+id/option_about"
android:title="About"
app:showAsAction="never" />
<item
android:id="#+id/option_exit"
android:title="Exit"
app:showAsAction="never" />
</menu>
Actually, I was using wrong popupTheme in my toolbar.
The navigation bar has 4 buttons, all of color gray. Each one inflates a specific fragment. when clicked on it,it changes its color to red.
The button which is clicked is also becoming larger(bigger).I want to change the color(gray to red) but not size.
How to achieve this (not changing the size of button)?
Thanks in advance.
The following is the part of the code:
Menu xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_home"
android:icon="#drawable/ic_feed"
android:title=""/>
<item
android:id="#+id/navigation_dashboard"
android:icon="#drawable/ic_analytics"
android:title="" />
<item
android:id="#+id/navigation_profile"
android:icon="#drawable/ic_profile"
android:title="" />
<item
android:id="#+id/navigation_settings"
android:icon="#drawable/ic_settings"
android:title="" />
</menu>
kotlin code:
private lateinit var bottomnav : BottomNavigationView
val navUtils = NavigationUtils()
private val mOnNavigationItemSelectedListener =
BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.navigation_home -> {
val locationhistoryinstance =
LocationHistoryFragment.newInstance()
loadFragment(locationhistoryinstance)
setTitle("Calender Test")
return#OnNavigationItemSelectedListener true
}
R.id.navigation_dashboard -> {
val analyticsinstance = AnalyticsPageFragment.newInstance()
loadFragment(analyticsinstance)
setTitle("Analytics")
return#OnNavigationItemSelectedListener true
}
R.id.navigation_profile -> {
val profileinstance = ProfileFragment.newInstance()
loadFragment(profileinstance)
setTitle("Profile")
return#OnNavigationItemSelectedListener true
}
R.id.navigation_settings -> {
val settingsinstance = SettingsFragment.newInstance()
loadFragment(settingsinstance)
setTitle("Settings")
return#OnNavigationItemSelectedListener true
}
}
false
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_home)
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
bottomnav = findViewById(R.id.navigation)
navUtils.disableShiftMode(bottomnav)
}