Как имитировать стиль с поднятыми кнопками Material-design, даже для pre-Lollipop (минус специальные эффекты)?

Google показал несколько хороших способов, что кнопки отображаются на Lollipop здесь .

Я говорю о поднятых и плоских пуговицах.

Как я могу имитировать их на версиях до Lollipop, кроме специальных эффектов (рябь и т. Д.)?

Я говорю об этом и об этом .

Конечно, на Lollipop и выше, я бы хотел использовать специальные эффекты.

Я знаю, что уже есть несколько (и даже много) сообщений об этом, но я не вижу никаких попыток имитировать его полностью.

Solutions Collecting From Web of "Как имитировать стиль с поднятыми кнопками Material-design, даже для pre-Lollipop (минус специальные эффекты)?"

Обновленный ответ: рекомендуется, чтобы вы полагались на библиотеку appcompat Google для поддержки стилей дизайна материалов для вашего приложения. Кажется, что он больше не обращает внимание на поднятую кнопку (вместо этого использует плоские кнопки), но все же адекватно поддерживает кнопку, соответствующую стилю дизайна материала. Я рекомендую вам пойти на этот подход.

Если вы все еще хотите CardView эффекта поднятой кнопки, вам нужно будет полагаться на библиотеку материалов для сторонних разработчиков, или вы можете посмотреть мое старое решение ниже с помощью CardView и реализовать свое.

Чтобы настроить библиотеку appcompat с официальным справочным материалом Material Design,

 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 будут раздуты с использованием стиля Material Design.

Если вы используете пользовательскую реализацию Button в своем проекте, убедитесь, что вместо продления Button AppCompatButton . Это касается большинства ваших пользовательских View : AppCompatTextView , AppCompatEditText и т. Д. …

Как это работает? Все ваши xml-макеты Android раздуты, используя что-то, называемое LayoutInflater . LayoutInflater предоставляется Activity и имеет возможность предоставить LayoutInflaterFactory предоставляемый ему, чтобы вы могли переопределять стандартные реализации стандартных виджетов Android, таких как Button и TextView . Когда вы используете AppCompatActivity , он предоставляет вам нестандартный LayoutInflater , который раздувает специальные экземпляры виджетов, которые поддерживают Material Design!

————————————————- Старый Ответ: ———————————————— –

Итак, Android дал нам CardView, чтобы воспроизвести такое поведение. Он обеспечивает просмотр с закругленными углами, который применяет тень. Вероятно, вы также захотите посмотреть на метод #setCardElevation () .

Вы можете добавить библиотеку CardView в проект Gradle:

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

CardView будет использовать реализацию Lollipop, чтобы сделать это, если он доступен (поскольку тени Lollipops лучше), иначе он будет реплицировать его как можно лучше.

Вот пример:

 <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 на 5.0

Приведенный выше код 4.4.4: Кнопка CardView на 4.4.4

Похоже, что существует расхождение в шрифтах, так как в sans-serif-media имеет другой размер шрифта или не поддерживается в 4.4.4, но его можно легко устранить, включив последнюю версию Roboto и переопределяя Шрифтов в TextViews.

В документации к материалу вы указываете «Повышенная кнопка». CardView – это то, как мы делаем «Elevated» что угодно.

Добавьте в приложение совместимую библиотеку. (Самая последняя версия может быть найдена здесь .) Сделайте это, добавив зависимость в файл build.gradle:

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

Объявите свою apptheme в файле styles.xml, расположенном в каталоге значений:

 <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" /> кнопка <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:

Планшет с 5.0

Телефон 4.4

Подробности можно найти в официальной документации: http://developer.android.com/training/material/theme.html

Я достигаю такого же эффекта, используя,

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

Мой тестовый результат:

Введите описание изображения здесь

Этот хаккий по Yigit (google dev на карте), но выполняет спуск.

Вы можете использовать отрицательные числа, чтобы избавиться от отступов и полей внутри CardView.

Протестировано на эмуляторах api 15 nexus one и nexus 4. Это решение будет работать на pre 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; } }); 

Я работаю над библиотекой материальной совместимости. Я написал свой собственный класс Button с материалоподобными стилями, анимированными тенями и эффектом касания. Хотя это еще не совсем, вы можете попробовать его здесь .

В дополнение к ответу @ 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> 1 <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> 

См. Мой ответ для решения, сохраняющего границу и повышенный эффект на pre-lollipop, сохраняя при этом эффект пульсации на леденец без недостатков здесь