Background of a Navigation Drawer item - android

I want to set different background for every item in navigation drawer.
I want to achieve
Can Any one of you will explain how to that ?
My Activity_main.xml
<android.support.design.widget.NavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:menu="#menu/nav_menu"
android:fitsSystemWindows="true"
android:background="#android:color/black"
app:itemTextColor="#android:color/white"
android:layout_gravity="start"
app:headerLayout="#layout/navigation_header"
app:itemIconTint="#android:color/white"
app:itemBackground="#drawable/header_background"
/>

Create a custom navigationView layout and include the layout like below,
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="end"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main">
<include layout="#layout/custom_layout"></include>
</android.support.design.widget.NavigationView>
custom_layout.xml file
<?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.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
Now just shape a drawable like this,(change the colors as per your need)
btn_green_border.xml
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:color="#color/colorSkyBlue"
tools:targetApi="lollipop">
<item>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/colorAccent" />
<stroke
android:width="#dimen/_1dp"
android:color="#color/colorLightBlue"></stroke>
<corners android:radius="#dimen/_30dp"></corners>
<size
android:width="#dimen/_50dp"
android:height="#dimen/_100dp"></size>
</shape>
</item>
</ripple>
and use this drawable in the layout for your RecyclerView items like the following
item_row.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_card"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="#+id/btn_refer"
android:layout_width="200dp"
android:layout_height="#dimen/_40dp"
android:background="#drawable/btn_green_border"
android:text="Navigation Item Name"
android:textAllCaps="false"
android:textColor="#color/colorPrimary" />
</LinearLayout>
And you will achieve what you want.
Thank you

Related

How to hide Items on recyclerview scrollbar gradually

How I can hide Items on recyclerview scrollbar gradually
I want like this Image
Tool Bar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="55dp"
android:background="#color/posts_toolbar"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<com.salah250.forvo.Funcations.TextViewFont
android:id="#+id/txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/posts_title"
android:textColor="#color/posts_title"
android:textSize="18dp" />
</android.support.v7.widget.Toolbar>
Activity Posts
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#color/posts_main"
android:orientation="vertical"
tools:context=".Posts.PostsActivity">
<include layout="#layout/toolbar_posts" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_posts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never" />
</LinearLayout>
I looked before I could post here and I could not find any topics talking about it at all, I hope to get some ideas for doing that.
You can put gradient image in front of your RecyclerView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#color/posts_main"
android:orientation="vertical"
tools:context=".Posts.PostsActivity">
<include layout="#layout/toolbar_posts" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_posts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never" />
<ImageView
android:layout_width="match_parent"
android:layout_height="40dp"
android:src="#drawable/gradient"/>
<FrameLayout/>
</LinearLayout>
#drawable/gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="270"
android:endColor="#00FFFFFF"
android:startColor="#302e43" />
</shape>
Then also add empty view with height of gradient to the header of your RecyclerView so topmost item will be not faded

How to change drawer layout icon colours

I'm updating an existing project from a different developer in our company and am trying to set the colour of the icons to match the text (as you can see from the screenshot below). I've succeeded for the current selected item but not for the items that aren't selected. I cannot figure out why either of these do/don't work at the moment.
My layout
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/appbar_basic"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activity_home_content"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view"/>
</android.support.v4.widget.DrawerLayout>
My code
#Bind(R.id.drawer_layout)
DrawerLayout mDrawerLayout;
private void initDrawer() {
Menu m = mNavigationView.getMenu();
for (ModuleVO module : Modules.getActiveModules()) {
m.add(0, module.id, 1, module.textRef).setIcon(module.drawerIconRef);
}
}
I have already done some searching and tried a couple of things, including the answers listed here:
Changing text color of menu item in navigation drawer
How to style Menu Items in Navigation Drawer in Android?
Using app:itemIconTint doesn't work and neither does writing a selector. The only way I've been able to change the colours has been by changing these attributes in my themes.xml file.
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">#color/text</item>
<item name="android:textColorSecondary">#color/primary</item>
</style>
</resources>
I will be happy to provide more information/code if required to solve the issue!
I have also have that issue but I have found that solution may be it will work for you :-
<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:headerLayout="#layout/nav_header_home"
app:itemBackground="#android:color/transparent"
app:itemIconTint="#drawable/drawer_item"
app:itemTextColor="#drawable/drawer_item"
app:menu="#menu/activity_home_drawer" />
and drawer_item.xml:-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/colorPrimaryDark" android:state_checked="true" />
<item android:color="#000000" />
</selector>
nav_header_home.xml is:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="#dimen/nav_header_height"
android:background="#000"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:theme="#style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
app:srcCompat="#drawable/user"
tools:ignore="VectorDrawableCompat" />
<LinearLayout
android:id="#+id/llLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal">
<TextView
android:id="#+id/tvSignIn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:text="Sign In"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#fff"
android:textSize="16sp"
android:textStyle="bold" />
<View
android:layout_width="2dp"
android:layout_height="match_parent"
android:background="#fff" />
<TextView
android:id="#+id/tvJoin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:text="Join Free"
android:textColor="#fff"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
I found the answer! When looking over my layout file again I found <include layout="#layout/navigation_view"/> and when I applied a selector to navigation_view it worked! Below is my working code.
activity_home.xml
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
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">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/appbar_basic"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activity_home_content"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
<include layout="#layout/navigation_view"/>
</android.support.v4.widget.DrawerLayout>
navigation_view.xml
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemIconTint="#drawable/drawer_item"
app:itemTextColor="#drawable/drawer_item"
/>
</merge>
drawer_item.xml (Kudos to Abhinav Gupta for this part)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/primary" android:state_checked="true" />
<item android:color="#color/text" />
</selector>

