2014-11-03 2 views
19

Я добавляю новую панель действий по дизайну материала из нового appcompat, и я использую новый виджет панели инструментов. Я установил пользовательский фон на панели инструментов в xml, но моя проблема в том, что тень от панели действий не отображается. Вы знаете, как это сделать?Android: Appcompat 21 как добавить тень на панель действий

Toolbar код

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/my_awesome_toolbar" 
    android:layout_height="wrap_content" 
    android:layout_width="match_parent" 
    android:minHeight="?attr/actionBarSize" 
    android:background="@drawable/ab_background_textured" 
    app:theme="@style/MyTheme" 
    app:popupTheme="@style/MyTheme.Popup"/> 

MyTheme стиль

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item> 
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item> 
    <item name="android:textColorSecondary">#ffff8800</item> 
</style> 

MyTheme.Popup стиль

<style name="MyTheme.Popup" parent="ThemeOverlay.AppCompat.Dark"> 
    <item name="android:textColor">#ffffff</item> 
</style> 

Обновление

Как @Justin Powell предложил добавить actionBarStyle на мою тему, но все же нет тени для тени.

стиль MyTheme (Обновлено)

<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar"> 
    <item name="android:textColorPrimary">@color/abc_primary_text_material_dark</item> 
    <item name="actionMenuTextColor">@color/abc_primary_text_material_dark</item> 
    <item name="android:textColorSecondary">#ffff8800</item> 
    <item name="android:actionBarStyle">@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse</item> 
</style> 
+0

Возможный дубликат [Как показать тень ActionBar и панели инструментов библиотеки поддержки на все версии для Android?] (http://stackoverflow.com/questions/27474766/how-to-sho w-the-shadow-of-the-actionbartoolbar-of-the-support-library-on-all-an) – rds

ответ

30

Для версий до 5.0 макетов, вы можете добавить тень назад к содержанию под панелью инструментов, добавляя foreground="?android:windowContentOverlay" к FrameLayout контента.

Например:

<?xml version="1.0" encoding="utf-8"?> 
<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="wrap_content" 
    android:minHeight="?attr/actionBarSize" 
    app:theme="@style/ThemeOverlay.AppCompat.ActionBar" /> 

<FrameLayout 
    android:id="@+id/fragmentContainer" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:foreground="?android:windowContentOverlay" 
    /> 

</LinearLayout> 
+0

Знаете ли вы, как Google получил тень, не устанавливая этот атрибут в своем приложении Google IO 2014? (https://github.com/google/iosched/blob/master/android/src/main/res/layout/activity_settings.xml) –

+5

Это чертеж, который они использовали в другом макете деятельности: https: // github. com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png в качестве переднего плана. –

+0

@Billy К сожалению? Android: windowContentOverlay легче, чем исходная тень, поэтому она не выглядит одинаково. Любая подсказка, какой системный ресурс может использоваться для имитации оригинального внешнего вида? – tomrozb

12

Это, как я показываю тень:

<!-- API level 21 and above then the elevation attribute is enough. For some reason it can't be set directly on the include so I wrap it in a FrameLayout --> 
<FrameLayout 
    android:id="@+id/topwrapper" 
    android:background="@color/theme_primary" 
    android:elevation="4dp" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <include layout="@layout/toolbar_actionbar" /> 
</FrameLayout> 

<FrameLayout 
    android:layout_below="@id/topwrapper" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <WebView 
     android:id="@+id/webview" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" /> 
    <!-- This topshadow is hidden in code for API level 21 and above --> 
    <include layout="@layout/topshadow" /> 
</FrameLayout> 

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

<View xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="5dp" 
    android:id="@+id/shadow_prelollipop" 
    android:background="@drawable/background_shadow" /> 

background_shadow.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 

    <gradient 
     android:startColor="#02444444" 
     android:endColor="#33111111" 
     android:angle="90"></gradient> 
</shape> 

toolbar_actionbar.xml

<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:myapp="http://schemas.android.com/apk/res-auto" 
    myapp:theme="@style/ActionBarThemeOverlay" 
    myapp:popupTheme="@style/ActionBarPopupThemeOverlay" 
    android:id="@+id/toolbar_actionbar" 
    android:background="@color/theme_primary" 
    myapp:titleTextAppearance="@style/ActionBar.TitleText" 
    myapp:contentInsetStart="?actionBarInsetStart" 
    android:layout_width="match_parent" 
    android:layout_height="?actionBarSize" /> 
33

Я нашел решение в приложении Google IO, чтобы быть приемлемым для себя, но видел не блог или Stackoverflow после полного объяснения. Что вы можете сделать, это взять их Apache 2 лицензионного ящик теневого актива из https://github.com/google/iosched/blob/master/android/src/main/res/drawable-xxhdpi/bottom_shadow.9.png, а затем в макете вашей деятельности:

<RelativeLayout android:layout_width="match_parent" 
       android:layout_height="match_parent"> 
    <include android:id="@+id/toolbar" 
      layout="@layout/toolbar"/> 

    <FrameLayout android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:layout_below="@id/toolbar" 
       android:foreground="@drawable/header_shadow"> 
    <!-- YOUR STUFF HERE --> 
    </FrameLayout> 
</RelativeLayout> 

Принимая во внимании заголовка тени является

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
    <item name="header_shadow" type="drawable">@drawable/bottom_shadow</item> 
</resources> 

для уровней API < 21. Так же, как https://github.com/google/iosched/blob/master/android/src/main/res/values/refs.xml и https://github.com/google/iosched/blob/master/android/src/main/res/values-v21/refs.xml.

И быть сложным, здесь toolbar.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.Toolbar 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:background="?attr/colorPrimary" 
     android:elevation="4dp" 
     app:theme="@style/ToolbarTheme" 
     app:popupTheme="@style/AppTheme"/> 
+4

О, это так удивительно ужасно, но, кажется, разумный подход. Я попытаюсь это сделать. Благодаря! – benhylau

+0

У вас не было бы двух теней на> = Lollipop? – southerton

+0

Нет, у вас нет двух теней, потому что для 21 и выше header_shadow имеет значение NULL. См. Refs.xml в значениях-v21. –

0

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> 
    <item name="logo">@drawable/ab_logo</item> 
    <item name="displayOptions">useLogo|showHome|showTitle|showCustom</item> 
</style> 

добавить в Basetheme

<style name="BaseTheme" parent="Theme.AppCompat.Light"> 
      <item name="android:homeAsUpIndicator">@drawable/home_back</item> 
      <item name="actionBarStyle">@style/TFKBTheme.ActionBar</item> 
    </style> 

 Смежные вопросы

  • Нет связанных вопросов^_^