Added purchase dialog UI

This commit is contained in:
Alexey Kulish 2018-04-19 20:43:51 +03:00
parent 128d8a749f
commit 1d65fd857b
15 changed files with 479 additions and 0 deletions

View file

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<nine-patch android:src="@drawable/bg_card_shadow_cr3dp"/>
</item>
<item>
<shape>
<stroke android:color="?attr/wikivoyage_active_color" android:width="1dp"/>
<solid android:color="?attr/wikivoyage_card_bg_color"/>
<corners android:radius="3dp"/>
</shape>
</item>
</layer-list>

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<nine-patch android:src="@drawable/bg_card_shadow_cr3dp"/>
</item>
<item>
<shape>
<solid android:color="?attr/wikivoyage_card_bg_color"/>
<corners android:radius="3dp"/>
</shape>
</item>
</layer-list>

View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<nine-patch android:src="@drawable/bg_card_shadow_cr3dp"/>
</item>
<item>
<shape>
<solid android:color="?attr/wikivoyage_active_color"/>
<corners android:radius="3dp"/>
</shape>
</item>
</layer-list>

View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/list_header_padding"
android:layout_marginLeft="@dimen/list_content_padding"
android:layout_marginRight="@dimen/list_content_padding"
android:background="@drawable/dialog_active_card_bg"
android:orientation="vertical">
<include layout="@layout/purchase_dialog_card_header"/>
<View
android:id="@+id/header_div"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:background="?attr/wikivoyage_card_divider_color"/>
<LinearLayout
android:id="@+id/rows_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/card_descr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/list_content_padding_large"
android:layout_marginRight="@dimen/list_content_padding_large"
android:layout_marginTop="@dimen/list_header_padding"
android:gravity="center"
android:text="@string/osm_live_payment_desc"
android:textColor="?attr/card_description_text_color"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_regular"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/list_content_padding">
<include layout="@layout/purchase_dialog_card_button"/>
</FrameLayout>
</LinearLayout>

View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="@dimen/card_row_min_height"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/list_content_padding"
android:layout_marginRight="@dimen/dialog_content_margin"
android:scaleType="center"
android:src="@drawable/ic_action_plus"
android:tint="?attr/wikivoyage_active_color"/>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="@dimen/list_content_padding"
android:layout_marginRight="@dimen/list_content_padding"
android:paddingBottom="@dimen/list_header_padding"
android:paddingTop="@dimen/list_header_padding"
android:text="@string/shared_string_wikivoyage"
android:textColor="?attr/dialog_title_color"
android:textSize="@dimen/default_list_text_size"
osmand:typeface="@string/font_roboto_regular"/>
</LinearLayout>
<View
android:id="@+id/div"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="@dimen/card_title_row_min_height"
android:layout_marginRight="1dp"
android:background="?attr/wikivoyage_card_divider_color"/>
</LinearLayout>

View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/list_header_padding"
android:layout_marginLeft="@dimen/list_content_padding"
android:layout_marginRight="@dimen/list_content_padding"
android:background="@drawable/dialog_card_bg"
android:orientation="vertical">
<include layout="@layout/purchase_dialog_card_header"/>
<View
android:id="@+id/header_div"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="?attr/wikivoyage_card_divider_color"/>
<LinearLayout
android:id="@+id/rows_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
<TextView
android:id="@+id/card_descr"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/list_content_padding_large"
android:layout_marginRight="@dimen/list_content_padding_large"
android:layout_marginTop="@dimen/list_header_padding"
android:gravity="center"
android:text="@string/osm_live_payment_desc"
android:textColor="?attr/card_description_text_color"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_regular"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/list_content_padding">
<include layout="@layout/purchase_dialog_card_button"/>
</FrameLayout>
</LinearLayout>

View file

@ -0,0 +1,42 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/wikivoyage_active_card_bg">
<LinearLayout
android:id="@+id/card_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:minHeight="@dimen/card_button_min_size"
android:orientation="vertical"
android:paddingBottom="@dimen/list_header_padding"
android:paddingLeft="@dimen/list_content_padding"
android:paddingRight="@dimen/list_content_padding"
android:paddingTop="@dimen/list_header_padding">
<net.osmand.plus.widgets.TextViewEx
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:letterSpacing="@dimen/text_button_letter_spacing"
android:text="@string/osm_live_subscribe_btn"
android:textColor="@color/color_white"
android:textSize="@dimen/text_button_text_size"
osmand:typeface="@string/font_roboto_medium"/>
<net.osmand.plus.widgets.TextViewEx
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:letterSpacing="@dimen/text_button_letter_spacing"
android:text="@string/osm_live_month_cost_desc"
android:textColor="@color/white_50_transparent"
android:textSize="@dimen/text_button_text_size"
osmand:typeface="@string/font_roboto_regular"/>
</LinearLayout>
</FrameLayout>

View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="@dimen/card_title_row_min_height"
android:orientation="horizontal"
android:paddingBottom="@dimen/list_header_padding"
android:paddingTop="@dimen/list_header_padding">
<android.support.v7.widget.AppCompatImageView
android:id="@+id/header_img"
android:layout_width="@dimen/card_title_row_min_height"
android:layout_height="match_parent"
android:scaleType="center"
android:src="@drawable/img_logo_38dp_osmand"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/list_content_padding"
android:orientation="vertical">
<TextView
android:id="@+id/header_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/osm_live"
android:textColor="?attr/wikivoyage_active_color"
android:textSize="@dimen/map_button_text_size"
android:textStyle="bold"/>
<TextView
android:id="@+id/header_descr"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="@string/osm_live_subscription"
android:textColor="@color/dialog_text_description_color"
android:textSize="@dimen/default_sub_text_size"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>

View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="@+id/row"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="@dimen/card_row_min_height"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:id="@+id/img"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="@dimen/list_content_padding"
android:layout_marginRight="@dimen/dialog_content_margin"
android:scaleType="center"
android:src="@drawable/ic_action_plus"
android:tint="?attr/wikivoyage_active_color"/>
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginEnd="@dimen/list_content_padding"
android:layout_marginRight="@dimen/list_content_padding"
android:paddingBottom="@dimen/list_header_padding"
android:paddingTop="@dimen/list_header_padding"
android:text="@string/shared_string_wikivoyage"
android:textColor="?attr/dialog_title_color"
android:textSize="@dimen/default_list_text_size"
osmand:typeface="@string/font_roboto_regular"/>
</LinearLayout>
<View
android:id="@+id/div"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="@dimen/card_title_row_min_height"
android:layout_marginStart="@dimen/card_title_row_min_height"
android:background="?attr/wikivoyage_card_divider_color"/>
</LinearLayout>

View file

@ -0,0 +1,116 @@
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="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="?attr/wikivoyage_bg_color"
android:clickable="true"
android:orientation="vertical">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/action_bar_height"
android:orientation="horizontal">
<android.support.v7.widget.AppCompatImageView
android:id="@+id/button_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackgroundBorderless"
android:padding="@dimen/list_content_padding"
android:src="@drawable/ic_arrow_back"
android:tint="@color/icon_color"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/title_padding"
android:layout_marginLeft="@dimen/list_content_padding_large"
android:layout_marginRight="@dimen/list_content_padding_large"
android:orientation="vertical">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/title_padding"
android:text="@string/purchase_dialog_title"
android:textColor="?attr/dialog_title_color"
android:textSize="@dimen/title_text_size"
osmand:typeface="@string/font_roboto_medium"/>
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/list_content_padding_large"
android:text="@string/purchase_dialog_travel_description"
android:textColor="?attr/dialog_description_color"
android:textSize="@dimen/default_list_text_size"
osmand:typeface="@string/font_roboto_regular"/>
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/subtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/purchase_dialog_subtitle"
android:textColor="?attr/dialog_description_color"
android:textSize="@dimen/default_list_text_size"
osmand:typeface="@string/font_roboto_medium"/>
</LinearLayout>
<LinearLayout
android:id="@+id/cards_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/list_content_padding"
android:layout_marginLeft="@dimen/list_content_padding"
android:layout_marginRight="@dimen/list_content_padding"
android:layout_marginTop="@dimen/list_header_padding"
android:background="@drawable/wikivoyage_search_card_bg">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/button_later"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:letterSpacing="@dimen/text_button_letter_spacing"
android:minHeight="@dimen/dialog_button_height"
android:paddingBottom="@dimen/list_header_padding"
android:paddingLeft="@dimen/list_content_padding"
android:paddingRight="@dimen/list_content_padding"
android:paddingTop="@dimen/list_header_padding"
android:text="@string/later"
android:textColor="?attr/wikivoyage_active_color"
android:textSize="@dimen/text_button_text_size"
osmand:typeface="@string/font_roboto_regular"/>
</FrameLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>

