it-swarm.com.ru

Нет тени по умолчанию на панели инструментов?

Я обновляю свое приложение новой панелью инструментов из библиотеки поддержки 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">
       .
       .
       .

А в моей Activity - метод OnCreate:

    Toolbar toolbar = (Toolbar) findViewById(R.id.my_awesome_toolbar);
    setSupportActionBar(toolbar);
146
MrBrightside

В итоге я установил свою собственную тень для панели инструментов, и подумал, что это может пригодиться всем, кто ее ищет:

<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

234
I'm a frog dragon

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

Есть много других хитростей с библиотекой поддержки дизайна.

  1. http://inthecheesefactory.com/blog/Android-design-support-library-codelab/en
  2. http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html
179
Binoy Babu

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

21
Muhammad Aamir Ali

Используйте папки / values, чтобы применить правильный стиль тени в зависимости от версии ОС.

Для устройств младше 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>

Вы можете получить IO теневой ресурс приложения Google здесь: 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.]

17
radley

Это сработало для меня очень хорошо:

<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>
17
Islam A. Hassan

Если вы устанавливаете ToolBar как ActionBar, тогда просто позвоните:

getSupportActionBar().setElevation(YOUR_ELEVATION);

Примечание: это должно быть вызвано после setSupportActionBar(toolbar);

11
Roberto B.

Моя проблема заключается в том, что панель инструментов не отбрасывает тени, если я не установил атрибут «Высота». Это нормальное поведение или я что-то не так делаю?

Это нормальное поведение. Также смотрите FAQ в конце этот пост .

7
cygery

Несколько часов играл с этим, вот что сработало для меня.

Удалите все атрибуты elevation из виджетов appBarLayout и Toolbar (включая styles.xml, если вы применяете какой-либо стиль).

Теперь в рамках действия примените elvation к своему actionBar:

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setElevation(3.0f);

Это должно работать.

7
Irshu

Вы также можете заставить его работать с 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>
4
iluu

я добавил 

<Android.support.v7.widget.Toolbar
...
Android:translationZ="5dp"/>

в описании панели инструментов, и это работает для меня . Использование 5.0+

2
Alex Mazur

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>
1
Samet öztoprak

Большинство решений отлично работают здесь. Хотелось бы показать другую, похожую альтернативу:

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>

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 слишком новый для использования здесь.

1
android developer

Все, что вам нужно, это 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>
0
Rohan Taneja

У меня была похожая проблема с тенью. В моем случае тень рисуется прямым родителем AppBarLayout. Если высота родительского элемента совпадает с высотой AppBarLayout, тень не может быть нарисована. Таким образом, проверка размера родительского макета и, возможно, римейк макета может решить проблему. https://www.reddit.com/r/androiddev/comments/6xddb0/having_a_toolbar_as_a_fragment_the_shadow/

0
Radiofisik

Для 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>
0
Eugene Lezov