Нет тени по умолчанию на панели инструментов?
Я обновляю свое приложение с помощью новой панели инструментов из библиотеки поддержки v21. Моя проблема заключается в том, что панель инструментов не отбрасывает тень, если я не устанавливаю атрибут "высота". Это нормальное поведение или я делаю что-то неправильно?
мой код:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/my_awesome_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<FrameLayout
android:id="@+id/FrameLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
.
.
.
а в моей деятельности-метод OnCreate:
Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
setSupportActionBar(toolbar);
13 ответов:
Я закончил тем, что установил свою собственную тень для панели инструментов, подумал, что это может быть полезно для тех, кто ее ищет:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="top" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/color_alizarin" android:titleTextAppearance="@color/White" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- **** Place Your Content Here **** --> <View android:layout_width="match_parent" android:layout_height="5dp" android:background="@drawable/toolbar_dropshadow"/> </FrameLayout> </LinearLayout>
@drawable / toolbar_dropshadow:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="@android:color/transparent" android:endColor="#88333333" android:angle="90"/> </shape>
@color/color_alizarin
<color name="color_alizarin">#e74c3c</color>
Google выпустила библиотеку поддержки дизайна несколько недель назад, и в этой библиотеке есть отличное решение для этой проблемы.
добавить библиотеку поддержки проектирования в качестве зависимости в
build.gradle
:compile 'com.android.support:design:22.2.0'
добавить
AppBarLayout
поставляется библиотекой в виде обертки вокруг вашегоToolbar
макет для создания тени.<android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar .../> </android.support.design.widget.AppBarLayout>
вот результат :
есть много других трюков с поддержкой дизайна библиотека.
вы не можете использовать атрибут высоты до API 21 (Android Lollipop). Однако вы можете добавить тень программно, например, с помощью пользовательского представления, расположенного под панелью инструментов.
@layout / toolbar
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/blue" android:minHeight="?attr/actionBarSize" app:theme="@style/ThemeOverlay.AppCompat.ActionBar" /> <View android:id="@+id/toolbar_shadow" android:layout_width="match_parent" android:layout_height="3dp" android:background="@drawable/toolbar_dropshadow" />
@drawable / toolbar_dropshadow
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="@android:color/transparent" android:endColor="#88333333" android:angle="90"/> </shape>
в вашем макете активности
<include layout="@layout/toolbar" />
это сработало для меня очень хорошо:
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primary" card_view:cardElevation="4dp" card_view:cardCornerRadius="0dp"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/primary" android:minHeight="?attr/actionBarSize" /> </android.support.v7.widget.CardView>
использовать / values папки для применения правильного стиля тени на основе версии ОС.
для устройств под 5.0 используйте /значения/стили.xml добавить windowContentOverlay к телу вашей деятельности:
<style name="MyViewArea"> <item name="android:foreground">?android:windowContentOverlay</item> </style> <style name="MyToolbar"> <item name="android:background">?attr/colorPrimary</item> </style>
затем добавьте свою собственную тень, изменив тему, чтобы включить:
<item name="android:windowContentOverlay">@drawable/bottom_shadow</item>
вы можете захватить теневой ресурс Google IO app здесь: https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png
для устройств 5.0 и более поздних версий используйте / values-v21 / styles.xml добавить высота на панель инструментов с помощью пользовательского стиля заголовка:
<style name="MyViewArea"> </style> <style name="MyToolbar"> <item name="android:background">?attr/colorPrimary</item> <item name="android:elevation">4dp</item> </style>
отметим, что во втором случае, мне пришлось создать пустой MyViewArea стиль, поэтому windowContentOverlay не появится тоже.
[обновление: изменены имена ресурсов и добавлена тень Google.]
если вы устанавливаете
ToolBar
какActionBar
тогда просто звоните:getSupportActionBar().setElevation(YOUR_ELEVATION);
Примечание: это должно быть вызвано после
setSupportActionBar(toolbar);
моя проблема заключается в том, что панель инструментов не отбрасывает тень, если я не устанавливаю атрибут "высота". Это нормальное поведение или я делаю что-то неправильно?
Это нормальное поведение. Смотрите FAQ в конце этот пост.
играл с этим в течение нескольких часов, вот что работает для меня.
удалить все
elevation
атрибутыappBarLayout
иToolbar
виджеты (в том числеstyles.xml
если вы применяете какой-либо стиль).теперь внутри деятельности, применить
elvation
наactionBar
:Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar); getSupportActionBar().setElevation(3.0f);
это должно работать.
вы также можете заставить его работать с
RelativeLayout
. Это немного уменьшает вложенность макета;)<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <include android:id="@+id/toolbar" layout="@layout/toolbar" /> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbar" /> <View android:layout_width="match_parent" android:layout_height="5dp" android:layout_below="@id/toolbar" android:background="@drawable/toolbar_shadow" /> </RelativeLayout>
actionbar_background.xml
<item> <shape> <solid android:color="@color/black" /> <corners android:radius="2dp" /> <gradient android:startColor="@color/black" android:centerColor="@color/black" android:endColor="@color/white" android:angle="270" /> </shape> </item> <item android:bottom="3dp" > <shape> <solid android:color="#ffffff" /> <corners android:radius="1dp" /> </shape> </item> </layer-list>
добавить в фон actionbar_style
<style name="Theme.ActionBar" parent="style/Widget.AppCompat.Light.ActionBar.Solid"> <item name="background">@drawable/actionbar_background</item> <item name="android:elevation">0dp</item> <item name="android:windowContentOverlay">@null</item> <item name="android:layout_marginBottom">5dp</item>
name= "displayOptions">useLogo|showHome|showTitle|showCustom
добавить в Basetheme
<style name="BaseTheme" parent="Theme.AppCompat.Light"> <item name="android:homeAsUpIndicator">@drawable/home_back</item> <item name="actionBarStyle">@style/Theme.ActionBar</item> </style>
большинство решений отлично работают здесь. Хотелось бы показать другую, похожую альтернативу:
gradle:
implementation 'androidx.appcompat:appcompat:1.0.0-rc02' implementation 'com.google.android.material:material:1.0.0-rc02' implementation 'androidx.core:core-ktx:1.0.0-rc02' implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
у вас макет может иметь вид панели инструментов и тень для него, ниже, аналогично этому (нужна модификация, конечно) :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:titleTextAppearance="@style/Base.TextAppearance.Widget.AppCompat.Toolbar.Title"/> <include layout="@layout/toolbar_action_bar_shadow" android:layout_width="match_parent" android:layout_height="wrap_content"/> </LinearLayout>
res/drawable-v21 / toolbar_action_bar_shadow.xml
<androidx.appcompat.widget.AppCompatImageView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:src="@drawable/msl__action_bar_shadow"/>
res/drawable / toolbar_action_bar_shadow.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="wrap_content" android:foreground="?android:windowContentOverlay" tools:ignore="UnusedAttribute"/>
res/drawable / msl__action_bar_shadow.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:dither="true" android:shape="rectangle" > <gradient android:angle="270" android:endColor="#00000000" android:startColor="#33000000" /> <size android:height="10dp" /> </shape> </item> </layer-list>
стили.xml
<resources> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style> </resources>
MainActivity.КТ
class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) setSupportActionBar(toolbar as Toolbar) } }
полная выборка здесь, как я заметил, IDE имеет ошибку сказать
foreground
атрибут слишком новый для использования здесь.
для 5.0 +: вы можете использовать AppBarLayout с панелью инструментов. AppBarLayout имеет атрибут" высота".
<android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:elevation="4dp" android:layout_height="wrap_content" android:orientation="vertical"> <include layout="@layout/toolbar" /> </android.support.design.widget.AppBarLayout>
У меня была аналогичная проблема с тенью. Тень рисуется прямым родителем AppBarLayout в моем случае. Если высота родителя такая же, как у AppBarLayout, тень не может быть нарисована. Поэтому проверка размера родительского макета и, возможно, переделка макета может решить проблему. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/
Comments