I've created a menu with a width of 150dp. The toolbar does not match the width of the app. so that the area under the navbar icon is unfilled.
Current toolbar
What I want
custom_toolbar.xml
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="150dp"
android:id="#+id/mytoolbar"
android:background="#color/colorPrimaryDark">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- text -->
<LinearLayout
android:id="#+id/dates"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This text is underneath"
android:textColor="#color/white"
android:textSize="40sp" />
</LinearLayout>
</RelativeLayout>
</Toolbar>
activity_main.xml
<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_id"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:elevation="1dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/Theme.AppCompat.Light" />
<!-- Container for the rest of the screen - Below the Toolbar -->
<FrameLayout
android:id="#+id/framelayout_id"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<!-- Container for contents of drawer - use NavigationView to make configuration easier -->
<com.google.android.material.navigation.NavigationView
android:id="#+id/navid"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:visibility="gone"
app:headerLayout="#layout/nav_header_layout"
app:menu="#menu/nav_drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
Questions
Why is the toolbar not filling the whole area? How can I fix this?
Can I use something other than a fixed 150dp size to set the height of the navbar? (such as a percentage)
Can I use something other than a fixed 150dp size to set the height of
the navbar? (such as a percentage)
for this i use
android:layout_height="?attr/actionBarSize"
Is this what you're trying to achieve?
<LinearLayout
android:id="#+id/dates"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:orientation="vertical"
>
<Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="150dp"
android:backgroundTint="#color/colorGreen2"
android:id="#+id/mytoolbar"
android:background="#color/colorPrimaryDark">
</Toolbar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="This text is underneath"
android:textColor="#color/colorBlack"
android:textSize="40sp" />
</LinearLayout>
Related
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:
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);
I am currently working on an application to help manage bills. I have an activity that list the bills. I am trying to put a spinner between a list of bills and the title at the top. Is there a way to put the spinner so that it is at the top of the listView but below the app bar.?
This is what the app looks like:
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<TextView
android:id="#+id/dateRangeView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/date_range"
android:textColor="#android:color/background_light"
android:textSize="24sp"
android:textStyle="bold"
tools:textAlignment="center"
tools:textColor="#android:color/white" />
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBarBillList"
android:progressDrawable="#drawable/circular_progress_bar"
android:layout_gravity="center" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_anchor="#+id/app_bar"
android:id="#+id/bill_dates"
app:layout_anchorGravity="bottom|center">
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginHorizontal="16dp"
android:background="#android:color/background_light"
android:entries="#array/date_arrays"
android:prompt="#string/bill_date_prompt"
android:spinnerMode="dialog"
app:layout_anchor="#+id/listBillView"
app:layout_anchorGravity="top|right" />
</LinearLayout>
<include layout="#layout/content_bill_list" app:layout_anchor="#+id/bill_dates" />
</android.support.design.widget.CoordinatorLayout>
content_bill_list.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.yourdirectlink.ydlcms.BillListActivity"
tools:showIn="#layout/activity_bill_list">
<ListView
android:id="#+id/listBillView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" >
</ListView>
</android.support.v4.widget.NestedScrollView>
DISMISS THIS
As suggested in the comments why not use a LinearLayout with vertical orientation and put the spinner as the first child with height wrap_content and then below it the listview with height 0dp and layout_weight set to 1
NEW PROPOSAL
Take a look a this layout. I already tried at a test app:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#id/toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"/>
<!--app:popupTheme="#style/AppTheme.PopupOverlay" />-->
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/dateRangeView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/date_range"
android:textColor="#android:color/background_light"
android:textSize="24sp"
android:textStyle="bold"
tools:textAlignment="center"
tools:textColor="#android:color/white" />
<Spinner
android:id="#+id/spinner"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginHorizontal="16dp"
android:background="#android:color/background_light"
android:entries="#array/date_arrays"
android:prompt="#string/bill_date_prompt"
android:spinnerMode="dialog"
app:layout_anchor="#+id/listBillView"
app:layout_anchorGravity="top|right" />
<ProgressBar
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/progressBarBillList"
android:layout_gravity="center" />
<include
layout="#layout/content_bill_list"
app:layout_anchor="#+id/bill_dates"/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I have to comment the popup theme because I don't have it.
Also you need to use a theme with .NoActionBar because you're suppling the action bar and on the Activity containing this layout you need to call:
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Was it what you're looking for?
I want to replicate the Navigation Drawer similar to that of the LinkedIn App below:
Note that the message, notification, and the settings buttons at the top are persistent and are not part of the scrollable list.
I've followed the official Android tutorial for Navigation Drawer as well as numerous other tutorials that simply do not provide additional light into how I can achieve this.
The best I could think of was to add 3 ImageButtons to the header layout of the Navigation Drawer template in Android Studio 2.1.1.
EDIT: As per Prat's and a few others advice, I've included an additional header layout just before the drawer that contains the 3 buttons, but no matter the z-ordering of the layouts within the xml, it seems to hide behind the drawer. See image illustration below:
Below are the layout files:
header.xml (contains the 3 buttons)
<?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:gravity="right"
android:background="#111">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
nav_header_main.xml (default generated header)
<?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:gravity="right"
android:background="#111">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
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="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#fff">
<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="false"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
<include
android:id="#+id/header"
layout="#layout/header"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:layout_alignParentTop="true" />
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
Try to do like this :
header.xml(top most layout where you have 3 images)
<?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">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageButton
android:id="#+id/imageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
<ImageButton
android:id="#+id/imageButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:src="#drawable/ic_menu_manage" />
</LinearLayout>
</LinearLayout>
nav_header_main( default android header)
<?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="#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="Android Studio"
android:textAppearance="#style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="android.studio#android.com" />
</LinearLayout>
then finally the main layout showing
header(top)
nav_main_header
listview
<!-- The main content view -->
<FrameLayout
android:id="#+id/flFragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<RelativeLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#111">
<include android:id="#+id/header"
layout="#layout/header"
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:layout_height="100dp"/>
<include android:id="#+id/header2"
layout="#layout/nav_header_main"
android:layout_width="fill_parent"
android:layout_below="#id/header"
android:layout_height="100dp"/>
<ListView
android:id="#+id/lvDrawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:layout_below="#id/header2"
android:divider="#android:color/transparent"
android:dividerHeight="0dp" />
</RelativeLayout>
Use recyclerview with adapter for this. You can implement any structure of custom views for items.
I have implemented an activity with two slides, the slides content is a fragment with RecyclerView that loads data from my server and creates a GridLayout with images (like in image gallery).
I have added the behavior of scrolling so when you scroll you don't see the toolbar.
My problem is that when the activity starts with the fragment the toolbar is half hidden and when i continue to scroll down and the toolbar is completely hidden the CoordinatorLayout from under is exposed so i get this thing:
as you can see the light green is the CoordinatorLayout and the red is the ViewPager and what i want to achieve is that when you scroll more you will only see the red background and never the green one.
My activity_main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/backgroundGray"
android:fitsSystemWindows="true">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="#color/appGreen"
app:layout_scrollFlags="scroll|enterAlways">
<com.apps.haver.getout.libs.view.CustomTextView
android:id="#+id/actionBarTitleText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:ellipsize="end"
android:maxLines="1"
android:text="Get Out"
android:textColor="#color/white"
android:textSize="50sp"
app:fontName="Peterbuilt.ttf" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#565654"
android:orientation="vertical"
android:scrollbars="none">
<com.apps.haver.getout.libs.slider.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="#dimen/normal_row"
android:background="#color/appGreen"
android:elevation="2dp" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#e90f0f" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
And my fragment.xml
<FrameLayout 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="com.apps.haver.getout.FriendsFragment">
<com.apps.haver.getout.libs.view.AutofitRecyclerView
android:id="#+id/rvPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:columnWidth="102dp"
android:fitsSystemWindows="true"
android:scrollbars="vertical" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pressToRetryPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:visibility="gone">
<TextView
android:id="#+id/textPressToRetry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="#string/press_to_retry"
android:textColor="#color/black"
android:textSize="16sp" />
</RelativeLayout>
<include
android:id="#+id/loadingPanel"
layout="#layout/loading_template"
android:layout_width="match_parent"
android:layout_height="match_parent" />
How can I make the toolbar to hide when I am scrolling but still see the RecyclerView content on my entire screen?
Thanks...