Ответ 1
Я не уверен, что вам все еще нужна помощь, но у него больше всего голосов за оставшийся без ответа вопрос не только в теге android-5.0-lollipop, но также тег android-toolbar. Итак, я подумал, что дам это.
Этот макет довольно легко достичь, особенно с помощью новой библиотеки поддержки дизайна.
Реализация
Корень вашей иерархии должен быть CoordinatorLayout
.
В соответствии с документами
Дети координатораLayout могут иметь привязку. Этот идентификатор вида должен соответствуют произвольному потомку координатораLayout, но он может не быть привязанным ребенком или потомком закрепленного ребенок. Это можно использовать для размещения плавающих представлений относительно других произвольные панели содержимого.
Итак, мы будем использовать это, чтобы поместить FloatingActionButton
туда, куда ему нужно идти.
Остальное довольно просто. Мы будем использовать вертикальный LinearLayout
для размещения Toolbar
, текстового контейнера, контейнера табуляции, а затем a ViewPager
. Итак, полный макет выглядит так:
<android.support.design.widget.CoordinatorLayout
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:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#181E80"
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" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:paddingTop="8dp">
<ImageView
android:id="@android:id/icon"
android:layout_width="54dp"
android:layout_height="54dp"
android:layout_alignParentStart="true"
android:layout_marginStart="16dp"
android:importantForAccessibility="no"
android:src="@drawable/logo" />
<TextView
android:id="@android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@android:id/icon"
android:layout_marginStart="14dp"
android:layout_toEndOf="@android:id/icon"
android:text="Chelsea"
android:textColor="@android:color/white"
android:textSize="24sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignStart="@android:id/text1"
android:layout_below="@android:id/text1"
android:text="England - Premier League"
android:textColor="@android:color/white"
android:textSize="12sp" />
</RelativeLayout>
<FrameLayout
android:id="@+id/tab_container"
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#272F93">
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabContentStart="70dp"
app:tabGravity="center"
app:tabIndicatorColor="#F1514A"
app:tabMode="scrollable"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="#99ffffff" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_margin="16dp"
android:src="@drawable/ic_star_white_24dp"
app:backgroundTint="#F1514A"
app:borderWidth="0dp"
app:elevation="8dp"
app:layout_anchor="@id/tab_container"
app:layout_anchorGravity="top|right|end" />
</android.support.design.widget.CoordinatorLayout>
Нечего добавить еще больше, единственное, что я хотел бы упомянуть, - это использовать TabLayout
. Если вы используете ViewPager
, как мы, вы, вероятно, будете называть одним из двух:
Примечания
Я просто посмотрел на размеры, пытаясь сопоставить картину как можно больше.
Результаты