Shadow Button using CardView has to be more

I need more shadow than the current situation. I've used a CardView, since I assumed this is the better way to add shadow instead of an XML in the drawable directory.
How it currently is:
How it should be:
My Code:
<android.support.v7.widget.CardView
android:id="#+id/filter_button_layout"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
card_view:cardElevation="16dp">
<LinearLayout
android:id="#+id/filter_linear_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView/>
<TextView/>
</LinearLayout>
</android.support.v7.widget.CardView>
You can achieve something like this by defining a custom shadow (drawable/shadow.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:angle="90"
android:endColor="#android:color/transparent"
android:startColor="#android:color/black"/>
</shape>
Using it like this:
<LinearLayout
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:orientation="vertical">
<View
android:layout_width="360dp"
android:layout_height="24dp"
android:background="#drawable/shadow"
/>
<View
android:layout_width="360dp"
android:layout_height="50dp"/>
</LinearLayout>
So the "shadowView" is on top of the View you want to have your shadow.

how to set top border for bottom navigation bar in android as shown in image

is it possible to set top border for bottom navigation bar in android, if possible tell me how we can do this, i am using the new bottom navigation view of android.
Here is my code
<?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">
<LinearLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<include
android:id="#+id/gamebar"
layout="#layout/gamebar_layout"
/>
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_layout" />
</LinearLayout>
<!-- Let's add fragment -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/app_bar_layout"
android:layout_above="#+id/bottom_navigation"
android:id="#+id/contentContainer"/>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
You can try this: add a View element above BottomNavigationView
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_above="#+id/bottom_navigation"
android:background="#000000"></View>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
Define a background drawable using XML:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/colorPrimaryDark" />
</shape>
</item>
<item android:top="1dp">
<shape android:shape="rectangle">
<solid android:color="#color/colorWhite" />
</shape>
</item>
</layer-list>
Use it as background with
android:background="#drawable/myBackgroundBottomDrawer"
You can add top border by creating a new LinearLayout with a View for top border and place android.support.design.widget.BottomNavigationView below top ber View.
Here is the working code. Just update your XML as 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">
<LinearLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<include
android:id="#+id/gamebar"
layout="#layout/gamebar_layout"/>
<include
android:id="#+id/toolbar"
layout="#layout/toolbar_layout" />
</LinearLayout>
<!-- Bottom Navigation Layout-->
<LinearLayout
android:id="#+id/layout_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true">
<!-- Top Border -->
<View
android:layout_width="match_parent"
android:layout_height="6dp"
android:background="#FF0000">
</View>
<!-- BottomNavigationView -->
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>
<!-- Let's add fragment -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/app_bar_layout"
android:layout_above="#id/layout_bottom_navigation"
android:id="#+id/contentContainer"/>
</RelativeLayout>
UPDATE: If you don't use View then you can add attribute android:layout_marginTop to android.support.design.widget.BottomNavigationView and set background color to android:background="#FF0000" to LinearLayout.
<!-- Bottom Navigation Layout-->
<LinearLayout
android:id="#+id/layout_bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:background="#FF0000">
<!-- BottomNavigationView -->
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_marginTop="6dp"
app:itemBackground="#color/BottomNavigationBgColor"
app:itemIconTint="#color/CelestialBlue"
app:itemTextColor="#color/CelestialBlue"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>
Hope this will help you~
Here is the fixed version of the latest answer's issue where the divider is slightly thin.
Define a background drawable using XML:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:gravity="top">
<shape android:shape="rectangle">
<size android:height="1.0dip" />
<solid android:color="#color/colorWhite" />
</shape>
</item>
</layer-list>
Use it as background with
android:background="#drawable/bottom_navigation_view_background"

How to add horizontal divider between action bar and layouts beneath it

How can I add a divider so that it appears underneath the action bar and above the master/detail panes? I've already defined the vertical divider but don't know how to define the horizontal divider also.
<LinearLayout 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:orientation="horizontal"
android:divider="#drawable/divider_vertical"
android:showDividers="middle"
android:baselineAligned="false"
tools:context=".MainActivity" >
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="#+id/master_container"/>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="3"
android:id="#+id/detail_container"/>
</LinearLayout>
divider_vertical.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
divider_horizontal.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:height="1dp"/>
<solid android:color="#FFFFFF"/>
</shape>
I do not see the code for the toolbar, so in my sense there should be a view below the toolbar as follows. I have used material design toolbar, you may use any toolbar.
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="0dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark">
</android.support.v7.widget.Toolbar>
<View android:layout_height="0dp"
android:layout_width="fill_parent"
android:id="#+id/stripBelowToolbar"/>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp"
android:theme="#style/Theme.Insider.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#color/black"
android:elevation="0dp"
android:theme="#style/ToolbarColoredBackArrow"
android:background="#color/background_tint"
app:popupTheme="#style/Theme.Insider.PopupOverlay" />
<View
android:background="#color/lighter_color"
android:layout_width="match_parent"
android:layout_height="2dp"
/>
</com.google.android.material.appbar.AppBarLayout>
This worked for me

Categories

Resources