ฉันสับสนกับรูปแบบปุ่มสำหรับการออกแบบวัสดุ ฉันต้องการรับปุ่มยกสีสันในลิงก์ที่แนบมาเช่นปุ่ม "บังคับหยุด" และ "ถอนการติดตั้ง" ที่เห็นในส่วนการใช้งาน มีสไตล์ที่พร้อมใช้งานหรือฉันต้องกำหนดมันหรือไม่?

http://www.google.com/design/spec/components/buttons.html#buttons-usage

ฉันหาสไตล์ปุ่มเริ่มต้นไม่พบ

ตัวอย่าง:

 <Button style="@style/PrimaryButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Calculate"
    android:id="@+id/button3"
    android:layout_below="@+id/editText5"
    android:layout_alignEnd="@+id/editText5"
    android:enabled="true" />

หากฉันพยายามเปลี่ยนสีพื้นหลังของปุ่มด้วยการเพิ่ม

    android:background="@color/primary"

สไตล์ทั้งหมดหายไปเช่นแอนิเมชั่นระบบสัมผัสเงามุมมนเป็นต้น

ฉันจะเพิ่มคำตอบของฉันเนื่องจากฉันไม่ได้ใช้คำตอบอื่นใดที่ให้ไว้

ด้วย Support Library v7 สไตล์ทั้งหมดได้ถูกกำหนดไว้แล้วและพร้อมใช้งานสำหรับปุ่มมาตรฐานสไตล์เหล่านี้ทั้งหมดจะพร้อมใช้งาน:

style="@style/Widget.AppCompat.Button"
style="@style/Widget.AppCompat.Button.Colored"
style="@style/Widget.AppCompat.Button.Borderless"
style="@style/Widget.AppCompat.Button.Borderless.Colored"

Widget.AppCompat.Button:

Widget.AppCompat.Button.Colored:

Widget.AppCompat.Button.Borderless

Widget.AppCompat.Button.Borderless.Colored:

เพื่อตอบคำถามสไตล์จึงใช้

<Button style="@style/Widget.AppCompat.Button.Colored"
.......
.......
.......
android:text="Button"/>

วิธีการเปลี่ยนสี

สำหรับแอปทั้งหมด:

สีของทุกการควบคุม UI (ปุ่มไม่เพียง แต่ยังลอยปุ่มการกระทำช่องทำเครื่องหมายอื่น ๆ ) มีการจัดการโดยแอตทริบิวต์colorAccentตามที่อธิบายไว้ที่นี่ คุณสามารถปรับเปลี่ยนสไตล์นี้และใช้สีของคุณเองในการกำหนดธีมของคุณ:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    ...
    <item name="colorAccent">@color/Orange</item>
</style>

สำหรับปุ่มเฉพาะ:

หากคุณต้องการเปลี่ยนสไตล์ของปุ่มเฉพาะคุณสามารถกำหนดสไตล์ใหม่โดยสืบทอดหนึ่งในสไตล์หลักที่อธิบายไว้ข้างต้น ในตัวอย่างด้านล่างฉันเพิ่งเปลี่ยนสีพื้นหลังและสีแบบอักษร:

<style name="AppTheme.Button" parent="Widget.AppCompat.Button.Colored">
    <item name="colorButtonNormal">@color/Red</item>
    <item name="android:textColor">@color/White</item>
</style>

จากนั้นคุณต้องใช้สไตล์ใหม่นี้กับปุ่มด้วย:

android:theme="@style/AppTheme.Button"

ในการตั้งค่าการออกแบบปุ่มเริ่มต้นในเค้าโครงให้เพิ่มบรรทัดนี้ในธีม styles.xml:

<item name="buttonStyle">@style/btn</item>

@style/btnธีมปุ่มของคุณอยู่ที่ไหน นี่เป็นการกำหนดลักษณะปุ่มสำหรับปุ่มทั้งหมดในเค้าโครงด้วยชุดรูปแบบเฉพาะ

วิธีที่ง่ายที่สุด

ขั้นตอนที่ 1: ใช้ไลบรารีการสนับสนุนล่าสุด

