Custom button with text and image

Question

I'm looking for do a button like this preview :

I tried to do this with a button but my problem is that to put the border and the image I use android: background and I can not put the image and the border at the same time :/

Another problem for which I did not know how is a border to the text (which is simply the text of the button).

I wonder if I'm going in the wrong direction. I saw that there were button images but I'm not sure it suits me. Would there be a way to put a layout to a button?

<Button
        android:id="@+id/mainButton1"
        style="@style/Widget.AppCompat.Button.ButtonBar.AlertDialog"
        android:layout_width="150"
        android:layout_height="150"
        android:background="@drawable/ic_add_circle_green_500_48dp"
        android:drawable="@drawable/mainButton" <-- or android:drawable="@drawable/image" how for put the both ? -->
        android:text="Text"
         />

mainButton.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#FFFFFF"
        android:endColor="#00FF00"
        android:angle="270" />
    <corners android:radius="3dp" />
    <stroke android:width="5px" android:color="#000000" />
</shape>

i have found many answers on Stackoverflow but the link to tutos was dead ...

Answer 1

You can create your custom View with desired background and ImageView,TextView inside. Then set ClickListener to it.

If you want background behind TextView you can use SpannableString or just create XML drawable and set it as TextView background.

Here what i've done:

Button class:

public class CustomButton extends LinearLayout {

    public CustomButton(Context context) {
        super(context);
        inflateLayout(context);
    }

    public CustomButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        inflateLayout(context);
    }

    public CustomButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflateLayout(context);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        inflateLayout(context);
    }

    private void inflateLayout(Context context) {
        inflate(context, R.layout.custom_button, this);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        TextView textView = findViewById(R.id.textView);
        makeSpannable(textView);
    }

    private void makeSpannable(TextView textView) {
        Spannable spannable = new SpannableString(textView.getText());
        spannable.setSpan(new BackgroundColorSpan(0xFFFF0021), 0, textView.getText().length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        textView.setText(spannable);
        invalidate();
    }
}

layout for CustomButton:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/background"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_width="match_parent"
        android:text="CLICK ME!"
        android:textSize="16dp" />

</LinearLayout>

background for button:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dp" android:color="#00FFFF" />
    <corners android:radius="10dp"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

What I've got: