如何制作一个圆纽扣？

我试着做一个圆按钮，但是我不知道怎么做。我可以做圆角按钮，但我怎么能圆的圆圈。这不一样。拜托，告诉我，在仿生人上可能吗？谢谢你。

386208 次浏览
小开

是的，这是可能的，在谷歌上寻找9-patch。好文章:

Http://radleymarx.com/blog/simple-guide-to-9-patch/

Http://ogrelab.ikratko.com/custom-color-buttons-for-android/

小开

Android 中的圆形按钮

你可以做一个圆形背景图像的 ImageButton。

小开

是的

android.R.drawable.expander_ic_minimized

研究内置的机器人绘图工具:

Http://androiddrawableexplorer.appspot.com/

小开

使用 图片按钮代替 Button... 。

使用 透明的背景制作圆形图像

小开
最佳答案

在可绘制文件夹中创建名为 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"

如果你想使它完全圆形，改变半径和解决的东西，你是确定的。

小开

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

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

小开

为圆形按钮创建一个形状:

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

使用它作为你的按钮 链接的背景

小开

Markushi 的安卓圆形按钮:

(本库已被废弃，没有新的开发正在进行。考虑使用 FAB 代替。)

enter image description here

小开 

<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"
小开

如果你使用 Android Studio，你可以使用:

<?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 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 可绘制资源，并简单使用和图像圆形图像按钮，使用您的绘制作为背景。

小开

你可以使用 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" />

Java:

  @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'
小开

  1. 创建一个包含以下内容的可绘制/Button _ states.xml 文件:

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

  2. Use it in button tag in any layout file

    <Button
android:layout_width="220dp"
android:layout_height="220dp"
android:background="@drawable/button_states"
android:text="@string/btn_scan_qr"
android:id="@+id/btn_scan_qr"
android:textSize="15dp"
/>
小开
  1. 使用“图像按钮”并将背景设置为所需的图像。
  2. 从 android 资产工作室链接创建图像-

“ 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 项目的可拖动文件夹中。

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

小开

如果你想要一个看起来像 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。

小开

你可以使用 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

小开

我把所有的答案都过了一遍。但他们都不是初学者。所以在这里我给出了一个非常详细的答案，并用图片进行了充分的解释。

打开 Android Studio。转到 项目窗口并滚动到 保留意见文件夹下的 可以画的文件夹

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);
}
}

我安装了 像素4 API 30 AVD。 在 AVD中运行代码之后，显示如下->

enter image description here

小开

我只是使用 FloatingActionButton和 elevation = 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" />
小开

完全圆形的圆形形状。

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

编码愉快！

小开

如果有人需要一个浮动动作按钮，但不想依赖于整个材质库，这里有一个最小的实现，看起来完全一样，有涟漪动画，阴影，和 show()/hide()动画方法。

enter image description here

小部件代码:

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 }

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

<CircularImageButton
android:id="@+id/fab"
android:layout_width="40dp"
android:layout_height="40dp"


android:src="@drawable/ic_your_drawable"
android:scaleType="center"


android:layout_margin="12dp"
android:elevation="3dp"


android:outlineAmbientShadowColor="#7000"
android:outlineSpotShadowColor="#7000"
android:foreground="?attr/selectableItemBackgroundBorderless" />
小开

2021年最新情况:

用 材料按钮

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

我喜欢这个解决方案

            <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>
小开

使用 Jetpack Comose，您可以定制您的按钮，而不需要任何三方库或样板代码。

  Button(
onClick = { /* do something when button clicked*/ },
modifier = Modifier
.width(64.dp)
.height(64.dp),
shape = CircleShape
) {
Icon(Icons.Default.Star, "")
}

提交答案