Develop Reference

OneUi styled navigation in android java

I'm beginner in android programming and I want to know how to make an OneUi styled navigation like in this picture.
This is what I made so far. Unfortunately, when I scroll it, it will totally collapse and I cannot get it back.
I used CoordinatorLayout with AppBarLayout and I follow some code from material.io guidelines but it did'nt work as I expected. I want the app bar to be short when scrolled and tall when it is on the top.
Here is my XML Layout Code:
<androidx.coordinatorlayout.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:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginStart="72dp"
app:expandedTitleMarginBottom="28dp"
app:layout_scrollFlags="scroll|snap">
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:contentInsetStart="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is a text"
android:textSize="50dp"
/>
</RelativeLayout>
</com.google.android.material.appbar.MaterialToolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
</androidx.cardview.widget.CardView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

For your use case. There are few things you need to change.
Put the content below AppBarLayout in NestedScrollView to have scrolling layout_behavior.
Put some content to mimic scrolling effect. Like textview with huge height for example.
Put the content you want to collapse into one CollapsingToolbarLayout basically things to show when it's tall or not collapsed.
Put your MaterialToolbar as a direct child of AppBarLayout
Example code:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F0F0F0"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleMarginBottom="28dp"
app:expandedTitleMarginStart="72dp"
app:layout_scrollFlags="scroll|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="This is collapsing content"
android:textSize="32sp" />
</RelativeLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:title="This is MaterialToolbar" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false">
<TextView
android:layout_width="match_parent"
android:layout_height="800dp"
android:text="Hello Test" />
</androidx.cardview.widget.CardView>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Output:
Not collapsed:
Collapsed:

How to center button in toolbar Android

I am new to android app development. I am trying to create a toolbar that has 3 buttons on it, left middle and center. My left are right buttons are positioned correctly but my middle button displays in the middle of the page instead of middle of the tool bar. Wondering if anyone can help with this. Thanks
Also wondering if anyone can help with the white space above the tool bar
activity_main:
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
>
<include
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<include
android:id="#+id/toolbar"
layout="#layout/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Menu" />
<Button
android:id="#+id/add_new_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:text="Add New" />
<Button
android:id="#+id/home_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
<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:background="#141619"
android:fitsSystemWindows="true"
app:itemIconTint="#141619"
app:itemTextColor="#FFFFFF"
app:menu="#menu/activity_main_drawer" >
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
app_bar_main:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.MPL.AppBarOverlay">
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/content_main" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
toolbarlayout:
<androidx.appcompat.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="?attr/actionBarSize"
android:background="#141619"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>

I have fixed issue with all of your layouts.
for your activity_main.xml copy and paste below layout.
<?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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/app_bar_main"
layout="#layout/app_bar_main" />
</RelativeLayout>
<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:background="#141619"
android:fitsSystemWindows="true"
app:itemIconTint="#141619"
app:itemTextColor="#FFFFFF">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
change you app_bar_main to following
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#282941"
android:fitsSystemWindows="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:minHeight="?attr/actionBarSize">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingEnd="16dp">
<Button
android:id="#+id/menu_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="Menu" />
<Button
android:id="#+id/add_new_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerInParent="true"
android:text="Add New" />
<Button
android:id="#+id/home_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="Home" />
</RelativeLayout>
</androidx.appcompat.widget.Toolbar>
That's it, you don't have to create any other layout. Now wherever you want to have this toolbar you can include your app_bar_main.xml in the layout and you will get the toolbar. Then in your activity if you want to access toolbar and button inside toolbar, do like this:
Toolbar toolbar = findViewById(R.id.account_toolbar);
setSupportActionBar(toolbar);
Button btnEdit = toolbar.findViewById(R.id.menu_button);
let me know if you have any questions. I'll try to help you out.

I don't know if what you are trying to do is a good idea.
From a design perspective, you have only a limited space in the toolbar and you should position there only the most relevant actions to the context, all the other actions are going to be hiden in the classic "three dots" menu.
You can check what I mean here https://developer.android.com/training/appbar/actions
https://material.io/components/app-bars-top#anatomy
Even thouth, to achieve what you are trying to do, I'll do it using Constraint Layout instead of Relative Layout, makes your life easier and is up to date ;) https://developer.android.com/training/constraint-layout

First, create title_menu.xml Layout. make sure android:layout_height="wrap_content" and android:gravity="center"
<?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:gravity="center">
<Button
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Button"/>
</LinearLayout>
Second, add the following code on the onCreate method in your Activity.
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(R.layout.title_menu);