compile 'com.android.support:appcompat-v7:25.2.0'

ขั้นตอนที่ 2: ใช้ AppCompatActivity เป็นคลาสกิจกรรมหลักของคุณ

public class MainActivity extends AppCompatActivity

ขั้นตอนที่ 3: ใช้เนมสเปซแอพในไฟล์ XML เลย์เอาต์ของคุณ

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

ขั้นตอนที่ 4: ใช้ AppCompatButton แทนปุ่ม

<android.support.v7.widget.AppCompatButton
    android:id="@+id/buttonAwesome"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Awesome Button"
    android:textColor="@color/whatever_text_color_you_want"
    app:backgroundTint="@color/whatever_background_color_you_want"/>

ถ้าฉันเข้าใจคุณอย่างถูกต้องคุณต้องการทำสิ่งนี้:

ในกรณีเช่นนี้ควรใช้งาน:

<item name="android:colorButtonNormal">#2196f3</item>

หรือสำหรับ API น้อยกว่า 21:

<item name="colorButtonNormal">#2196f3</item>

นอกเหนือไปจากการใช้รูปแบบการสอนวัสดุ

ตัวแปรภาพเคลื่อนไหวที่นี่

นี่คือวิธีที่ฉันได้รับสิ่งที่ฉันต้องการ

ก่อนอื่นทำปุ่ม (ในstyles.xml):

<style name="Button">
    <item name="android:textColor">@color/white</item>
    <item name="android:padding">0dp</item>
    <item name="android:minWidth">88dp</item>
    <item name="android:minHeight">36dp</item>
    <item name="android:layout_margin">3dp</item>
    <item name="android:elevation">1dp</item>
    <item name="android:translationZ">1dp</item>
    <item name="android:background">@drawable/primary_round</item>
</style>

ระลอกและพื้นหลังของปุ่มดังที่วาดได้primary_round.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="@color/primary_600">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <corners android:radius="1dp" />
        <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

สิ่งนี้เพิ่มเอฟเฟกต์คลื่นเล็ก ๆ ที่ฉันกำลังมองหา

ด้วยการเปิดตัวส่วนประกอบวัสดุ Android ที่มีเสถียรภาพในเดือนพฤศจิกายน 2018 Google ได้ย้ายส่วนประกอบวัสดุจากเนมสเปซandroid.support.designไปcom.google.android.materialเป็น
ไลบรารี Material Componentถูกแทนที่สำหรับ Library Design Design ของ Android

เพิ่มการพึ่งพาของคุณbuild.gradle:

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

จากนั้นเพิ่มลงในMaterialButtonเค้าโครงของคุณ:

<com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.OutlinedButton" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/app_name"
        app:strokeColor="@color/colorAccent"
        app:strokeWidth="6dp"
        app:layout_constraintStart_toStartOf="parent"
        app:shapeAppearance="@style/MyShapeAppearance"
   />

คุณสามารถตรวจสอบเอกสารเต็มรูปแบบที่นี่และAPI ที่นี่

ในการเปลี่ยน สีพื้นหลังคุณมี 2 ตัวเลือก

1. การใช้backgroundTintคุณสมบัติ

สิ่งที่ต้องการ:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>

2. มันจะเป็นตัวเลือกที่ดีที่สุดในความคิดของฉัน หากคุณต้องการแทนที่แอททริบิวธีมบางธีมจากสไตล์เริ่มต้นคุณสามารถใช้ใหม่ได้materialThemeOverlayททริบิวได้

สิ่งที่ต้องการ:

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
   <item name=“materialThemeOverlay”>@style/GreenButtonThemeOverlay</item>
</style>

<style name="GreenButtonThemeOverlay">
  <!-- For filled buttons, your theme's colorPrimary provides the default background color of the component --> 
  <item name="colorPrimary">@color/green</item>
</style>

ตัวเลือก # 2 ต้องใช้ 'com.google.android.material:material:1.1.0'.

ห้องสมุดสนับสนุนเก่า:

