如何制作圆形按钮?

时间:2012-04-22 08:57:57

标签: android

我正在尝试制作圆形按钮,但我不知道该怎么做。我可以制作带圆角的按钮,但我怎么能圆圈。这是不一样的。请告诉我,Android上有可能吗?谢谢。

22 个答案:

答案 0 :(得分:228)

在drawable文件夹中创建名为roundedbutton.xml的xml文件

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

最后将其设为Button的背景android:background = "@drawable/roundedbutton"

如果你想让它完全圆润,改变半径并找到适合你的东西。

答案 1 :(得分:36)

如果使用Android Studio,您只需使用:

SELECT First_Name + ' ' + Middle_Name + ' ' + Last_Name AS studentname
      ,Batch
      ,right(Batch,2) + 1 AS batch1
      ,Admtd_Semester
      ,Program
      ,Title
      ,@His_Her AS His_Her
      ,Fathers_Name
      ,Branch_Name
      ,Student_Mobile_Number
      ,Fathers_Mobilenumber
      ,CONVERT ( VARCHAR ( 10 ) ,GETDATE () ,110 ) AS date
FROM STUDENT_Admission_1212341;

这对我来说很好,希望这有助于某人。

答案 2 :(得分:26)

  1. 创建一个包含以下内容的drawable / button_states.xml文件:

    (y)
  2. 在任何布局文件中的按钮标记中使用它

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="false"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#41ba7a" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
        <item android:state_pressed="true"> 
            <shape android:shape="rectangle">
            <corners android:radius="1000dp" />
            <solid android:color="#3AA76D" />
            <stroke
                android:width="2dip"
                android:color="#03ae3c" />
            <padding
                android:bottom="4dp"
                android:left="4dp"
                android:right="4dp"
                android:top="4dp" />
            </shape>
        </item>
    </selector>
    

答案 3 :(得分:14)

Markushi's android circlebutton:

(不推荐使用此库,并且没有进行新的开发。请考虑使用FAB。)

enter image description here

答案 4 :(得分:5)

将形状用作椭圆形。这使按钮变为椭圆形

<item>
    <shape android:shape="oval" >
        <stroke
            android:height="1.0dip"
            android:width="1.0dip"
            android:color="#ffee82ee" />

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

        <corners
            android:bottomLeftRadius="12.0dip"
            android:bottomRightRadius="12.0dip"
            android:radius="12.0dip"
            android:topLeftRadius="12.0dip"
            android:topRightRadius="12.0dip" />
    </shape>
</item>

答案 5 :(得分:5)

<corners android:bottomRightRadius="180dip"
    android:bottomLeftRadius="180dip"
    android:topRightRadius="180dip"
    android:topLeftRadius="180dip"/>

<solid android:color="#6E6E6E"/> <!-- this one is ths color of the Rounded Button -->

并将其添加到按钮代码

    android:layout_width="50dp"
    android:layout_height="50dp"

答案 6 :(得分:4)

如果您想让FAB看起来像圆形按钮,并且您正在使用官方的材料组件库,则可以轻松地做到这一点:

<com.google.android.material.button.MaterialButton
    style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton"
    app:cornerRadius="28dp"
    android:layout_width="56dp"
    android:layout_height="56dp"
    android:text="1" />

结果:

enter image description here

如果您更改按钮的大小,请小心使用按钮大小的一半作为app:cornerRadius

答案 7 :(得分:3)

Round button in Android

您可以制作带有圆形背景图像的ImageButton

答案 8 :(得分:3)

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

在您的XML可绘制资源上设置它,并使用您的drawable作为背景,使用圆形图像简单使用和图像按钮。

答案 9 :(得分:3)

使用 ImageButton 代替Button ....

并使用透明背景

制作圆形图像

答案 10 :(得分:2)

对于圆形按钮,创建一个形状:

<?xml version="1.0" encoding="utf-8"?>

<stroke
    android:width="8dp"
    android:color="#FFFFFF" />

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


<corners
    android:bottomLeftRadius="45dp"
    android:bottomRightRadius="45dp"
    android:topLeftRadius="45dp"
    android:topRightRadius="45dp" />

将其用作按钮link

的背景

答案 11 :(得分:1)

2021 年更新:

只需使用MaterialButton

<com.google.android.material.button.MaterialButton
    app:cornerRadius="30dp"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:text="test" />
  • 宽等高
  • cornerRadius 是宽度或高度的一半

答案 12 :(得分:1)

答案 13 :(得分:0)

如果有人需要浮动操作按钮,但又不想依赖整个材质库,这里有一个看起来完全相同的最小实现,具有波纹动画、阴影和 show()/{ {1}} 种带动画的方法。

enter image description here

小部件代码:

hide()

还有 xml,其中 40dp 是 FAB 的“迷你”版本。