Hide SearchView in Fragment

I want to hide my Searchview when I scroll in my Fragment. I use a RecyclerView to retrieve my item and scroll them.
My fragment are actually like that:
When I scroll I want it to hide and then when I return to the top, I want it to show.
This is the xml of my Fragment:
<?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:orientation="vertical"
tools:context=".stock.StockFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.SearchView
android:id="#+id/search_view"
android:layout_width="341dp"
android:layout_height="34dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/search_layout"
android:gravity="center"
app:iconifiedByDefault="false"
app:queryHint="Cerca Articolo">
</androidx.appcompat.widget.SearchView>
</LinearLayout>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycleViewStock"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>
I tried to put it inside the Recycler but doesn't work, help please!

you can use NestedScrollView for scrolling all items.
<?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:orientation="vertical"
tools:context=".stock.StockFragment">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="wrap_content">
<androidx.appcompat.widget.SearchView
android:id="#+id/search_view"
android:layout_width="341dp"
android:layout_height="34dp"
android:layout_marginLeft="40dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"
android:background="#drawable/search_layout"
android:gravity="center"
app:iconifiedByDefault="false"
app:queryHint="Cerca Articolo">
</androidx.appcompat.widget.SearchView>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycleViewStock"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="5dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</LinearLayout>
After that set recyclerView.setNestedScrollingEnabled(false); in java for proper scrolling.

How to make ListView resizable?

Picture 1
Picture 2
How to make ListView resizable?
This ListView is OK.
OK ListView 1 Picture
OK ListView 2 Picture
I have tried all the layouts. That doesn't help.
I have a fragment container:
<?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:background="#color/yellow"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/fragmentsContainer"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:menu="#menu/menu"
android:id="#+id/bottomNavigation"
android:layout_alignParentBottom="true" />
</RelativeLayout>
OK Layout is Search Layout:
<?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:background="#color/yellow"
android:id="#+id/searchAndListViewContainer"
android:orientation="vertical">
<SearchView
android:id="#+id/searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorOfSearchView" />
<ListView
android:id="#+id/downloadedMusicListView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
unadabtable Layout :
<?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:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/darkGreen">
<ListView
android:id="#+id/musicListView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
</LinearLayout>
As you see Java Code will change Fragments container's inner content.
Two fragments are almost identical.
What's the problem?

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<ListView
android:id="#+id/lv"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/tv_footer"
android:layout_below="#+id/tv_header" />
<TextView
android:id="#+id/tv_footer"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#ff0000"
android:gravity="center"
android:text="Footer" />
<TextView
android:id="#+id/tv_header"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#00ff00"
android:gravity="center"
android:orientation="vertical"
android:text="Header" />
</RelativeLayout>
you can do that in multiple ways. here you can set your own view as header and footer.

ListView overlaps Application Bar - Android

my ListView go on the application bar at the edge of the page, i probably have problem in layout file.
(i've used the default android studio activity which contain navigation drawer, application bar,...)
I've used a frameLayout to use it as parent to sub-activity and show the navigation drawer in all sub-activity.
nav_header_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="#dimen/nav_header_height"
android:background="#drawable/side_nav_bar"
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"
android:src="#android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="#dimen/nav_header_vertical_spacing"
android:text="MoviesInformer"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="testing" />
content_main.xml
<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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".Activity.MainActivity"
tools:showIn="#layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Movieys Informer" />
</RelativeLayout>
app_bar_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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".Activity.MainActivity">
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--<include layout="#layout/content_main" />-->
</android.support.design.widget.CoordinatorLayout>
activity_main.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:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!--<FrameLayout-->
<!--android:id="#+id/content_frame"-->
<!--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:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
cinema_activity.xml (which is used in the sub-activity)
<?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="wrap_content">
<ListView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textAlignment="center"
android:clickable="true"
android:id="#+id/lwCinema"
/>
</LinearLayout>
can somebody please help me?
Repeat:
The listView in the sub-activity go on the top of the application bar (i think it's called) but it's still clickable. I need to put it below the app bar.

Instead of using marginTop="?android:attr/actionBarSize", the right way is to add app:layout_behavior attribute to your FrameLayout. This attribute make your frame layout always positioned below toolbar.
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
And don't forget to add xmlns:app="http://schemas.android.com/apk/res-auto" tag to root of your layout.

Just modify
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
to
<FrameLayout
android:id="#+id/content_frame"
android:layout_marginTop="?android:attr/actionBarSize"
android:layout_width="match_parent"
android:layout_height="match_parent" />