Align Text of BottomNavigationView to bottom or add margin - android

Used : BottomNavigationViewEx
Want to align Text or add margin of Bottom Navigation Tab. Not able to find method which will push Text of Bottom bit on edge of bottom.
Layout :
<FrameLayout
android:id="#+id/bottomNavigationViewLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<com.application.ui.view.BottomNavigationViewEx
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/login_orange"
android:elevation="16dp"
android:minHeight="60dp"
app:itemIconTint="#color/bottom_nav_item_state"
app:itemTextColor="#color/bottom_nav_item_state"
app:menu="#menu/bottom_nav_menu" />
</FrameLayout>
Tried :
Setting Icon Margin but it doesn't push text.
Need :
Align Text to Bottom or atleast add margin from Icon

Related

BottomNavigationView does not follow layout heirarchy

I am having a bottom navigation view and I would want to hide it by showing a dummy view on top of it. In the relative layout, I am placing the dummy view on top of the bottom navigation view. But always the bottom navigation view shows on top. Why does the bottom navigation view does not follow layout hierarchy?
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/white"
android:theme="#style/BottomBar"
android:visibility="visible"
app:itemTextAppearanceActive="#style/BottomNavigationViewTextStyle"
app:itemTextAppearanceInactive="#style/BottomNavigationViewTextStyle"
app:labelVisibilityMode="labeled"
app:menu="#menu/bottom_navigation_menu" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/black" />
</RelativeLayout>
I expect the View to be shown on top of the bottom navigation view(So that the bottom navigation view is invisible), but bottom navigation view always shown on top
Based on the following link https://material.io/components/bottom-navigation/android, the bottom navigation view has a default elevation of 8dp. Changing the elevation of dummy layout will fix the issue.

Remove the top padding in BottomNavigationView

I have a BottomNavigationView with a background showing for the selected item
Here's the bottom navigation XML:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:itemBackground="#drawable/bottombar_item_bg"/>
I want the items to match the bar height's and remove the top padding showing.
if I understand you true android:layout_height="?attr/actionBarSize" here you put height as 50dp so try change height to android:layout_height="35dp" or android:layout_height="40dp"

Bottom Navigation view is not expanding in full space

I want to achieve something like this :
But when I am using this Bottom Navigation I am getting this, not able to replicate.
Both spacing and elevation are missing.
This is my Navigation view
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="68dp"
app:labelVisibilityMode="unlabeled"
android:background="#color/dark"
app:itemIconTint="#drawable/bottom_navigation_colors"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"
app:itemHorizontalTranslationEnabled="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:itemBackground="#drawable/bottom_navigation_colors"/>
Try removing the padding you specified in the Bottom Navigation Bar. Padding is used to specify the space/gap inside the container between its border and inside content. The padding attribute specified in the Navigation Bar may be pushing the menu items towards the center of the navigation bar. Removing the padding attribute should do the trick of evenly spacing the menu items across the navigation bar.

Android BottomSheet covers half of anchored ImageView

I have a CoordinatorLayout in which I have a BottomSheet and an ImageView.
This is my BottomSheett:
<include layout="#layout/bottom_sheet_layout"
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_hideable="false"
app:behavior_peekHeight="80dp"
app:layout_behavior="#string/bottom_sheet_behavior"/>
And this my ImageView:
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/image_location_crosshairs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="20dp"
android:layout_marginRight="20dp"
app:layout_anchorGravity="top|end"
app:layout_anchor="#id/bottom_sheet"
app:srcCompat="#drawable/my_svg_icon"/>
Regardless of the view order in my XML layout, I always get the same result: my ImageView is nicely anchored to the bottomsheet, but the anchor takes place at the center of my image.
I would like to know how can I have my image bottom being anchored instead of its center.
Trying to apply any kind of bottom margin will only have the bottomsheet slide until reaching center of image before making the image slides as well.
Thanks for the help !
You can create an empty View, with layout_height and layout_width set to wrap_content.
<View
android:id="#+id/view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
And then link this empty View to the BottomSheet.

Add image to center of toolbar

I am using Toolbar instead of actionabar in my appliaction.The toolbar works fine but the problem is that i want the app logo to appear in the center of the toolbar.The image will be in center if no menu items are displayed on the toolbar, but if i add search or refresh menu item to the toolbar the image also shifts.I want the toolbar to be in center always
Code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/pink"
android:minHeight="56dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp">
<RelativeLayout
android:id="#+id/rl_toolbar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ImageView
android:id="#+id/tv_home_header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/image"
android:drawablePadding="10dp"
/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
Using a bitmap drawable with center gravity as Toolbar background helps you create the required effect. e.g.,
Let's assume your image to be centered is centeree.png, and that will be wrapped inside drawable/toolbar_background.xml
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#android:drawable/centeree"
android:gravity="center" />
You can assign toolbar_background.xml as a background to toolbar in your layout
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/toolbar_background">
Also as an alternative, you can use a 9 patch drawable with a equal stretchable area on both sides.
You can not do it because of
One or more custom views. The application may add arbitrary child views to the Toolbar. They will appear at this position within the layout. If a child view's Toolbar.LayoutParams indicates a Gravity value of CENTER_HORIZONTAL the view will attempt to center within the available space remaining in the Toolbar after all other elements have been measured.
A easy way to do it, although its probably not the right way to do it.
I set my right side padding to the same width as my hamburger icon. Then everything else what I wanted in my dimens.xml. May need to be adjusted if you are adding action items on the right.
#dimen/app_bar_padding_right = 72dp
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="#dimen/app_bar_padding"
android:paddingBottom="#dimen/app_bar_padding"
android:paddingLeft="#dimen/app_bar_padding"
android:paddingRight="#dimen/app_bar_padding_right"
android:src="#drawable/nav_bar_logo"
android:contentDescription="#string/app_name" />
Add these attributes to the ImageView...
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"

Categories

Resources