Harold Harold - 5 months ago 35
Android Question

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

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

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"/>
  1. 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!

Comments