Android 재료 디자인 버튼 스타일

Android 재료 디자인 버튼 스타일

소재 디자인은 버튼 스타일이 헷갈리네요.사용 섹션 아래에 보이는 "강제 중지" 및 "제거" 버튼과 같이 첨부 링크와 같이 화려한 상향 버튼을 받고 싶습니다.사용 가능한 스타일이 있습니까? 아니면 정의해야 합니까?

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단계: AppCompat Activity를 부모 액티비티 클래스로 사용

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단계: 버튼 대신 AppCompat 버튼 사용

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

소재 테마 자습서 사용 외에도

애니메이션이 나왔습니다.

Material Component 라이브러리를 사용할 수 있습니다.

에 종속성 추가build.gradle:

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

그런 다음 레이아웃에 를 추가합니다.

<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는 여기서 확인하실 수 있습니다.

배경색을 변경하려면 두 가지 옵션이 있습니다.

1. 속성을 사용합니다.

다음과 같은 경우:

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

2. 제 생각에는 그것이 최선의 선택이 될 것 같습니다.기본 스타일에서 일부 테마 특성을 재정의하려면 새 특성을 사용할 수 있습니다.

다음과 같은 경우:

<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 합니다가(가) 합니다.1.1.0.

다음 스타일 중 하나를 사용할 수 있습니다.

• 채워진 단추(기본값):style="@style/Widget.MaterialComponents.Button
• 텍스트 단추:style="@style/Widget.MaterialComponents.Button.TextButton"
• Outline(개요 버튼:style="@style/Widget.MaterialComponents.Button.OutlinedButton"

---

OLD 지원 라이브러리:

새로운 Support Library 28.0.0을 통해 Design Library는 이제MaterialButton.

이 버튼을 다음을 사용하여 레이아웃 파일에 추가할 수 있습니다.

<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하는 데 됩니다. 단추 모서리에 사용되는 반지름을 정의하는 데 사용됩니다.

제가 원하는 것을 얻은 방법은 이렇습니다.

첫번째로 버튼을 만들었습니다.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.support.design.button.MaterialButton(가브리엘 마리오티가 언급한)

도 있습니다.Button서로 다른 스타일을 가지고 확장되는 위젯을 호출합니다.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"

채우기, 올림(기본값):

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

채워짐, 높낮이 없음:

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

텍스트:

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

아이콘:

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

아이콘이 있는 텍스트:

---

읽기: https://material.io/develop/android/components/material-button/

새 재료 단추를 만들기 위한 편의 클래스입니다.

이 클래스는 생성기의 단추에 대한 업데이트된 재료 스타일을 제공합니다.위젯은 스타일 플래그를 사용하지 않고 올바른 기본 재료 스타일을 표시합니다.

여기 앱 전체에 버튼 스타일을 일관성 있게 적용하는 데 도움이 되는 샘플이 있습니다.

여기에 제가 특정 스타일과 함께 사용한 테마 샘플이 있습니다.

<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 코너는 소재 테마와 일관성을 유지하기 위한 코너입니다.

저는 많은 답변과 제3자 립을 시도했지만, 아무도 국경을 지키지 않고 롤리팝에 대한 파급력을 무한정 발휘하면서 사전 롤리팝에 대한 효과를 높이지 못했습니다.다음은 몇 가지 답변을 결합한 최종 솔루션입니다(그레이스케일 색상 깊이로 인해 GIF에서 테두리/높낮이가 잘 렌더링되지 않음).

막대사탕

프리 막대사탕

빌드.그레이들

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>

그리기 가능-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 그리기 가능을 정의하여 둥근 모서리 버튼을 만들 수 있으며, 반지름을 늘리거나 줄이면 단추 모서리의 둥근 모양을 늘리거나 줄일 수 있습니다.이 xml 그리기 가능을 background of button으로 설정합니다.

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

버튼 색상과 리플 색상을 쉽게 수정할 수 있는 안드로이드 라이브러리를 방금 만들었습니다.

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

원하는 모든 버튼에 대해 다른 색상으로 스타일을 만들 필요가 없으므로 색상을 임의로 사용자 지정할 수 있습니다.

// here is the custom button style
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="45"
            android:centerColor="@color/colorPrimary"
            android:startColor="@color/colorPrimaryDark"
            android:endColor="@color/colorAccent"
            >
        </gradient>
        <corners
            android:topLeftRadius="10dp"
            android:topRightRadius="10dp"
            android:bottomLeftRadius="10dp"
            android:bottomRightRadius="10dp"
            >
        </corners>
        <stroke
            android:width="2dp"
            android:color="@color/colorWhite"
            >
          </stroke>
      </shape>
       </item>

</selector>

뷰에 z 축을 추가하여 항공을 제공할 수 있으며 뷰에 기본 그림자를 가질 수 있습니다. 이 기능은 L 미리보기에서 제공되었으며 출시 후 사용할 수 있습니다.지금은 버튼 배경에 대한 이미지를 간단히 추가할 수 있습니다.

언급URL : https://stackoverflow.com/questions/26346727/android-material-design-button-styles