안드로이드 머티리얼 디자인 버튼 스타일 가능한 스타일이 있습니까

머티리얼 디자인을위한 버튼 스타일이 혼란 스럽습니다. 사용법 섹션에 표시된 “force stop”및 “uninstall”버튼과 같이 첨부 된 링크와 같이 화려한 제기 버튼을 얻고 싶습니다. 사용 가능한 스타일이 있습니까 아니면 정의해야합니까?

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 단계 : Button 대신 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>

또는 21 미만의 API 인 경우 :

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

이것은 내가 찾고있는 파급 효과를 추가했습니다.


답변

2018 년 11 월에 안정적인 Android Material Components가 출시되면서 Google은 Material Components를 네임 스페이스에서 android.support.design로 변경했습니다 com.google.android.material.
재질 구성 요소 라이브러리 는 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를 확인할 수 있습니다 .

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

  1. backgroundTint속성 사용

다음과 같은 것 :

<style name="MyButtonStyle"
 parent="Widget.MaterialComponents.Button">
    <item name="backgroundTint">@color/button_selector</item>
    //..
</style>
  1. 내 의견으로는 최선의 선택이 될 것입니다. 기본 스타일에서 일부 테마 속성을 대체하려는 경우 새 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'.

여기에 이미지 설명을 입력하십시오여기에 이미지 설명을 입력하십시오

이전 지원 라이브러리 :

새로운 지원 라이브러리 28.0.0 에서는 디자인 라이브러리에 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: 버튼 모서리에 사용되는 반경을 정의하는 데 사용됩니다.

답변

다음은 앱에서 버튼 스타일을 일관되게 적용하는 데 도움이되는 샘플입니다.

다음은 특정 스타일에 사용한 샘플 테마입니다.

<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( Gabriel Mariotti가 언급 한 )

스타일이 다르고 다음과 같은 다른 Button위젯 이 있습니다 .com.google.android.material.button.MaterialButtonAppCompatButton

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/

새로운 머티리얼 버튼을 만들기위한 편리한 클래스입니다.

이 클래스는 생성자의 버튼에 업데이트 된 머티리얼 스타일을 제공합니다. 위젯은 스타일 플래그를 사용하지 않고 올바른 기본 재질 스타일을 표시합니다.