How do you add margin between a bottom sheet and a Floating Action Button in android. I made it working by using another FAB and making it invisible but the FAB is only just above the Bottom Sheet. See this picture : 1
And the code :
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/search_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/white"
android:elevation="1dp"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_picture"
android:src="#mipmap/login_background"
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:text="Title"
android:textColor="#color/buttonLoginColor"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/address_bottom_sheet"
android:layout_below="#id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:layout_marginStart="10dp"
android:textColor="#color/btn_create"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible"
android:layout_margin="15dp"
app:layout_anchor="#id/bottom_sheet"
app:layout_anchorGravity="top|end"/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="50dp"
android:layout_marginEnd="15dp"
app:backgroundTint="#color/buttonLoginColor"
app:borderWidth="0dp"
app:elevation="6dp"
app:layout_anchor="#id/fab2"
app:layout_anchorGravity="top"/>
</android.support.design.widget.CoordinatorLayout>
I'm using a NestedScrollView to display the bottom sheet.
I had the same issue. After hours of researching I figured out it can't be made through layout_anchor because of Material design guidelines. You need to use trick like one below. I'm using a transparent view that makes margin between fab and bottom sheet content view.
This is how I solved the issue:
FAB itself:
<android.support.design.widget.FloatingActionButton
...
app:layout_anchor="#+id/bottomPanel"
app:layout_anchorGravity="right"/>
BottomSheet:
<FrameLayout
android:id="#+id/bottomPanel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgound="#android:color/transparent"
app:layout_behavior="#string/bottom_sheet_behavior">
<ContentView
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginTop="44dp"
android:backgound="#color/colorPrimary" />
</FrameLayout>
Just make the root view transparent and your content view put inside that and add margin of 44dp (fab size = 56dp. fab padding = 16dp. 56/2 + 16 = 44)
Yes, you can try with RelativeLayout , I'm still not able to understand why you have gave bottom sheet fixed height with 300dp, anyway this will do it without another fab button..
<RelativeLayout
android:id="#+id/coordinator"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:id="#+id/search_relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:theme="#style/Theme.AppCompat.NoActionBar">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentBottom="true"
android:background="#android:color/white"
android:elevation="1dp"
app:behavior_hideable="true"
app:behavior_peekHeight="0dp"
app:layout_behavior="#string/bottom_sheet_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/circle_picture"
android:src="#mipmap/login_background"
android:layout_margin="10dp"
android:layout_width="50dp"
android:layout_height="50dp" />
<TextView
android:id="#+id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:text="Title"
android:textColor="#color/buttonLoginColor"
android:layout_margin="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/address_bottom_sheet"
android:layout_below="#id/name_bottom_sheet"
android:layout_toEndOf="#id/circle_picture"
android:layout_marginStart="10dp"
android:textColor="#color/btn_create"
android:text=""
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_sheet"
android:layout_margin="15dp"
app:backgroundTint="#color/buttonLoginColor"
app:borderWidth="0dp"
android:layout_alignParentRight="true"
app:elevation="6dp"
app:layout_anchorGravity="top"/>
</RelativeLayout>
You can also set your fab button margins as per your requirement.
Related
I have "activity_main" in which I'm using a Collapsing Toolbar and a Fragment Container. Inside container I'm adding and replacing multiple fragments one of them is "activity_user_shops_list" which is a recycler view. I want to align fab to the bottom right of the screen inside this list fragment. I can't find a way to align it. Any help is appreciated.
activity_main.xml:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_horizontal"
android:background="#F3F3F3">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/id_appbar_layout_m"
android:layout_width="match_parent"
android:layout_height="200dp">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/id_collapsing_toolbar_m"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|snap|exitUntilCollapsed"
app:titleCollapseMode="scale"
app:title="#string/user_name"
app:expandedTitleGravity="center_horizontal"
app:expandedTitleMarginTop="160dp"
android:background="#F3F3F3">
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#mipmap/ic_launcher"
app:shapeAppearanceOverlay="#style/circleImageView"
android:layout_gravity="center"/>
<com.google.android.material.appbar.MaterialToolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/id_appbar_layout_m"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/id_fragment_container_m"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
fragment_user_shops_list.xml:
<?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="wrap_content"
android:layout_height="wrap_content"
android:background="#color/null_gray">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/id_recycler_view_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"/>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/id_floating_button_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/add_a_shop"
android:src="#drawable/ic_plus"
app:tint="#color/white"
app:maxImageSize="30dp"
app:useCompatPadding="true"/>
</RelativeLayout>
Edit:
After adding android:layout_alignParentRight="true" and
android:layout_alignParentBottom="true" and making all fab parents match_parent, It still not working.
No mater what I do result is same. Here is the result (Gray area is "fragment_user_shops_list"):
You need to set android:layout_alignParentRight and android:layout_alignParentBottom to your FloatingActionButton to align to bottom right corner
Here's what updated xml file should look like:
<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">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/id_recycler_view_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="50dp" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/id_floating_button_e_shops"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
android:contentDescription="Shop"
android:src="#android:drawable/btn_plus"
app:maxImageSize="30dp"
app:tint="#android:color/white"
app:useCompatPadding="true" />
</RelativeLayout>
ViewPager not showing inside ScrollView. Without scrollview my viewpager is working perfectly fine!!
I tried to wrap viewpager inside another layout, I tried scrollview to wrap inside another relative layout and some other ways, but none of working.
What should I do now? Please see below XML file
What I tried:
android:fillViewport="true"
android:fitsSystemWindows="true"
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:theme="#style/AppTheme.AppBarOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/map"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="6dp"
android:layout_marginTop="10dp"
android:src="#drawable/map"
android:tint="#color/colorRed" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:layout_toRightOf="#+id/map"
android:fontFamily="sans-serif"
android:textColor="#color/colorBlack"
android:text="Phase - 1, Peenya, Bengaluru"
android:textSize="16sp" />
<ImageView
android:id="#+id/pay"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginTop="10dp"
android:layout_toLeftOf="#+id/profile_pic"
android:layout_marginRight="8dp"
android:src="#drawable/ic_baseline_payment_24"
android:tint="#color/colorBlack" />
<ImageView
android:id="#+id/profile_pic"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentEnd="true"
android:layout_marginTop="10dp"
android:layout_marginRight="5dp"
android:src="#drawable/circle_profile1" />
</RelativeLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="6dp"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_edittext_states"
android:hint="Search for restaurants, cuisines..."
android:textColorHint="#color/colorDarkGray"
android:textColor="#color/colorBlack"
android:padding="10dp" />
</LinearLayout>
</androidx.appcompat.widget.Toolbar>
<com.google.android.material.tabs.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabIndicatorColor="#color/colorRed"
app:tabMode="fixed"
app:tabTextColor="#color/colorBlack" />
</com.google.android.material.appbar.AppBarLayout>
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/app_bar">
<androidx.viewpager.widget.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</ScrollView>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/colorPrimary"
app:itemIconTint="#color/colorBlack"
app:itemTextColor="#color/colorWhite"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
the viewpager is displayed when I make the height match_parent when I try the code.
<ScrollView
android:id="#+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/app_bar">
Try using the parent layout as coordinator layout not the relative layout and in your scroll view use this attribute
app:layout_behaviour="#string/appbar_scropling_view_behaviour"
It's better to use a nested scroll view instead of a scroll view as it have nested scroll view is advanced version of scroll view.
I've placed an edit text inside a NestedScrollView so that the edit text can be expanded .But the problem is this NestedScrollView is placed inside a BottomSheet that's why the scrollview is not scrolled.
I wonder how to make the NestedScrollView scroll?
My Code :
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
android:id="#+id/relBot"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:layout_behavior="#string/bottom_sheet_behavior"
android:background="#fff"
android:orientation="vertical">
<View
android:id="#+id/hBot"
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="#drawable/shadow"
/>
<TextView
android:id="#+id/headingBot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="Comments"
android:textColor="#fff"
android:layout_marginTop="2dp"
android:textSize="25sp"
android:textStyle="bold"
android:fontFamily="sans-serif-condensed"
/>
<ImageView
android:id="#+id/back_of_bot"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_marginTop="5dp"
android:tint="#fff"
android:clickable="true"
android:src="#drawable/ic_arrow_left_black_48dp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/botRView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:layout_below="#+id/hBot"
android:layout_above="#+id/linLayCommi"/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/linLayCommi"
android:clickable="true"
android:focusable="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_alignParentBottom="true">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="50dp"
app:cardBackgroundColor="#efeeee"
android:orientation="vertical">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="40dp"
android:layout_marginEnd="40dp"
android:imeOptions="actionDone"
android:hint="Write a Comment..."
app:backgroundTint="#efeeee"/>
<LinearLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_gravity="end"
android:clickable="true"
android:gravity="center"
android:background="#001919">
<ImageView
android:layout_width="30dp"
android:layout_height="25dp"
android:tint="#fff"
app:srcCompat="#drawable/emoji_1f58b" />
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
After a lot of research I finally solved my issue by placing the scrollview inside a trasperent linear layout as we can't set maxHeight of any view in xml and now it's scrolling .
Ref :https://stackoverflow.com/a/13811461/8953835
try this solution :
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/layout_form"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- elements-->
<!-- elements-->
</LinearLayout>
</androidx.core.widget.NestedScrollView>
I created a Basic-Activity and have the activity_main which includes the content_main. But at the Design-Screen I can see, that the included content_main starts below the toolbar and ends behind the navigationbar. I think that the Included layout is as high as the full screen and not as high as the space between toolbar and the end of screen. What can I do?
Screenshot of Designscreen
Activity_Main
<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="com.htlhl.kellergassen_app.MainActivity"
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="#color/KG_orange">
<android.support.v7.widget.AppCompatTextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="#string/HomeActivity"
style="#style/Toolbartitle_KG" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
Content_Main
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background2"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.htlhl.kellergassen_app.MainActivity"
tools:showIn="#layout/activity_main"
android:id="#+id/rl_main">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="false"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical"
android:onClick="here">
<ImageView
android:id="#+id/Kellergassenlogo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="0dp"
android:contentDescription="#string/ButtonKellergasse"
android:onClick="toKellerkatze"
android:src="#drawable/kk_logo" />
<Button
android:id="#+id/btnToKellergasse"
android:layout_width="180dp"
android:layout_height="36dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="12dp"
android:background="#drawable/roundbutton"
android:onClick="toKellerkatze"
android:text="#string/ButtonKellergasse"
android:textColor="#color/white"
android:textSize="15sp" />
<ImageView
android:id="#+id/Routenlogo"
android:layout_width="150dp"
android:layout_height="150dp"
android:layout_gravity="top|bottom|center_horizontal"
android:layout_marginTop="15dp"
android:contentDescription="#string/ButtonRoute"
android:onClick="toRouten"
android:src="#drawable/routenlogo" />
<Button
android:id="#+id/btnToRouten"
android:layout_width="180dp"
android:layout_height="36dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="12dp"
android:background="#drawable/roundbutton"
android:onClick="toRouten"
android:text="#string/ButtonRoute"
android:textColor="#color/white"
android:textSize="15sp" />
</LinearLayout>
<Button
android:id="#+id/btnParse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="parse"
android:textColor="#color/black"
android:background="#color/KG_green"
android:onClick="startParsing"/>
<LinearLayout
android:id="#+id/layout_bottom_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:weightSum="3">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginStart="10dp"
android:layout_weight="2"
android:gravity="center"
android:orientation="vertical">
<fragment
android:id="#+id/fragmentChooseLang"
android:name="com.htlhl.kellergassen_app.FragmentLanguage"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/tvChooseLang"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:drawableTop="#drawable/german_flag"
android:text="#string/chooseLanguage"
android:textSize="12sp"
android:textStyle="bold" />
</LinearLayout>
<Button
android:id="#+id/btnToImpressum"
style="?android:attr/borderlessButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="#string/ButtonImpressum"
android:textSize="15sp"
android:textStyle="bold"
android:layout_gravity="bottom"/>
</LinearLayout>
</RelativeLayout>
The Layout named "layout_bootom_main" is not shown, because it is layout_alignParentBottom and the parents end is out of screen.
You can add scroll view in content_main as parent view for both linear layouts.
<RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- Add your linear layouts here -->
</LinearLayout>
</ScrollView>
</RelativeLaout>
And while designing in android studio try to preview the design with device having more hight
You could wrap everything inside a scrollview like this:
<RelativeLayout
......>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">
<-! All the layout children in here-->
</ScrollView>
</RelativeLaout>
I have an AppCompatActivity with a listview with the layout below
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/user_title"
android:background="#drawable/user_title_color"
android:textColor="#android:color/white"
android:textAppearance="#android:style/TextAppearance.Large"/>
<ListView android:id="#+id/joggings_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:drawSelectorOnTop="false"/>
<LinearLayout
android:id="#+id/empty_list"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center">
<TextView
android:text="No joggings yet"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/empty_add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add"/>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_jogging"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_plus"
app:borderWidth="0dp" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:foregroundTint="#color/colorAccent"
app:itemTextColor="#color/bottom_navigation_color"
app:itemIconTint="#color/bottom_navigation_color"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
and in my code I have
mListView.setEmptyView(findViewById(R.id.empty_list));
in order to display a message and an "add" button when the list is empty. My problem is that when the list is empty the BottomNavigationView is hidden and the user cannot navigate to another activity.
One possible solution I can think of is to add another BottomNavigationView with the same items in the empty layout but that seems ugly.
Any other solution?
Set empty_list height to wrap_content
Your ListView and it's empty view should have the same layout attributes if you want them to occupy the same space. In your case, they should both be
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
Also, you should put the FloatingActionButton outside of the LinearLayout, or else it will affect the size of your ListView/empty view. It is also meant to be a direct child of CoordinatorLayout, otherwise its default behaviors do not work.
The following layout worked fine. The basic idea is that coordinateLayout contains listview and FloatingActionButton and empty view. CoordinateLayout is contained in an outer vertical LinearLayout which also contains the header textview and the BottomNavigationView
<?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">
<TextView
android:id="#+id/user_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/user_title_color"
android:textAppearance="#android:style/TextAppearance.Large"
android:textColor="#android:color/white" />
<android.support.design.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="0dp"
android:layout_weight="1">
<ListView
android:id="#+id/joggings_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#b5b5b5"
android:dividerHeight="1dp"
android:drawSelectorOnTop="false" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/add_jogging"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/bottom_navigation"
android:layout_alignParentRight="true"
android:layout_gravity="end|bottom"
android:layout_marginBottom="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
android:src="#drawable/ic_plus"
app:borderWidth="0dp"
app:layout_anchor="#id/joggings_list"
app:layout_anchorGravity="bottom|right|end" />
<LinearLayout
android:id="#+id/empty_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical|center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="No joggings yet" />
<Button
android:id="#+id/empty_add_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/colorPrimaryDark"
android:foregroundTint="#color/colorAccent"
app:itemIconTint="#color/bottom_navigation_color"
app:itemTextColor="#color/bottom_navigation_color"
app:menu="#menu/bottom_navigation_main" />
</LinearLayout>