Skip to content

Commit 45627b2

Browse files
DAGalpinDAGalpin
committed
Updated forecast layout on phones to match our new design.
1 parent 734aab6 commit 45627b2

3 files changed

Lines changed: 113 additions & 105 deletions

File tree

‎app/src/main/res/layout/activity_main.xml‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,24 +15,27 @@
1515
-->
1616
<LinearLayout
1717
xmlns:android="http://schemas.android.com/apk/res/android"
18-
xmlns:tools="http://schemas.android.com/tools"
1918
android:layout_width="match_parent"
2019
android:layout_height="wrap_content"
2120
android:orientation="vertical">
2221

2322
<android.support.v7.widget.Toolbar
2423
android:id="@+id/toolbar"
2524
android:layout_width="match_parent"
26-
android:layout_height="?attr/actionBarSize"
25+
android:layout_height="wrap_content"
2726
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
2827
<ImageView
2928
android:layout_width="wrap_content"
30-
android:layout_height="match_parent"
29+
android:layout_height="?attr/listPreferredItemHeight"
30+
android:layout_marginTop="?attr/actionBarSize"
31+
android:layout_gravity="center_horizontal"
3132
android:src="@drawable/ic_logo"
32-
android:scaleType="center"/>
33-
</android.support.v7.widget.Toolbar>
33+
android:scaleType="center"
34+
android:background="@color/primary"/>
35+
</android.support.v7.widget.Toolbar>
3436

35-
<fragment
37+
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
38+
xmlns:tools="http://schemas.android.com/tools"
3639
android:id="@+id/fragment_forecast"
3740
android:name="com.example.android.sunshine.app.ForecastFragment"
3841
android:layout_width="match_parent"

‎app/src/main/res/layout/list_item_forecast.xml‎

Lines changed: 47 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -15,69 +15,72 @@
1515
limitations under the License.
1616
-->
1717
<!-- Layout for weather forecast list item for future day (not today) -->
18-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
18+
<!-- Make the background of our selector a non-transparent color -->
19+
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
1920
android:layout_width="match_parent"
2021
android:layout_height="wrap_content"
21-
android:gravity="center_vertical"
22-
android:minHeight="?android:attr/listPreferredItemHeight"
23-
android:orientation="horizontal"
24-
android:background="@drawable/touch_selector">
22+
android:background="@drawable/touch_selector"
23+
>
2524

26-
<FrameLayout
27-
android:layout_width="60dp"
28-
android:layout_height="wrap_content">
25+
<LinearLayout
26+
android:layout_width="match_parent"
27+
android:layout_height="wrap_content"
28+
android:gravity="center_vertical"
29+
android:minHeight="?android:attr/listPreferredItemHeight"
30+
android:paddingLeft="@dimen/abc_list_item_padding_horizontal_material"
31+
android:paddingRight="@dimen/abc_list_item_padding_horizontal_material"
32+
android:orientation="horizontal">
2933

3034
<ImageView
3135
android:id="@+id/list_item_icon"
3236
android:layout_gravity="center"
33-
android:layout_width="wrap_content"
34-
android:layout_height="wrap_content"
35-
android:adjustViewBounds="true"/>
36-
37-
</FrameLayout>
38-
39-
<LinearLayout
40-
android:layout_height="wrap_content"
41-
android:layout_width="0dp"
42-
android:layout_weight="7"
43-
android:orientation="vertical">
37+
android:layout_width="@dimen/list_icon"
38+
android:layout_height="@dimen/list_icon"
39+
android:layout_marginRight="@dimen/abc_list_item_padding_horizontal_material"
40+
android:layout_marginEnd="@dimen/abc_list_item_padding_horizontal_material"
41+
/>
4442

45-
<TextView
46-
android:id="@+id/list_item_date_textview"
47-
android:layout_width="wrap_content"
43+
<LinearLayout
4844
android:layout_height="wrap_content"
49-
android:fontFamily="sans-serif-condensed"
50-
android:textSize="20sp"/>
45+
android:layout_width="0dp"
46+
android:layout_weight="7"
47+
android:orientation="vertical">
5148

