How to add recylerview in 1/3rd part of activity

Viewed 25

I have on activity in which i need to add one horizontal list for showing the formats of image which should be appear in the lower part of the activity. Here is my xml file.

     <?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"
        android:background="@color/white"
        android:fitsSystemWindows="true"
        tools:context=".view.quickaction.QuickActionVideoActivity">
    
        <RelativeLayout
            android:id="@+id/quick_action_video_header_contatiner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="20dp"
            android:orientation="vertical"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
            <TextView
                android:id="@+id/quick_action_video_close"
                android:layout_width="match_parent"
                android:layout_height="25dp"
                android:layout_marginTop="20dp"
                android:text="@string/button_cancel"
                android:textColor="@color/express_purple"
                android:textSize="18dp" />
    
            <TextView
                android:id="@+id/quick_action_video_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/quick_action_video_close"
                android:layout_marginTop="30dp"
                android:fontFamily="@font/adobe_clean_bold"
                android:text="@string/quick_action_resize_video_header"
                android:textColor="@color/black_alpha_85"
                android:textSize="32dp" />
    
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/quick_action_video_title"
                android:text="@string/powered_by_magicX"
                android:textColor="@color/black_alpha_85"
                android:textSize="14dp" />
        </RelativeLayout>
    
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/zoom_surface"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="15dp"
            android:background="@drawable/rounded_rectangle_rect"
            android:visibility="visible"
            app:layout_constraintDimensionRatio="H,5:4"
            app:layout_constraintEnd_toStartOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/quick_action_video_header_contatiner">
    
            <com.otaliastudios.zoom.ZoomSurfaceView
                android:id="@+id/surface_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="25dp"
                android:layout_marginBottom="25dp"
                app:horizontalPanEnabled="true"
                app:verticalPanEnabled="true"
                app:zoomEnabled="true" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
    
        <RelativeLayout
            android:id="@+id/relativeLayout3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/zoom_surface"
            app:layout_constraintBottom_toTopOf="@id/relativeLayout2"
            tools:ignore="MissingConstraints">
    
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/rvList"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:orientation="horizontal"
                app:layout_constrainedHeight="true"/>
    
        </RelativeLayout>
    
        <RelativeLayout
            android:id="@+id/relativeLayout2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">
    
            <Button
                android:id="@+id/quick_action_video_save_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_marginTop="12dp"
                android:layout_marginBottom="12dp"
                android:layout_weight="1"
                android:background="@drawable/button_bg_rounded_corners"
                android:fontFamily="@font/adobe_clean_bold"
                android:text="@string/save_share_option"
                android:textColor="@color/white_alpha_80" />
        </RelativeLayout>
    
    </androidx.constraintlayout.widget.ConstraintLayout>

It should look like this:

Recylerview at the bottom above the button

But this recyler-view while loading taking the whole space of the activity and one header also. Can you tell me what is wrong in this? Can recyler-view won't be able to host inside this view.

1 Answers

The issue is that you don't have a top to bottom of constraint and have set the height as match constraints.. However for layouts like this i have a few tips..

  1. do the layouts first with constant heights like 200 dp or so and change them later

  2. follow a top to bottom or a bottom to top approach that is one view at the top and everything else is done taking that as anchor

  3. use constraint layouts throughout. You don't need any other layout type if you're using constraint layout

 <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/zoom_surface"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginStart="15dp"
            android:layout_marginTop="30dp"
            android:layout_marginEnd="15dp"
            android:background="@drawable/rounded_rectangle_rect"
            android:visibility="visible"
            app:layout_constraintDimensionRatio="H,5:4"
            app:layout_constraintEnd_toStartOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/quick_action_video_header_contatiner"
app:layout_constraintBottom_toTopOf=" ">add the suitable id
    
            <com.otaliastudios.zoom.ZoomSurfaceView
                android:id="@+id/surface_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="25dp"
                android:layout_marginBottom="25dp"
                app:horizontalPanEnabled="true"
                app:verticalPanEnabled="true"
                app:zoomEnabled="true" />
    
        </androidx.constraintlayout.widget.ConstraintLayout>
Related