Material design
choose the color
we nee to choose 3 color from the same palette
1.Main color (500)
2.Lighter version (100)
3.Darker color (700 -800)
example;
than choose a acent color from other palette,the acent start from A:
in this example ,fianlly we choose:
Toolbar
Toolbar is the advances version of actionbar
we should splite toolbar by other material
so,some time we need multiple toolbar
step1
if we want ot use toolbar,we need t odispaper the action bar frist,we need to use the no action bar theme
orginal :
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
changed:
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
</style>
step2:
crate a base toolbar style
<!--Base toolbar style-->
<style name="Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="popupTheme">@style/Theme.AppCompat.Light</item>
</style>
the default background color is transparent
popupTheme:
app:popupTheme
有时候我们有需求：
ActionBar文字是白的，ActionBar Overflow弹出的是白底黑字
让ActionBar文字是白的，那么对应的theme肯定是Dark。
可是让ActionBar弹出的是白底黑字，那么需要Light主题。
这时候popupTheme就派上用场了。
the finished theme and toolbar is
<!-- Base application theme. -->
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="toolbarStyle">@style/Toolbar</item>
</style>
<!--Base toolbar style-->
<style name="Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="popupTheme">@style/Theme.AppCompat.Light</item>
</style>
but the toolbar still not appaer,we need to ass it to the layout.
step3
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar"/>
basic concept:
what is ?attr ?
it means "set theheight attribute to what the attribute "actionBarsize" refers to in the current theme.
now,the result is
the toolba not as a action bar!!!!!!
step5
tool abr show as a ction bar
setContentView(R.layout.activity_main);
//set the toolbar as action bar
android.support.v7.widget.Toolbar toolbar = (android.support.v7.widget.Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setDisplayShowTitleEnabled(true);
now:
the toolbar show as a action bar
but it do not have a icon.
Actially ,the toolbar is a container,we can add the view to it,show we can add the icon by ourshelf
step6 add the icon
what is scale type:
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.ActionBar">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_logo"
android:scaleType="center"/>
</android.support.v7.widget.Toolbar>
step7 disable the title
getSupportActionBar().setDisplayShowTitleEnabled(false);
step8 make the share button color become white
it is because we use
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
Light.NoActionBar as a parent, so the text at tool bar is dark.Now,we want to change it to white.
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
do thers thing in the ain activity and detail activity
summary of the setp
moreover,the Activirt should extends AppCompatActivity
problem:
because only use frame layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/weather_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.android.sunshine.app.DetailActivity"
tools:ignore="MergeRootFrame" >
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_detail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- <ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_logo"
android:scaleType="center"/>-->
</android.support.v7.widget.Toolbar>
</FrameLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar_detail"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- <ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/ic_logo"
android:scaleType="center"/>-->
</android.support.v7.widget.Toolbar>
<FrameLayout
tools:context="com.example.android.sunshine.app.DetailActivity"
android:id="@+id/weather_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="MergeRootFrame">
</FrameLayout>
</LinearLayout>
than
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="toolbarStyle">@style/Toolbar</item>
</style>
<!--Base toolbar style-->
<style name="Toolbar" parent="Widget.AppCompat.ActionBar">
<item name="android:background">?attr/colorPrimary</item>
<item name="popupTheme">@style/Theme.AppCompat.Light</item>
</style>
change to
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="@style/Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="toolbarStyle">@style/Toolbar</item>
</style>
<!--Base toolbar style-->
<style name="Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="popupTheme">@style/Theme.AppCompat.Light</item>
</style>
the title is more beautiful
Updating Our Detail View
look like can achieve by weight in the linear layout
why 16dp?
Space between content areas: 8dp
why 32dp?
hust define by ourself
now,we will use grid layout to achieve it
why grid layout why not nested linear layout?
next start to do!!!!
default align to the baseline
what’s base line?
vertical:
above is horizontal and column count=2
how about horizontal and column count=4
how about if A is row 1 column=0?
has some problem
if A is
android:text="A"
app:layout_row="0"
app:layout_column="0"
app:layout_columnSpan="2"
if A is
android:text="A"
app:layout_row="0"
app:layout_column="1"
app:layout_columnSpan="2"
has error,becuase that will make have row 3,but we only have two row
some useful information:
tools:text="Today,February 19"
show the text but not effect the program
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:paddingBottom="@dimen/abc_list_item_padding_horizontal_material" =16dp
app:layout_gravity="fill_vertical" make the view box fill the grid layout box
android:maxHeight="@dimen/list_icon"
android:maxWidth="@dimen/list_icon"
can limit the bigger size
what is layout_columnweight?
The relative proportion of horizontal space that should be allocated to this view during excess space distribution.
Must be a floating point value, such as "1.2".
if all is ,that mean a in the horizontal,all the view should have the same horizontal space
central horizontal
step1
compile "com.android.support:gridlayout-v7:23.1.0"
step2
here is the code:
The text size:
explain:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
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="@android:color/white" />
<include layout="@layout/detail_today_grid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"/>
<include layout="@layout/detail_information_grid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
<ImageSwitcher
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageSwitcher"
android:layout_gravity="right" />
</LinearLayout>
the detail fragment devide to two part,one is detail_today_grid(white) and other is detail_information_grid
it is because their is 1.3:1
so,we set the layout_weight is 3 and 2 for detail_today_grid and detail_information_grid
detail_today_grid
<!-- Detail Layout for Grid -->
<android.support.v7.widget.GridLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
app:columnCount="2">
<android.support.v7.widget.Spacea
app:layout_columnSpan="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
<!--layout_rowWeight use to allocate the excess vertical space-->
<TextView
android:id="@+id/detail_date_textview"
android:layout_marginBottom="@dimen/abc_list_item_padding_horizontal_material"
android:layout_marginTop="@dimen/abc_list_item_padding_horizontal_material"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/secondary_text"
app:layout_columnSpan="2"
app:layout_columnWeight="1"
app:layout_gravity="fill_horizontal"
tools:text="Today, April 03" />
<!--tools:text is only use to show the text when programming,will not effect to the program-->
<ImageView
android:id="@+id/detail_icon"
android:layout_width="0dp"
android:adjustViewBounds="true"
android:maxHeight="@dimen/today_icon"
android:maxWidth="@dimen/today_icon"
app:layout_columnWeight="1"
app:layout_gravity="fill_horizontal"
tools:src="@drawable/art_clouds" />
<TextView
android:id="@+id/detail_high_textview"
android:layout_width="0dp"
android:fontFamily="sans-serif-light"
android:gravity="center_horizontal"
android:textColor="@color/primary_text"
android:textSize="72sp"
app:layout_columnWeight="1"
app:layout_gravity="fill_horizontal"
tools:text="19" />
<TextView
android:id="@+id/detail_forecast_textview"
android:layout_width="0dp"
android:fontFamily="sans-serif"
android:gravity="center_horizontal"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/secondary_text"
app:layout_columnWeight="1"
tools:text="Rainy" />
<TextView
android:id="@+id/detail_low_textview"
android:layout_width="0dp"
android:layout_marginBottom="@dimen/abc_list_item_padding_horizontal_material"
android:fontFamily="sans-serif-light"
android:gravity="center_horizontal"
android:textColor="@color/secondary_text"
android:textSize="36sp"
app:layout_columnWeight="1"
tools:text="10" />
<android.support.v7.widget.Space
app:layout_columnSpan="2"
app:layout_columnWeight="1"
app:layout_rowWeight="1" />
</android.support.v7.widget.GridLayout>
explain :
@dimen/abc_list_item_padding_horizontal_material is eaual to 16dp
now change the view of forecast fragment
answer:
https://github.com/udacity/Advanced_Android_Development/tree/6.06_Improving_the_Forecast_View_Finish
why the text size use dp not sp?
because i don’t want the user maje the text sizie langer,will eccect the text size in our app
Now,change the tablet mode:
form
to
problem 1:
how can the tool bar look like more bigger?
First,we create a vertical Linear layout call appbar,,inside it has the toobar.
than add a image view below the tool bar in the linear layout.
problem 2,hoe does the Sunshine logo align to the Today,tomorrow...?
first ,we need to know how the Today list style,
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:paddingLeft="@dimen/abc_list_item_padding_horizontal_material"
android:paddingRight="@dimen/abc_list_item_padding_horizontal_material"
android:orientation="horizontal">
<ImageView
android:id="@+id/list_item_icon"
android:layout_gravity="center"
android:layout_width="@dimen/list_icon"
android:layout_height="@dimen/list_icon"
android:layout_marginRight="@dimen/abc_list_item_padding_horizontal_material"
android:layout_marginEnd="@dimen/abc_list_item_padding_horizontal_material"
/>
so, if we want the Logo align to the Today,
first we can add a layout,e.g.Frame layout ,mtaht has a android:layout_marginLeft="@dimen/abc_list_item_padding_horizontal_material", to cancel the android:paddingLeft="@dimen/abc_list_item_padding_horizontal_material"
,than add another Frame alyout inside the above Frame alyout,that has
android:layout_marginLeft="@dimen/list_icon" to cancel the android:layout_width="@dimen/list_icon",
Finally,we add a android:paddingLeft="@dimen/abc_list_item_padding_horizontal_material" to the frame layout to cancel the finall android:layout_marginEnd="@dimen/abc_list_item_padding_horizontal_material"
here is the answer code
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:elevation="@dimen/appbar_elevation"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<!-- These FrameLayouts are only there to line the image up with the keyline correctly, since
we cannot do addition of dimensions/attributes otherwise -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/abc_list_item_padding_horizontal_material"
android:layout_marginStart="@dimen/abc_list_item_padding_horizontal_material"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/list_icon"
android:layout_marginStart="@dimen/list_icon"
android:paddingLeft="@dimen/abc_list_item_padding_horizontal_material"
android:paddingStart="@dimen/abc_list_item_padding_horizontal_material">
<ImageView
android:layout_width="wrap_content"
android:layout_height="?attr/listPreferredItemHeight"
android:layout_gravity="center_vertical"
android:src="@drawable/ic_logo"
android:contentDescription="@string/app_name"/>
</FrameLayout>
</FrameLayout>
</LinearLayout>
<!-- This is used as a strut to create two columns in our RelativeLayout -->
<android.support.v4.widget.Space
android:id="@+id/layout_center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<fragment
android:id="@+id/fragment_forecast"
android:name="com.example.android.sunshine.app.ForecastFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_alignEnd="@id/layout_center"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignRight="@id/layout_center"
android:layout_below="@id/appbar"
tools:layout="@android:layout/list_content" />
<!-- We set elevation here only so the detail view doesn't get occluded
by the AppBar -->
<FrameLayout
android:id="@+id/weather_detail_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignLeft="@id/layout_center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginTop="?attr/actionBarSize"
android:layout_alignStart="@id/layout_center"
android:elevation="@dimen/appbar_elevation"
android:paddingRight="@dimen/abc_list_item_padding_horizontal_material"
android:paddingEnd="@dimen/abc_list_item_padding_horizontal_material"
android:paddingBottom="@dimen/abc_list_item_padding_horizontal_material"
/>
</RelativeLayout>
problem3
it is because we use the Relative,because we want the weather detail can overlap the appbar linear layout.
How can we align the different fragment and fragment layout in a relative layout?
fist we make a space view.
<android.support.v4.widget.Space
android:id="@+id/layout_center"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true" />
layout_centerInParent let it always be the center of the Relative layout.This vies us used to be align.
for the forecast view,we set it
below the appBar
align to the parent left,
align the right edge to the right edge of the space view(because the is 0dp,so left edge is the same to right edge),
for the weather_detail_container frame layout,
layout_alignParentRight
lalign the left edge to the right left of the space view
and because of the overlap to the appbar,and soo the toolbar
android:layout_marginTop="?attr/actionBarSize",
if we don’t set this,the weather_detail_container frame layout will overlpa the actoinbar too!!!
and we can see that at the right edh=ge and bottom have some edge,so we neet to set
android:paddingBottom="@dimen/abc_list_item_padding_horizontal_material"
android:paddingEnd="@dimen/abc_list_item_padding_horizontal_material"
android:paddingRight="@dimen/abc_list_item_padding_horizontal_material"
to the frame layout
for sw600dp-port
concept:on;y use one relative layout,no other nested layout
the blue app bar part is made by 3 view
toolbar
image view
view that is blue
all the view is relative nelow each other in the relative layout
The detail fram:
set to below the image view,and set the left and right margin,and the height is wrap content
th forecast fragment just set below the detail fram
the answer code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<!-- These FrameLayouts are only there to line the image up with the keyline correctly, since
we cannot do addition of dimensions/attributes otherwise -->
<ImageView
android:layout_width="match_parent"
android:background="?attr/colorPrimary"
android:layout_height="?attr/listPreferredItemHeight"
android:layout_gravity="center_horizontal"
android:scaleType="center"
android:layout_below="@id/toolbar"
android:contentDescription="@string/app_name"
android:id="@+id/appbar_logo"
android:src="@drawable/ic_logo" />
<View
android:id="@+id/bottom_appbar"
android:background="?attr/colorPrimary"
android:elevation="@dimen/appbar_elevation"
android:layout_width="match_parent"
android:layout_height="@dimen/details_app_bar_overlap"
android:layout_below="@id/appbar_logo"/>
<FrameLayout
android:id="@+id/weather_detail_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="@id/appbar_logo"
android:elevation="@dimen/appbar_elevation"
android:layout_marginStart="@dimen/abc_list_item_padding_horizontal_material"
android:layout_marginLeft="@dimen/abc_list_item_padding_horizontal_material"
android:layout_marginEnd="@dimen/abc_list_item_padding_horizontal_material"
android:layout_marginRight="@dimen/abc_list_item_padding_horizontal_material" />
<fragment
android:id="@+id/fragment_forecast"
android:name="com.example.android.sunshine.app.ForecastFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:layout_below="@id/weather_detail_container"
tools:layout="@android:layout/list_content" />
<!-- We set elevation here only so the detail view doesn't get occluded
by the AppBar -->
</RelativeLayout>
1.Dimensions
dimens.xml like a vlue file,but put in the unit,like 32dp,23sp
2.include at the ayout
example:
<include layout="@layout/detail_extras_grid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
in the include file , the width and height should be set match_parent,and then set the ndroid:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2" in the include tag.
3.refs
how to use???
basic of android refs
problem:
now,we have two layout from a fragment.
fragment_detail.xml
and
fragment_detail_wide.xml
if we want to load
at mobile port
fragment_detail.xml
at mobile land
fragment_detail_wide.xml
at tablet port
fragment_detail_wide.xml
at tablet land
fragment_detail.xml
what can we do?
we shoud create 4 refs.xml for the 4 state
use refs.xml(for the mobile port) as example,the content is
<?xml version="1.0" encoding="utf-8"?>
<resources><item type="layout" name="fragment_detail_start">@layout/fragment_detail</item></resources>
the other is almost the same
the important thing is the name for all the 4 should be the same fragment_detail_start
finally: load it
View rootView = inflater.inflate(R.layout.fragment_detail_start, container, false);
thn the system will load the correct file.
finish!!!
answer code:
but still have some problem
at nexus 7
but it is ok for nexus 9
the reason is it do not have enough space
another problem is the elevation,it seem that if we set a elevation on a fraom layout,,the elevation for the frame layout will not appear
Solve:
the problem don’t have enough space
the orginal is
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
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="@android:color/white" />
<include layout="@layout/detail_today_grid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"/>
<include layout="@layout/detail_extras_grid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
</LinearLayout>
toolbar
|
detail_today_grid
|
detail_extras_grid
|
change to
detail_today_grid+toolbar
|
detail_extras_grid
|
that mean the view detail_today_grid and toolbar need to overlap.we can use FrameLayount to make them overlap.detail_today_grid under the toolbar,than set the background of the toolbar to transparent.Than can solvethe problem
the code answer is
<!--
Copyright (C) 2015 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- Master layout. -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3">
<include layout="@layout/detail_today_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@android:color/transparent" />
</FrameLayout>
<include layout="@layout/detail_extras_grid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"/>
</LinearLayout>
now,to solve other proble,the elevation.
we can use the CardView to replace the FrameLayout.
The CardView is a view and layout that extends FrameLayput.It is because the Layout can’t make a elevation ,we we use CardView
some important setting
app:cardCornerRadius="4dp"
app:cardPreventCornerOverlap="false"//no white dege
android:elevation="@dimen/detail_card_elevation"
we face a problem, although we din’t load anything on the card,will show a empty card,we don’t want this,we can use setVisibility(View.INVISIBLE) before loading
and use setVisibility(View.VISIBLE) after loading on the card view
