Wang Xing Peng
Reputation: 163
Android: The bottom navigation view is blocking out part of my content in my ScrollView
The problem I have is that the bottom navigation bar is blocking the bottom part of my content in the ScrollView. I have tried to change the android:layout_height of the ScrollView to wrap_content instead of match_parent and it did resolve that issue, but it presented me with another. Now, the top part of my ScrollView is cut off from the display. Is there anyway to resolve both? I am using constraint layout as my parent layout of the activity.
Below is my xml code of the activity.
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
android:background="@color/colorBackground">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/dash_bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:backgroundTint="@color/colorWhite"
app:menu="@menu/menu_bottom_navigation"/>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toTopOf="@+id/dash_bottomNavigation"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:layout_editor_absoluteX="2dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="@+id/dash_headerImg"
android:layout_width="match_parent"
android:layout_height="260dp"
android:contentDescription="@string/app_name"
android:scaleType="centerCrop"
android:src="@drawable/header_background"
app:layout_constraintTop_toTopOf="parent"/>
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#40000000"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="@id/dash_headerImg"/>
<ImageView
android:id="@+id/dash_ic_menu"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginTop="16dp"
android:layout_marginStart="18dp"
android:contentDescription="@string/app_name"
android:src="@drawable/dashboard_ic_menu"
android:background="@drawable/dashboard_menu_background"
android:padding="7dp"
android:tint="@color/colorWhite"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<TextView
android:id="@+id/dash_welcomeText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Welcome back!"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:textColor="@color/colorWhite"
android:textSize="23sp"
android:textStyle="bold"
app:layout_constraintTop_toBottomOf="@+id/dash_ic_menu"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:layout_marginEnd="20dp"
android:background="@drawable/searchbar_background"
android:gravity="center_vertical"
android:padding="4dp"
app:layout_constraintTop_toBottomOf="@+id/dash_welcomeText">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginStart="10dp"
android:layout_marginTop="6dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="6dp"
android:contentDescription="@string/app_name"
android:src="@drawable/ic_search_black_24dp"/>
<EditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="10dp"
android:background="@null"
android:gravity="center_vertical"
android:imeOptions="actionSearch"
android:inputType="text"
tools:ignore="Autofill"
android:textColor="@color/colorPrimaryText"
android:textSize="18sp"
android:hint="Search"/>
</LinearLayout>
<View
android:id="@+id/dash_viewSupporter"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_marginBottom="50dp"
app:layout_constraintBottom_toBottomOf="@+id/dash_headerImg"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.cardview.widget.CardView
android:id="@+id/dash_runTrackerCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginEnd="10dp"
app:cardBackgroundColor="@color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toStartOf="@+id/dash_calorieTrackerCard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/dash_viewSupporter">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleX="0.7"
android:scaleY="0.7"
android:contentDescription="@string/app_name"
android:src="@drawable/run"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Run tracker"
android:textColor="@color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/dash_calorieTrackerCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="25dp"
android:layout_marginStart="10dp"
app:cardBackgroundColor="@color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintStart_toEndOf="@+id/dash_runTrackerCard"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/dash_viewSupporter">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleX="0.7"
android:scaleY="0.7"
android:contentDescription="@string/app_name"
android:src="@drawable/calorie_tracker"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Calorie tracker"
android:textColor="@color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/dash_meditationCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="25dp"
android:layout_marginTop="25dp"
android:layout_marginBottom="25dp"
android:layout_marginEnd="10dp"
app:cardBackgroundColor="@color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintEnd_toStartOf="@+id/dash_dietCard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/dash_runTrackerCard">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:contentDescription="@string/app_name"
android:scaleX="0.7"
android:scaleY="0.7"
android:src="@drawable/yoga" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Meditation"
android:textColor="@color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:id="@+id/dash_dietCard"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:layout_marginEnd="25dp"
android:layout_marginStart="10dp"
app:cardBackgroundColor="@color/colorWhite"
app:cardCornerRadius="8dp"
app:layout_constraintVertical_bias="0"
app:layout_constraintStart_toEndOf="@+id/dash_meditationCard"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/dash_calorieTrackerCard">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:padding="15dp">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleX="0.7"
android:scaleY="0.7"
android:contentDescription="@string/app_name"
android:src="@drawable/diet"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Diet"
android:textColor="@color/colorPrimaryText"
android:textSize="16sp"
android:textStyle="bold"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<RelativeLayout
android:id="@+id/dash_fitnessView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="20dp"
app:layout_constraintTop_toBottomOf="@+id/dash_meditationCard"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@color/banner_background_light">
<LinearLayout
android:id="@+id/dash_fitnessBannerLayout"
android:layout_width="170dp"
android:layout_height="280dp"
android:layout_margin="10dp"
android:background="@color/banner_background"
android:orientation="vertical">
<TextView
android:id="@+id/dash_fitnessViewAllText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="5dp"
android:text="View all" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="50dp"
android:text="Fitness LifeStyle"
android:textAllCaps="true"
android:textColor="#011a27"
android:textSize="25sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text="Embark on your fitness journey now" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="80dp"
android:paddingLeft="10dp"
android:text="From: bornfitness.com" />
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/dash_fitnessRecycler"
android:layout_width="match_parent"
android:layout_height="280dp"
android:layout_toEndOf="@+id/dash_fitnessBannerLayout"
android:background="#fcfdfe" />
<ProgressBar
android:id="@+id/dash_fitnessProgressBar"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_margin="10dp"
android:layout_toEndOf="@+id/dash_fitnessBannerLayout"
android:indeterminate="true"
android:visibility="gone" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
Screenshot of my design view of the activity:
Upvotes: 0
Views: 1587
Answers (1)
Jatin
Reputation: 213
Just make android:layout_height="0dp" in Scrollview.
And Please use NestedScrollView if you have Recyclerview inside Scoll
your Scrollview like this :
<ScrollView
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/dash_bottomNavigation"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:layout_editor_absoluteX="2dp">
</ScrollView>
Upvotes: 2
Related Questions
- Empty space on bottom of ScrollView
- Scrollview's last bottom contents hidden by the bottom navigation view
- Android ScrollView gets cut off at the bottom
- ScrollView cuts off the top and leaves space at the bottom
- android: ScrollView cuts off the top
- Bottom Navigation Bar being pushed out of view by a Scrollview Layout
- Scroll view contents are not visible with bottom bar
- android can't display the bottom of the layout
- Android scrollview hiding top content in layout
- Scroll view doesn't show bottom part