change the appearance of button into round button

Question

I want to made the present rectangular button into round shape and add the picture of share button in it. I mean the button should be of round share and it should have only image(fit) of "share"

<Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="8dp"
        android:text="03"
        android:textStyle="bold"/>

just use image view and give click listener for it if you don't need text — Manohar, Jul 03 '19 at 04:11
Can you share image of UI ,what exactly layout you want? or Entire code of layout, please ?! — Happy Bhimani, Jul 19 '19 at 05:46

score 1 · Answer 1 · answered Jul 03 '19 at 04:38

You can find the answer Here

create a resource drawable

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <stroke android:width="1dp" android:color="#FF404040" /> 
  <corners android:radius="6dp" /> 
  <gradient android:startColor="#FF6800" android:centerColor="#FF8000" android:endColor="#FF9700" android:angle="90" /> 
</shape>

then set to the button background .

android:background="@drawable/button_background"

score 1 · Accepted Answer · answered Jul 03 '19 at 05:22

1

Create drawable file as bg_share.xml

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

<solid
    android:color="@color/colorPrimaryDark">
</solid>

<corners
    android:radius="500dp">
</corners>

<padding
    android:top="0dp"
    android:right="10dp"
    android:left="10dp"
    android:bottom="0dp">
</padding>

</shape>

And in your main.xml create imageview instead of button like

 <ImageView
       android:id="@+id/share"                         
       android:layout_width="wrap_content"                        
       android:layout_height="wrap_content"                        
       android:background="@drawable/bcshare"
       android:padding="10dp"
       android:src="@drawable/ic_share_black_24dp" />

In MainActivity.java do something like this

 share.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
           //Your code...
        }
    });

answered Jul 03 '19 at 05:22

Priya Vasoya

215
1
8

you can get it from vector assets – Priya Vasoya Jul 03 '19 at 10:38
how can I centerd a "share" icon in this imageView? @PriyaVasoya – Dibas Dauliya Jul 03 '19 at 10:52
are you use image or vector drawable in android:src ? @Rajana – Priya Vasoya Jul 03 '19 at 11:26
vector drawable – Dibas Dauliya Jul 03 '19 at 12:05
then definitely it is in center ,using my code or else share your code – Priya Vasoya Jul 03 '19 at 12:30

score 0 · Answer 3 · answered Jul 03 '19 at 04:12

0

you can create a separate drawable and implement round shape. Then set the drawable to the background of the button as below

Create a drawable file as circle_button.xml

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

    <solid
        android:color="#008577"/>

    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

Then change the layout as follows

<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:background="@drawable/circle_button"
   android:text="Button"/>

answered Jul 03 '19 at 04:12

Udara Abeythilake

1,215
1
20
31

why error is showing in shape and where can i add "Share" pic @UdaraAbeythilake? – Dibas Dauliya Jul 03 '19 at 09:53
background is showing oval is showing but pic if share is not showing, i kept android:src=".." but pic is not showing – Dibas Dauliya Jul 03 '19 at 10:07
inside the button use background attribute to set the drawable not the src – Udara Abeythilake Jul 03 '19 at 10:11
then for oval view of button? – Dibas Dauliya Jul 03 '19 at 10:18

score 0 · Answer 4 · answered Jul 03 '19 at 05:31

Create an xml in drawable folder and name it like: "round.xml" and use this xml in your given button background.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle">
    <solid android:color="#eeffffff" />
    <corners android:bottomRightRadius="8dp"
        android:bottomLeftRadius="8dp"  
        android:topRightRadius="8dp"
        android:topLeftRadius="8dp"/>
</shape>

and to your button in layout xml you can use the last line to set background

<Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="10dp"
        android:layout_marginTop="8dp"
        android:text="03"
        android:textStyle="bold"
        android:background="@drawable/round"/>

image is not showing in button, i do android:share it doesn't work, while typing it was not given as recommendation — Dibas Dauliya, Jul 03 '19 at 10:10

score 0 · Answer 5 · answered Sep 05 '19 at 07:27

You can use the standard MaterialButton with the Widget.MaterialComponents.Button.Icon style.

Something like:

   <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            style="@style/Widget.MaterialComponents.Button.Icon"
            app:icon="@drawable/ic_share"
            app:iconSize="24dp"
            app:iconPadding="0dp"
            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MyApp.Button.Rounded"
            />

Use the app:shapeAppearanceOverlay to get rounded corners. In this way you will have a circle.

  <style name="ShapeAppearanceOverlay.MyApp.Button.Rounded" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">32dp</item>
  </style>

change the appearance of button into round button

5 Answers5