How to create a button with border and transparent background android

Question

How can I create this type of a button in android which has only borders and is transparent, like the "ADD" button in the picture below?

PS This is a picture from Ludmila Shevchenko's travel app. Although the screenshot is of ios, I would want to achieve this in android. How can I do it?

Answer 1

you should create a shape in a xml file like below, and set it as your button background

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle"
        >
        <solid android:color="@android:color/transparent" />

        <stroke
            android:width="2dp"
            android:color="@color/your_border_color" />
    </shape>

Answer 2

button_round.xml

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

<item android:state_pressed="true" >

    <shape android:shape="rectangle">
        <corners android:radius="5dp"/>
        <stroke android:width="1dp"
                android:color="@color/yellow"/>
    </shape>

</item>

<item>

    <shape android:shape="rectangle">
        <corners android:radius="4dp"/>
        <stroke android:width="1dp"
                android:color="@color/yellow"/>

    </shape>
</item>
</selector>

now apply this to you button background

<Button
                android:id="@+id/button_id"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="USE Button"
                android:background="@drawable/button_round"
                android:textColor="@color/yellow"
        />

Answer 3

You can achieve this using Shape Drawable.

Create a shape button_background.xml in your drawable folder as below:

<shape shape="rectangle">
    <stroke width="2dp" color="@android:color/white" /> // You may change color as per your need
    <solid color="@android:color/transparent" />
</shape>

Apply this drawable to your button background attribute as:

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/button_background"
    android:drawableStart="@drawable/ic_plus" />

ic_plus is the icon you will need to your project.

Answer 4

you don't need to add extra resource xml, just copy this and paste it. its so simple.Thanks

           <com.google.android.material.button.MaterialButton
                        android:id="@+id/JoinButton_id"
                      style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="left"
                        android:layout_margin="20dp"
                        android:text="JOIN"
                        android:textColor="@color/white"
                        app:strokeColor="@color/white" />

enter image description here