class CircularImageButton @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
) : AppCompatImageButton(context, attrs) {
    init {
        background = null
        outlineProvider = pillOutlineProvider
        clipToOutline = true
    }

    fun show() {
        if (visibility != VISIBLE) {
            visibility = VISIBLE
            startAnimation(showAnimation)
        }
    }

    fun hide() {
        if (visibility != INVISIBLE) {
            visibility = INVISIBLE
            startAnimation(hideAnimation)
        }
    }

    override fun setBackgroundColor(color: Int) {
        if (backgroundPaint.color != color) {
            backgroundPaint.color = color
            invalidate()
        }
    }

    private val backgroundPaint = Paint().apply { style = Paint.Style.FILL }

    override fun onDraw(canvas: Canvas?) {
        canvas?.drawPaint(backgroundPaint)
        super.onDraw(canvas)
    }
}


val pillOutlineProvider = object : ViewOutlineProvider() {
    override fun getOutline(view: View, outline: Outline) {
        outline.setRoundRect(0, 0, view.width, view.height, view.height.f / 2)
    }
}


private val animationDuration = applicationContext
        .resources.getInteger(android.R.integer.config_shortAnimTime).toLong()

val showAnimation = ScaleAnimation(
        0f, 1f, 0f, 1f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f)
        .apply { duration = animationDuration }

val hideAnimation = ScaleAnimation(
        1f, .5f, 1f, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f,
        Animation.RELATIVE_TO_SELF, 0.5f)
        .apply { duration = animationDuration }

答案 14 :(得分:0)

我喜欢这个解决方案

            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:cardCornerRadius="18dp"
                app:cardElevation="0dp"
                >
                <ImageButton
                        android:layout_width="35dp"
                        android:layout_height="35dp"
                        android:background="@null"
                       android:scaleType="centerCrop"
              android:src="@drawable/social_facebook"
                        />
            </androidx.cardview.widget.CardView>

答案 15 :(得分:0)

全圆的圆形。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#F0F0F0" />
    <corners
        android:radius="90dp"/>
</shape>

快乐编码!

答案 16 :(得分:0)

我只是将FloatingActionButtonelevation = 0dp一起使用以去除阴影:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_send"
    app:elevation="0dp" />

答案 17 :(得分:0)

我回答了所有答案。但是它们都不是初学者友好的。因此,我在这里给出了非常详细的答案,并用图片进行了详细说明。

打开Android Studio。转到项目窗口,然后滚动到 res 文件夹

下的可绘制文件夹

enter image description here

右键单击,选择新建-> 可绘制资源文件夹

enter image description here

在出现的窗口中,将文件命名为rounded_corners,然后单击确定

enter image description here

创建了一个新文件rounded_corners.xml

打开文件。出现以下代码->

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

</selector>

enter image description here

用以下代码替换它->

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="8dp" />
    <solid android:color="#66b3ff" />
</shape>

enter image description here

在这里可以在右侧看到设计视图

调整android:radius中的值以使按钮或多或少地四舍五入。

然后转到activity_main.xml

输入以下代码->

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:padding="10dp">

    <Button
        android:id="@+id/_1"
        android:text="1"
        android:textSize="25dp"
        android:textColor="#ffffff"
        android:background="@drawable/rounded_corners"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>

</RelativeLayout> 

在这里,我将Button放在了RelativeLayout中。您可以使用任何Layout

出于参考目的,MainActivity.java代码如下->

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

我安装了 Pixel 4 API 30 avd 。 在 avd 中运行代码后,显示如下->

enter image description here

答案 18 :(得分:0)

您可以使用MaterialButton

     <com.google.android.material.button.MaterialButton
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:insetTop="0dp"
            android:insetBottom="0dp"
            android:text="A"
            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Rounded"
            />

并应用以下通告ShapeAppearanceOverlay

<style name="ShapeAppearanceOverlay.App.rounded" parent="">
    <item name="cornerSize">50%</item>
</style>

enter image description here

答案 19 :(得分:0)

  1. 使用图像按钮并将背景设为所需图像。
  2. 从android资产工作室链接创建图像 -
  3. https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0.25&foreColor=rgba(94%2C%20126%2C%20142%2C%200)&backColor=rgb(96%2C%20125%2C%20139)&crop=1&backgroundShape=circle&effects=none&name=ic_home

    然后下载它,将其下载到mipmap-hdpi文件夹中。

    1. 从mipmap-hdpi文件夹中复制图像并将其粘贴到Android项目的drwable文件夹中。

    2. 现在将背景设置为该图像。

答案 20 :(得分:0)

您可以使用Google的FloatingActionButton

XML:

<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@android:drawable/ic_dialog_email" />

爪哇:

  @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    FloatingActionButton bold = (FloatingActionButton) findViewById(R.id.fab);
    bold.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
        // Do Stuff
        }
    });
}

摇篮:

    compile 'com.android.support:design:23.4.0'

答案 21 :(得分:0)

android.R.drawable.expander_ic_minimized

了解内置的android drawables:

http://androiddrawableexplorer.appspot.com/