Develop Reference

customize xml layout in android

I'm trying to make my search bar above my tabs but it appears behind it
This my xml file :
<?xml version="1.0" encoding="utf-8"?>
<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"
tools:context="com.cloud.services.drmzr.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.cloud.services.drmzr.MainActivity"
android:layout_above="#+id/topBar">
<include layout="#layout/user_search"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/topBar">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs"
android:background="#drawable/white_grey_border_bottom">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
</RelativeLayout>
<RelativeLayout
android:layout_below="#+id/topBar"
android:layout_above="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="120px"
android:id="#+id/bottomBar"
android:layout_alignParentBottom="true">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomNavView_Bar"
android:background="#drawable/white_grey_border_top"
app:menu="#menu/bottom_navigation_menu">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

Honestly, this is not the best layout. Very expensive to measure all relative layouts wrapped to each other. Your elements appear behind each other because you made your view in relative which is very similar to frame layout. I think a better way to do it in ConstraintLayout. But if you want to make it in relative do it like that.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
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"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/appBarLayout"
>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs"
android:background="#drawable/white_grey_border_bottom">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/user_search"
android:id="#+id/user_search"
android:layout_below="#+id/appBarLayout"
android:layout_height="20dp"
android:layout_width="match_parent"
/>
<android.support.v4.view.ViewPager
android:layout_below="#+id/user_search"
android:layout_above="#+id/bottomNavView_Bar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:id="#+id/container"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="120px"
android:id="#+id/bottomNavView_Bar"
android:background="#drawable/white_grey_border_top"
app:menu="#menu/bottom_navigation_menu"
android:layout_alignParentBottom="true">
</android.support.design.widget.BottomNavigationView>
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

place your search layout below tab layout
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.cloud.services.drmzr.MainActivity"
android:layout_below="#id/tab_layout">
<include layout="#layout/user_search"/>
</RelativeLayout>
check this line : android:layout_below="#id/tab_layout"

MaterialSearchView + Toolbar + Map

I'm trying to integrate a search toolbar with google maps.
This is the relevant part:
<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:label="MyApp"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.myapp.DrawerActivityMainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.AppBarOverlay">
</android.support.v7.widget.Toolbar>
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.miguelcatalan.materialsearchview.MaterialSearchView>
<include layout="#layout/activity_maps"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
</FrameLayout>
</LinearLayout>
And activity_maps.xml:
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.myapp.MapsActivity" />
The problem is the MaterialSearchView is showing bellow the map (i.e the map overlaps). How to integrate MaterialSearchView with Toolbar and Google map?

Use Relative Layout to setup view Below and bind it with the Frame Layout as you already doing. Also change root layout to Relative Layout instead of Linear Layout.
Like
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:label="MyApp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frameOne"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.AppBarOverlay" />
<com.miguelcatalan.materialsearchview.MaterialSearchView
android:id="#+id/search_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</FrameLayout>
<include
layout="#layout/activity_maps"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/frameOne"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
</RelativeLayout>
You can view the output below as well it seems to be fix with this.

FrameLayout partially gets out of the screen from below in CoordinateLayout

I am new to CoordinateLayout. I want my appBar to hide when listView in FrameLayout scroll up and show again when listView scroll down. But there is two problems.
1" FrameLayout getting out of the screen partially from below.
2" AppBar is not scrolling with listView.
In this below image the blue border is FrameLayout and it is out of screen from below.
Below is activity_main.xml;
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#f9f8f8">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:paddingRight="16dp"
android:paddingLeft="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
And below is fragment_main_list.xml to which I am populating in FrameLayout of activity_main.xml;
<FrameLayout 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"
tools:context="com.example.nishant.veuz.FragmentMainList">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/main_progress_bar"
android:layout_gravity="center"
android:visibility="gone"/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/list_view_main"
android:dividerHeight="16dp"
android:divider="#null"/>
</FrameLayout>

Try to change your Parent Layout from CoordinatorLayout into LinearLayout, like so
...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="#f9f8f8"
android:fitsSystemWindows="true">
...
from your NestedScrollView try to enclose it with;
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<!-- MAIN CONTENT-->
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/container"
android:paddingRight="16dp"
android:paddingLeft="16dp" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

CardView doesn't comes as Overlapping content

Followed this link Overlap scrolling view with AppBarLayout but overlapping doesn't seems to work well.Here i'm attaching my layout files with the output that i got.
activity_main.xml
<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_overlapTop="64dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:elevation="5dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="#+id/days_list_5"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
custom_layout.xml
<?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="wrap_content"
android:background="#android:color/white"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:id="#+id/cardNews"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorAccent"
android:layout_margin="16dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/lblNewsTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/colorAccent"
android:textSize="16dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
Please have a look and give me your suggestion where i'm wrong.

By removing android:background="#android:color/white" from my custom layout and changing the CollapsingToolBar as app:layout_scrollFlags="scroll|enterAlwaysCollapsed",I resolved the issue.

how to hide toolbar in layout having framelayout, fragment drawer layout in activity and scrollview in corresponding fragment

This is my activity xml. Nothing is happening when scrolling.I need the toolbar to disappear when user starts scrolling and make it appear when scrolls to top.
<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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/post_ad_bg"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<include
layout="#layout/toolbar_homepage"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<com.abc.customviews.CustomDrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<fragment
android:id="#+id/navigation_drawer"
android:name="com.fragments.SideMenuFragment"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start" />
</com.abc.customviews.CustomDrawerLayout>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
And this is my fragment xml where I am having a scrollview. I tried replacing with Nestedscrollview and still its not working. Any help appreciated.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/scrollView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/parentLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/rlProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_transparent_50"
android:visibility="gone">
<ProgressBar
android:layout_width="#dimen/dimen_100_dp"
android:layout_height="#dimen/dimen_100_dp"
android:layout_centerInParent="true"
android:indeterminateDrawable="#drawable/custom_progress_background" />
</RelativeLayout>
</RelativeLayout>

<?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"
xmlns:tools="http://schemas.android.com/tools"
android:gravity="center"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="match_parent"
tools:context=".DashboardActivity">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#E4171212"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#id/appbar" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_gravity="bottom"
android:id="#+id/navigation"
app:labelVisibilityMode="labeled"
android:background="?android:attr/windowBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="#menu/menu_nav"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</RelativeLayout>

Add app:layout_behavior="#string/appbar_scrolling_view_behavior" to your FrameLayout like this
<FrameLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>