Skip to content

Commit

Permalink
Add an attribute for materialButtonOutlinedStyle
Browse files Browse the repository at this point in the history 
It's a common use case to want to mix up buttons with outlined buttons and an attribute facilitates reusing layouts with different themes.

PiperOrigin-RevId: 234189427
  • Loading branch information
@ymarian @afohrman
ymarian authored and afohrman committed Feb 24, 2019
1 parent 76727ec commit 991927f
Show file tree
Hide file tree
Showing 5 changed files with 10 additions and 0 deletions.
1 change: 1 addition & 0 deletions catalog/java/io/material/catalog/themeswitcher/res/layout/mtrl_theme_switcher_dialog.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@
android:text="@string/mtrl_apply"/>

<Button
style="?attr/materialButtonOutlinedStyle"
android:id="@+id/clear_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Expand Down
3 changes: 3 additions & 0 deletions lib/java/com/google/android/material/button/res/values/attrs.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@
<!-- Style to use for MaterialButtons in this theme. -->
<attr name="materialButtonStyle" format="reference"/>

<!-- Style to use for Material Outlined Buttons in this theme. -->
<attr name="materialButtonOutlinedStyle" format="reference"/>

<declare-styleable name="MaterialButton">
<attr name="android:insetLeft"/>
<attr name="android:insetRight"/>
Expand Down
2 changes: 2 additions & 0 deletions lib/java/com/google/android/material/dialog/res/values/themes_base.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@
<item name="extendedFloatingActionButtonStyle">@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon</item>
<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item>
<item name="materialButtonStyle">@style/Widget.MaterialComponents.Button</item>
<item name="materialButtonOutlinedStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
<item name="materialCardViewStyle">@style/Widget.MaterialComponents.CardView</item>
<item name="navigationViewStyle">@style/Widget.MaterialComponents.NavigationView</item>
<item name="popupMenuStyle">@style/Widget.MaterialComponents.PopupMenu</item>
Expand Down Expand Up @@ -166,6 +167,7 @@
<item name="extendedFloatingActionButtonStyle">@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon</item>
<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item>
<item name="materialButtonStyle">@style/Widget.MaterialComponents.Button</item>
<item name="materialButtonOutlinedStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
<item name="materialCardViewStyle">@style/Widget.MaterialComponents.CardView</item>
<item name="navigationViewStyle">@style/Widget.MaterialComponents.NavigationView</item>
<item name="popupMenuStyle">@style/Widget.MaterialComponents.PopupMenu</item>
Expand Down
2 changes: 2 additions & 0 deletions lib/java/com/google/android/material/theme/res/values/attrs.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@
<attr name="bottomSheetStyle"/>
<!-- Style to use for MaterialButtons in this theme. -->
<attr name="materialButtonStyle"/>
<!-- Style to use for Material Outlined Buttons in this theme. -->
<attr name="materialButtonOutlinedStyle"/>
<!-- Style to use for ChipGroups in this theme. -->
<attr name="chipGroupStyle"/>
<!-- Style to use for Chips in this theme, usually to be used as a view. -->
Expand Down
2 changes: 2 additions & 0 deletions lib/java/com/google/android/material/theme/res/values/themes_base.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
<item name="extendedFloatingActionButtonStyle">@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon</item>
<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item>
<item name="materialButtonStyle">@style/Widget.MaterialComponents.Button</item>
<item name="materialButtonOutlinedStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
<item name="materialCardViewStyle">@style/Widget.MaterialComponents.CardView</item>
<item name="navigationViewStyle">@style/Widget.MaterialComponents.NavigationView</item>
<item name="popupMenuStyle">@style/Widget.MaterialComponents.PopupMenu</item>
Expand Down Expand Up @@ -98,6 +99,7 @@
<item name="extendedFloatingActionButtonStyle">@style/Widget.MaterialComponents.ExtendedFloatingActionButton.Icon</item>
<item name="floatingActionButtonStyle">@style/Widget.MaterialComponents.FloatingActionButton</item>
<item name="materialButtonStyle">@style/Widget.MaterialComponents.Button</item>
<item name="materialButtonOutlinedStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
<item name="materialCardViewStyle">@style/Widget.MaterialComponents.CardView</item>
<item name="navigationViewStyle">@style/Widget.MaterialComponents.NavigationView</item>
<item name="popupMenuStyle">@style/Widget.MaterialComponents.PopupMenu</item>
Expand Down

7 comments on commit 991927f

@pfieffer
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello. I am dynamically generating Material Buttons onto my view. For some reason, I am able to pass R.attr.materialButtonStyle onto my three parameter constructor for MaterialButton() but I am not able to pass R.attr.materialButtonOutlinedStyle onto the same. I have support design dependency and I also tried adding google material design dependency which did not work either. What am I missing here? Thanks

@dsn5ft
Copy link
Contributor

@dsn5ft dsn5ft commented on 991927f Dec 19, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like this was added in version 1.1.0-alpha04 of com.google.android.material:material. What version are you using?

@pfieffer
Copy link

@pfieffer pfieffer commented on 991927f Dec 23, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's the thing, I do not have this dependency yet I am able to use MaterialButton in my xml layout. Using this dependency is not an option for me because it messes up my whole ui and the app does not compile because of a weird data binding error. Using the dependency, I also do not get the attribute that I have mentioned already.

@dsn5ft
Copy link
Contributor

@dsn5ft dsn5ft commented on 991927f Dec 23, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What version are you using?

Can you try our latest version (1.1.0-rc01) and provide more details about how the new version "messes up the whole ui" and causes a data binding error (stacktrace)?

@pfieffer
Copy link

@pfieffer pfieffer commented on 991927f Dec 24, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While I was developing the static layout for the app, I only had the support design dependency:

I have three buttons on my ui: at any given time, two of them will be outlined button and one of them have to be regular solid material button (all of them with corner radius)

So I achieve static UI with styling (two of them with outlinedButtonStyle and one with materialButtonStyle declared in the XML). I did not have to use any dependency for material components (the one that you are talking about)

Now when I have to make the buttons dynamic, I quickly find out that setting style dynamically is not supported on android. I tried Paris library by AirBNB but they do not currently support dynamic styling on MaterialComponents. Hence I have to now dynamically generate all three buttons with attributes and their positioning from kotlin code.

My problem currently is that I cannot pass R.attr.materialButtonOutlinedStyle onto my MaterialButton constructor. Any way I can achieve my requirements using only attributes and not depending on the com.google.android.material:material ?

@dsn5ft
Copy link
Contributor

@dsn5ft dsn5ft commented on 991927f Dec 24, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The materialButtonOutlinedStyle attribute was introduced in the com.google.android.material:material library, so you would need to use that library to be able to use the attribute.

In terms of dynamic styling, you could use a ContextThemeWrapper and a theme overlay:

    MaterialButton button = new MaterialButton(new ContextThemeWrapper(context, R.style.ThemeOverlay_MyApp_OutlinedButton));

  <style name="ThemeOverlay.MyApp.OutlinedButton" parent="">
    <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
  </style>

@pfieffer
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dsn5ft Thank you very much for this. However, funnily enough I did not have to depend on com.google.android.material:material which works in my favor. :)

Please sign in to comment.