Наложение содержимого выше AppBarLayout с использованием нового дизайна материалов

Я хочу добиться чего-то подобного. (Не FAB или Snackbar). Как я могу создать макет, накладывая AppBarLayout? Как это! (Например)

AppBarLayout с наложением содержимого

Как Play Store:

Как в Play Маркете

Мой AppBarLayout с координаторомLayout и NestedScrollView с RelativeLayout как содержимое выглядит следующим образом:

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rootLayout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="@dimen/_118sdp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/mpc_pink" app:expandedTitleMarginStart="@dimen/_40sdp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <de.mypostcardstore.widgets.ItemImageView android:id="@+id/header" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@color/mpc_pink" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.7" /> <android.support.v7.widget.Toolbar android:id="@+id/article_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:minHeight="?attr/actionBarSize" app:contentScrim="@color/mpc_pink" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:background="?android:colorBackground" android:fillViewport="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <RelativeLayout android:layout_width="match_parent".....> 

Было бы здорово, если бы кто-нибудь мог мне помочь. Я ничего не могу найти в Интернете …

Заранее спасибо!

Solutions Collecting From Web of "Наложение содержимого выше AppBarLayout с использованием нового дизайна материалов"

Просто добавьте что-то вроде

 app:behavior_overlapTop="64dp" 

К вашему NestedScrollView, и он будет размещен над расширенной панелью инструментов.

Кроме того, вы должны добавить что-то вроде

 app:expandedTitleMarginBottom="70dp" 

К вашему CollapsingToolbarLayout, чтобы заголовок не отображался под вашим наложенным содержимым прокрутки.

На самом деле это очень просто. Вы можете достичь этого, используя комбинацию ToolBar , FrameLayout и вашего содержимого (может быть ListView как ваш первый пример, или что-то еще).

Идея состоит в том, чтобы сделать ваш FrameLayout обладать тем же цветом, что и ваш ToolBar , создавая иллюзию ToolBar намного больше, чем он есть. Тогда все, что осталось сделать, – сделать ваш контентный вид последним (или в API 21 и выше: иметь самый высокий атрибут elevation ), чтобы он выглядел так, как будто он плавает над вышеупомянутым FrameLayout .

Смотрите мою иллюстрацию ниже:

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

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

 <!-- Somewhere in your layout.xml --> .... <android.support.v7.widget.Toolbar android:id="@+id/tb_toolbar" android:layout_width="match_parent" android:layout_height="@dimen/abc_action_bar_default_height_material" android:background="?attr/colorPrimary" android:minHeight="?attr/actionBarSize" app:contentInsetStart="72dp" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> <!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. --> <FrameLayout android:id="@+id/v_toolbar_extension" android:layout_width="match_parent" android:layout_height="64dp" android:layout_below="@+id/tb_toolbar" android:background="?attr/colorPrimary" android:elevation="2dp"/> <!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. --> <FrameLayout android:id="@+id/ly_content" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/tb_toolbar" android:elevation="3dp"/> .... 

Обратите внимание, что мое ly_content имеет более высокое значение высоты, чем значение v_toolbar_extension . Именно это даст вам желаемый эффект «наложенной панели инструментов».

И последнее, но не менее важное: вы хотели бы добавить эту строку где-то в onCreate() :

 /* Assuming mToolbar exists as a reference to your ToolBar in XML. */ setSupportActionBar(mTbToolbar); getSupportActionBar().setElevation(0); 

То, что эти коды должны делать, – это установить высоту вашего ToolBar на ноль; Удаление предустановленных теней, которые были заданы по умолчанию для ToolBars. Если вы этого не сделаете, тень создаст «шов» между вашим ToolBar и вашим FrameLayout , тем самым нарушив иллюзию того, что эти два являются одинаковыми.

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


Примечание. Здесь я вижу несколько хороших ответов, в которых упоминается отсутствие FrameLayout и, вместо этого, FrameLayout ToolBar . Хотя теоретически это может работать так же хорошо, как и мое предлагаемое решение, у вас могут возникнуть проблемы при попытке манипулировать прокруткой; Сделав это, вы не сможете отделить ToolBar и его расширение. Вы будете вынуждены либо сделать Toolbar статичной, либо прокрутить всю Toolbar в целом (делает прокрутку немного странной).

Добавьте к этому тот факт, что вы не можете легко назначить настраиваемый элемент на Toolbar . Поэтому вам сложно следовать приведенному выше примеру Google Play. Хотя, если вы используете мое решение, все, что вам нужно сделать, это просто сделать вашу Toolbar прозрачной и вместо этого назначить выделение для FrameLayout .

Я попытался реализовать такие эффекты, как вы упомянули, которые называются Card Toolbar in Android , и он работает так, как ожидалось. Вот мой макет, Взгляните на него:

 <FrameLayout 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:background="@color/background_material_light" > <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="@dimen/toolbar_double_height" android:background="?attr/colorPrimary" /> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="@dimen/cardview_toolbar_spacer" android:layout_marginRight="@dimen/cardview_toolbar_spacer" android:layout_marginTop="?attr/actionBarSize" app:cardBackgroundColor="@android:color/white"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:alpha="0.12" android:background="@android:color/black" /> </LinearLayout> </android.support.v7.widget.CardView> </FrameLayout> 1 <FrameLayout 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:background="@color/background_material_light" > <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="@dimen/toolbar_double_height" android:background="?attr/colorPrimary" /> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="@dimen/cardview_toolbar_spacer" android:layout_marginRight="@dimen/cardview_toolbar_spacer" android:layout_marginTop="?attr/actionBarSize" app:cardBackgroundColor="@android:color/white"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:alpha="0.12" android:background="@android:color/black" /> </LinearLayout> </android.support.v7.widget.CardView> </FrameLayout> 

Надеюсь, ты будешь вдохновлен.

У меня было аналогичное требование, и я достиг этого, как показано ниже.

Тема вашей деятельности должна расширять Theme.AppCompat.Light.NoActionBar. Я создал XML-файл Layout как:

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar_main" android:layout_width="match_parent" android:layout_height="@dimen/action_bar_size_x2" android:background="@color/colorPrimary" android:minHeight="?attr/actionBarSize" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="@dimen/action_bar_size" android:orientation="vertical" > <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" > <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="@string/app_name" android:textSize="24sp" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> 

И активность должна быть примерно такой:

 public class MainActivity extends ActionBarActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main); setSupportActionBar(maintoolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } } 

Я получил следующее: Введите описание изображения здесь