What I want to achieve is similar to this question (I can't comment so far, that is why I created the new question). I want this menu on the right side in the landscape mode (my activity allows only landscape). I need it to be scaled for any device size. It should have 5 items.
For now, I wanted to do this by NavigationView like this:
<android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/nav_show"
android:layout_width="56dp"
android:layout_height="match_parent"
android:layout_alignParentEnd="true"
android:background="#android:color/white"
android:theme="#style/RightNav"
app:itemBackground="#android:color/white"
app:itemIconTint="#drawable/nav_item_color_state"
app:itemTextColor="#drawable/nav_item_color_state"
app:menu="#menu/nav_items_show" />
with style:
<style name="RightNav">
<item name="android:textSize">10sp</item><!-- text size in menu-->
<item name="android:listPreferredItemHeightSmall">90dp</item><!-- item size in menu-->
<item name="listPreferredItemHeightSmall">90dp</item><!-- item size in menu-->
</style>
and menu items:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/a1"
android:title="a1" />
<item
android:id="#+id/a2"
android:title="a2" />
<item
android:id="#+id/a3"
android:title="a3" />
<item
android:id="#+id/a4"
android:title="a4" />
<item
android:id="#+id/a5"
android:title="a5" />
</menu>
I can switch between fragments etc. this is not the problem. I can't deal with the design only. The biggest issue is that I can't add the icons to match material.io rules. Another problem is that I need to scroll over menu items if the device is too small.
I do not ask you for doing it for me. I'm here for any kind of advice to do it myself. Thanks!
Related
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);
I have a bottomnavigation view that sets an icon depending on the state if it's checked or not.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/icon_tree"
android:title="Tree"
android:icon="#drawable/bottomnav_icon_home">
</item>
</menu>
bottomnav_icon_home:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/icon_home_black" android:state_checked="false"/>
<item android:drawable="#drawable/icon_home_green" android:state_checked="true"/>
</selector>
How ever bottomnavigation is automatically highlighting the icon when android:state_checked is true.
How do I completely disable bottomnavigation's icon selection highlight?
I've tried setting app:itemIconTint="#drawable/bottom_navigation_selector" to #null however that doesn't work
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/bottom_navigation_menu"
android:background="#color/colorWhite"
app:itemTextColor="#drawable/bottom_navigation_selector"
app:itemIconSize="28dp"
app:itemIconTint="#drawable/bottom_navigation_selector"
app:labelVisibilityMode="labeled"/>
bottom_navigation_selector:
<?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/forestGreen" />
<item android:color="#color/colorBlack" />
</selector>
If i understood you right, android by default sets a tint on your bottom navigation icons on selection and you would like it to be removed right.
I know how to do that in your java class not xml though.
You'll need to set setItemIconTintList method of your BottomNavigationView to null. So in wherever you set the layout write code as :
BottomNavigationView btmNav = findViewById(R.id.bottom_navigation);
btmNav.setItemIconTintList(null);
Let us know if this works for you.
try to add this line in the dimens.xml
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">#dimen/design_bottom_navigation_text_size</dimen>
You can create custom style.
There are two steps.
1- Create custom bottom_navigation_bar_icon_color.xml in drawable folder. This is the selector showed the icon highlighted or default. So you can highlight all icons or show them as default. Choose one of the following when creating your bottom_navigation_bar_icon_color.xml
Icons highlighted: <item android:alpha="1.0" android:color="?attr/colorOnPrimary" android:state_checked="true"/>
Icons default: <item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
bottom_navigation_bar_icon_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.6" android:color="?attr/colorOnPrimary"/>
</selector>
2- Add following custom style to themes.xml or styles.xml. bottom_navigation_bar_icon_color used in itemIconTint and itemTextColor
<style name="BottomNavigationThemeCustom">
<item name="enforceTextAppearance">true</item>
<item name="enforceMaterialTheme">true</item>
<item name="android:background">?attr/colorPrimary</item>
<item name="itemIconTint">#drawable/bottom_navigation_bar_icon_color</item>
<item name="itemRippleColor">#color/mtrl_navigation_bar_colored_ripple_color</item>
<item name="itemTextAppearanceInactive">?attr/textAppearanceCaption</item>
<item name="itemTextAppearanceActive">?attr/textAppearanceCaption</item>
<item name="itemTextColor">#drawable/bottom_navigation_bar_icon_color</item>
</style>
3- Use your new style for bottomNavigationBar
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigation"
style="#style/BottomNavigationThemeCustom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible"
app:labelVisibilityMode="unlabeled"
app:menu="#menu/bottom_menu" />
4- If you want to hide the bottomNavigationBar on Scroll add following attribute to bottomNavigationBar
app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
You consider create your own implementation of bottomNavigation?
When I implement the Google BottomNavigationView, I got a lot of issues, so I create a new one like this:
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<View android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/grayBottomNavigationDelimiter"/>
<RadioGroup android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorNavigationBar"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatRadioButton
android:id="#+id/homeButton"
android:drawableTop="#drawable/ic_home_black_24dp"
android:text="#string/navigation_home_text"
style="#style/RadioButtonStyle"/>
...
So, can see this is easier than imagine, did you?
To add it through XML: For the attribute IconItemTint and ItemTextColor, simply use the same color that you've used for icons by default. In that case, the highlight color and default color will be the same. Will give you the required ripple effect on selecting but highlight wont be visible.
For my black color icon, I've used this:
app:itemIconTint="#color/black"
app:itemTextColor="#000000"
My entire bottom nav looks like this:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
app:itemIconTint="#color/black"
app:itemTextColor="#000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_more_options_menu" />
I tried alomst every link on stackoverflow but I could not find the right solution to my question. I tried this...
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:itemTextColor="#fff"
app:itemIconTint="#fff"
android:background="#393737"
app:headerLayout="#layout/nav_header_navigation"
app:menu="#menu/activity_navigation_drawer"/>
But its changing the text color of each item. Is there any to change text color of single item? I am talking about changing the text color of particular item i.e. if we have four items
sugar
bread
milk
egg
This list is embedded in menu of navigation view. If we want to change the color of milk to red. How to do that??
You need to do that programatically.
// Get the navigation view first.
mNavigationView = (NavigationView) findViewById(R.id.nav_view);
Now you need to get the menu item from the navigation view and set the icon here.
// Get the index of milk
mNavigationView.getMenu().getItem(INDEX_OF_MILK).setIcon(R.drawable.milk_red);
The idea is keeping two separate icons for milk. You may change the icon anytime when needed. So the complete pseudo code should look like
if(milkIsRed)
mNavigationView.getMenu().getItem(INDEX_OF_MILK).setIcon(R.drawable.milk_red);
else
mNavigationView.getMenu().getItem(INDEX_OF_MILK).setIcon(R.drawable.milk_white);
You need to customize your navigation drawer View for that you can use this link http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/
XML look Like
<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>
<style name="ActionBarStyle"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/pink</item>
<item name="android:icon">#drawable/header</item>
<item name="android:displayOptions">showHome|useLogo</item>
<item name="android:titleTextStyle">#style/ActionBar.TitleTextStyle</item>
<item name="android:height">79px</item>
</style>
Above is my action bar style. the icon's original size is 41px in height. What i want is to keep the original size and center it vertically in the cation bar. But right now, the icon is stretch to fill the 79 px in height. Is it by default to stretch the icon to fill the space or what ?
Please point me to the right direction to solve this, Thanks in Advance.
Add an <item> like this to your action bar:
<item
android:title="my_icon"
app:actionLayout="#layout/my_icon_layout"
app:showAsAction="always"
/>
Notice the my_icon_layout line.
Create a my_icon_layout.xml in your res/layout folder that looks something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content" android:layout_height="41px">
<ImageView
android:src="#drawable/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
/>
</RelativeLayout>
Should work for you.
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