web-dev-qa-db-ja.com

事前にロリポップ（特殊効果を除く）の場合でも、マテリアルデザインの隆起したボタンスタイルを模倣する方法は？

Googleは、Lollipop here にボタンを表示する良い方法をいくつか示しました。

上げボタンとフラットボタンの両方について話しています。

特殊効果（リップルなど）を除き、Lollipop以前のバージョンでそれらを模倣するにはどうすればよいですか？

this と this について話している。

もちろん、ロリポップ以上では、特殊効果を使用したいと思います。

これについてはすでに複数の（さらに多くの）投稿があることは知っていますが、完全に模倣しようとするものは見当たりません。

androidandroid-buttonandroid-5.0-lollipopmaterial-design
42
android developer

更新された回答：マテリアルデザインスタイルをアプリにバックポートするために、Googleのappcompatライブラリに依存することをお勧めします。 （フラットボタンを使用する代わりに）隆起したボタンをバックポートしていないように見えますが、マテリアルデザインスタイルに一致するボタンを適切にバックポートしているようです。このアプローチをお勧めします。

上げたボタンエフェクトをバックポートしたい場合は、サードパーティのマテリアルデザインライブラリに依存するか、CardViewを使用して以下の古いソリューションを見て、独自のソリューションを実装することができます。

Googleの公式Material Designバックポートを使用してappcompatライブラリをセットアップするには：

compile "com.Android.support:appcompat-v7:+"

次に、styles.xmlファイルにアプリケーションテーマを設定する必要があります。

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

そして、AndroidManifest.xmlで上記のテーマが適切に設定されていることを確認してください：

<application
    Android:allowBackup="false"
    Android:icon="@mipmap/ic_launcher"
    Android:label="@string/app_name"
    Android:supportsRtl="false"
    Android:theme="@style/AppTheme">

上記のセットアップの後、すべてのActivityがAppCompatActivityから拡張されていることを確認し、そこからすべてのButtonがマテリアルデザインスタイルで膨らまされるようにします。

プロジェクトでカスタムButton実装を使用している場合は、Buttonを拡張する代わりに、AppCompatButtonを拡張してください。これは、ほとんどのカスタムViews：AppCompatTextView、AppCompatEditTextなどに当てはまります...

どのように機能しますか？Android xmlレイアウトはすべて、LayoutInflaterと呼ばれるものを使用して拡張されます。 LayoutInflaterはActivityによって提供され、標準のAndroidウィジェットのデフォルトの実装をオーバーライドできるように、LayoutInflaterFactoryを提供するオプションがあります。 ButtonおよびTextView。 AppCompatActivityを使用すると、非標準のLayoutInflaterが提供されます。これにより、マテリアルデザインをサポートするウィジェットの特別なインスタンスが膨らみます！

----------------------------------------- --------古い回答：--- ----------------------------------------------

そのため、Androidは CardView を与えてこのような動作を再現します。これは、ドロップシャドウを適用する角の丸いビューを提供します。また、おそらく ＃setCardElevation（） メソッドを参照する必要があります。

CardViewライブラリをGradleプロジェクトに追加できます。

compile 'com.Android.support:cardview-v7:+'

CardViewは、（Lollipopsのシャドウの方が優れているため）Lollipop実装を使用してこれを実行します。それ以外の場合は、可能な限り最高の状態で複製します。

サンプルを次に示します。

<Android.support.v7.widget.CardView
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:card_view="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        card_view:cardBackgroundColor="#ffd9d9d9"
        card_view:cardCornerRadius="2dp"
        Android:layout_margin="6dp"
        card_view:cardElevation="6dp">

    <TextView Android:id="@+id/text"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:paddingTop="8.5dp"
            Android:paddingBottom="8.5dp"
            Android:paddingLeft="12dp"
            Android:paddingRight="12dp"
            Android:textColor="#de000000"
            Android:fontFamily="sans-serif-medium"
            Android:text="NORMAL" />

</Android.support.v7.widget.CardView>

5.0で実行される上記のコード： CardView Button on 5.0

4.4.4で実行される上記のコード： CardView Button on 4.4.4

Sans-serif-mediumのフォントの太さが異なるか、4.4.4でサポートされていないため、フォントに矛盾があるように見えますが、最新バージョンのRobotoを含めて、 TextViewsのフォント。

投稿する資料は、「高架ボタン」を指します。 CardViewは、「高架」なものを作成する方法です。

