Tuesday, March 8, 2016

Android XML cutting off bottom half of layout

Leave a Comment

I have a problem with my XML layout, something that I thought wouldn't give me many problems. I have a layout below in a scroll view, but the bottom of the layout is being cut off, I can't see anything past the second list view. From looking around, I can't seem to see anything wrong with the xml itself and I can't see what I am doing wrong.

I have tried the suggestion to the problem, that is adding a weight to each of the different elements but this still hasnt solved the problem.

I have also added the main activity in which the fragment is placed incase that might help solve the problem

Fragment XML

<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/coordinatorLayout"> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:fillViewport="true"     android:scrollbars="vertical">     <LinearLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:orientation="vertical">         <android.support.design.widget.TextInputLayout             android:id="@+id/text_input_layout"             android:layout_width="match_parent"             android:layout_height="0dp"             android:layout_weight="1">              <EditText                 android:id="@+id/editText"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:hint="Recipe Title"/>         </android.support.design.widget.TextInputLayout>          <TextView             android:id="@+id/ingredientsHeading"             android:layout_below="@+id/text_input_layout"             android:layout_width="fill_parent"             android:layout_height="0dp"             android:text="Ingredients"             android:textStyle="bold|italic"             android:layout_weight="1" />         <ListView             android:id="@+id/ingredientsList"             android:layout_below="@+id/ingredientsHeading"             android:layout_above="@+id/directionsHeading"             android:layout_width="wrap_content"             android:layout_height="195dp"             android:layout_weight="1"></ListView>          <Button style="@style/Button"             android:layout_width="wrap_content"             android:layout_height="0dp"             android:text="Add Ingredient"             android:id="@+id/addIngredient"             android:layout_below="@+id/ingredientsList"             android:enabled="true"             android:layout_gravity="center_horizontal"             android:layout_weight="1" />          <TextView             android:id="@+id/directionsHeading"             android:layout_below="@+id/addIngredient"             android:layout_width="fill_parent"             android:layout_height="0dp"             android:text="Directions"             android:textStyle="bold|italic"             android:layout_weight="1" />         <ListView             android:id="@+id/directionsList"             android:layout_below="@+id/directionsHeading"             android:layout_width="wrap_content"             android:layout_height="195dp"             android:layout_weight="1"></ListView>          <Button style="@style/Button"             android:layout_width="wrap_content"             android:layout_height="0dp"             android:text="Add Direction"             android:id="@+id/addDirection"             android:layout_below="@+id/ingredientsList"             android:enabled="true"             android:layout_gravity="center_horizontal"             android:layout_weight="1" />      </LinearLayout>  </ScrollView>   <android.support.design.widget.FloatingActionButton     android:id="@+id/filterButton"     app:backgroundTint="@color/floatingButton"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="bottom|right"     android:clickable="true"     android:src="@drawable/ic_filter"     android:layout_alignParentBottom="true"     android:layout_alignParentEnd="true"     android:layout_marginBottom="63dp"     android:layout_marginRight="16dp" />   </android.support.design.widget.CoordinatorLayout> 

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"> <!-- The main content view -->  <android.support.design.widget.CoordinatorLayout     android:layout_width="match_parent"     android:layout_height="match_parent"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/drawer_layout2">      <android.support.design.widget.AppBarLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">          <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/ThemeOverlay.AppCompat.Light" />          <android.support.design.widget.TabLayout             android:id="@+id/tabs"             android:layout_width="match_parent"             android:layout_height="wrap_content"             app:tabMode="fixed"             app:tabGravity="fill"/>     </android.support.design.widget.AppBarLayout>      <android.support.v4.view.ViewPager         android:id="@+id/viewpager"         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_behavior="@string/appbar_scrolling_view_behavior" />      <FrameLayout         android:id="@+id/container_body"         android:layout_width="fill_parent"         android:layout_height="0dp"         android:layout_weight="1" />  </android.support.design.widget.CoordinatorLayout>   <fragment     android:id="@+id/fragment_navigation_drawer"     android:name="com.example.rory.pocketchef.Fragments.FragmentDrawer"     android:layout_width="@dimen/nav_drawer_width"     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> 

4 Answers

Answers 1

I solved the issue. As the scroll view was being displayed the bottom was being cut off by the bottom action bar on the actual phone. So to solve this I added padding to the bottom of the scrollview in order to push it back up above the action bar.

The new layout it as follows

Updated working XML