52-
<TextView
53-
android:id="@+id/list_item_forecast_textview"
54-
android:layout_width="wrap_content"
55-
android:layout_height="wrap_content"
56-
android:fontFamily="sans-serif-condensed"
57-
android:textAppearance="?android:textAppearanceSmall"/>
58-
</LinearLayout>
49+
<TextView
50+
android:id="@+id/list_item_date_textview"
51+
android:layout_width="wrap_content"
52+
android:layout_height="wrap_content"
53+
android:textAppearance="@style/TextAppearance.AppCompat.Subhead"/>
5954

60-
<LinearLayout
61-
android:layout_width="0dp"
62-
android:layout_height="wrap_content"
63-
android:layout_weight="5"
64-
android:layout_gravity="center"
65-
android:orientation="vertical">
55+
<TextView
56+
android:id="@+id/list_item_forecast_textview"
57+
android:layout_width="wrap_content"
58+
android:layout_height="wrap_content"
59+
android:textAppearance="@style/TextAppearance.AppCompat.Body1"
60+
android:textColor="@color/secondary_text"/>
61+
</LinearLayout>
6662

6763
<TextView
6864
android:id="@+id/list_item_high_textview"
69-
android:layout_width="wrap_content"
65+
android:layout_width="@dimen/forecast_text_width"
7066
android:layout_height="wrap_content"
7167
android:layout_gravity="center"
72-
android:fontFamily="sans-serif-condensed"
73-
android:textAppearance="?android:textAppearanceLarge"/>
68+
android:gravity="right"
69+
android:layout_marginRight="@dimen/forecast_temperature_space"
70+
android:layout_marginEnd="@dimen/forecast_temperature_space"
71+
android:fontFamily="sans-serif-light"
72+
android:textColor="@color/primary_text"
73+
android:textSize="@dimen/forecast_text_size"/>
7474

7575
<TextView
7676
android:id="@+id/list_item_low_textview"
77-
android:layout_width="wrap_content"
77+
android:layout_width="@dimen/forecast_text_width"
7878
android:layout_height="wrap_content"
7979
android:layout_gravity="center"
80-
android:fontFamily="sans-serif-condensed"
81-
android:textAppearance="?android:textAppearanceSmall"/>
80+
android:gravity="right"
81+
android:fontFamily="sans-serif-light"
82+
android:textColor="@color/forecast_low_text"
83+
android:textSize="@dimen/forecast_text_size"/>
84+
8285
</LinearLayout>
83-
</LinearLayout>
86+
</FrameLayout>

‎app/src/main/res/layout/list_item_forecast_today.xml‎

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<?xml version="1.0" encoding="utf-8"?>
12
<!--
23
Copyright (C) 2015 The Android Open Source Project
34
@@ -14,73 +15,74 @@
1415
limitations under the License.
1516
-->
1617
<!-- Layout for weather forecast list item for today -->
17-
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
18+
<FrameLayout
19+
xmlns:android="http://schemas.android.com/apk/res/android"
20+
xmlns:app="http://schemas.android.com/apk/res-auto"
21+
xmlns:tools="http://schemas.android.com/tools"
1822
android:layout_width="match_parent"
1923
android:layout_height="wrap_content"
20-
android:gravity="center_vertical"
21-
android:minHeight="?android:attr/listPreferredItemHeight"
22-
android:orientation="horizontal"
23-
android:background="@drawable/today_touch_selector">
24-
25-
<LinearLayout
24+
android:background="@drawable/touch_selector_white"
25+
android:elevation="4dp"
26+
>
27+
<android.support.v7.widget.GridLayout
28+
android:layout_width="match_parent"
2629
android:layout_height="wrap_content"
27-
android:layout_width="0dp"
28-
android:layout_weight="7"
29-
android:layout_marginTop="16dp"
30-
android:layout_marginBottom="16dp"
31-
android:layout_marginLeft="60dp"
32-
android:layout_marginStart="60dp"
33-
android:orientation="vertical">
30+
app:columnCount="2">
3431

