На панели инструментов нет тени по умолчанию?
Я обновляю свое приложение с помощью новой панели инструментов из библиотеки поддержки v21. Моя проблема заключается в том, что на панели инструментов не создается тени, если я не устанавливаю атрибут "elevation". Это нормальное поведение, или я делаю что-то неправильно?
Мой код:
<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);
Ответы
Ответ 1
В итоге я установил свою собственную тень для панели инструментов, подумал, что это может помочь любому, кто ее ищет:
<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>
@вытяжке/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_alizarin
<color name="color_alizarin">#e74c3c</color>
![enter image description here]()
Ответ 2
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>
Вот результат:
![enter image description here]()
Есть много других хитростей с библиотекой поддержки дизайна.
- http://inthecheesefactory.com/blog/android-design-support-library-codelab/en
- http://android-developers.blogspot.in/2015/05/android-design-support-library.html
AndroidX
Как указано выше, но с зависимостью:
implementation 'com.google.android.material:material:1.0.0'
и com.google.android.material.appbar.AppBarLayout
Ответ 3
Вы не можете использовать атрибут высоты перед API 21 (Android Lollipop). Тем не менее, вы можете добавлять тень программно, например, используя пользовательский вид, расположенный под панелью инструментов.
@макет/панель инструментов
<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" />
@вытяжке/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" />
![enter image description here]()
Ответ 4
Это сработало для меня очень хорошо:
<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>
Ответ 5
Используйте/значения папок, чтобы применить правильный теневой стиль на основе версии ОС.
Для устройств под 5.0 используйте /values/styles.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 здесь: 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.]
Ответ 6
Если вы устанавливаете ToolBar
как ActionBar
, тогда просто вызывайте:
getSupportActionBar().setElevation(YOUR_ELEVATION);
Примечание. Это нужно вызывать после setSupportActionBar(toolbar);
Ответ 7
Моя проблема заключается в том, что на панели инструментов не создается тени, если я не устанавливаю атрибут "elevation". Это нормальное поведение, или я делаю что-то неправильно?
Это нормальное поведение. Также см. FAQ в конце этого сообщения.
Ответ 8
Это было часами с часами, вот что сработало для меня.
Удалите все атрибуты elevation
из виджетов appBarLayout
и Toolbar
(включая styles.xml
если вы применяете какой-либо стиль).
Теперь внутри действия примените elvation
на вашем actionBar
:
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);
Это должно сработать.
Ответ 9
я добавил
<android.support.v7.widget.Toolbar
...
android:translationZ="5dp"/>
в описании панели инструментов, и это работает для меня. Использование 5. 0+
Ответ 10
Вы также можете заставить его работать с 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>
Ответ 11
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 background
<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>
Ответ 12
Большинство решений отлично работают. Хотелось бы показать другую аналогичную альтернативу:
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/вытяжке-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"/>
Рез/рисуем /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"/>
Рез/рисуем /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>
styles.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.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
setSupportActionBar(toolbar as Toolbar)
}
}
Полный пример здесь, так как я заметил, что в IDE есть ошибка, foreground
атрибут foreground
слишком велик для использования здесь.
Ответ 13
Все, что вам нужно, это android:margin_bottom
равный android:margin_bottom
android:elevation
. Не AppBarLayout
, clipToPadding
и т.д.
Пример:
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="4dp"
android:background="@android:color/white"
android:elevation="4dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Inner layout goes here-->
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
Ответ 14
Для 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>
Ответ 15
У меня была аналогичная проблема с тенью. Тень рисуется прямым родителем AppBarLayout в моем случае. Если высота родителя такая же, как в AppBarLayout, тень не может быть нарисована. Поэтому проверка размера родительского макета и, возможно, макетирования римейка может решить проблему. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/
Ответ 16
Правильный ответ будет добавить
android: backgroundTint = "# ff00ff" на панель инструментов с android: background = "@android: color/white"
Если вы используете другой цвет, то белый для фона, он удалит тень. Хороший Google!