web-dev-qa-db-ja.com

Androidマテリアルデザインボタン-事前ロリポップ

Googleのマテリアルデザインガイドラインに記載されている「上げボタン」と「フラットボタン」を実装するにはどうすればよいですか？

隆起したボタンは、ほとんどフラットなレイアウトに寸法を追加します。忙しいスペースや広いスペースでの機能を強調しています。

raised buttons

過度の階層化を避けるために、ツールバーとダイアログにフラットボタンを使用します。

flat buttons

ソース： http://www.google.com/design/spec/components/buttons.html

androidbuttonmaterial-design
75
rickyalbert

これにはAndroid 5.0が必要です

盛り上がったボタン

Widget.Material.Buttonからボタンスタイルを継承すると、標準のエレベーションとレイズアクションが自動的に適用されます。

<style name="Your.Button" parent="Android:style/Widget.Material.Button">
    <item name="Android:background">@drawable/raised_button_background</item>
</style>

次に、リップルタグ内にボタンの背景色を持つraised_button_background.xmlファイルを作成する必要があります。

<ripple xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:color="?attr/colorControlHighlight">
    <item Android:drawable="@color/button_color"/>
</ripple>

フラットボタン

編集：フラットボタンに関する以前のアドバイスの代わりに、以下のStephen Kaiserのアドバイスに従ってください：

<Button
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
/>

編集：サポートライブラリを使用している場合は、style="?attr/borderlessButtonStyle"を使用してPre-Lollipopデバイスで同じ結果を得ることができます。 （Android:がないことに注意してください）上記の例は、

<Button
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="DONE"
    style="?attr/borderlessButtonStyle"
/>
121
Gabriel

フラットボタンを実装するには、style="?android:attr/borderlessButtonStyle"を追加するだけです。

例：

<Button
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="DONE"
    style="?android:attr/borderlessButtonStyle"
    />

参照はこちら 属性の場合。

84
Stephen Kaiser

MaterialDesignLibrary を使用できます。それはサードパーティのライブラリです。

これは、Android Lで使用するAndroid Lのコンポーネントを含むライブラリです。このライブラリを使用する場合は、MaterialDesignプロジェクトをダウンロードし、ワークスペースにインポートして、 Androidプロジェクト設定のライブラリとしてプロジェクト。

4
vsvankhede

これをAppCompatのボタンの背景として使用し、隆起したボタン（波紋がn個すべて）を示しています。

myRaisedButton.xml-drawableフォルダー内：

<layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <item>
        <shape xmlns:Android="http://schemas.Android.com/apk/res/Android"
               Android:shape="rectangle">
            <solid Android:color="@color/yourColor"/>
            <corners Android:radius="6dp"/>
        </shape>
    </item>
    <item Android:drawable="?android:selectableItemBackground"/>
</layer-list>

styles.xml：

<resources>

    <style name="AppTheme" parent="AppTheme.Base"/>
    <style name="AppTheme.Base" parent="Theme.AppCompat">

</resources>

styles.xml（v21）：

...
<style name="AppTheme" parent="AppTheme.Base">

layout.xml：

...
Android:background="@drawable/myRaisedButton"
2
thanosChatz

私は材料互換性ライブラリに取り組んでいます。ボタンクラスがあり、アニメーションシャドウとタッチリップルをサポートします。たぶんあなたはそれが役に立つと思うでしょう。 リンク です。

2
Zielony

あなたはマテリアルデザインボタンライブラリを求めました-あなたはそれを得た-- https://github.com/navasmdc/MaterialDesignLibrary

1
Inoy

Appcompat librayを使用してこれを行う方法の説明については、別の質問に対する私の答えを確認してください： https://stackoverflow.com/a/27696134/1932522

これは、Android 5.0以前（APIレベル11まで）の両方で、上げボタンとフラットボタンを使用する方法を示します。

1
Peter

ボタンを上げた影の効果を確認できるように、ボタンに下マージンを追加する必要がある場合もあります。

<item name="Android:layout_marginBottom">@dimen/activity_vertical_margin</item>
<item name="Android:elevation">1dp</item>
0
Ari Lacenski