Unable to show button below a list view

Question

PROBLEM DESCRIPTION IMAGE. THIS IS WHAT IS DESIRED (CLICK ON THE IMAGE LINK)

I am fetching data from an API and making an Android news app. Each page has X number of news articles. Lets say 10 articles per page. So I am using a ListView and an ArrayAdapter to show all the articles on 1st page. I want at the end of 10th article below listView which says "MORE" or something like that which loads the next page containing next 10 articles. Now I was working on the UI and the button is not showing below the listView.

I tried these scenarios:

1. Layout_alignparentBotton: The button is stuck at parentBottom using layout_alignParentBottom but the list is scrollable and goes below the button as the button is fixed but the list is scrollable. Expected Result

2. layout_below: I tried layout_below and gave the id of list view. Then the button does not display at all. I don't know why. I was wondering this as the possible solution but I guess I am doing something wrong.

Here is my XML:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <ListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" />


    <Button
        android:id="@+id/moreButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/list"
        android:text="More" />

</RelativeLayout>

This is what makes the listView if this helps (The XML of individual item of the List):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/customListViewID"
        android:background="@drawable/background_shape_adapter"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/newsThumbnailImage"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:scaleType="centerCrop" />

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="3"
            android:orientation="vertical"
            android:paddingStart="10dp"
            android:paddingTop="10dp">

            <TextView
                android:id="@+id/titleNewsTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="3"
                android:text="Title Of News"
                android:textAppearance="@android:style/TextAppearance.DeviceDefault.Small"
                android:textColor="#000" />

            <TextView
                android:id="@+id/newsSnippetTextView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLines="2"
                android:text="Content Snippet"
                android:textAppearance="@android:style/TextAppearance.DeviceDefault.Small.Inverse"
                android:textColor="@color/black_overlay" />
        </LinearLayout>
    </LinearLayout>


</LinearLayout>

Answer 1

Use your button with alignParentBottom and set it to invisible and when the listview reaches an end, show it.

private int preLast;
// Initialization stuff.
yourListView.setOnScrollListener(this);

// ... ... ...

@Override
public void onScroll(AbsListView lw, final int firstVisibleItem,
    final int visibleItemCount, final int totalItemCount)
{

switch(lw.getId()) 
{
    case R.id.your_list_id:     

        // Make your calculation stuff here. You have all your
        // needed info from the parameters of this function.

        // Sample calculation to determine if the last 
        // item is fully visible.
        final int lastItem = firstVisibleItem + visibleItemCount;

        if(lastItem == totalItemCount)
        {
            if(preLast!=lastItem)
            {
                bottomButton.setVisibility(View.VISIBLE);
                preLast = lastItem;
            }
        }
}
}

Answer 2

Try using a LinearLayout with vertical orientation rather than a RelativeLayout (in your first XML file).