I am trying to use BottomSheetBehavior to make a layout similar to what google maps is providing. I am successful in using the BottomSheetBehavior and create slide up layout. The problem I am having now is CordinatorLayout takes extra space even when my layout is collapsed.
Below is a screenshot of my layout.
White background in my main activity layout
Pink is my collapsed layout with peekHeight
And the grey background is the one which should be transparent but takes the extra space.
My main layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="wrap_content">
<include layout="#layout/sample_coordinator" />
</FrameLayout>
CordinatorLayout with BottomSheetBehavior
<?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="wrap_content"
android:background="#color/common_google_signin_btn_text_light_disabled">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:behavior_hideable="false"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/colorPrimary" />
</FrameLayout>
You have to use CoordinatorLayout in your activity layout.
Then in your bottom sheet layout insert these lines:
app:behavior_hideable="true"
app:behavior_peekHeight="Xdp"
Related
I currently have a Toolbar and a FrameLayout in the activity. The problem is that during runtime, the FrameLayout expands and covers the toolbar, which I do not want. How should I modify the toolbar so that it stays on top of all views under it?
The layout file :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:mapbox="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"
mapbox:layout_constraintBottom_toTopOf="#id/frameLayout"
mapbox:layout_constraintLeft_toLeftOf="parent"
mapbox:layout_constraintRight_toRightOf="parent"
mapbox:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="600dp"
mapbox:layout_constraintBottom_toBottomOf="parent"
mapbox:layout_constraintEnd_toEndOf="parent"
mapbox:layout_constraintStart_toStartOf="parent"
mapbox:layout_constraintTop_toBottomOf="#id/toolbar"
android:paddingTop="2dp">
// Map here.
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
I am creating an Android app which got a navigation drawer in a 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"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
layout="#layout/navigation_select_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/navigation_drawer_header_layout"
app:menu="#menu/main_drawer_options" />
</android.support.v4.widget.DrawerLayout>
the navigation_drawer_header_layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/textViewButtonCloseDrawer"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:gravity="center"
android:text="X"/>
</RelativeLayout>
The header layout is added but not showing unless I add either a top margin for the TextView or some padding to the RelativeLayout which pushes the TextView down.
Why won't it show as defined in the header layout? Why is the need to push the layout in order for it to be shown?
As understood from the comments, you got a ToolBar which hides the content instead of staying above it at all times. Check out this answer here which might solve your problem:
Display content under toolbar
I have a Toolbar, and it seems no matter what I set the height to, the menu items I've added to it remain in the same spot vertically. I'm trying to make the Toolbar smaller, and because the items aren't moving, they get clipped when I make the Toolbar the height I want it to be. Is there any way to center the menu items vertically in the Toolbar?
Toolbar src:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/red">
<include
android:id="#+id/search_items"
layout="#layout/search_items"
android:visibility="gone"/>
</android.support.v7.widget.Toolbar>
Doesn't work:
setting android:gravity="center_vertical" for the Toolbar
Put it inside Linear or Relative Layout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/red">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"/>
<include
android:id="#+id/search_items"
layout="#layout/search_items"
android:visibility="gone"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
I have an activity.xml.
As you can see, it's a relative layout. I am hoping that the Frame layout which will contain the fragment, will be below the toolbar.
The fragment is added, for sure. But it's added at the top, covering the toolbar. Just wondering what I am doing wrong.
The website wouldn't let me add code for some reason. It was telling me it's not properly formatted. here is the activity.xml layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" android:fitsSystemWindows="true"
>
<!--scroll|snap-->
<android.support.v7.widget.Toolbar
android:id="#+id/appToolBar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolBarHeight"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout
android:id="#android:id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/appToolBar"/>
</RelativeLayout>
And this is simply what I am doing in the Activity.java file.
getFragmentManager().beginTransaction().add(android.R.id.content, SetupFrag.createInstance(false), SETUP_FRAGMENT).commit();
You're using an existing id, #android:id/content
You should use + to add your own ID, #+id/content, otherwise the fragment is being added to the content view (the level above your activity layout).
You should use a different root Layout.
RelativeLayout will layout its children relatively to each other.
What you want instead is a LinearLayout with a vertical orientation.
<?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:fitsSystemWindows="true"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="#+id/appToolBar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolBarHeight"
android:background="?attr/colorPrimary"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
I have implemented a navigation drawer. In the FrameLayout of navigation drawer I have added a fragment which contains 2 ViewPagers taking exactly half the screen each. Now I want to add a FAB button at the junction of these two viewpagers as shown here.
In my case both viewpagers occupy exactly half screen which is slightly different from what is shown in image. Can somebody help me in getting the FAB at the junction.
The code for the fragment containing the 2 viewpagers is below:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/shirt_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pant_section"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="0dp" />
</LinearLayout>
You could enclose your linear layout into FrameLayout and add your button like this:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</LinearLayout>
<ImageButton
android:layout_gravity="center_vertical|right"
...
/>
</FrameLayout>