簡體   English   中英

如何制作這樣的按鈕? [科特林]

[英]How to make a button like this? [Kotlin]

點擊這里查看圖片

我想做一個這樣的按鈕,我該怎么做? 我想改變按鈕陰影的顏色。

需要 layer-list 和 AppcompatButton -> 像這樣

  <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/btn"
        android:layout_width="293dp"
        android:layout_height="68dp"
        android:background="@drawable/yellow_btn"
        android:fontFamily="sans-serif-medium"
        android:gravity="center"
        android:text="Get Started"
        android:textColor="#353935"
      />

並為可繪制背景制作 xml 可繪制圖層列表

        <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#DFCD03"/>
            <corners android:radius="60dp"/>
        </shape>
    </item>
    <item android:bottom="8dp">
        <shape>
            <solid android:color="#FFF273"/>
            <corners android:radius="60dp"/>
        </shape>
    </item>
</layer-list>

最終形狀在此處輸入圖像描述

試試這個 Create drawable name as button_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#FFC107"/>
                    <corners android:radius="20dp"/>
                </shape>
            </item>

            <item
                android:bottom="10px"
                >
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#FFEB3B"
                        android:endColor="#FFEB3B"
                        />
                    <corners
                        android:radius="20dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_pressed="true">
        <layer-list>
            <item>
                <shape>
                    <solid android:color="#FFEB3B"/>
                    <corners android:radius="20dp"/>

                </shape>
            </item>

            <item android:bottom="5px">
                <shape>
                    <padding android:bottom="5dp"/>
                    <gradient
                        android:startColor="#FFC107"
                        android:endColor="#FFC107"
                       />
                    <corners
                        android:radius="20dp"/>
                    <padding
                        android:left="10dp"
                        android:top="10dp"
                        android:right="5dp"
                        android:bottom="10dp"/>
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

在您的 xml 布局中為按鈕/文本視圖設置背景

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="180dp"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/button_bg" // custom design 
        android:textAlignment="center"
        android:textStyle="bold"
        android:text="Get Started" />

</RelativeLayout>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM