Develop Reference

How to implement Navigation Drawer in my activity?

I am writing a simple coupon application, but I am struggling to implement a navigation drawer in my activity.
I have a toolbar with a tabbed navigation. I'd like to have a "hamburger" style button in my toolbar which will allow me to open my navigation drawer. I have no clue how to implement this.
I'd be extremely happy if someone helped me!
Photo of my layout in Android Studio:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".activities.MainActivity" android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorSecondaryDark"
android:minHeight="?attr/actionBarSize"
android:theme="?attr/actionBarTheme"
app:title="Makdolan Native"
app:titleTextColor="#android:color/white" />
<com.google.android.material.tabs.TabLayout
android:layout_width="match_parent"
android:layout_height="match_parent" android:id="#+id/tabLayout"
android:background="#color/colorSecondaryDark"
app:tabTextColor="#android:color/white" app:tabIndicatorColor="#android:color/white"
app:tabMode="scrollable"/>
<androidx.viewpager.widget.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent" android:id="#+id/viewPager"
android:background="#color/colorPrimary"/>
</LinearLayout>

First create a toolbar_layout.xml file
As an example:
<?xml version="1.0" encoding="utf-8"?>
<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="?attr/actionBarSize"
android:background="#color/dark_gray">
<ImageButton
android:layout_width="50dp"
android:layout_height="match_parent"
android:src="#drawable/ic_menu"
android:layout_marginStart="10dp"
android:id="#+id/menubutton_toolbar"
android:background="#color/transparent"
tools:ignore="ContentDescription"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textAlignment="center"
android:gravity="center"
android:padding="14dp"
android:src="#drawable/logo" tools:ignore="ContentDescription"/>
</RelativeLayout>
Add the lines below to your onCreate method in your activity:
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM)
getSupportActionBar().setDisplayShowCustomEnabled(true)
getSupportActionBar().setCustomView(R.layout.toolbar_layout)
val view = getSupportActionBar().getCustomView()
To implement a touch listener to your toolbar you can simply call
var back = view.menubutton_toolbar as ImageButton;
back.setOnClickListener {
//Open Drawer
drawer?.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNDEFINED)
if(drawer?.getDrawerLockMode(Gravity.LEFT) != DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {
drawer?.openDrawer(Gravity.LEFT)
}
}
UPDATE
First of all we need a drawer layout like following:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="300dp"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/white"
android:orientation="vertical">
<TextView
android:id="#+id/user_name_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="5dp"
android:layout_marginEnd="0dp"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
Then init the drawer in your MainActivity:
var drawer = findViewById(R.id.drawer_layout) as DrawerLayout
var toggle : ActionBarDrawerToggle = ActionBarDrawerToggle(this,drawer, R.string.srn_drawer_open, R.string.srn_drawer_close)
drawer?.addDrawerListener(toggle)
I hope this will help you ^^

Android scrolling toolbar with other combined views

In my android application I have Toolbar with SlidingLayer which that is simple library and extends from FrameLayout to make sliding on application. now when I try to use toolbar with this view I have to make it into FrameLayout, with this action scrolling my toolbar is not working.
I moved app:layout_scrollFlags="scroll|enterAlways" from <android.support.v7.widget.Toolbar to FrameLayout but scrolling it doesn't work again. for example my view with toolbar is:
Now how can I use app:layout_scrollFlags="scroll|enterAlways" and scrolling toolbar with this view?
My xml layout is:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:slidingLayer="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer
android:id="#+id/sliderTabPages"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="56dp"
android:layout_marginRight="8dp"
android:elevation="5dp"
app:offsetDistance="30dp"
app:slidingEnabled="true"
app:stickTo="top"
slidingLayer:changeStateOnTap="true">
</com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar.Light">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
/>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</FrameLayout>

try this out:
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:slidingLayer="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Can use any layout for your content important thing is app:layout_behavior="#string/appbar_scrolling_view_behavior"-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<com.test.sample.Core.Libraries.SlidingLayer.SlidingLayer
android:id="#+id/sliderTabPages"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="56dp"
android:layout_marginRight="8dp"
android:elevation="5dp"
app:offsetDistance="30dp"
app:slidingEnabled="true"
app:stickTo="top"
slidingLayer:changeStateOnTap="true" />
<!--Other content-->
<!--Note that this content has to have scrollable view like RecyclerView-->
<!--Example-->
<RecyclerView
android:id="#+id/yoursScrollableView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Collapsing toolbar-->
<!--You can put any kind of view for scrolling important thing is app:layout_scrollFlags="scroll|enterAlways"-->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarThatGoingToScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
app:contentInsetStartWithNavigation="0dp"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar.Light" />
</com.google.android.material.appbar.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</layout>

