Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

AppCompatButtonのスタイルをMaterialにする

More than 5 years have passed since last update.

AppCompatButtonを使用してマテリアルなボタンを付けようとしたときに@style/Widget.AppCompat.Buttonを発見したのでもしや簡単に実装できるのでは?となったので調べてみた

前提

build.gradle
dependencies {
    compile 'com.android.support:appcompat-v7:23.1.1'
}
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
</resources>
styles.xml
<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

AndroidStudioのテンプレから弄ってはないです、ApplicationのthemeにはAppThemeを指定。

まずは試してみる

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.Button"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.Button.Colored"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.Button.Small"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.Button.Borderless"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.Button.ButtonBar.AlertDialog"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.ButtonBar"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Button"
        style="@style/Widget.AppCompat.ButtonBar.AlertDialog"
        android:text="button"/>

</LinearLayout>

結果

materialbutton1.PNG
↑エミュレーター(API15)の結果

使えそうなスタイルを絞ると

  • @style/Widget.AppCompat.Button
  • @style/Widget.AppCompat.Button.Colored
  • @style/Widget.AppCompat.Button.Borderless
  • @style/Widget.AppCompat.Button.Borderless.Colored

このあたりではないでしょうか

改良

まず最初にY.A.M の 雑記帳 - AppCompat でカラーの Raised Button を設定する正しい方法が参考になりました

android:textAppearance="@style/TextAppearance.AppCompat.Button"

という措定は必要ないみたいですね

styles.xml
    <style name="AppTheme.FlatButton" parent="Widget.AppCompat.Button.Borderless">
    </style>

    <style name="AppTheme.FlatButton.Accent" parent="Widget.AppCompat.Button.Borderless.Colored">
    </style>

    <style name="AppTheme.RaisedButton" parent="Widget.AppCompat.Button">
    </style>

    <style name="AppTheme.RaisedButton.Accent" parent="Widget.AppCompat.Button.Colored">
    </style>

styles.xmlに上記のものを追加(名前を付けてるだけなので直接指定してもいいです)

activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/AppTheme.FlatButton"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/AppTheme.FlatButton.Accent"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/AppTheme.RaisedButton"
        android:text="button"/>

    <android.support.v7.widget.AppCompatButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/AppTheme.RaisedButton.Accent"
        android:text="button"/>

</LinearLayout>

materialbutton2.PNG
↑エミュレーター(API15)の結果

これでいいはずだ!!

書きながら調べていたらこんなサイトを発見

最初からここを見とけばよかった感

まとめ

以下のものをつけるだけ

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

あとmaterialdocがいろいろな書き方を載せていてとてもとても便利そう←なぜ今まで知らなかったんだw

MeilCli
C#大好きマン AndroidとかC#に関するものをよく作ります
https://blog.meilcli.net
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away