Set "2 backgrounds" to a button

Question

I'm trying to set "2 backgrounds" to a button, the first one is an xml file to make the button corners rounded and the second one is the png image that I want.

I tried to use android:background for my xml file and android:drawableTop for my image it's working but my image is not scalled in the button.

I know that we can use an imagebutton with android:scaleType="centerInside" to scale the picture but in my case I want to do it for a button because I need to put text in it ...

Can you help me with that ?

my xml file (for the rounded shape) :

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid android:color="#FF008AB8"/>
        <stroke android:color="#0299D0"/>
        <corners android:radius="15dp"/>
    </shape>
</item>
android:radius = "150dp"</selector>

Thanks
LooKuM

Omar HossamEldin · Answer 1 · 2018-06-17T12:23:27.643

You can use a layerlist in xml drawable such that you set both the xml background and image as you exactly need then you set the background just once.

Here is an example

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <corners android:radius="@dimen/quarter_margin" />
        <stroke
            android:width="1dp"
            android:color="@color/ash_gray" />
        <solid android:color="@color/white" />
    </shape>
</item>

<item android:drawable="@drawable/blue_back">

</item>
</layer-list>

Another Solution: To be able to use just one layout and control the image, You can make you own custom control, here is an example

public class RecordButton extends LinearLayout {
@BindView(R.id.record_switch)
SwitchCompat recordSwitch;
@BindView(R.id.record_toggle_button)
ToggleButton recordButton;
private boolean checkable = true;

public RecordButton(Context context) {
    super(context);
    init(context, null);
}

public RecordButton(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs);
}

public RecordButton(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs);
}

private void init(@NonNull Context context, @Nullable AttributeSet attrs) {
    LayoutInflater inflater = LayoutInflater.from(context);
    inflater.inflate(R.layout.record_button, this);
    ButterKnife.bind(this);
    setGravity(Gravity.CENTER_HORIZONTAL);
    applyAttr(attrs);
    setChecked(false);
}

private void applyAttr(@Nullable AttributeSet attrs) {
    if (attrs != null) {
        TypedArray a = getContext().getTheme().obtainStyledAttributes(attrs,
                R.styleable.RecordButton, 0, 0);

        // Set Image
        int drawableResource = a.getResourceId(R.styleable.RecordButton_drawable, -1);
        if (drawableResource > -1) {
            int color = a.getColor(R.styleable.RecordButton_tint, -1);
            if (color > -1) {
                Drawable drawable = ContextCompat.getDrawable(getContext(), drawableResource);
                Drawable wrapDrawable = DrawableCompat.wrap(drawable);
                DrawableCompat.setTint(wrapDrawable, Color.RED);
                recordSwitch.setBackground(wrapDrawable);
            } else {
                recordSwitch.setBackgroundResource(drawableResource);
            }
        }

        // Set Orientation
        boolean isVertical = a.getBoolean(R.styleable.RecordButton_isVertical, false);
        if (isVertical) {
            setOrientation(VERTICAL);
        }
        a.recycle();
    }
}
}

Here I inflated a layout and added to this class which inherits from LinearLayout Here is the layout inflated

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

<android.support.v7.widget.SwitchCompat
    android:id="@+id/record_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="false"
    android:thumb="@android:color/transparent" />

<ToggleButton
    android:id="@+id/record_toggle_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:clickable="false"
    android:minHeight="0dp"
    android:minWidth="0dp"
    android:padding="@dimen/standard_margin"
    android:textAllCaps="false"
    android:textColor="@color/colorPrimary" />

</merge>

Now you main question comes, how can I change the image. In Java class you will find a method called applyAttr this method takes takes the custom attributes you added to your custom control

Here is an attr sample this code to attrs.xml file

 <declare-styleable name="RecordButton">
    <attr name="drawable" format="reference" />
</declare-styleable>

Hello thanks it's working ! but do you if it is possible to add multiple android drawable to this xml file and choose one of it in my button ? like after I put an other one and in my button I choose one of the item drawable ? Because I have like 50 buttons and I don't really want to create an xml file for all of my buttons ^^' I don't know if it's clear :/ Thanks again ! — LooK, Jun 16 '18 at 23:34
For example if I create 3 items drawable with an id (btn1, btn2, btn3) is it possible to choose btn1 only for the background of a button ? and btn2 id for an other button .. thanks again — LooK, Jun 16 '18 at 23:45
@LooK, I have added new solution to use only one layout with different drawable — Omar HossamEldin, Jun 17 '18 at 12:24

score 1 · Answer 2 · answered Jun 16 '18 at 22:38

1

I don't know if this works(and I can't add a comment lol) but try to set the Image in the rounded Corners XML file.

answered Jun 16 '18 at 22:38

Sandro Reazer

19
3

Hmm I tried with – LooK Jun 16 '18 at 22:49

Set "2 backgrounds" to a button

2 Answers2