I am trying to create a screen with coordinator layout that includes:
Toolbar
Fragment, which will be replaced for every page using navigation API
Bottom App bar
However, I am struggling with positioning views in a way so the app's bottom bar doesn't overlap what in the fragment.
Any chance you could help me out with this, please? From what I can tell, the only way is to add a margin at the bottom but this may not be consistent across devices.
To illustrate, this list has a total of 25 items but the last two are overlapped by the app's bottom bar.
activity 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:id="#+id/app_bar_layout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay"
android:animateLayoutChanges="true"
android:layout_above="#id/include">
<androidx.appcompat.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"/>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.tabs.TabItem
android:text="Test 1"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<com.google.android.material.tabs.TabItem
android:text="Test 2"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</com.google.android.material.tabs.TabLayout>
</com.google.android.material.appbar.AppBarLayout>
<include
layout="#layout/content_main"
android:id="#+id/include"/>
<com.google.android.material.bottomappbar.BottomAppBar
android:id="#+id/bar"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchorGravity="right|top"
app:layout_anchor="#+id/bar"
android:src="#drawable/ic_add_black_24dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
content main xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:showIn="#layout/activity_main"
tools:context=".MainActivity">
<fragment
android:layout_width="411dp"
android:layout_height="627dp"
android:name="com.example.fitnessfatality.startScreen.StartFragment"
android:id="#+id/fragment"
/>
</FrameLayout>
Use these 3 properties to position each other
android:layout_gravity=""
app:layout_anchorGravity=""
app:layout_anchor="#id/xxxx"
Also here is an complete xml that can help you
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".home.HomeFragment">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:id="#+id/app_barlayout"
android:theme="#style/AppTheme.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collaps_toolabar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:expandedTitleTextAppearance="#style/CollapsingToolbarLayoutExpandedTextStyle">
<LinearLayout
android:id="#+id/layout_currentMatch_item"
android:layout_width="match_parent"
android:layout_height="160dp"
android:orientation="vertical">
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_anchorGravity="bottom"
app:layout_anchor="#id/app_barlayout"
android:orientation="horizontal" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
You can use LinearLayout inside CoordinatorLayout to arrange your views if it fits your needs or ConstraintLayout
I hope that the basis of the decision is clear. Take a look at this example:
<?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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
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>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/content_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<LinearLayout
android:id="#+id/bar"
android:orientation="vertical"
android:layout_weight="0"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="100dp"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
Related
so I can't figure out how to align my bottom navigation in a LinearLayout under a RecyclerView. The items are RecyclerView:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".CategoryActivity">
<android.support.design.widget.AppBarLayout
android:theme="#style/AppTheme.AppBarOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_category"
android:layout_margin="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:attr/windowBackground"
android:layout_alignParentBottom="true"
app:menu="#menu/bottom_nav_menu"/>
</LinearLayout>
The navigation should be always at the bottom.
Okay, here is your layout, it should work as you expected
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_category"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/nav_view"
android:layout_below="#+id/appbar"
android:layout_margin="8dp"
android:orientation="vertical" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="#menu/menu_navigation" />
</RelativeLayout>
Not sure but try adding this:
android:layout_gravity="bottom"
If you don't want to change to RelativeLayout, set this attribute to the RecyclerView:
android:layout_weight="1"
This way the RecyclerView will take all the available space pushing the BottomNavigationView to the bottom.
You Can't adjust your BottomNavigationView properly inside LinearLayout. If there are so many items in your RecyclerView then BottomNavigationView will be hidden at the bottom. So you must use RelativeLayout to align it at the bottom and other layouts above of BottomNavigationView. Please check the bellow modified layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_category"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/nav_view"
android:layout_below="#+id/appbar"
android:layout_margin="8dp"
android:orientation="vertical" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="#menu/menu_navigation" />
</RelativeLayout>
I have a main activity:
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
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="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include layout="#layout/toolbar" />
</com.google.android.material.appbar.AppBarLayout>
<FrameLayout
android:id="#+id/frameInicio"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/adView"
android:layout_alignParentStart="true"
android:layout_marginTop="?android:attr/actionBarSize"
android:orientation="horizontal" />
<com.google.android.gms.ads.AdView xmlns:ads="http://schemas.android.com/apk/res-auto"
android:id="#+id/adView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/navigation"
android:layout_centerInParent="true"
android:layout_gravity="center"
android:gravity="center"
android:visibility="visible"
ads:adSize="SMART_BANNER"
ads:adUnitId="example" />
<com.ittianyu.bottomnavigationviewex.BottomNavigationViewEx
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="?android:attr/windowBackground"
app:menu="#menu/bottom_navigation" />
</RelativeLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
In FrameLayout "frameInicio" I load a fragment with this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipeApuestas"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerApuestas"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</RelativeLayout>
I want when scroll in RecyclerView in Fragment, Toolbar of main_activity_layout, hides. How can I do?
I tried with recycler in the same activity, but i don't wanna do this, I want with diferent fragment, because I have a bottom navigation to control diferent fragment.
Thank you so much.
I have just faced your problem but the only difference is I'm scrolling within listview. Anyway I think that solution can be applied on your recyclerview too.
first this is how your fragment.xml should look like
<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">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="enterAlways|scroll|snap">
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="#+id/swipeApuestas"
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerApuestas"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout> </androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
don't forget to initialize the toolbar within the fragment
Try this:
<?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:gravity="center"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DashboardActivity">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar_main"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
/>
<FrameLayout android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<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>
For your Main Activity (not fragment)
I have the following Xml code where I want to display the content of a fragment into FrameLayount but I don't know how to keep my button always on bottom.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_lista_preguntas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ingenierovagabundo.encuestafacil.GUI.ListaPreguntasActivity">
<!-- Toolbar -->
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar_nueva_pregunta"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/contenedor_Pregunta"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</FrameLayout>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:text="#string/npa_button_guardar"/>
you can use RelativeLayout insted of LinearLayout as below:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_lista_preguntas"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.ingenierovagabundo.encuestafacil.GUI.ListaPreguntasActivity">
<!-- Toolbar -->
<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/appbar_nueva_pregunta"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="#+id/contenedor_Pregunta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btn"
android:layout_below="#+id/appbar_nueva_pregunta">
</FrameLayout>
<Button
android:id="#+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="false"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:text="#string/npa_button_guardar" />
You could add android:layout_weight="1" to your FrameLayout. This will expand the FrameLayout to fill any remaining space in the parent view. Which should result the Button to be at the bottom.
So your resulting FrameLayout will be,
<FrameLayout
android:id="#+id/contenedor_Pregunta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
For more on layout_weight follow the link
https://developer.android.com/guide/topics/ui/layout/linear.html#Weight
You use a LinearLayout as container, then the elements follow each other.
If you want to keep your button always on bottom, use a RelativeLayout with
android:layout_alignParentBottom="true".
You also need to close your container! ;)
Use this Code in activity_main.xml
<?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"
android:fitsSystemWindows="true">
<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>
<include layout="#layout/content_main" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/colorOrange"
app:srcCompat="#android:drawable/ic_menu_share"
tools:ignore="VectorDrawableCompat" />
</android.support.design.widget.CoordinatorLayout>
And in content_main.xml, use this Code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:showIn="#layout/app_bar_main">
<FrameLayout
android:id="#+id/frame_container"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
I have this Layout.
<?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"
android:fitsSystemWindows="true"
tools:context="com.example.anandvardhan.albumview040416.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>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numColumns="2"
android:gravity="center"
android:background="#fff">
</GridView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
But now I am getting a preview like this:
So how to select an item at position 1, because it must be beneath the toolbar.
And one more thing.
If my GridView is initially empty then it must show a TextView in centre of the
screen stating "It's Empty". How to set it dynamically.
I will be very thankful if anyone could help.
Tell me if you have any question,
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
tools:context="com.example.anandvardhan.albumview040416.MainActivity">
<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.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.AppBarLayout>
<GridView android:id="#+id/grid_view"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff"
android:gravity="center"
android:numColumns="2">
</GridView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#android:drawable/ic_dialog_email"/>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
Use RecyclerView and set Layout Manager as GridLayoutManager.
Here's the xml
<?xml version="1.0" encoding="utf-8"?>
<?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"
android:fitsSystemWindows="true"
tools:context="com.example.anandvardhan.albumview040416.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>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<!-- Your Empty view here -->
<android.support.design.widget.FloatingActionButton
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="20dp"
android:layout_marginRight="20dp"
app:backgroundTint="#color/button_background_dark_red"
android:src="#drawable/ic_action_new"
app:borderWidth="0dp"
app:elevation="6dp"
app:fabSize="normal"/>
</android.support.design.widget.CoordinatorLayout>
To use GridLayoutManager with RecyclerView, please check this site
If there's no data, you can set the visibility of RecyclerView to View.GONE and set the visibility of empty view to View.VISIBLE
I have implemented a view pager within a Coordinator layout that contains a ListFragment. The view pager is working fine but the list does not scroll,
can anyone help? Do I have to implement something to recognise the direction of the touch and then disable touch events?
Coordinator Layout:
<?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" android:fitsSystemWindows="true"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout android:id="#+id/app_bar"
android:layout_height="wrap_content" android:layout_width="match_parent"
android:theme="#style/AppTheme.AppBarOverlay">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize" android:layout_width="match_parent"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<com.passwordstore.utility.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary" />
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="#android:color/white"
android:foreground="#drawable/shadow"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_height="0dp"
android:layout_width="match_parent"
android:layout_weight="1"
android:background="#android:color/white"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" android:id="#+id/frameLayout">
<include layout="#layout/activity_password_list" />
</FrameLayout>
<android.support.design.widget.FloatingActionButton android:id="#+id/fabNew"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin" android:src="#drawable/ic_add_white_24dp"
app:layout_anchor="#+id/frameLayout"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Fragment - activity_password_list:
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:id="#+id/item_list"
android:name="com.passwordstore.fragment.PasswordListFragment" android:layout_width="match_parent"
android:layout_height="match_parent" android:layout_marginLeft="16dp"
android:layout_marginRight="16dp" tools:context=".PasswordListActivity"
tools:layout="#android:layout/list_content" />
I had the same result with the same issue, i just had to used these custom layouts, you may want to take a look:
https://github.com/TheLittleNaruto/SupportDesignExample/tree/master/app/src/main/java/com/thelittlenaruto/supportdesignexample/customview