android 材料按钮圆角

ckx4rj1h  于 2023-03-16  发布在  Android
关注(0)|答案(9)|浏览(143)

我遵循this等问题的提示来创建一个类似Material Design上建议的按钮样式。

但是,我需要更改加铺转角,但无法通过继承Widget.AppCompat.Button.Colored样式和设置radius参数来完成此操作。
我怎么能有相同的风格,但圆角?

ilmyapht

ilmyapht1#

尝试以下代码创建一个名为circular_button. xml的可绘制文件并插入以下代码

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

然后将按钮的背景更改为该可绘制文件

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

如果你想要一个完整的圆形按钮,你可以使用下面的绘图

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

xqnpmsa82#

只使用材质按钮和圆角半径,但不要设置背景色。要设置背景色,请使用backgroundTint,它应该可以正常工作

<com.google.android.material.button.MaterialButton
            android:id="@+id/post_comment"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:cornerRadius="10dp"
            android:backgroundTint="@color/blue"
            android:text="Jogapla"
            android:textAllCaps="false"
            android:textSize="14sp"
            android:textColor="@color/white"
            android:fontFamily="@font/sfpro_heavy"
            android:layout_marginHorizontal="10dp"
            android:layout_marginBottom="10dp" />
    ````
x8goxv8g

x8goxv8g3#

使用**Material Components Library:**。
the dependency添加到您的build.gradle

dependencies { implementation ‘com.google.android.material:material:1.3.0’ }

在这种情况下,您可以在布局文件中使用MaterialButton

<com.google.android.material.button.MaterialButton
   ....
   style="@style/Widget.MaterialComponents.Button"
   app:cornerRadius=".."
   app:strokeColor="@color/colorPrimary"/>

使用**app:cornerRadius**属性来更改圆角半径的大小。这将使指定尺寸的圆角变圆。

也可以使用**shapeAppearanceOverlay**属性自定义角。

<style name="MyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
    <item name="shapeAppearanceOverlay">@style/MyShapeAppearance</item>
</style>
<style name="MyShapeAppearance">
    <item name="cornerFamily">rounded</item>
    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeTopLeft">32dp</item>
    <item name="cornerSizeBottomLeft">32dp</item>
</style>

官方文档是here和所有的android规格here

对于Jetpack合成1.0.x,使用**shape**参数:

Button( onClick = { /* Do something! */ },
            shape = RoundedCornerShape(8.dp)) {
        Text("Button")
    }

Button(modifier = Modifier.padding(16.dp),
            onClick = { /* Do something! */ },
            shape = RoundedCornerShape(
                50,  // topEndPercent
                0,   // topEndPercent
                0,   // bottomEndPercent
                50.  // bottomStartPercent
            )
    ) {
        Text("Button")
    }

旧支持库:

在新的支持库28.0.0中,设计库现在包含Material Button
您可以使用以下命令将此按钮添加到布局文件:

<android.support.design.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="XXXXX"
    android:textSize="18sp"
    android:backgroundTint="@color/colorPrimary"
    app:icon="@drawable/ic_android_white_24dp" />

可以使用此属性设置加铺转角

  • app:cornerRadius: 用于定义按钮角的半径

dependencies {
  implementation 'com.android.support:design:28.0.0'
}
insrf1ej

insrf1ej4#

更新:

下面Gabriele Mariotti的回答现在更好。

旧答案:

你需要继承这种风格。
添加到您的样式.xml:

<style name="AppTheme.RoundedCornerMaterialButton" parent="Widget.AppCompat.Button.Colored">
        <item name="android:background">@drawable/rounded_shape</item>
 </style>

添加文件drawable/rounded_shape.xml:

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

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

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

</shape>

最后,在布局中:

<Button
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Test Text"
       style="@style/AppTheme.RoundedCornerMaterialButton"/>

编辑:更新答案使用主题的颜色,而不是硬编码的颜色。

kxkpmulp

kxkpmulp5#

具有涟漪效果的圆形材质按钮

在可绘制文件夹涟漪.xml中创建文件

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:attr/colorControlHighlight">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="20dp" />
        </shape>
    </item>
    <item android:drawable="@drawable/rounded_shape" />
</ripple>

在可绘制文件夹rounded_shape.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/colorPrimary" >
    </solid>
    <corners
        android:radius="20dp"   >
    </corners>
</shape>

在您的按钮上:

<Button
android:id="@+id/button1"
android:background="@drawable/ripple"
android:text="Login"/>
3duebb1j

3duebb1j6#

现在使用MaterialButton为圆形按钮更多的事情你可以做这个。请按照链接
并为圆角添加app:cornerRadius="8dp"
别忘了在build.gradle中添加谷歌素材库

implementation "com.google.android.material:material:1.1.0"
brtdzjyr

brtdzjyr7#

我会告诉你我的确切解决方案。在选择器标签内,你可以把项目(按钮的功能)
选择器标签的第二项具有相反的行为。您可以添加选择器(按钮行为)添加此可绘制XML作为按钮的背景android:background="@drawable/this xml”

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="#ffffff"> <!-- this is the ripple color(first touch color changes into this color) -->
    <item>
        <selector> 
            <item android:state_enabled="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- default button color -->

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

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

                </shape>
            </item>
            <item> //first item was state enabled so this is automatically state disabled
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- button disabled color opposite behaviour -->
                    <solid android:color="#e9d204"></solid>

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

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- button first touch of your finger color -->
                    <solid android:color="#1989fa"></solid>

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

                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_hovered="true">
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="rectangle">
                    <!-- hovered with a note pencil -->
                    <solid android:color="#4affffff"></solid>

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

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

</ripple>
5ssjco0h

5ssjco0h8#

另一个简单的方法是将其环绕cardView,记得将cardView的layout_width和layout_height设置为wrap_content,并且按钮所需的所有边距都应应用于cardView

<android.support.v7.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardCornerRadius="8dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="40dp"
            app:elevation="10dp">

            <android.support.v7.widget.AppCompatButton
                android:id="@+id/login_twitter"
                android:tag="login_twitter"
                android:layout_width="300dp"
                android:layout_height="60dp"
                android:paddingLeft="10dp"
           android:foreground="?attr/selectableItemBackgroundBorderless"
                android:textColor="@color/blue_grey_ligthen_5"
                android:drawableLeft="@drawable/twitter"
                android:background="@color/twitter"
                android:text="@string/login_with_twitter" />
        </android.support.v7.widget.CardView>
dba5bblo

dba5bblo9#

如果您不想更改整个应用的主题,您可以专门为此视图使用材质主题:

<com.google.android.material.button.MaterialButton
    android:id="@+id/fooButon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:fontFamily="sans-serif"
    android:padding="8dp"
==> android:theme="@style/Theme.MaterialComponents.Light"
    app:backgroundTint="@color/base_white" />

相关问题