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>
Related
I want to achieve the hierarchy shown in the preview picture below, I have no prior knowledge of collapsible layout and coordinator layout but what I did caused the view pager to NOT to show it's content.
I am working in a main activity that has a Coordinator layout as a root layout, a collapsing toolbar, a viewpager, a bottom navigation bar and a hidden bottom sheet
PS: I am working with AndroidX support library.
This is my XML Layout activity_main.xml
<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"
android:id="#+id/parent"
android:fitsSystemWindows="true">
<!-- RETRACTABLE TOOLBAR -->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/appbar_header_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/activity_margin_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:id="#+id/iv_banner_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/banner"
android:tintMode="multiply"
app:layout_collapseMode="parallax" />
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="top"
android:background="#drawable/scrim_topdown"
android:fitsSystemWindows="true"/>
<View
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_gravity="bottom"
android:background="#drawable/scrim"/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginEnd="16dp"
android:layout_gravity="end">
<ImageView
android:src="#drawable/ic_user_placeholder"
android:id="#+id/iv_parent_profile_sm"
android:layout_width="32dp"
android:layout_height="32dp"/>
</LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:layout_marginStart="12dp"
android:layout_marginEnd="12dp"
android:layout_marginBottom="12dp"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:gravity="center_vertical"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:padding="4dp"
android:layout_marginEnd="6dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:id="#+id/tv_name"
android:drawableStart="#drawable/ic_person"/>
<TextView
android:layout_marginEnd="6dp"
android:padding="4dp"
android:id="#+id/tv_birth"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:drawableStart="#drawable/ic_cake"/>
<ImageView
android:padding="8dp"
android:id="#+id/iv_gender"
android:layout_width="32dp"
android:layout_height="32dp" />
</LinearLayout>
</LinearLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<!-- VIEW PAGER -->
<androidx.viewpager.widget.ViewPager
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<!-- NAVIGATION BAR -->
<com.gauravk.bubblenavigation.BubbleNavigationLinearView
android:layout_alignParentBottom="true"
android:id="#+id/bottom_navigation_view_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:elevation="12dp"
android:padding="6dp"
android:animateLayoutChanges="true"
android:layout_gravity="bottom">
<!-- bottom navigation bar elements -->
</com.gauravk.bubblenavigation.BubbleNavigationLinearView>
<!-- BOTTOM SHEETS -->
<include layout="#layout/details_sheet" />
<include layout="#layout/add_sheet"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is the desired result:
You can try gravity to align inside the CoordinatorLayout.
android:layout_gravity="end"
This worked for me.
I got what I needed by wrapping everything in a RelativeLayout then I kept tweaking android:layout_above and android:layout_below until I got right
to set element in the beginning add this android:layout_gravity="start"
and to set element in the end add this android:layout_gravity="end"
and to set it in bottom add this: android:layout_gravity="bottom"
This is my layout which is using the nav bar and scroll view.
<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=".AccountActivity">
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp" />
</android.support.design.widget.AppBarLayout>
<!--content of account activity-->
<ScrollView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<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/activity_setup"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AccountActivity">
<ImageView
android:layout_width="match_parent"
android:background="#drawable/listgrad"
android:id="#+id/imageView"
android:layout_height="100dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:text="Name"
android:layout_below="#+id/profilepic"
android:id="#+id/accountnamefield"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recently Match"
android:id="#+id/recentMatchTitle"
android:textSize="18sp"
android:layout_below="#+id/accountnamefield"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<android.support.v7.widget.RecyclerView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/recentMatchProductList"
android:layout_below="#+id/recentMatchTitle"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true">
</android.support.v7.widget.RecyclerView>
<ImageButton
android:layout_width="150dp"
android:layout_height="150dp"
app:srcCompat="#mipmap/ic_account_circle_white_36dp"
android:id="#+id/profilepic"
android:background="#drawable/round_button"
android:layout_marginTop="21dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
</ScrollView>
</LinearLayout>
<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:headerLayout="#layout/nav_header_main"
app:menu="#menu/drawer" />
</android.support.v4.widget.DrawerLayout>
I am using scroll view with the nav drawer. Why do I open and close the nav drawer then the view will scroll to bottom position? Can I move it to top or remain the same position? Please give me some helps.
Remove android:inputType="textPersonName" part first for TextView.Then
add android:scrollbars="vertical" to your ScrollView .It worked fine for me.
Here I will post the code I used for testing, ScrollView kept same position while using NavigationDrawer
<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.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- your content layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp" />
</android.support.design.widget.AppBarLayout>
<!--content of account activity-->
<ScrollView
android:layout_height="fill_parent"
android:layout_width="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:scrollbars="vertical"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_setup"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/bla"
android:id="#+id/accountnamefield"
android:textSize="18sp"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Recently Match"
android:id="#+id/recentMatchTitle"
android:textSize="18sp"
android:layout_below="#+id/accountnamefield"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</LinearLayout>
</ScrollView>
</LinearLayout>
<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:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
Your layout has bunch of problems:
android:layout_alignParentStart="true" - the same thing as left (or right for RTL)
android:layout_alignParentEnd="true" - the same thing as right (or
left for RTL)
It's wrong to declare start and left in the same time
Using a recycler view inside ScrollView - bad practice and will never work. You can use nested scroll view (RecyclerView inside ScrollView is not working), but the better solution is put what you want inside scroll view (as headers and footers).
I think there is no way to measure your layout. Try to figure out how android is drawing views (https://medium.com/#britt.barak/measure-layout-draw-483c6a4d2fab#.y7nd8gyql).
P.S. You have much more problems with your layout, it's easier to write a new one, than pointing all problems.
I've the below layout xml for my activity
<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:background="#color/white"
android:fitsSystemWindows="true"
tools:context=".HomeActivity">
<android.support.design.widget.AppBarLayout
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="wrap_content"
android:theme="#style/AppTheme.Dark.AppBarOverlay"
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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.Dark.PopupOverlay">
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:id="#+id/rl_updates"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/ll_footer"
android:layout_below="#+id/ll_fibres_search">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srl_updates"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_all_requirements"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/iron"
android:dividerHeight="1px"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:onClick="onRequirement"
android:overScrollMode="never"
android:src="#drawable/ic_playlist_add_white_24dp"
app:backgroundTint="#color/pink"/>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
When I scroll the Recycler View, the App Bar collapses just like I wanted it to be. But the problem is the FAB also shifts down a little bit. I set 16dp margin to the bottom but it sticks to the bottom of the screen.
How do I prevent the FAB from shifting down initially?
This is how it looks now
Have you tried taking the FloatingActionButton outside the RelativeLayout and inside the CoordinatorLayout? You can do that and give it the attribute:
android:layout_gravity="bottom|right|end"
instead of:
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
set anchor for your FAB button
app:layout_anchorGravity="bottom|right|end"
android:layout_gravity="right"
Replace RelativeLayout with FrameLayout and add this line to your FAB
android:layout_gravity="right|bottom"
like this
<FrameLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/srl_updates"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_all_requirements"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#color/iron"
android:dividerHeight="1px"/>
</android.support.v4.widget.SwipeRefreshLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:onClick="onRequirement"
android:layout_gravity="right|bottom"
android:overScrollMode="never"
android:src="#drawable/ic_playlist_add_white_24dp"
app:backgroundTint="#color/pink"/>
</FrameLayout>
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>
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: