Как мне реализовать эту форму кнопки Material Design 2.0?

Я хотел бы добиться формы кнопки, похожей на ту, что в примере компонентов материала.

То, что я уже пытался сделать, это установить собственный стиль для кнопки, подобной этой.

    <style name = "ButtonAddLeft" parent = "Widget.MaterialComponents.Button.Icon">
        <item name = "backgroundTint">@color/secondary</item>
        <item name = "android:textColor">@color/primary</item>
        <item name = "shapeAppearance">@style/ButtonAddLeftShape</item>
    </style>

    <style name = "ButtonAddLeftShape">
        <item name = "cornerFamilyTopLeft">cut</item>
        <item name = "cornerFamilyBottomLeft">cut</item>
        <item name = "cornerSize">12dp</item>
    </style>

Но это не похоже на тот, что в примере, вне зависимости от того, как я задал размер угла.

Как вы используете эти стили

— 10.04.2019 13:55

Взгляните на это, это может быть полезно, Developers.googleblog.com/2018/12/…

— 10.04.2019 14:14

android material-design android-button material-components-android material-components

10.04.2019 13:53

Коллекции (ArrayList , HashSet , HashMap)

1 659

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно установить стиль среза угла в соответствии с темой.

    <style name = "RightCutButton" parent = "ThemeOverlay.MaterialComponents.Light">
        <item name = "shapeAppearanceSmallComponent">@style/CornerCut</item>
    </style>

    <style name = "CornerCut" parent = "ShapeAppearance.MaterialComponents.SmallComponent">
        <item name = "cornerFamilyTopRight">cut</item>
        <item name = "cornerFamilyBottomRight">cut</item>
        <item name = "cornerSizeTopRight">18dp</item>
        <item name = "cornerSizeBottomRight">18dp</item>
    </style>

    <style name = "AppTheme" parent = "Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name = "shapeAppearanceSmallComponent">@style/CornerCut</item>
    </style>

Это работает! Хотя здесь есть проблема - это переопределило все мои кнопки в этом действии. Есть ли способ предотвратить это? Мне также нужна кнопка, которая будет обрезана в противоположном направлении, это выполнимо?

— 10.04.2019 15:43

Может быть, есть способ программно установить форму из пути? Это был бы лучший способ, но я ничего не могу найти об этом.

— 10.04.2019 16:06

Создайте отдельную тему и установите ее на кнопку в xml. <style name = "RightCutButton" parent = "ThemeOverlay.MaterialComponents.Light"> <item name = "shapeAppearanceSmallComponent">@style/CornerCut</item> </style> Теперь установите этот RightCutButton в XML, где вы объявили Кнопка с помощью «android:theme = "@style/RightCutButton" Это переопределяет только эту конкретную кнопку. @laszlo

— 10.04.2019 16:31

10.04.2019 15:31

Вы можете использовать атрибут app:shapeAppearanceOverlay в своем макете:

    <com.google.android.material.button.MaterialButton
        app:shapeAppearanceOverlay = "@style/ButtomShapeArrowRight"
        .../>

с участием:

  <style name = "ButtomShapeArrowRight">
    <item name = "cornerFamily">rounded</item>
    <item name = "cornerSize">4dp</item>
    <item name = "cornerFamilyTopRight">cut</item>
    <item name = "cornerFamilyBottomRight">cut</item>
    <item name = "cornerSizeTopRight">50%</item>
    <item name = "cornerSizeBottomRight">50%</item>
  </style>

Вы также можете добиться этого программно:

MaterialButton button_arrow = findViewById(R.id.button_arrow);
button_arrow.setShapeAppearanceModel(
    button_arrow.getShapeAppearanceModel()
        .toBuilder()
        .setTopLeftCorner(CornerFamily.ROUNDED,..)
        .setBottomLeftCorner(CornerFamily.ROUNDED,...)
        .setBottomRightCorner(CornerFamily.CUT, new RelativeCornerSize(0.5f))
        .setTopRightCorner(CornerFamily.CUT, new RelativeCornerSize(0.5f))
        .build()
);

Просто примечание о new RelativeCornerSize(0.5f): это изменилось в 1.2.0-beta01. Раньше было new RelativeCornerSize(50)).

28.01.2020 12:49