Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make Circular Button with Border

I am trying to make a circular button with a transparent background and a colored border. How can I do this?

I've attached a screenshot of one of my iOS apps that shows what I'm wanting.

enter image description here

like image 713
raginggoat Avatar asked Aug 27 '14 11:08

raginggoat


People also ask

How do you make a button round border?

To make the div's borders rounded, you could add the following styling: border-radius: 15px; The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.

How do I make a circle button in HTML?

As such, if you want your button to look like a circle, all you need to do is to create a button with equal height and width, and give it a border-radius that is half that number.


2 Answers

For your button use this

<Button
 android:id="@+id/yourbuttonname"
 android:text="Button"
 android:textColor="#FFFFFF"
 android:textSize="30sp"
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:background="@drawable/buttonshape"
/>

And create a buttonshape.xml file like this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"     android:shape="rectangle" >
<corners
android:topLeftRadius="100dp"
android:topRightRadius="100dp"
android:bottomLeftRadius="100dp"
android:bottomRightRadius="100dp"
/>
<solid
android:color="#"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="100dp"
android:height="100dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>

Just adjust the values of colors and the text you want.Enjoy!!

like image 132
williamj949 Avatar answered Sep 21 '22 17:09

williamj949


You can use a MaterialButton

        <com.google.android.material.button.MaterialButton
            android:layout_width="50dp"
            android:layout_height="50dp"
            style="@style/Widget.App.Button.OutlinedButton.Icon"
            app:icon="@drawable/...."
            app:strokeColor="@color/..."
            app:iconSize="24dp"
            app:iconGravity="textStart"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Circle"
            />

with this style:

<style name="Widget.App.Button.OutlinedButton.Icon" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon">
    <item name="android:padding">0dp</item>
    <item name="iconPadding">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetRight">0dp</item>
</style>

and this shapeAppearanceOverlay:

<style name="ShapeAppearanceOverlay.MyApp.Button.Circle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

enter image description here

like image 28
Gabriele Mariotti Avatar answered Sep 21 '22 17:09

Gabriele Mariotti