ด้วยSupport Libraryใหม่28.0.0MaterialButtonห้องสมุดการออกแบบในขณะนี้มี

คุณสามารถเพิ่มปุ่มนี้ลงในไฟล์เลย์เอาต์ของเราด้วย:

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

โดยค่าเริ่มต้นชั้นนี้จะใช้ สีที่ถูกเน้นของชุดรูปแบบของคุณสำหรับปุ่มที่เติมสีพื้นหลังพร้อมกับสีขาวสำหรับสีข้อความของปุ่ม

คุณสามารถปรับแต่งปุ่มด้วยคุณสมบัติเหล่านี้:

• app:rippleColor: สีที่จะใช้สำหรับเอฟเฟกต์ปุ่มกระเพื่อม

• app:backgroundTint: ใช้เพื่อแต้มสีพื้นหลังของปุ่ม หากคุณต้องการเปลี่ยนสีพื้นหลังของปุ่มให้ใช้คุณสมบัตินี้แทนพื้นหลัง

• app:strokeColor: สีที่จะใช้สำหรับการกดปุ่ม

• app:strokeWidth: ความกว้างที่จะใช้สำหรับการกดปุ่ม
• app:cornerRadius: ใช้เพื่อกำหนดรัศมีที่ใช้สำหรับมุมของปุ่ม

นี่คือตัวอย่างที่จะช่วยในการใช้รูปแบบปุ่มอย่างสม่ำเสมอในแอปของคุณ

นี่คือตัวอย่างของธีมที่ฉันใช้กับสไตล์ที่เฉพาะเจาะจง ..

<style name="MyTheme" parent="@style/Theme.AppCompat.Light">
   <item name="colorPrimary">@color/primary</item>
    <item name="colorPrimaryDark">@color/primary_dark</item>
    <item name="colorAccent">@color/accent</item>
    <item name="android:buttonStyle">@style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Material.Button">
<item name="android:background">@drawable/material_button</item>
</style>

นี่คือวิธีที่ฉันกำหนดรูปร่างปุ่ม & เอฟเฟกต์ในโฟลเดอร์ res / drawable-v21 ...

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
  <item>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
      <corners android:radius="2dp" /> 
      <solid android:color="@color/primary" />
    </shape>
  </item>
</ripple>

มุม 2dp คือการทำให้มันสอดคล้องกับชุดรูปแบบวัสดุ

ข้างandroid.support.design.button.MaterialButton( ซึ่งกล่าวถึงโดย Gabriele Mariotti )

นอกจากนี้ยังมีButtonวิดเจ็ตอื่นที่เรียกว่าcom.google.android.material.button.MaterialButtonมีสไตล์แตกต่างกันและขยายจากAppCompatButton:

style="@style/Widget.MaterialComponents.Button"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
style="@style/Widget.MaterialComponents.Button.TextButton"
style="@style/Widget.MaterialComponents.Button.Icon"
style="@style/Widget.MaterialComponents.Button.TextButton.Icon"

เต็มสูงButton(ค่าเริ่มต้น) :

style="@style/Widget.MaterialComponents.Button"

เต็มไม่ได้รับการแจ้งเตือนButton :

style="@style/Widget.MaterialComponents.Button.UnelevatedButton"

ข้อความButton :

style="@style/Widget.MaterialComponents.Button.TextButton"

ไอคอนButton :

style="@style/Widget.MaterialComponents.Button.Icon"
app:icon="@drawable/icon_24px" // Icons can be added from this

ข้อความที่Buttonมีไอคอน ::

อ่าน: https://material.io/develop/android/components/material-button/

คลาสความสะดวกสบายสำหรับการสร้างปุ่มวัสดุใหม่

คลาสนี้มีการอัพเดทสไตล์วัสดุสำหรับปุ่มในตัวสร้าง วิดเจ็ตจะแสดงสไตล์วัสดุเริ่มต้นที่ถูกต้องโดยไม่ใช้แฟล็กสไตล์