<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/coordinatorLayout"> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     android:fillViewport="true"     android:scrollbars="vertical"     android:paddingBottom="?android:attr/actionBarSize"> <<<-------added this line     <LinearLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:orientation="vertical">         <android.support.design.widget.TextInputLayout             android:id="@+id/text_input_layout"             android:layout_width="match_parent"             android:layout_height="0dp"             android:layout_weight="1">              <EditText                 android:id="@+id/editText"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:hint="Recipe Title"/>         </android.support.design.widget.TextInputLayout>          <TextView             android:id="@+id/ingredientsHeading"             android:layout_below="@+id/text_input_layout"             android:layout_width="fill_parent"             android:layout_height="0dp"             android:text="Ingredients"             android:textStyle="bold|italic"             android:layout_weight="1" />         <ListView             android:id="@+id/ingredientsList"             android:layout_below="@+id/ingredientsHeading"             android:layout_above="@+id/directionsHeading"             android:layout_width="wrap_content"             android:layout_height="195dp"             android:layout_weight="1"></ListView>          <Button style="@style/Button"             android:layout_width="wrap_content"             android:layout_height="0dp"             android:text="Add Ingredient"             android:id="@+id/addIngredient"             android:layout_below="@+id/ingredientsList"             android:enabled="true"             android:layout_gravity="center_horizontal"             android:layout_weight="1" />          <TextView             android:id="@+id/directionsHeading"             android:layout_below="@+id/addIngredient"             android:layout_width="fill_parent"             android:layout_height="0dp"             android:text="Directions"             android:textStyle="bold|italic"             android:layout_weight="1" />         <ListView             android:id="@+id/directionsList"             android:layout_below="@+id/directionsHeading"             android:layout_width="wrap_content"             android:layout_height="195dp"             android:layout_weight="1"></ListView>          <Button style="@style/Button"             android:layout_width="wrap_content"             android:layout_height="0dp"             android:text="Add Direction"             android:id="@+id/addDirection"             android:layout_below="@+id/ingredientsList"             android:enabled="true"             android:layout_gravity="center_horizontal"             android:layout_weight="1" />          <RelativeLayout             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:gravity="center"             android:layout_below="@+id/addDirection">              <Button style="@style/Button"                 android:layout_width="wrap_content"                 android:layout_height="0dp"                 android:text="Add Direction"                 android:id="@+id/showOptionsDialog"                 android:enabled="true"                 android:layout_gravity="center_horizontal"                 android:layout_weight="1" />              <Button style="@style/Button"                 android:layout_width="wrap_content"                 android:layout_height="0dp"                 android:text="Add Direction"                 android:id="@+id/saveRecipe"                 android:enabled="true"                 android:layout_gravity="center_horizontal"                 android:layout_toRightOf="@+id/showOptionsDialog"                 android:layout_weight="1" />           </RelativeLayout>      </LinearLayout>  </ScrollView>   <android.support.design.widget.FloatingActionButton     android:id="@+id/filterButton"     app:backgroundTint="@color/floatingButton"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_gravity="bottom|right"     android:clickable="true"     android:src="@drawable/ic_filter"     android:layout_alignParentBottom="true"     android:layout_alignParentEnd="true"     android:layout_marginBottom="63dp"     android:layout_marginRight="16dp" />   </android.support.design.widget.CoordinatorLayout> 

Answers 2

Add these lines in your ScrollView

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:fillViewport="true"  android:scrollbars="vertical"> 

Answers 3

You put a weightsum of 1 and your scrollview is 28. You have to put something like that <LinearLayout weightsum=15>(you don't have to put 15) and then what is inside your layout you have to distribute your 15 sum. Like <TextView layout_weight=1> it means that your textview is gonna 1/15. When I use weight I also put the height or the width, depending on which one I want to play, to 0dp. For exemple if I want to play on the width <TextView width=0dp height=wrap_content weight=1>. So you have to give a weight to every child of your LinearLayout. Hope it help.

Edit: Also ListView in a ScrollView is not a good idea, could come from here. Look this post: How can I put a ListView into a ScrollView without it collapsing?

Answers 4

use weightSum for all components in your xml file,

It's android:layout_weight. Weight can only be used in LinearLayout. If the orientation of linearlayout is Vertical, then use android:layout_height="0dp" and if the orientation is horizontal, then use android:layout_width = "0dp". It'll work perfectly.

From your question -- bottom of the layout is being cut off

It is because of fixed height given to components.

EDIT -- xml added

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:padding="5dp"     tools:context="info.androidhive.materialtabs.fragments.OneFragment">      <ScrollView         android:id="@+id/scrollView"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:fadingEdge="none"         android:fillViewport="true"         android:isScrollContainer="true"         android:scrollbars="none">          <LinearLayout             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:orientation="vertical"             android:weightSum="10">              <LinearLayout                 android:layout_width="fill_parent"                 android:layout_height="0dp"                 android:layout_weight="1">                  <android.support.design.widget.TextInputLayout                     android:id="@+id/text_input_layout"                     android:layout_width="match_parent"                     android:layout_height="wrap_content">                      <EditText                         android:id="@+id/editText"                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:hint="Recipe Title" />                 </android.support.design.widget.TextInputLayout>             </LinearLayout>              <LinearLayout                 android:layout_width="fill_parent"                 android:layout_height="0dp"                 android:layout_weight="3.5"                 android:orientation="vertical">                  <TextView                     android:id="@+id/ingredientsHeading"                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:padding="5dp"                     android:text="Ingredients"                     android:textStyle="bold|italic" />                  <ListView                     android:id="@+id/ingredientsList"                     android:layout_width="match_parent"                     android:layout_height="wrap_content" />             </LinearLayout>              <LinearLayout                 android:layout_width="fill_parent"                 android:layout_height="0dp"                 android:layout_weight="1"                 android:gravity="center">                  <Button                     android:id="@+id/addIngredient"                     style="@style/AppTheme"                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_gravity="center_horizontal"                     android:enabled="true"                     android:text="Add Ingredient" />              </LinearLayout>              <LinearLayout                 android:layout_width="fill_parent"                 android:layout_height="0dp"                 android:layout_weight="3.5"                 android:orientation="vertical">                  <TextView                     android:id="@+id/directionsHeading"                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:padding="5dp"                     android:text="Directions"                     android:textStyle="bold|italic" />                  <ListView                     android:id="@+id/directionsList"                     android:layout_width="match_parent"                     android:layout_height="wrap_content" />              </LinearLayout>              <LinearLayout                 android:layout_width="fill_parent"                 android:layout_height="0dp"                 android:layout_weight="1"                 android:gravity="center">                  <Button                     android:id="@+id/addDirection"                     style="@style/AppBaseTheme"                     android:layout_width="wrap_content"                     android:layout_height="wrap_content"                     android:layout_gravity="center_horizontal"                     android:enabled="true"                     android:text="Add Direction" />             </LinearLayout>         </LinearLayout>     </ScrollView> </LinearLayout> 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment