How do I make the foreground attribute for a button work below API 23?

Question

I have two Buttons nested in a LinearLayout. Between these Buttons are two TextViews. In the Xml, I have set the foreground to an image for each of these Buttons.

It runs fine on my device for Api 23. But on other devices below Api 23, the foreground image does not display and instead results in a default white solid color. Is there any way to make these images show using foreground below Api 23?

We have tried FrameLayout but it does not do what we want it to do. Would ImageButtons be a better way to solve this issue?

One of the core functions of our app is that every time a user taps a Button, the size increases and the image stretches accordingly. This is done dynamically in code. If I were to use ImageButtons, I would need to set the layout parameters every time for height and width, rather than one line of code that sets the height.

Any tips would be appreciated!

EDIT: Code I am working with -

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

    <Button
        android:layout_weight="5"
        android:id="@+id/firstP"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:foreground="@drawable/icebutton"
        android:scaleX="1"
        android:scaleY="1"/>

    <TextView
        android:layout_weight="0.5"
        android:id="@+id/firstPlayer"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:rotation="180"
        android:textColor="@android:color/white"
        android:background="@android:color/transparent"/>

    <TextView
        android:layout_weight="0.5"
        android:id="@+id/secondPlayer"
        android:gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@android:color/white"
        android:background="@android:color/transparent"/>

    <Button
        android:layout_weight="5"
        android:id="@+id/secondP"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:foreground="@drawable/firebutton"
        android:scaleX="1"
        android:scaleY="1"/>

</LinearLayout>

Answer 1

We found out that there were two issues causing the images to not be shown.
1. The size of the image file was too big, creating an outOfMemory error which in turn resulted in the buttons not displaying the images.
2. The foreground attribute does not work for API 22 and below.

Steps to solving these issues:
1. We reduced the size of the image files.
2. We replaced Button with ImageButton
3. In the XML file we removed the foreground attribute, added a black background, and added the image via the src attribute. The following is a snippet.

<ImageButton
    android:layout_weight="5"
    android:id="@+id/firstP"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:src="@drawable/icebutton"
    android:scaleType="fitXY"
    android:background="@android:color/black"/>

4. We then had to change our code to dynamically adjust the height of the buttons to match the new image buttons with the help of this link by setting the LayoutParams:
   how to change size of button dynamic in android

Now everything works perfectly!