Setup:
I have an Activity which has a BottomNavBar + fragment containing my RecyclerView. The RecyclerView should take all the space above the BottomNavBar. The RecyclerView always dispays 2 CardViews, which should each take 50% of the RecyclerView's space (so basically rVHeight = ScreenHeight-BottomNavBarHeight). Seems easy enough, yet I can't figure out how to do it.
Problems:
The RecyclerView takes whole screen, not respecting NavBarHeight.
The computed values don't seem to match actual screen size...
activity.xml
<?xml version="1.0" encoding="utf-8"?>
<layout
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"
>
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.MainActivity">
<fragment
android:id="@+id/navHostFragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="@navigation/nav_main"
android:clipToPadding="false"
android:layout_above="@+id/bottomNavView"
/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:menu="@menu/menu_bottom_nav"
app:labelVisibilityMode="unlabeled"
android:layout_alignParentBottom="true"
/>
</RelativeLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/drawerNavView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffff"
app:itemIconTint="#8b8b8b"
app:itemTextColor="#666666"
app:menu="@menu/drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
</layout>
fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerViewClash"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:nestedScrollingEnabled="false">
</androidx.recyclerview.widget.RecyclerView>
</RelativeLayout>
card_item.xml
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
card_view:cardElevation="8dp"
card_view:cardCornerRadius="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--*************visible part****************************-->
<RelativeLayout
android:id="@+id/ivRoot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:layout_constraintTop_toTopOf="parent"
card_view:layout_constraintBottom_toTopOf="@id/relLayoutHashtags"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintEnd_toEndOf="parent"
>
<ImageView
android:id="@+id/clash_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/image_placeholder"/>
<View
android:id="@+id/vBgWin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/bg_win_circle_background"
android:visibility="gone"/>
<ImageView
android:id="@+id/ivWin"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="center"
android:src="@drawable/ic_win_white"
android:layout_centerInParent="true"
android:visibility="invisible"/>
<!--*****************invisible part to expand on click****************************-->
<RelativeLayout
android:id="@+id/rlCollapsingPart"
android:layout_width="match_parent"
android:layout_height="100dp"
android:visibility="invisible">
<!-- android:layout_alignParentBottom="true"-->
<FrameLayout
android:id="@+id/bgCollapsingPart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:alpha="0.5">
</FrameLayout>
<RelativeLayout
android:id="@+id/relLayoutWithDescription"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/relLayoutThumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/avatarThumbnail"
style="@style/icon"
android:src="@drawable/defaultavatar"/>
<TextView
android:id="@+id/username_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:text="willsmith"
android:textColor="@color/black"
android:textStyle="bold"
android:layout_toEndOf="@+id/avatarThumbnail"
android:layout_centerVertical="true"/>
<ImageView
android:id="@+id/comment_image"
android:layout_height="45dp"
android:layout_width="45dp"
android:padding="10dp"
android:src="@drawable/ic_comment"
android:layout_toStartOf="@+id/bookmark_image"/>
<ImageView
android:id="@+id/bookmark_image"
android:layout_height="45dp"
android:layout_width="45dp"
android:padding="10dp"
android:src="@drawable/ic_bookmark"
android:layout_toStartOf="@+id/more_image"/>
<ImageView
android:id="@+id/more_image"
android:layout_alignParentEnd="true"
android:layout_height="45dp"
android:layout_width="45dp"
android:padding="10dp"
android:src="@drawable/ic_more_vert_black"/>
</RelativeLayout>
<TextView
android:id="@+id/caption_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingStart="10dp"
android:textColor="@color/black"
android:layout_alignParentStart="true"
android:layout_below="@+id/relLayoutThumbnail"
tools:text="willsmith This is a caption for the post. It's actually a very long caption."/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/relLayoutHashtags"
android:layout_width="match_parent"
android:layout_height="24dp"
card_view:layout_constraintTop_toBottomOf="@+id/ivRoot"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintEnd_toStartOf="@+id/expand">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#Hashtag1"
android:id="@+id/tv1"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#Hashtag2sdf"
android:id="@+id/tv2"
android:layout_toEndOf="@+id/tv1"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingRight="5dp"
android:text="#Hashtagdsfgdfg1"
android:id="@+id/tv3"
android:layout_toEndOf="@+id/tv2"/>
</RelativeLayout>
<ImageView
android:id="@+id/expand"
android:src="@drawable/ic_expand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintTop_toBottomOf="@+id/ivRoot"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.card.MaterialCardView>
Adapter.kt
Like I explained, I try to compute the space allowed for the RecyclerView, which should be TotalScreenHeight - BottomNavBarHeight. Then I should have rVHeight/2 - 24*2-16 (24*2 for the small bar with the TextViews and 16 for 2*8dp margin). I also resize the image itself or it would be bigger because of WRAP_CONTENT and the way Glide works.
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
val photo = photos[position]
val width = holder.view.resources.displayMetrics.widthPixels
val height = holder.view.resources.displayMetrics.heightPixels
val rVHeight = height-navHeight
holder.view.ivRoot.layoutParams.height = rVHeight/2-(24*2+16) //resize container for hidden views
with(holder.view) {
GlideApp.with(holder.view.context).load(photo.imageURL)
.diskCacheStrategy(DiskCacheStrategy.ALL)
.override(width,rVHeight/2-(24*2+16)) //resize to load proper height
.into(clash_image)
...
}
Quick image of how it looks like. As you can see, the bottom CardView is cut.