Adding a border below Toolbar android

I'm trying to add a border that would look like this:
https://imgur.com/a/r8rHGQl
My toolbar.xml:
<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_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"
>
</android.support.v7.widget.Toolbar>
In my java code I do :
toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
and inflating the menu.
If I try to nest the toolbar in relative/linear/constrains layout and add a View at the bottom I get the "android.widget.LinearLayout cannot be cast to android.support.v7.widget.Toolbar" error
Also tried to <include a layout with a View inside of it, but then the line appears in the middle of my toolbar and my title disappears.
Also including my menu.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/item1"
android:icon="#drawable/main_btn_info"
android:title="Item 1"
app:showAsAction="always"/>
</menu>

Create toolbar inside Linear Layout with a view
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
app:theme="#style/AppTheme"
app:titleTextAppearance="#style/TitleText"
app:titleTextColor="#color/colorPrimaryText"/>
<View
android:background="your border color"
android:layout_width="match_parent"
android:layout_height="2dp" />
</LinearLayout>
Include this in all your layouts.
Then find toolbar in activity using toolbar id instead of xml name
toolbar = findViewById(R.id.toolbar_main);
setSupportActionBar(toolbar);

I used this method:
<LinearLayout 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:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Setting"
app:titleTextColor="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="1dp"
android:layout_marginBottom="1dp"
android:background="#DDD" />
</LinearLayout>

Made another layout with the border and included it in every activity, I know it's not the best way to do it, but result is the same for now.

Try using the elevation parameter
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
app:title="Log In"
android:elevation="5dp"
app:titleTextColor="#000000" />
android:elevation="5dp"
This gives you out an basic elevation border bottom shadow for Toolbar

Adding items and design on toolbar toolbar

How to add the different type of designs and color to a toolbar and showing the value(value depends on user points) on toolbar gets updated whenever the user goes to another activity.

You can take RelativeLayout inside Toolbar and customize it according to your requirement. Here is sample Code.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout 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="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorPrimary"
app:navigationIcon="#mipmap/ic_launcher_round"
app:titleTextColor="#android:color/white">
<RelativeLayout
android:id="#+id/rl_plane_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="visible">
<ImageView
android:id="#+id/tv_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:gravity="center_vertical"
android:src="#mipmap/ic_launcher_round"
android:text="Submit" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

Unable to show toolbar while using databinding in Android

I am trying to show toolbar along with the menu items in an activity. This works fine until I add databinding to the xml. I can not use setSupportActionBar(toolbar) at all after that. Here is my xml file activity_single_product.xml
<?xml version="1.0" encoding="utf-8"?>
<layout>
<data>
<variable name="product"
type="com.sales.models.ProductModel"/>
<variable name="glide" type="com.bumptech.glide.Glide" />
</data>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_view_single_product"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sales.SingleProductActivity"
android:background="#color/colorPrimary">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/tool"
layout="#layout/toolbar" />
<include
android:id="#+id/search_layout"
layout="#layout/search_layout" />
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="#drawable/drop_shadow_toolbar" />
</LinearLayout> <!-- Toolbar & Search bar-->
</RelativeLayout>
</layout>
The Activity :
private void initViews() {
binding = DataBindingUtil.setContentView(this, R.layout.activity_single_product); // ActivitySingleProductBinding
setSupportActionBar(binding.tool.toolbar);
binding.setProduct(product);
}
I have followed stackoverflow answer. This didn't help. Can anyone suggest?

I have found and fixed the problem. The problem was in toolbar layout. I included
<include
android:id="#+id/tool"
layout="#layout/toolbar" />
and the toolbar layout was
<android.support.v7.widget.Toolbar
xmlns:local="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_marginTop="25dp"
android:background="#null"
android:titleTextColor="#color/lightGrey2"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"/>
The problem was , I did not include proper tag to wrap the toolbar. Later I changed it and the new toolbar layout is
<layout
xmlns:local="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/tools">
<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="wrap_content"
android:minHeight="?attr/actionBarSize"
android:layout_marginTop="25dp"
android:background="#null"
android:titleTextColor="#color/lightGrey2"
local:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
local:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:contentInsetLeft="10dp"
android:contentInsetRight="10dp"
android:contentInsetStart="10dp"
android:padding="0dp"
app:contentInsetLeft="10dp"
app:contentInsetRight="10dp"
app:contentInsetStart="10dp"/></layout>
This solved the issue.