ฉันลองคำตอบมากมาย & libs ของบุคคลที่สาม แต่ไม่มีใครรักษาชายแดนและเพิ่มเอฟเฟ็กต์ก่อนอมยิ้มในขณะที่มีเอฟเฟกต์ระลอกคลื่นบน lollipop โดยไม่มีข้อเสียเปรียบ ต่อไปนี้เป็นคำตอบสุดท้ายของฉันที่รวมคำตอบหลายคำ (เส้นขอบ / ยกขึ้นแสดงผลได้ไม่ดีใน gif เนื่องจากความลึกของสีระดับสีเทา):

ขนมที่ติดกับปลายไม้

Pre-อมยิ้ม

build.gradle

compile 'com.android.support:cardview-v7:23.1.1'

layout.xml

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card"
    card_view:cardElevation="2dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    android:layout_margin="6dp"
    >
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="0dp"
        android:background="@drawable/btn_bg"
        android:text="My button"/>
</android.support.v7.widget.CardView>

drawable-V21 / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">
    <item android:drawable="?attr/colorPrimary"/>
</ripple>

drawable / btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true"/>
    <item android:drawable="@color/colorPrimaryDark" android:state_focused="true"/>
    <item android:drawable="@color/colorPrimary"/>
</selector>

กิจกรรมบนสร้าง

    final CardView cardView = (CardView) findViewById(R.id.card);
    final Button button = (Button) findViewById(R.id.button);
    button.setOnTouchListener(new View.OnTouchListener() {
        ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                .setDuration
                        (80);
        ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                .setDuration
                        (80);

        @Override
        public boolean onTouch(View v, MotionEvent event) {

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    o1.start();
                    break;
                case MotionEvent.ACTION_CANCEL:
                case MotionEvent.ACTION_UP:
                    o2.start();
                    break;
            }
            return false;
        }
    });

1) คุณสามารถสร้างปุ่มมุมโค้งมนได้โดยกำหนด xml drawable และคุณสามารถเพิ่มหรือลดรัศมีเพื่อเพิ่มหรือลดความกลมของมุมของปุ่ม ตั้งค่า drawable xml นี้เป็นพื้นหลังของปุ่ม

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="4dp"
    android:insetTop="6dp"
    android:insetRight="4dp"
    android:insetBottom="6dp">
    <ripple android:color="?attr/colorControlHighlight">
        <item>
            <shape android:shape="rectangle"
                android:tint="#0091ea">
                <corners android:radius="10dp" />
                <solid android:color="#1a237e" />
                <padding android:bottom="6dp" />
            </shape>
        </item>
    </ripple>
</inset>

2) ในการเปลี่ยนเงาเริ่มต้นและภาพเคลื่อนไหวการเปลี่ยนภาพเงาระหว่างสถานะปุ่มคุณต้องกำหนดตัวเลือกและใช้กับปุ่มโดยใช้ Android: คุณสมบัติ stateListAnimator สำหรับการอ้างอิงการปรับแต่งปุ่มที่สมบูรณ์: http://www.zoftino.com/android-button

ฉันเพิ่งสร้างห้องสมุด android ที่ช่วยให้คุณปรับเปลี่ยนสีของปุ่มและสีของคลื่นได้อย่างง่ายดาย

https://github.com/xgc1986/RippleButton

<com.xgc1986.ripplebutton.widget.RippleButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/btn"
    android:text="Android button modified in layout"
    android:textColor="@android:color/white"
    app:buttonColor="@android:color/black"
    app:rippleColor="@android:color/white"/>

คุณไม่จำเป็นต้องสร้างสไตล์สำหรับปุ่มทุกปุ่มที่คุณต้องการด้วยสีที่แตกต่างกันทำให้คุณสามารถปรับแต่งสีแบบสุ่มได้

คุณสามารถให้การบินกับมุมมองโดยการเพิ่มแกน z ให้กับมันและสามารถมีเงาเริ่มต้น คุณลักษณะนี้มีให้ในหน้าตัวอย่าง L และจะสามารถใช้งานได้หลังจากปล่อย สำหรับตอนนี้คุณสามารถเพิ่มภาพได้เพียงแค่ให้ภาพพื้นหลังของปุ่ม