Add checkout button at bottom of page

Question

I'm trying to show a "checkout" button at the bottom of the page under my RecyclerView.

My XML file looks like this:

<androidx.drawerlayout.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/background_light"
    android:id="@+id/drawer_layout"
    tools:context=".Cart">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include
            layout="@layout/main_toolbar"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/Cart"
            android:gravity="center"
            android:fontFamily="@font/poppinsbold"
            android:textSize="20dp"
            android:textStyle="bold"
            android:layout_marginTop="20dp"
            android:layout_marginLeft="10dp"/>


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="555dp"
            android:layout_marginBottom="500px"/>
        

        <Button
            android:id="@+id/checkout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:text="Checkout" />

    </LinearLayout>


    <RelativeLayout

        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white">


        <include
            layout="@layout/main_nav_drawer"/>
    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Unfortunately, when I apply the changes, the products look great, but the button doesn't show.

How can I make it shows up?

Many thanks in advance.

score 1 · Answer 1 · answered Apr 24 '21 at 19:30

1

Problem is with your layout_marginBottom attribute of RecyclerView. 500px?! Are you kidding me? 8dp will be enough.

answered Apr 24 '21 at 19:30

AliAndArdDev

181
1
8

Thanks for your answer. This actually didn't solve the problem, but @Zain did. – Koti Apr 24 '21 at 19:38

Lloyd Robert Smith · Answer 2 · 2021-04-24T19:53:33.660

Potential Options:

Set the margin dynamically based on the screen resolution, in conjunction with a ConstraintLayout. Here are some examples:
- https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout?hl=id#RelativePositioning
- https://constraintlayout.com/layouts/percentlayout.html
Set the margin dynamically based on your desired proportions. Here is one example: https://stackoverflow.com/a/16200839/9772953
Remove the bottom margin for the RecyclerView.
Consider updating the bottom margin for your RecyclerView by replacing it with something much smaller.

score 1 · Accepted Answer · answered Apr 24 '21 at 19:35

You need to

Remove the bottom padding of the RecyclerView
Not to designate the height of the RecyclerView, and instead use a weight of the RecyclerView to be expanded until the button
Remove android:layout_alignParentBottom="true" from the Button as it's not related to the LinearLayout

Applying that:

<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.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"
    android:background="@android:color/background_light">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/main_toolbar" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="20dp"
            android:fontFamily="@font/poppinsbold"
            android:gravity="center"
            android:text="@string/Cart"
            android:textSize="20dp"
            android:textStyle="bold" />


        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:layout_height="0dp" />
    
        <Button
            android:id="@+id/checkout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Checkout" />

    </LinearLayout>

    <RelativeLayout
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@android:color/white">

        <include layout="@layout/main_nav_drawer" />
        
    </RelativeLayout>

</androidx.drawerlayout.widget.DrawerLayout>

Many thanks for the answer Zain. It actually solved my problem and I'll work on it in to make the layout exactly as I want to. — Koti, Apr 24 '21 at 19:40

Add checkout button at bottom of page

3 Answers3