I want to add RecyclerView at the bottom to my layout, but it is in wrong position.
Now I Have:
Now RecyclerView is too far down and cuts half of RecyclerView. I Only want RecyclerView at the bottom of my layout but I can't do it.
This is my layout code:
<android.support.constraint.ConstraintLayout 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/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="showresultactivity.SlideTabsActivity">
<com.google.android.gms.maps.MapView
android:id="#+id/mapView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="#+id/mapView"
app:layout_constraintEnd_toEndOf="#+id/mapView"
app:layout_constraintStart_toStartOf="#+id/mapView"
app:layout_constraintTop_toTopOf="#+id/mapView" />
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" /><!--this line make too far down, without it my recyclerview will be at the top of my layout-->
</android.support.constraint.ConstraintLayout>
My RecyclerView layout:
<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/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="showresultactivity.SlideTabsActivity">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewInfoWindowMarker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignWithParentIfMissing="true"
>
</android.support.v7.widget.RecyclerView>
My recyclerView row item xml :
<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="wrap_content">
<LinearLayout
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:id="#+id/map"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FCFCFC"
tools:context="showresultactivity.SlideTabsActivity">
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cardCornerRadius="3dp"
app:cardElevation="1dp"
android:layout_margin="5dp"
app:cardPreventCornerOverlap="false">
<RelativeLayout
android:padding="8dp"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imagesSrcUrl"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/ic_launcher"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/first"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/description"
android:text="some text"
android:textSize="20dp"
android:textStyle="bold" />
<TextView
android:id="#+id/third"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/first"
android:textSize="12dp"
android:text="some text"
android:layout_marginTop="5dp"
android:gravity="right"
android:textAlignment="gravity"
/>
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/imagesSrcUrl"
android:layout_below="#id/first"
android:textSize="12dp"
android:text="some text"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
<ImageButton
android:layout_centerVertical="true"
android:id="#+id/cardViewNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/circle_shape"
android:src="#drawable/ic_next_black" />
<ImageButton
android:layout_centerVertical="true"
android:id="#+id/cardVievPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/circle_shape"
android:src="#drawable/ic_previous_black" />
EDIT
I forgot that I have also bottom navigation and the recycler should be at the bottom map but above the bottom navigation.
Layout with bottom nav:
<?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"
tools:context="SlideTabsActivity"
android:layout_height="match_parent"
android:layout_width="match_parent"
>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
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:paddingTop="#dimen/appbar_padding_top"
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:layout_weight="1"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:title="#string/app_name">
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabItem
android:id="#+id/tabItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_1" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_2" />
<android.support.design.widget.TabItem
android:id="#+id/tabItem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/tab_text_3" />
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<include layout="#layout/bottom_navigation_view" android:id="#+id/bottom_nav_view" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
bottom_navigation_view:
<merge xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/bottomRelativeLayout">
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/white_grey_border_bottom"
app:menu="#menu/bottom_navigation_main" />
</RelativeLayout>
Adding this line to your framelayout would help you achieve that positioning:
app:layout_constraintBottom_toBottomOf="parent"
Also remember to set the height of your frame layout to: wrap content. The purpose of the line above is to fix/pin your frame layout to the bottom of your constraint layout; any eventual expansion would be upward. Therefore, the contents of your frame layout will never overlap. If there is need for extra space, your frame layout will project upwards while still being fixed to the bottom of the constraint layout.
You can check this for reference on more XML attributes on Constraint layouts: https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html
PS:
You can remove the android:layout_alignParentBottom="true" part of your frame layout; it's not necessary anymore
Related
I'm trying to get my LinearLayout to appear at the bottom of the parent (which is the bottom of the screen) but I'm not able to. It always appears at the top of the parent.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context=".app.ui.tutorial.TutorialActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto"
android:text="Toolbar Title"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:tint="#color/green500"
android:src="#drawable/ic_pager_section_position" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Can't anchor LinearLayout to bottom of parent using CoordinatorLayout
Beacause you have added the constraint of ConstraintLayout in your LinearLayout while your root layout is CoordinatorLayout
You need to set android:layout_gravity="bottom" in your LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="false"
tools:context=".app.ui.tutorial.TutorialActivity">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00FFFFFF">
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:fontFamily="#font/roboto"
android:text="Toolbar Title"
android:textAllCaps="true"
android:textSize="16sp"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageView
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/ic_pager_section_position"
android:tint="#color/green500" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
OUTPUT
The following code display only 3 of 4 Editext within a ScrollView.
The problem is the last Editext which is overlapping the Button
Why ScrollView isn't working properly?
Or How avoid this overlaps?
<?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.support.design.widget.CoordinatorLayout
android:id="#+id/cl"
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:layout_above="#+id/bt_next">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/tv_activity_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="24sp"
android:text="#string/app_name"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/mysv">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/et_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 1"/>
<View android:layout_width="match_parent" android:layout_height="150dp" />
<EditText
android:id="#+id/et_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 2"/>
<View android:layout_width="match_parent" android:layout_height="150dp" />
<EditText
android:id="#+id/et_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 3"/>
<View android:layout_width="match_parent" android:layout_height="150dp" />
<EditText
android:id="#+id/et_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 4"/>
</LinearLayout>
</ScrollView>
</android.support.design.widget.CoordinatorLayout>
<Button
android:id="#+id/bt_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Next"/>
This is how looks like at the end of the scroll.
Your problem is not the ScrollView, your problem is the fact that you have the Button floating out by itself outside of the CoordinatorLayout.
If you're trying to get the content above the button, you could try adding alignToTopOf="#id/bt_next (I forget the exact name of the attribute, but you get the idea). Then the Coordinator should sit on top of the button.
If that's not what you're trying to do, post a screenshot of what you're trying to get to and a screenshot of what's broken now.
I've solved using Nestedlayout and a LinearLayout inside.
The key is keep in mind CoordinatorLayout works as a FrameLayout.
The only issue that I find is the toolbar is not hiding when I scroll.
<?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.support.design.widget.CoordinatorLayout
android:id="#+id/cl"
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:layout_above="#+id/bt_next"
android:layout_alignParentTop="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/mysv">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways">
<TextView
android:id="#+id/tv_activity_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff"
android:textSize="24sp"
android:text="#string/app_name"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/mysv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<EditText
android:id="#+id/et_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 1"/>
<View android:layout_width="match_parent" android:layout_height="150dp" />
<EditText
android:id="#+id/et_2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 2"/>
<View android:layout_width="match_parent" android:layout_height="150dp" />
<EditText
android:id="#+id/et_3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 3"/>
<View android:layout_width="match_parent" android:layout_height="150dp" />
<EditText
android:id="#+id/et_4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Input 4"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
<Button
android:id="#+id/bt_next"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="Next"/>
</RelativeLayout>
I have tried to accomplish something similar to the following layout.
There are a few things to note. The cardview that overlaps the appbar is not supposed to be a part of a nestedscrollview as I have a nestedscrollview in the xml layout. The cardview is positioned correctly but it comes just beneath the appbarlayout.
I just got the solution to this now. I did not give the CardView an elevation value before and that was wrong. I just assumed that making it come last in the CoordinatorLayout should place it on top. It works now. I have added an elevation value. Here is the code -
<xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="250dp"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbarlayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/quotes"
android:scaleType="centerCrop"/>
<android.support.v7.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginRight="32dp"
android:layout_marginLeft="32dp"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|center"
app:cardElevation="#dimen/small_padding"
/>
</android.support.design.widget.CoordinatorLayout>
Try with the following layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#color/colorAccent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/toolbar_logo"
android:src="#drawable/ic_launcher"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"/>
</android.support.v7.widget.Toolbar>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
app:cardCornerRadius="8dp"
app:cardElevation="7dp"
android:layout_marginTop="150dp"
android:id="#+id/cardView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="10dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Photos" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="376" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1769"
android:layout_gravity="center"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Following"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="127"
android:layout_gravity="center"/>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
In the following layout , after the AppBarLayout and before RecyclerView , some extra whitespace is coming , i am unable to figure out how it is coming.
I've checked margins and all , seems to be fine .
Also due to same reason , i believe the last element of RecyclerView is cropped out of the layout view .
Any help appreciated .
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/transMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="80dp"
android:fitsSystemWindows="true"
android:paddingLeft="12dp"
app:contentScrim="?android:attr/colorPrimary"
app:layout_scrollFlags="exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarAct"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:layout_scrollFlags="scroll">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<!--button was here-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RelativeLayout
android:id="#+id/monthSelLay"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/monthButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:textColor="#000"
android:textSize="14sp" />
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginTop="12dp"
android:layout_toRightOf="#id/monthButton"
android:src="#drawable/ic_keyboard_arrow_down_black_24dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/syncLay"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/syncButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginTop="8dp"
android:text="SyncUp"
android:textAlignment="center"
android:textColor="#000" />
<ImageView
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/syncButton"
android:src="#drawable/ic_cached_black_48dp" />
</RelativeLayout>
</LinearLayout>
<!--switch was here-->
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.SearchView
android:id="#+id/searchTrans"
android:layout_width="350dp"
android:layout_height="40dp"
android:layout_below="#+id/toolbar"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#fff"
android:hint="Start typing an Amount/Description"
android:textColor="#000"
android:textColorHint="#ccc"
app:tabMode="scrollable" />
<!--need to change the background as an object oval prbbly-->
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/trans"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/ic_add_black_24dp"
app:backgroundTint="#color/colorAccent"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
</FrameLayout>
In the first image , i've scrolled up slightly to show the whitespace.
With cropped last element of RecyclerView .
Remove this line from your RecyclerView
android:layout_gravity="center_horizontal"
Remove this line:
android:layout_gravity="center_horizontal"
or
Make your coordinator height to wrap_content.
<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/transMain"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
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>