Bottom Navigation Icons are Cropped Android - android

I'm assembling an app with a Botton navigation bar in Android with Android Studio. With two icons it looked fine, but when I added four, the icons look cropped. I can't find any other error like this. Any suggestions are welcomed.
Cropped icons bottom nav 4 options
Here is the code for the Bottom Navigation (bottom_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/action_lines"
android:enabled="true"
android:icon="#drawable/ic_lines_off"
android:title="Lines"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_contacts"
android:enabled="true"
android:icon="#drawable/ic_contacts_off"
android:title="Contacts"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_conversations"
android:enabled="true"
android:icon="#drawable/ic_conversations_off"
android:title="Conversations"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
<item
android:id="#+id/action_settings"
android:enabled="true"
android:icon="#drawable/ic_settings_off"
android:title="Settings"
android:background="#android:color/transparent"
app:showAsAction="ifRoom" />
</menu>
In my activity.xml I call the bottom menu like this:
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:itemIconTint="#drawable/bnv_tab_item_foreground"
app:itemTextColor="#drawable/bnv_tab_item_foreground"
app:menu="#menu/bottom_navigation" />
Question Update:
I tried changing
app:showAsAction="ifRoom"
for
app:showAsAction="always"
And it doesn't solve the problem. There is no change to the issue. And it does not show the tag in every icon as it should. Only on the selected one.
One way of solving it is adding a Theme to the bottom navigation call in activity, like this:
android:theme="?attr/toolbarNavigationButtonStyle"
I have no clue why it works, but it solves the issue apparently in lots of devices exept in Samsung Galaxy Note 8
Here is "bnv_tab_item_foreground"
<?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/colorAccent" />
<item android:color="#android:color/darker_gray" />
</selector>

Try changing a value for the property below:-
app:showAsAction="always"
and if still, your problem persists, please provide the file
"bnv_tab_item_foreground"

Use Support Library 28. Then, just add app:labelVisibilityMode="labeled" to your BottomNavigationView XML declaration.
Hope this helps

I believe this is being caused by your layout not fitting into the System window, and you can easily fix this by going to the Layout you have the Bottom Navigation and at the root layout add android:fitsSystemWindows="true" just like I did below
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:fitsSystemWindows="true">
<!--things come here -->
</RelativeLayout>

Related

BottomNavigationView not inflating

I'm trying to inflate a BottomNavigationView in activity_main.xml but to no avail.
Here's my bottom_navigation.xml in the menu resource directory:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="nav_library"
android:icon="#drawable/svg_library"
android:title="Library" />
<item
android:id="nav_search"
android:icon="#drawable/svg_search"
android:title="Search" />
<item
android:id="nav_liked"
android:icon="#drawable/svg_heart"
android:title="Liked" />
</menu>
And here's my activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_navigation"
android:background="?android:attr/windowBackground" />
</RelativeLayout>
It seems that android:layout_height="wrap_content" does not detect the icons nor the title of the menu and as such, the height and width of the navigation bar are both 0.
Here's an image with the wrap_content attribute. (Not enough rep for an embed)
Please advise.
P.S This is my first question on Stack Overflow, so my question formatting might not be the best.
A bit late to the party. But I eventually figured it out that day. Was missing the prefix #+id/:
<item
android:id="#+id/nav_library"
android:icon="#drawable/svg_library"
android:title="Library" />

Image as background in menu item

As said in the question.
What I currently have:
Desired output:
On each column there would be a background image. I'm going to remove the text and just fill items with images. Is this possible? If yes, do I need different resolutions for background images?
Activity_main_drawer.xml:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_ITEM1"
android:title="#string/ITEM1"
/>
<item
android:id="#+id/nav_ITEM2"
android:title="#string/ITEM2" />
<item
android:id="#+id/nav_ITEM3"
android:title="#string/ITEM3" />
</group>
</menu>
Depending on what exactly you are looking to do, you could try add an icon:
<item
android:id="#+id/nav_ITEM1"
android:icon="#drawable/item1_image"
android:title="#string/ITEM1" />
EDIT / UPDATE: to set the 'background image' of a menu entry, try:
<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:fitsSystemWindows="true"
app:itemBackground="#drawable/YOUR_DRAWABLE_HERE". <<<<<<<<<
app:headerLayout="#layout/nav_header_home"
app:menu="#menu/activity_home_drawer" />
Unfortunately, this sets the same image for each entry - but, it is a good starting point. Will update if I see a way of customising each entry.
LAST UPDATE, This allows you to define a unique background for each entry. Its not perfect, but maybe you can tweak it to work:
include 'app' in your xml for your menu:
xmlns:app="http://schemas.android.com/apk/res-auto"
Then, make a simple layout file that has an image:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/announce"/>
</FrameLayout>
In menu, update the item to point to the layout file you made above
<item
android:id="#+id/nav_gallery"
android:title=""
app:actionLayout="#layout/test" /> <<<<< HERE
Source: found some methods and ideas here: https://stablekernel.com/article/using-custom-views-as-menu-items/

How to use images as icons in bottom navigation view [Android]

I am trying to add bottom navigation view like below:
But it is coming like below:
I tried all the options, but I don't seem to quite get through, everything I do is only changing the color but I am not able to quite achieve what I want to.
Code below
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/action_search"
android:layout_width="match_parent"
android:layout_height="45dp"
android:layout_gravity="start"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/navigation_menu"
tools:layout_editor_absoluteX="8dp"
android:background="#232323"
app:itemTextColor="#color/PrimaryText"
app:itemIconTint="#null"/>
Navigation Menu :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+id/action_add_expense"
android:icon="#drawable/addincome"
android:title="Add Income" />
<item android:id="#+id/action_add_income"
android:icon="#drawable/addexpense"
android:title="Add Expense" />
</menu>
set the Icon TintList to null programatically and you will be able to show your icons without any tint.
bottomNavigationView.setItemIconTintList(null);

Creating a Menu in a circular layout

trying to find out how to make a menu that is in a circular layout. I believe it is called a Pie Menu or Circular Menu. See screenshot from an app named Simple Habit on Android Studio. I have no idea how to get started.
I'm sure many other people also would like to know, help would be very much appreciated. Thanks!
I think you are looking for this
Dependency:
compile 'com.github.szugyi:Android-CircleMenu:2.0.0'
Add to Activity/Fragment XML:
<com.szugyi.circlemenu.view.CircleLayout
android:id="#+id/circle_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/selected_textView"
android:layout_gravity="center_horizontal" >
<include layout="#layout/menu_items" />
</com.szugyi.circlemenu.view.CircleLayout>
Add this to 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/menu_speed"
android:title="#string/speed"
app:showAsAction="never" />
<item
android:id="#+id/menu_radius"
android:title="#string/radius"
app:showAsAction="never" />
<item
android:id="#+id/menu_isRotating"
android:title="#string/is_rotating"
app:showAsAction="never" />
<item
android:id="#+id/menu_firstChildPosition"
android:title="#string/first_child_position"
app:showAsAction="never" />
</menu>
More details in Sample App.
If you are looking for a Lucky wheel, add this library as a module into your project.

Custom tab indicator view

I want to reproduce this tab indicator structure (screen is from nova launcher): a dropdown menu and an arrow in the right bottom corner.
I have no problem about code but i can't reproduce this appearance.
I tried this:
mBar.addTab(mBar.newTab().setText(ctx.getString(R.string.tab_actions)).setTabListener(this).setCustomView(R.layout.navigation_spinner));
where mBar is sherlock support actionBar.
This is my layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_margin="-10dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical">
<Button android:id="#+id/button1" android:layout_width="match_parent"
android:layout_height="match_parent" android:text="Button" />
</LinearLayout>
and this is my result:
The problem is that the button in the central tab doesn't fill the tab indicator. How can i set a custom view that perfectly fill the indicator without margin or padding? Or i have to approach this in a different way to have the a result like the firs screen? Thanks in advice
What you are trying to do is really complicated, and will be hard to achieve.
If you want drop down menus you can try those :
menu/options.xml:
<item
android:icon="#drawable/ic_menu_sort"
android:showAsAction="ifRoom">
<menu>
<item
android:id="#+id/menuSortNewest"
android:title="Sort by newest" />
<item
android:id="#+id/menuSortRating"
android:title="Sort by rating" />
</menu>
</item>
Second option:
menu/options.xml:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/menuSort"
android:showAsAction="ifRoom"
android:actionLayout="#layout/action_sort" />
</menu>
layout/action_sort.xml:
<Spinner xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_menu_refresh"
android:entries="#array/order" />
Docs for menu resources - http://developer.android.com/guide/topics/resources/menu-resource.html

Categories

Resources