For my question I have prepared a simple project at GitHub.
In an app with DrawerLayout I am trying to display a login page for social networks (Google+, Facebook, Twitter).
The login page should display the social network logo (or user photo - if logged in), then horizontal progress bar and a FloatingActionButton and finally some text at the bottom:
Unfortunately, I have some strange artefact in the ActionBar area - as you can see in the right side of the above screenshot.
Why does it happen please and how to fix this?
Here is my activity_main.xml with DrawerLayout and left drawer menu:
<android.support.v4.widget.DrawerLayout
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">
<LinearLayout
android:orientation="vertical"
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"/>
<FrameLayout
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF0"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/left_drawer"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
android:fitsSystemWindows="true"
android:background="#FFF"
app:itemIconTint="#color/drawer_item_text"
app:itemTextColor="#color/drawer_item_text"
app:headerLayout="#layout/header_left"
app:menu="#menu/menu_main"/>
</android.support.v4.widget.DrawerLayout>
And here is my fragment_google.xml with CoordinatorLayout and FAB:
<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:fitsSystemWindows="true">
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/photo"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:src="#drawable/photo"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<CheckBox
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
android:text="Main profile"
/>
<TextView
android:id="#+id/given"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="#+id/place"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="0.2"
android:layout_gravity="center_horizontal"
/>
</LinearLayout>
<ProgressBar
android:id="#+id/progress"
android:indeterminate="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchor="#id/photo"
app:layout_anchorGravity="bottom"
style="?android:attr/progressBarStyleHorizontal"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_anchor="#id/photo"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_account_plus_white_48dp"
android:elevation="8dp"/>
</android.support.design.widget.CoordinatorLayout>
Removing fitsSystemWindows="true" from fragment_google.xml has solved the problem:
Related
I have a nav drawer implemented in my activity. The audience for my app is the elderly and I want the icons to be very large and take up the whole drawer height.
I am looking to have the 4 icons evenly spaced out and to have no text just big icons. I have tried playing around with the tag:
<dimen name="design_navigation_icon_size" tools:override="true"></dimen>
but I have not been able to get it to work. The icons simply keep overlapping each other when they get too big near the top. The images always seem to be contained in the header layout.
Create custom view and layout for drawer
<android.support.design.widget.NavigationView
android:id="#+id/nav_view_left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_left" />
nav_header_left.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#color/right_side_header_bg_color"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:paddingTop="#dimen/fifty"
android:paddingRight="#dimen/twenty"
android:paddingLeft="#dimen/twenty"
android:orientation="vertical"
android:weightSum="4">
<TextView
android:id="#+id/add_txt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Gallery"
android:drawableLeft="#android:drawable/ic_menu_gallery"
android:layout_gravity="center"
android:gravity="center"
android:layout_weight="1"
/>
<TextView
android:id="#+id/gall_txt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Gallery"
android:drawableLeft="#android:drawable/ic_menu_gallery"
android:layout_gravity="center"
android:gravity="center"
android:layout_weight="1"
/>
<TextView
android:id="#+id/menu_add_txt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:text="Gallery"
android:drawableLeft="#android:drawable/ic_menu_add"
android:layout_gravity="center"
android:gravity="center"
android:layout_weight="1"
/>
<TextView
android:id="#+id/media_txt"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:drawableLeft="#android:drawable/ic_media_rew"
android:gravity="center"
android:text="Gallery" />
</LinearLayout>
Use this code for navigationView:
<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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
android:theme="#style/AppTheme">
<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="wrap_content"
android:background="#color/white">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/white"
android:titleTextColor="#color/theme_color_dark"
style="#style/AppTheme"
android:theme="#style/AppTheme"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<fragment
android:id="#+id/menu_fragement"
android:tag="Menu"
android:layout_width="250dp"
android:layout_gravity="start"
android:name="com.app.medcallz.fragments.MenuFragement"
android:layout_height="match_parent"
/>
</android.support.v4.widget.DrawerLayout>
MenuFragment:
<LinearLayout
android:id="#+id/options_container"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_below="#+id/user_detail_container">
<ImageView
android:id="#+id/notificationsIcon"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/nav_notificatios"
android:layout_weight="0.1"/>
<View
android:id="#+id/account_divider"
android:layout_width="fill_parent"
android:layout_height="#dimen/login_divider_width"
android:background="#color/white_color"
android:visibility="visible"
/>
</LinearLayout>
I have an Activity with an CoordinatorLayout and a Toolbar at the top of the page. I add ListFragments programmatically. In the Fragment I also have an FloatingActionButton because the FAB is for each ListFragment a different.
I add to the Toolbar etc. support for a scrollable Toolbar - If I scroll the ListView to the top I want that the Toolbar fade out. But - it doesn't. I only can move by touch or in the emulator by mouse the toolbar if I click (but not release) it. The next problem with this is. If I add the layout_scrollFlags and the layout_behavior then the FAB and the ListView are on the bottom behind the NavigationBar. If I remove it and add a android:paddingTop="?attr/actionBarSize" to the FrameLayout (only then I can see the toolbar) at the bottom everything is nice - the FAB and the ListView ends at the top of the NavigationBar - but of course the toolbar doesn't scroll. On my mobile phone without NavigationBar this things are under the end of the display - I only can see about one third of the FAB and the last row of the ListView.
So - how can I make the toolbar scrollable and to the same time the FAB and ListView are not behind the NavigationBar?
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="false"
tools:openDrawer="start">
<include
layout="#layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view_left"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view_right"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="end"
android:fitsSystemWindows="true"
/>
</android.support.v4.widget.DrawerLayout>
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="false"
android:id="#+id/app_bar_main"
tools:context=".frontend.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
app:elevation="0dp">
<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"
app:layout_scrollFlags="scroll|enterAlways">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/menuLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:src="#drawable/ic_menu_white_24dp"
android:tint="#color/colorPrimary" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Example application"
android:textSize="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textAlignment="center"
android:layout_toRightOf="#+id/menuLeft"
android:layout_toLeftOf="#+id/menuRight"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/headerTextColorPrimary" />
<ImageButton
android:id="#+id/menuRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/ic_menu_white_24dp"
android:tint="#color/colorPrimary" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_height="match_parent"
android:src="#drawable/blank_screen"
android:scaleType = "center"
android:layout_width="match_parent" />
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
list_fragment.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".frontend.ListFragment"
android:fitsSystemWindows="false">
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
tools:listitem="#android:layout/simple_expandable_list_item_1"
android:choiceMode="singleChoice"
android:clickable="true"
android:divider="#00000000"
android:dividerHeight="1dp"
android:background="#color/backgroundListView"/>
<TextView
android:id="#android:id/empty"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerVertical="true"
android:text="#string/emptyTaskList"/>
<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:backgroundTint="#color/colorFloatingButton"
android:src="#drawable/add"
app:layout_anchorGravity="bottom|end"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
app:borderWidth="0dp"/>
</RelativeLayout>
I'm trying to get some details from my movie page to overlap the toolbar but several corner cases keep causing the overlapped content to phase underneath the middle of the toolbar. The latest case that causes this is showing a snackbar. Any information would be helpful because, so far, the overlapTop behavior has been very buggy and aggravating to work with.
Edit: I also use appBarLayout.setExpanded to expand it every time I load a new movie. Not sure if that is important.
Home layout:
<?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:context=".ui.home.HomeActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:titleEnabled="false"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="200dp"
android:alpha="0.5"
android:contentDescription="#string/backdrop"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/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>
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/scrolling_view"
app:behavior_overlapTop="80dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_dice_three_48dp"
app:layout_anchor="#+id/frame"
app:layout_anchorGravity="bottom|end"
/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_home_nav"/>
</android.support.v4.widget.DrawerLayout>
Movie layout:
<android.support.v4.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:overScrollMode="never"
tools:targetApi="lollipop"
tools:ignore="RtlSymmetry">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="16dp"
android:visibility="visible">
<ImageView
android:id="#+id/poster"
android:layout_width="98dp"
android:layout_height="140dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:contentDescription="#string/poster"
tools:background="#color/md_white_1000"
/>
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/poster"
android:layout_above="#+id/phrase"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:gravity="bottom"
android:textColor="?attr/titleTextColor"
android:textSize="24sp"
android:textStyle="bold"
android:fontFamily="sans-serif-condensed"
tools:text="Title"/>
<TextView
android:id="#+id/phrase"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:layout_toEndOf="#+id/poster"
android:layout_alignBottom="#+id/poster"
android:paddingTop="16dp"
android:gravity="top"
android:textSize="18sp"
android:textStyle="italic|bold"
android:fontFamily="sans-serif-condensed"
tools:text="Good vs Evil" />
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="140dp">
<include layout="#layout/card_movie" />
</FrameLayout>
</RelativeLayout>
<android.support.v4.widget.ContentLoadingProgressBar
android:id="#+id/loading"
style="?android:progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:progressBackgroundTint="#color/md_white_1000"
android:padding="32dp"
android:visibility="invisible"
tools:targetApi="lollipop" />
<RelativeLayout
android:id="#+id/error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="invisible">
<TextView
android:id="#+id/error_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:padding="32dp"
/>
<Button
android:id="#+id/error_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/error_message"
android:layout_centerHorizontal="true"
android:text="#string/recycle"/>
</RelativeLayout>
</FrameLayout>
</android.support.v4.widget.NestedScrollView>
Solved it. I was setting my two other views, loading and error, to View.INVISIBLE whenever I showed the content. Setting them to View.GONE fixed it.
Although you got solution by your own that's great but if you want some more knowledge and want to know something more about these issues that could happen and why these issues happening with Coordinator layouts is fully described in this blog post here, I found it pretty useful so i recommend you to read it.
I could able to create an app with toolbar and sliding navigation drawer with recycleView.
Now I am trying to add Floating action button but I am unable to figure out right place to add the button.
I am trying to add fab bottom right.
Below is my activity_main.xml file
<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">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
And Fragment layout file fragment_navigtion_drawer.xml is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/drawerColor">
<LinearLayout
android:id="#+id/containerDrawerImage"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:background="#drawable/drawertitlebackground">
<ImageView
android:id="#+id/drawerAppImage"
android:layout_width="90dp"
android:layout_height="90dp"
android:layout_marginTop="5dp"
android:src="#mipmap/ic_launcher"
android:layout_gravity="center"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="Make search easy"
android:id="#+id/drawerSubTitle"
android:textStyle="bold|italic"
android:layout_centerVertical="true"
android:layout_gravity="bottom|center"
android:textColor="#color/textColorPrimary" />
<ImageButton
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginRight="10dp"
android:layout_gravity="bottom|right"
android:src="#android:drawable/ic_menu_preferences"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_below="#+id/containerDrawerImage" />
</RelativeLayout>
Below is the the code for FAB
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/container_body"
android:layout_gravity="right"
android:layout_marginRight="10dp"
app:rippleColor="#F06292"/>
I am trying to put this in Linearlayout under FrameLayout in activity_main.xml file. I could see the button appears bottom right.
But when I run the application, there shows a rectangle strip with same height which hides the content behind it. The rectangle strip is covering from left to right including the fab button but fab button is coming on its top.
Content behind is the fragment with Listview. So entries at bottom are getting hided because the fab button area is covered as rectangle.
I need just button appear and rest of area should be covered with fragment data i.e. listview in my case.
Its clue less for me where the issue is.
Solved:
I am able to resolve the issue by rewriting activity_main.xml in below way. Now FAB button appears properly. Below is updated one.
<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">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar" />
</LinearLayout>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/container_body"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignBottom="#id/container_body"
android:layout_gravity="bottom|right"
android:layout_marginRight="10dp"
android:layout_marginBottom="6dp"
app:fabSize="normal"
android:src="#drawable/ic_add_white_24dp"
app:backgroundTint="#color/colorPrimaryDark"
app:rippleColor="#F06292"/>
</FrameLayout>
</LinearLayout>
<fragment
android:id="#+id/fragment_navigation_drawer"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="#layout/fragment_navigation_drawer"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
I am new to android. I am trying to implement Scrolling thing like that of twitter's profile activity. Tweets, Photos and Favorites are in tabs, above the tabs there is basic profile data such as name, about, location with two pictures and also a button. When it is scrolled that part gets hidden and tabs are snapped up at top now you can go through tweets and when you scroll down it comes back.
I have added tabs to my activity. Every tab is loaded via fragments. I added tabs using PagerView.
here's my activity:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/action_bar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
/>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="120dp"
android:id="#+id/cover"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:src="#drawable/image"
android:scaleType="fitXY"
android:background="#drawable/image_background"/>
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:id="#+id/profile"
android:layout_marginTop="80dp"
android:layout_alignTop="#+id/cover"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:src="#drawable/image"
android:background="#drawable/image_background"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/name"
android:layout_marginLeft="20dp"
android:layout_marginStart="30dp"
android:layout_marginRight="20dp"
android:layout_alignBottom="#+id/profile"
android:layout_toRightOf="#+id/profile"
android:layout_alignRight="#+id/cover"
android:textSize="20sp"/>
</RelativeLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/imageView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:id="#+id/linearLayout">
<com.example.vickyzia.activity.Misc.SlidingTabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tabs"></com.example.vickyzia.activity.Misc.SlidingTabLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/pager"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>
I want to add that scrolling event to this activity. Is there any way?
Example of a Twitter Like Profile scroll 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/toptoolbar"/>
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/prime_white_1">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/spacing_largest"
app:contentScrim="#color/prime_white_1"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="?attr/actionBarSize"
layout="#layout/profile_header_layout"/>
<android.support.v7.widget.Toolbar
android:id="#+id/profile_toolbar_collapse"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
android:background="#color/transparent">
<android.support.design.widget.TabLayout
android:id="#+id/profile_tabs"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/prime_grey_9"
app:layout_collapseMode="none"
app:tabGravity="fill"
app:tabIndicatorColor="#color/prime_green_1"
app:tabIndicatorHeight="#dimen/spacing_small"
app:tabMode="fixed"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/profile_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
You should use special CollapsingToolbarLayout