21
spierce7

互換ライブラリをアプリに追加します。 （最新バージョンは here にあります。）build.gradleファイル内に依存関係を追加してこれを行います。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.Android.support:appcompat-v7:21.0.3'
}

値ディレクトリにあるstyles.xmlファイルでappthemeを宣言します：

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/theme_primary</item>
        <item name="colorAccent">@color/theme_accent_1</item>
        <item name="actionMenuTextColor">@color/theme_text</item>
    </style>
</resources>

Manifest.xmlファイルで、宣言されたスタイルをアプリケーションに使用するスタイルとして設定します。

<application
    Android:icon="@drawable/ic_launcher"
    Android:theme="@style/AppTheme"/>

レイアウトで、次のように上げられたボタンを宣言します

<Button
    Android:id="@+id/addButton"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:text="@string/title_add" />

次のようにフラットボタンスタイルを宣言します。

<Button
    Android:id="@+id/okbutton"
    style="?android:attr/borderlessButtonStyle"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    Android:text="@Android:string/ok" />

4.4（電話）と5.0（タブレット）の両方のデバイスでの結果：

Tablet with 5.0

Phone 4.4

詳細は公式ドキュメントに記載されています： http://developer.Android.com/training/material/theme.html

9
Peter

私は同じ効果を達成します、

  Android:background="@Android:drawable/dialog_holo_light_frame"

テスト済みの出力：

enter image description here

7
Ranjith Kumar

これはhacky Yigit（cardviewでのgoogle dev）によると、降下ジョブです。

CardView内のパディングとマージンを取り除くために、負の数を使用できます。

API 15 nexus oneおよびnexus 4エミュレーターでテスト済み。 このソリューションはLollipop以前で動作します。

<Android.support.v7.widget.CardView
    Android:id="@+id/elevated_button_card"
    card_view:cardElevation="2dp"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    card_view:cardMaxElevation="8dp"
    card_view:contentPadding="-2dp"
    Android:layout_marginBottom="-2dp"
    card_view:cardCornerRadius="0dp">
    <Button
        Android:id="@+id/elevated_button"
        style="?android:attr/borderlessButtonStyle"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:text="Add New Exercise"/
</Android.support.v7.widget.CardView>

コード：

        final CardView cardView = (CardView) rootView.findViewById(R.id.elevated_button_card);
        final Button button = (Button) rootView.findViewById(R.id.elevated_button);
        button.setOnTouchListener(new View.OnTouchListener() {
            ObjectAnimator o1 = ObjectAnimator.ofFloat(cardView, "cardElevation", 2, 8)
                    .setDuration
                            (80);
            ObjectAnimator o2 = ObjectAnimator.ofFloat(cardView, "cardElevation", 8, 2)
                    .setDuration
                            (80);

            @Override
            public boolean onTouch(View v, MotionEvent event) {

                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                        o1.start();
                        break;
                    case MotionEvent.ACTION_CANCEL:
                    case MotionEvent.ACTION_UP:
                        o2.start();
                        break;
                }
                return false;
            }
        });
4
Asi Mugrabi

私は材料互換性ライブラリに取り組んでいます。マテリアルのようなスタイル、アニメーション化されたシャドウ、タッチリップル効果を使用して、独自のButtonクラスを作成しました。まだ完全ではありませんが、試してみることができます こちら 。

2
Zielony

@ spierce7の回答に加えて、そのレイアウトを少し改善しました。そのため、相対レイアウトがあり、カスタムTextViewをCardViewの中央に正確に設定します。ここにあります。

<Android.support.v7.widget.CardView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/colorPrimary"
        card_view:cardCornerRadius="1dp"
        card_view:cardElevation="3dp"
        Android:longClickable="false"
        Android:id="@+id/button">

        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="48dp"> //just my custom height

        <com.example.admin.lanet_contactwork.MyTextView //for below 5.0
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            PipBoy:fontName="Roboto-Medium.ttf" //custom font
            Android:text="@string/enter"
            Android:textColor="@Android:color/white"
            Android:textSize="14sp"
            Android:layout_centerInParent="true"
            />
        </RelativeLayout>

    </Android.support.v7.widget.CardView>
0
RexSplode

Lollipopの波及効果を欠点なしに保ちながら、境界線を維持してpre-Lollipopの効果を高めるソリューションの私の答えを参照してください here

0
Rémy DAVID