View file

@ -65,6 +65,10 @@
<attr name="primary_icon_color" format="color"/>
<attr name="light_icon_color" format="color"/>
<attr name="dialog_title_color" format="reference"/>
<attr name="dialog_description_color" format="reference"/>
<attr name="card_description_text_color" format="reference"/>
<attr name="wikivoyage_bg_color" format="reference"/>
<attr name="wikivoyage_card_bg_color" format="reference"/>
<attr name="wikivoyage_card_divider_color" format="reference"/>

View file

@ -1,6 +1,17 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="dialog_title_color_light">#212121</color>
<color name="dialog_title_color_dark">#cccccc</color>
<color name="dialog_description_color_light">#212121</color>
<color name="dialog_description_color_dark">#727272</color>
<color name="dialog_divider_light">#e6e6e6</color>
<color name="dialog_divider_dark">#2d3133</color>
<color name="dialog_text_description_color">#727272</color>
<color name="card_description_text_color_light">#b3b3b3</color>
<color name="card_description_text_color_dark">#4d4d4d</color>
<color name="ctx_menu_nearby_routes_text_color_dark">#bfbfbf</color>
<color name="map_toolbar_switch_track_color">#c5d2e6</color>
<color name="mapillary_color">#3db878</color>

View file

@ -1,5 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="action_bar_height">64dp</dimen>
<dimen name="list_content_padding_large">32dp</dimen>
<dimen name="title_padding">20dp</dimen>
<dimen name="title_text_size">28sp</dimen>
<dimen name="card_title_row_min_height">64dp</dimen>
<dimen name="card_row_min_height">48dp</dimen>
<dimen name="card_button_min_size">52dp</dimen>
<dimen name="widget_turn_lane_size">36dp</dimen>
<dimen name="widget_turn_lane_border">6dp</dimen>
<dimen name="widget_turn_lane_margin">2dp</dimen>

View file

@ -9,6 +9,9 @@
3. All your modified/created strings are in the top of the file (to make easier find what\'s translated).
PLEASE: Have a look at http://code.google.com/p/osmand/wiki/UIConsistency, it may really improve your and our work :-) Thx - Hardy
-->
<string name="purchase_dialog_title">Choose plan</string>
<string name="purchase_dialog_travel_description">To read Travel articles offline, you need to purchase one of the following items.</string>
<string name="purchase_dialog_subtitle">Choose suitable item:</string>
<string name="shared_string_dont">Don\'t</string>
<string name="shared_string_do">Do</string>
<string name="shared_string_only_with_wifi">Only with WiFi</string>

View file

@ -197,6 +197,10 @@
<item name="coordinate_input_edit_text_normal">@color/coordinate_input_edit_text_normal_light</item>
<item name="dialog_title_color">@color/dialog_title_color_light</item>
<item name="dialog_description_color">@color/dialog_description_color_light</item>
<item name="card_description_text_color">@color/card_description_text_color_light</item>
<item name="wikivoyage_bg_color">@color/wikivoyage_bg_light</item>
<item name="wikivoyage_card_bg_color">@color/wikivoyage_card_bg_light</item>
<item name="wikivoyage_card_divider_color">@color/wikivoyage_card_divider_light</item>
@ -391,6 +395,10 @@
<item name="coordinate_input_edit_text_normal">@color/coordinate_input_edit_text_normal_dark</item>
<item name="dialog_title_color">@color/dialog_title_color_dark</item>
<item name="dialog_description_color">@color/dialog_description_color_dark</item>
<item name="card_description_text_color">@color/card_description_text_color_dark</item>
<item name="wikivoyage_bg_color">@color/wikivoyage_bg_dark</item>
<item name="wikivoyage_card_bg_color">@color/wikivoyage_card_bg_dark</item>
<item name="wikivoyage_card_divider_color">@color/wikivoyage_card_divider_dark</item>