I am trying to make a custom Navigation Drawer with images and title underneath, like in the following image;
So this is my layout I named: menu_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<ImageView
android:id="#+id/img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/menu_icon"
android:gravity="center"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Menu Title"
android:gravity="center"
android:textSize="16dp"
android:textColor="#color/white"
android:layout_below="#+id/img_menu"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
my 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">
<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="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
and finally the menu; 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" >
<item
android:id="#+id/nav_profile"
app:actionLayout="#layout/menu_item"/>
</menu>
The result I get is missing the TextView, what could be the issue here?
my result:
Thanks
use simple LinearLayout and apply android:gravity="center" to the root layout. also remove parent margin android:layout_margin="10dp"
the textview is out of the viewport in menu items
try this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/img_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu Title"
android:textColor="#000000"
android:textSize="16sp" />
</LinearLayout>
Related
In my main activity there is navigation drawer and fab button and inside content.xml which is the main xml to load content in my Main activity. In other word, I've navigation drawer activity provided by android studio.
Code in that content.xml is:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/b1"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#f0eb79"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/computer"
android:paddingTop="25dp"
android:text="Chemistry"
android:textAllCaps="false"
android:textColor="#2f2e2e"
android:textSize="18sp" />
<Button
android:id="#+id/b2"
android:layout_width="0dp"
android:layout_height="200dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#524d47"
android:foreground="?attr/selectableItemBackground"
android:drawableTop="#drawable/computer"
android:paddingTop="25dp"
android:text="Sports"
android:textAllCaps="false"
android:textColor="#ffffff"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:foreground="?attr/selectableItemBackground"
android:layout_height="200dp"
android:layout_margin="2dp"
android:layout_weight="1"
android:background="#e7595d"
android:drawableLeft="#drawable/computer"
android:paddingLeft="45dp"
android:text="Inventions"
android:textAllCaps="false"
android:textColor="#fff"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
And it is not completely scrolling as shown in the figure below. I also tested same xml code into another empty activity where there is NOT fab and nagivation drawer and there it is showing scrolling behaviour perfectly.
Similarly, this is my activitymain.xml's code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.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">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</androidx.drawerlayout.widget.DrawerLayout>
It worked for me after adding these attribute in scrollview:
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.nepali_test.MainActivity"
tools:showIn="#layout/app_bar_main"
I have the following Navigation Drawer menu setup:
Main layout 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">
<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="150dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/colorPrimaryDark"
android:fitsSystemWindows="true"
android:theme="#style/NavigationViewStyle"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" >
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
My menu 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" >
<item
android:id="#+id/nav_profile"
app:actionLayout="#layout/menu_item"
android:title=""/>
</menu>
Menu item menu_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="75dp"
android:layout_height="75dp"
android:src="#drawable/menu_icon"
android:layout_gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Menu Title"
android:textSize="16sp"
android:textColor="#color/white"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
The result I get is this:
Result i am getting
Instead I want it to be horizontally centered, what did I do wrong here? I have tried many fixes with the custom layout's gravity (menu_item.xml) as well as the items, nothing seems to work.
I don't know if the app:actionLayout in the menu can be centered or not at all, if not please tell me what is the correct way to make an item like that with the alignment I want.
Thanks in advance.
Try this for the
menu_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<ImageView
android:id="#+id/image_view"
android:layout_width="match_parent"
android:layout_height="75dp"
android:layout_gravity="center|center_horizontal"
android:src="#drawable/menu_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/image_view"
android:layout_gravity="center_horizontal|center"
android:gravity="center"
android:text="Menu Title"
android:textColor="#color/white"
android:textSize="16sp" />
</RelativeLayout>
Hope this helps
Try this, menu_item.xml you can set gravity to center_horizontal.
I need to set a textview with background image at the bottom part of the navigation drawer. I am unable to do it from xml.
Try below code:-
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#color/side_menu_bg_color"
android:fitsSystemWindows="false"
android:scrollbars="none"
android:theme="#style/NavigationDrawerStyle"
app:headerLayout="#layout/nav_header_mains"
app:itemTextAppearance="#style/NavigationDrawer"
app:itemTextColor="#color/White"
app:menu="#menu/activity_main_drawer"
app:selectableItemBackground="#drawable/nav_drawer_item_selector">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:clickable="true"
android:orientation="vertical">
<include layout="#layout/nav_bar_playback_controls" /> // This is bottom layout with black background and 2 textviews
</LinearLayout>
</android.support.design.widget.NavigationView>
nav_bar_playback_controls.xml
<?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="wrap_content"
android:background="#color/Black"
android:padding="10dp">
<TextView
android:id="#+id/artist"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:paddingRight="5dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/White"
android:text="Demo text"
android:textSize="23px"
android:textStyle="bold"
android:typeface="sans" />
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/artist"
android:layout_marginTop="4dp"
android:layout_toLeftOf="#+id/play_pause"
android:ellipsize="end"
android:text="Hello there"
android:maxLines="2"
android:paddingRight="5dp"
android:textColor="#color/White"
android:textSize="31px"
android:textStyle="bold|normal"
android:typeface="sans" />
<ImageButton
android:id="#+id/play_pause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:background="#null"
android:padding="8dp" />
</RelativeLayout>
Inside your 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">
<include layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<android.support.design.widget.NavigationView
android:layout_above="#+id/llBottomLay"
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<LinearLayout
android:id="#+id/llBottomLay"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#e6e6e6"
android:orientation="horizontal">
<!--place your things here-->
</LinearLayout>
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
* LinearLayout of id llBottomLay need to replace by Relative or other option depending your need
Try something like this:
<?xml version="1.0" encoding="utf-8"?>
<merge>
<android.support.v4.widget.DrawerLayout>
...removed for brevity...
</android.support.v4.widget.DrawerLayout>
<TextView
...your required properties...
android:gravity="bottom" android:layout_gravity="bottom"/>
</merge>
I'm trying to attach custom layout for menu items on DrawerLayout, but as you see menu items don't have full width and i can't resolve this problem
My menu layout
<?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/groupOne">
<item
android:id="#+id/inbox"
app:actionLayout="#layout/create_new"/>
</group>
</menu>
and my custom layout for that as create_new
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingTop="5dp"
android:paddingBottom="5dp">
<TextView
android:layout_width="match_parent"
android:layout_height="25dp"
android:text="New Text"
android:gravity="left|center"
android:layout_marginLeft="20dp"
android:background="#000"
android:textColor="#fff"/>
</LinearLayout>
Yeah, the only way that worked for me was to set android:layout_width="100000dp" on the custom layout's root view.
Ugly ugly hack, however.
Add custom Spinner in Navigation menu / Navigation drawer / menu item.
1) Create Menu Item in menu directory.
<menu>
> <item
> android:id="#+id/navigation_drawer_item3"
> app:actionLayout="#layout/nav_drawer_home_spinner"
> tools:ignore="MenuTitle,icon" />
</menu>
2)Navigation drawer where you can put all types of navigation drawer
here.
- header
-menu with icon
-menu without icon
-custom menu item (Spineer)
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#color/md_white_1000"
tools:openDrawer="start">
<include
layout="#layout/app_bar_dashboard"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="0dp"
android:background="#color/md_white_1000"
android:nestedScrollingEnabled="true"
android:layout_gravity="start">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="vertical"
android:background="#color/md_white_1000">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#color/md_white_1000">
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer_with_icon"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_gravity="center"
android:elevation="0dp"
android:background="#color/md_white_1000"
app:itemTextColor="#color/colorAccent"
app:itemIconTint="#color/colorAccent"
app:headerLayout="#layout/nav_header_dashboard"
android:theme="#style/NavigationViewStyle"
app:menu="#menu/activity_dashboard_drawer"/>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer_without_icon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
app:itemTextColor="#color/colorAccent"
android:elevation="0dp"
android:layout_gravity="bottom"
android:theme="#style/NavigationViewStyleOnlyText"
app:menu="#menu/activity_dashboard_withouticon_drawer"/>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer_spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
android:layout_gravity="bottom"
app:menu="#menu/activity_dashboard_spinner"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
3) Custom row_spinner_layout for putting your custom layout for menu
item of that navigation view.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="1"
android:orientation="horizontal">
<ImageView
android:id="#+id/img_profilPic"
android:layout_width="0dp"
android:layout_weight="0.15"
android:layout_height="wrap_content"
android:padding="3dp"
android:src="#drawable/profilepic" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="0.7"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:orientation="vertical">
<TextView
android:id="#+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textColor="#color/colorAccent"
android:text=""/>
<TextView
android:id="#+id/tv_subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:textColor="#color/colorAccent"
android:text=""/>
</LinearLayout>
</LinearLayout>
Main activity layout (removed the irrelevant elements):
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black"
<RelativeLayout
android:id="#+id/layout_relative_in_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black" >
// some more elements ...
</RelativeLayout>
<ListView
android:id="#+id/drawer_main"
android:layout_width="120dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#80000000"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="10dp" />
</android.support.v4.widget.DrawerLayout>
drawer_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawerItemTextView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:textColor="#android:color/white" >
</TextView>
The list items are aligned to the center horizontally now, but not vertically.
What should i modify to center them vertically?
Change your drawer item to this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<TextView
android:id="#+id/frag1_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
then try, it is working for me.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff" >
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#eeeeee" >
</FrameLayout>
<ListView
android:id="#+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#333333"
android:choiceMode="singleChoice"
android:divider="#android:color/darker_gray"
android:dividerHeight="1dp" />
</android.support.v4.widget.DrawerLayout>
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal" >
<TextView
android:id="#+id/text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center|left"
android:padding="5dp"
android:text="Medium Text"
android:textColor="#FB9200" />
</LinearLayout>
drawer_item.xml:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="a" />
</RelativeLayout>
Probably you should change the gravity of items to:
android:gravity="center|center_vertical"