3532
<TextView
3633
android:id="@+id/list_item_date_textview"
37-
android:layout_width="match_parent"
38-
android:layout_height="wrap_content"
39-
android:textAppearance="?android:textAppearanceLarge"
40-
android:fontFamily="sans-serif-condensed"
41-
android:textColor="@color/white" />
34+
android:layout_marginBottom="@dimen/abc_list_item_padding_horizontal_material"
35+
android:layout_marginTop="@dimen/abc_list_item_padding_horizontal_material"
36+
android:fontFamily="sans-serif"
37+
android:gravity="center_horizontal"
38+
android:textAppearance="@style/TextAppearance.AppCompat.Title"
39+
android:textColor="@color/secondary_text"
40+
app:layout_columnSpan="2"
41+
app:layout_columnWeight="1"
42+
app:layout_gravity="fill_horizontal"
43+
tools:text="Today, April 03" />
44+
45+
<ImageView
46+
android:id="@+id/list_item_icon"
47+
android:layout_width="0dp"
48+
android:adjustViewBounds="true"
49+
android:maxHeight="@dimen/today_icon"
50+
android:maxWidth="@dimen/today_icon"
51+
app:layout_columnWeight="1"
52+
app:layout_gravity="fill_horizontal"
53+
tools:src="@drawable/art_clouds" />
4254

4355
<TextView
4456
android:id="@+id/list_item_high_textview"
45-
android:layout_width="match_parent"
46-
android:layout_height="wrap_content"
47-
android:textSize="72sp"
57+
android:layout_width="0dp"
4858
android:fontFamily="sans-serif-light"
49-
android:textColor="@color/white" />
59+
android:gravity="center_horizontal"
60+
android:textColor="@color/primary_text"
61+
android:textSize="72sp"
62+
app:layout_columnWeight="1"
63+
app:layout_gravity="fill_horizontal"
64+
tools:text="19" />
65+
66+
<TextView
67+
android:id="@+id/list_item_forecast_textview"
68+
android:layout_width="0dp"
69+
android:fontFamily="sans-serif"
70+
android:gravity="center_horizontal"
71+
android:textAppearance="@style/TextAppearance.AppCompat.Title"
72+
android:textColor="@color/secondary_text"
73+
app:layout_columnWeight="1"
74+
tools:text="Rainy" />
5075

5176
<TextView
5277
android:id="@+id/list_item_low_textview"
53-
android:layout_width="match_parent"
54-
android:layout_height="wrap_content"
55-
android:textColor="@color/white"
78+
android:layout_width="0dp"
79+
android:layout_marginBottom="@dimen/abc_list_item_padding_horizontal_material"
80+
android:fontFamily="sans-serif-light"
81+
android:gravity="center_horizontal"
82+
android:textColor="@color/secondary_text"
5683
android:textSize="36sp"
57-
android:layout_marginLeft="8dp"
58-
android:layout_marginStart="8dp"/>
59-
</LinearLayout>
60-
61-
<LinearLayout
62-
android:layout_height="wrap_content"
63-
android:layout_width="0dp"
64-
android:layout_weight="5"
65-
android:layout_marginRight="16dp"
66-
android:layout_marginEnd="16dp"
67-
android:orientation="vertical"
68-
android:gravity="center_horizontal|bottom">
69-
70-
<ImageView
71-
android:id="@+id/list_item_icon"
72-
android:layout_width="wrap_content"
73-
android:layout_height="wrap_content"
74-
android:layout_gravity="center_horizontal"
75-
android:adjustViewBounds="true"/>
84+
app:layout_columnWeight="1"
85+
tools:text="10" />
7686

77-
<TextView
78-
android:id="@+id/list_item_forecast_textview"
79-
android:layout_width="wrap_content"
80-
android:layout_height="wrap_content"
81-
android:fontFamily="sans-serif-condensed"
82-
android:layout_gravity="center_horizontal"
83-
android:textAppearance="?android:textAppearanceLarge"
84-
android:textColor="@color/white"/>
85-
</LinearLayout>
86-
</LinearLayout>
87+
</android.support.v7.widget.GridLayout>
88+
</FrameLayout>

0 commit comments

Comments
 (0)