I'm using android material design drawer layout. Everything is working perfectly. But I'm fetching little bit problem with drawer layout item padding left in Android API lever <= 19.
It works well in Android API level >= 21. Look at the screenshot :
But in Android API level <= 19, drawer layout items don't take proper padding in the left side. Look at the screenshot:
My xml files as following:
activity_main.xml
<?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="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
style="#style/styleActivity">
<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="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer"
android:background="#drawable/graphics_drawer_bg"
app:itemTextColor="#color/white_light"
app:itemBackground="#drawable/graphics_item_bg"
app:itemIconTint="#color/white_light"
/>
</android.support.v4.widget.DrawerLayout>
activity_main_drawer.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">
<group
android:id="#+id/nav_top"
android:checkableBehavior="single">
<item
android:id="#+id/nav_routine"
android:icon="#drawable/ic_access_time_accent_24dp"
android:title="Routines" />
<item
android:id="#+id/nav_class"
android:icon="#drawable/ic_book_accent_24dp"
android:title="Classes" />
<item
android:id="#+id/nav_exam"
android:icon="#drawable/ic_local_library_black_24dp"
android:title="Exams" />
<item
android:id="#+id/nav_event"
android:icon="#drawable/ic_date_range_black_24dp"
android:title="Events" />
<item
android:id="#+id/nav_statistics"
android:icon="#drawable/ic_insert_chart_black_24dp"
android:title="Statistics" />
</group>
<group
android:id="#+id/nav_bottom"
android:checkableBehavior="single">
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_settings_black_24dp"
android:title="Settings" />
<item
android:id="#+id/nav_help"
android:icon="#drawable/ic_help_outline_black_24dp"
android:title="Help" />
</group>
</menu>
Thanks in advance.
Try adding padding in android.support.design.widget.NavigationView.
For example:
<android.support.design.widget.NavigationView
...
android:padding="10dp"
...
/>
As you mentioned in the comment that you want to add padding only in
devices having API <= 19. To do this, make two folders in res
directory.
values-v11 and values-v21
In these folders, add a file dimens.xml and in it add dimension for NavigationView.
In dimens.xml of values-v11:
<dimen name="padding_left">10dp</dimen>
In dimens.xml of values-v21:
No padding for API >= 21
<dimen name="padding_left">0dp</dimen>
And finally in NavigationView looks like this:
<android.support.design.widget.NavigationView
...
android:paddingLeft="#dimen/padding_left"
android:paddingStart="#dimen/padding_left"
...
/>
Update:
In material design, the margin and padding are predefined but you can override these values.
<dimen name="design_navigation_padding_top_default" tools:override="true">0dp</dimen>
<dimen name="design_navigation_separator_vertical_padding" tools:override="true">0dp</dimen>
<dimen name="design_navigation_padding_bottom" tools:override="true">0dp</dimen>
I found this here
Try this as item
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:padding="20dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#222"
android:text="bla bla bla" />
<group
android:checkableBehavior="single">
<item
android:id="#+id/ChatItem"
android:icon="#drawable/chat_icon"
android:title="#string/title_chat"/>
<item
android:id="#+id/ClipsItem"
android:icon="#drawable/clips_icon"
android:title="#string/title_clip"/>
<item
android:id="#+id/CretaeItem"
android:icon="#drawable/new_camera"
android:title="#string/title_create"/>
<item
android:id="#+id/dopeItem"
android:icon="#drawable/star_icon"
android:title="#string/tittle_dope"/>
<item
android:id="#+id/followersItem"
android:icon="#drawable/doppes"
android:title="#string/title_followers"/>
<item
android:id="#+id/callPeopleItem"
android:icon="#drawable/call"
android:title="#string/title_call_people"/>
<item
android:id="#+id/gifs"
android:icon="#drawable/gf"
android:title="GIFs"/>
<item
android:id="#+id/memes"
android:icon="#drawable/memos"
android:title="Memes"/>
<item
android:id="#+id/community"
android:icon="#drawable/comunity"
android:title="Community"/>
<item
android:id="#+id/findPeopleItem"
android:icon="#drawable/search_new"
android:title="#string/title_find_people"/>
<item
android:id="#+id/settingsItem"
android:icon="#drawable/setting_icon"
android:title="#string/settings"/>
<item
android:id="#+id/disclaimerItem"
android:icon="#drawable/disclamer_icon"
android:title="#string/title_disclaimer"/>
<item
android:id="#+id/logoutItem"
android:icon="#drawable/logout_icon"
android:title="#string/logout"/>
</group>
This worked for me
Just add this one line in dimen.xml file
<dimen tools:override="true" name="design_navigation_icon_padding">10dp</dimen>
this line override padding of navigation menu item.
Related
I am trying to create an oval shape around my bottom navigation icon when selected as seen in the screenshot
bottom_nav_layout.xml
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav_view"
android:layout_width="match_parent"
android:layout_height="56dp"
android:elevation="0dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:theme="#style/Widget.BottomNavigationView"
app:itemIconSize="20dp"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="#menu/bottom_nav_menu" />
bottom_nav_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#3375BB" />
<item android:state_checked="false" android:color="#68788D"/>
</selector>
bottom_nav_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_trustwallet"
android:title="Wallet" />
<item
android:id="#+id/navigation_discover"
android:icon="#drawable/ic_discover"
android:title="Discover" />
<item
android:id="#+id/navigation_browser"
android:icon="#drawable/ic_browser"
android:title="Browser" />
<item
android:id="#+id/navigation_settings"
android:icon="#drawable/ic_paper_settings"
android:title="Settings" />
</menu>
Use a M3 theme in your app:
<style name="AppTheme" parent="Theme.Material3.DayNight">
Then in your layout:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.App.BottomNavigationView"
with:
<style name="ThemeOverlay.App.BottomNavigationView" parent="">
<item name="colorSurface">#d1e4ff</item>
<item name="colorSecondaryContainer">#0061a3</item>
</style>
I use bottomNavigation.
I wanna fill the icon with the color "not the outside of the icon" when selected.
How can I do that?
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:paddingTop="2dp"
android:background="#FFFFFF"
android:theme="#style/BottomNavigationTextStyle"
app:labelVisibilityMode="labeled"
app:itemIconSize="24dp"
android:layout_alignParentBottom="true"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:menu="#menu/buttom_navigation_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
Use the itemIconTint attribute:
<com.google.android.material.bottomnavigation.BottomNavigationView
app:itemIconTint="#color/my_selector"
..>
and define a selector like:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="1.0" android:color="..." android:state_checked="true"/>
<item android:alpha="0.6" android:color="..."/>
</selector>
Use custom made images as per your requirement. You would need to add 2 images one for the active state and for deactive state.
Create a selector home_icon_selector.xml for your icon
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_active_icon_here" android:state_selected="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_pressed="true" />
<item android:drawable="#drawable/your_active_icon_here" android:state_checked="true" />
<item android:drawable="#drawable/your_deactive_icon_here" />
</selector>
Update your menu buttom_navigation_menu to use the selector above
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="#+id/menu_home"
android:enabled="true"
android:icon="#drawable/home_icon_selector"
android:title="#string/tab_title_home"/>
</menu>
I want to make BottomNavigationView Menu in UpperCase, How can i do that without using 3rd party library?
Here is my xml code:
<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:color/white"
android:foreground="?attr/selectableItemBackground"
app:itemIconTint="#color/bottom_nav_color"
app:itemTextColor="#color/bottom_nav_color"
app:menu="#menu/navigation" />
And navigation.xml as follows:
<?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/home_icon"
android:title="#string/title_home"
/>
<item
android:id="#+id/navigation_deals"
android:icon="#drawable/ic_deals"
android:title="#string/deals" />
<item
android:id="#+id/navigation_myBookings"
android:icon="#drawable/ic_my_bookings"
android:title="#string/title_my_bookings" />
<item
android:id="#+id/navigation_more"
android:icon="#drawable/ic_more"
android:title="#string/title_more" />
</menu>
Try this
Create a style like this BottomNavigationViewStyle
<style name="BottomNavigationViewStyle">
<item name="android:textAllCaps">true</item>
<item name="android:textSize">15sp</item>
</style>
Than use like this
<android.support.design.widget.BottomNavigationView
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:foreground="?attr/selectableItemBackground"
app:menu="#menu/navigation"
app:theme="#style/BottomNavigationViewStyle" />
OUTPUT
Apply this theme to your bottom navigation
<style name="AppTheme2" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:textAllCaps">true</item>
</style>
I am using spinner in my layout and its appearance is as follows:
I want to increase the spinner size to make it more attractive and visible.
here is spinner xml and activity snippet.
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/spinner_room"
android:layout_below="#id/Toolbar_Room"
android:textSize="52sp"
android:prompt="#string/room_prompt"
android:spinnerMode="dropdown"
android:dropDownSelector="#drawable/img_small_box_green"
android:drawSelectorOnTop="true"></Spinner>
Create a custom layout for your Spinner and inflate it through an adapter.
Check out this.
http://abhiandroid.com/ui/custom-spinner-examples.html
I have created spinner with card view check this you may like this design.
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_5"
android:background="#android:color/white"
app:cardElevation="#dimen/margin_2"
app:contentPaddingBottom="#dimen/margin_5"
app:contentPaddingTop="#dimen/margin_5">
<Spinner
android:id="#+id/sp_filter_status"
style="#style/Widget.Spinner"
android:background="#drawable/spinner_expand_black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:padding="0dp" />
</android.support.v7.widget.CardView>
drawable/spinner_expand_black
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item>
<shape>
<solid android:color="#android:color/white" />
<padding
android:bottom="#dimen/margin_1"
android:left="#dimen/margin_1"
android:right="#dimen/margin_1"
android:top="#dimen/margin_1" />
</shape>
</item>
<item>
<bitmap
android:gravity="end"
android:src="#mipmap/ic_action_expand_more" />
</item>
</layer-list>
#mipmap/ic_action_expand_more is image of bottom arrow you can find from material icon site.
Style
<style name="Widget.Spinner" parent="Widget.AppCompat.Spinner.DropDown">
<item name="android:background">?android:selectableItemBackground</item>
<item name="android:dropDownSelector">?android:selectableItemBackground</item>
<item name="android:divider">#null</item>
<item name="overlapAnchor">true</item>
<item name="android:textColor">#android:color/black</item>
<item name="android:textSize">#dimen/text_16</item>
<item name="android:focusableInTouchMode">true</item>
<item name="android:focusable">true</item>
</style>
put your Spinner inside CardView.
it will look more better.
I have set android:windowLightStatusBar to true to display black icons and text on status bar inside my app as picture below.
However, the Navigation Drawer no longer fit to the screen, see the picture below. This is because to ensure android:windowLightStatusBar works, android:windowTranslucentStatus must be set to false. Any workaround? App like Google Calendar seem to work fine with this feature.
Here's my main activity's XML
<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="match_parent"
android:layout_height="match_parent"
android:background="#color/colorToolbarBackground"
android:fitsSystemWindows="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/app_bar" />
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:background="#color/colorWhite"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/navigation_view_items" />
</android.support.v4.widget.DrawerLayout>
Remove this line from layout.xml
android:fitsSystemWindows="true"
And add this to styles-v21.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#android:color/transparent</item>
</style>
in styles.xml
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
in Manifest.xml add this in your Activity Main
android:theme="#style/AppTheme.NoActionBar"
And wrap AppBarLayout tag into this:
<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"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<!-- Here AppBarLayout ecc -->
</android.support.design.widget.CoordinatorLayout>
<!-- Here NavigationView ecc -->
AppBarLayout must have
android:theme="#style/AppTheme.AppBarOverlay"