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 ...

What I'd try first is the double check if I can just put both of these image and button into a Layout and put the layout somewhere. The longer story would be to override ViewGroup (I think) or maybe a Button. Browse through the code of Button and see where you could tinker around. — Krzysztof Kubicki, Apr 17 '18 at 15:31
basically you can use customized view (extends from a View class, and add TextView / ImageView in this view), then put your image into imageview and boarder into view's background. — Chauyan, Apr 18 '18 at 04:02

Anton Kazakov · Accepted Answer · 2018-04-17T15:55:22.413

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:

Thanks for these detailed explanations – filol Apr 17 '18 at 22:23 — filol, Apr 17 '18 at 22:23

Custom button with text and image

1 Answers1