subscription layout changes

This commit is contained in:
Phillip Thelen 2017-02-03 13:21:42 +01:00
parent ce897ea916
commit 27f3e5645b
10 changed files with 235 additions and 112 deletions

View file

@ -2,7 +2,7 @@
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
package="com.habitrpg.android.habitica"
android:versionCode="153"
android:versionCode="155"
android:versionName="0.0.37"
android:screenOrientation="portrait"
android:installLocation="auto" >

View file

@ -150,6 +150,7 @@ android {
defaultConfig {
applicationId "com.habitrpg.android.habitica"
vectorDrawables.useSupportLibrary = true
}
lintOptions {

View file

@ -1,4 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
<path android:fillColor="#000000" android:pathData="M7.41,7.84L12,12.42l4.59,-4.58L18,9.25l-6,6 -6,-6z"/>
<path android:fillColor="#7e000000" android:pathData="M7.41,7.84L12,12.42l4.59,-4.58L18,9.25l-6,6 -6,-6z"/>
</vector>

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
<path android:fillColor="#7e000000" android:pathData="M7.41,15.41L12,10.83l4.59,4.58L18,14l-6,-6 -6,6z"/>
</vector>

View file

@ -174,6 +174,6 @@
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_keyboard_arrow_right_gray_24dp"/>
app:srcCompat="@drawable/ic_keyboard_arrow_right_gray_24dp"/>
</LinearLayout>
</LinearLayout>

View file

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
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"
xmlns:tools="http://schemas.android.com/tools"
@ -14,18 +15,134 @@
android:layout_height="wrap_content"
android:padding="20dp">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="20dp"
android:text="@string/subscribe.title"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:textColor="@color/best_10"
android:drawableTop="@drawable/ic_heart_large"
android:textSize="14sp"
android:lineSpacingExtra="4dp" />
<TextView
android:id="@+id/subscribeBenefitsTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/subscribe_prompt"
android:gravity="center"
android:textStyle="normal|bold"
android:textColor="@color/brand_100"
android:textSize="16sp"
android:lineSpacingExtra="4dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="26dp"
android:layout_marginRight="26dp"/>
<FrameLayout
android:id="@+id/subscribe.listitem1.box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox">
<TextView
android:text="@string/subscribe.listitem1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/SubscriptionListTitle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
android:id="@+id/subscribe.listitem1.expand"
android:layout_gravity="right"/>
</FrameLayout>
<TextView
android:id="@+id/subscribe.listitem1.description"
android:text="@string/subscribe.listitem1.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/SubscriptionListDescription"
android:visibility="gone"/>
<FrameLayout
android:id="@+id/subscribe.listitem2.box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox">
<TextView
android:text="@string/subscribe.listitem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/SubscriptionListTitle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
android:id="@+id/subscribe.listitem2.expand"
android:layout_gravity="right"/>
</FrameLayout>
<TextView
android:id="@+id/subscribe.listitem2.description"
android:text="@string/subscribe.listitem2.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/SubscriptionListDescription"
android:visibility="gone" />
<FrameLayout
android:id="@+id/subscribe.listitem3.box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox">
<TextView
android:text="@string/subscribe.listitem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/SubscriptionListTitle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
android:id="@+id/subscribe.listitem3.expand"
android:layout_gravity="right"/>
</FrameLayout>
<TextView
android:id="@+id/subscribe.listitem3.description"
android:text="@string/subscribe.listitem3.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/SubscriptionListDescription"
android:visibility="gone" />
<FrameLayout
android:id="@+id/subscribe.listitem4.box"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox"
android:layout_marginBottom="8dp">
<TextView
android:text="@string/subscribe.listitem4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/SubscriptionListTitle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/ic_keyboard_arrow_down_black_24dp"
android:id="@+id/subscribe.listitem4.expand"
android:layout_gravity="right"/>
</FrameLayout>
<TextView
android:id="@+id/subscribe.listitem4.description"
android:text="@string/subscribe.listitem4.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/SubscriptionListDescription"
android:visibility="gone" />
<ProgressBar
style="?android:attr/progressBarStyle"
@ -38,6 +155,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginTop="24dp"
>
<com.habitrpg.android.habitica.ui.SubscriptionOptionView
@ -46,6 +164,7 @@
android:layout_height="wrap_content"
app:recurringText="@string/month"
app:gemCapText="@string/subscribe1month.gemcap"/>
<com.habitrpg.android.habitica.ui.SubscriptionOptionView
android:id="@+id/subscription3month"
android:layout_width="match_parent"
@ -84,96 +203,22 @@
<com.habitrpg.android.habitica.ui.SubscriptionDetailsView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/subscriptionDetails"/>
android:id="@+id/subscriptionDetails"
android:layout_marginTop="24dp"/>
<TextView
android:id="@+id/subscribeBenefitsTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/subscribe_prompt"
android:gravity="center"
android:textStyle="normal|bold"
android:textColor="@color/brand_100"
android:textSize="16sp"
android:lineSpacingExtra="4dp"
android:layout_marginTop="23dp"
android:layout_marginBottom="12dp"
android:layout_marginLeft="26dp"
android:layout_marginRight="26dp"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingBottom="20dp"
android:text="@string/subscribe.title"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:textColor="@color/best_10"
android:drawableTop="@drawable/ic_heart_large"
android:textSize="14sp"
android:lineSpacingExtra="4dp"
android:layout_marginTop="16dp"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp">
<TextView
android:text="@string/subscribe.listitem1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItem"
/>
</FrameLayout>
<TextView
android:text="@string/subscribe.listitem1.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItemDescription" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp">
<TextView
android:text="@string/subscribe.listitem2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItem"
/>
</FrameLayout>
<TextView
android:text="@string/subscribe.listitem2.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItemDescription" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox"
android:layout_marginTop="16dp"
android:layout_marginBottom="8dp">
<TextView
android:text="@string/subscribe.listitem3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItem"
/>
</FrameLayout>
<TextView
android:text="@string/subscribe.listitem3.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItemDescription" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/subscriptionBox"
android:layout_marginBottom="8dp">
<TextView
android:text="@string/subscribe.listitem4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItem"
/>
</FrameLayout>
<TextView
android:text="@string/subscribe.listitem4.description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/GemPurchaseListItemDescription" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

View file

@ -110,5 +110,5 @@
<color name="header_class_name">#CCBEED</color>
<color name="gem_icon_color">#24cc8f</color>
<color name="subscription_description_text">#b1000000</color>
<color name="pill_gray">#deddde</color>
<color name="pill_gray">#efefef</color>
</resources>

View file

@ -457,10 +457,10 @@ To start, which parts of your life do you want to improve?</string>
<string name="subscriptions">Subscriptions</string>
<string name="subscription_duration" >Recurring every %s</string>
<string name="subscribe">Subscribe</string>
<string name="subscribe.listitem1.description">Alexander the Merchant will sell you Gems at a cost of 20 gold per gem. His monthly shipments are initially capped at 25 Gems per month, but this cap increases by 5 Gems for every three months of consecutive subscription, up to a maximum of 50 Gems per month!</string>
<string name="subscribe.listitem2.description">Makes completed To-Dos and task history available for longer.</string>
<string name="subscribe.listitem3.description">Complete your stable faster!</string>
<string name="subscribe.listitem4.description">Each month you will receive a unique cosmetic item for your avatar! Plus, for every three months of consecutive subscription, the Mysterious Time Travelers will grant you access to historic (and futuristic!) cosmetic items.</string>
<string name="subscribe.listitem1.description">Alexander the Merchant will now sell you gems for 20 gold each!\n\nHis monthly shipments are initially capped at 25 Gems per month, but can increase based on your subscription length.\n\nThe cap increases by 5 Gems for every three months of consecutive subscription, up to a maximum of 50 Gems per month!</string>
<string name="subscribe.listitem2.description">Each month you will receive a unique cosmetic item for your avatar!\n\nPlus, for every three months of consecutive subscription, the Mysterious Time Travelers will grant you access to historic (and futuristic!) cosmetic items.</string>
<string name="subscribe.listitem3.description">Makes completed To-Dos and task history available for longer.</string>
<string name="subscribe.listitem4.description">Double drop caps will let you receive more items from your completed tasks every day, helping you complete your stable faster!</string>
<string name="subscribe1month.gemcap">Gem cap starts at 25</string>
<string name="subscribe3month.gemcap">Gem cap raised to 30</string>
<string name="subscribe6month.gemcap">Gem cap raised to 35</string>
@ -470,7 +470,7 @@ To start, which parts of your life do you want to improve?</string>
<string name="subscription">Subscription</string>
<string name="active">Active</string>
<string name="cancel_subscription">Cancel Subscription</string>
<string name="cancel_subscription_google.description">No longer want to subscribe? You can find the option to unsubscribe in the "My Apps" section of the Google Play Store.</string>
<string name="cancel_subscription_google.description">No longer want to subscribe? You can find the option to unsubscribe in the “My Apps” section of the Google Play Store.</string>
<string name="cancel_subscription_notgoogle.description">No longer want to subscribe? Due to your payment method, you can only unsubscribe through the website. Click the button below, to open the site in your browser!</string>
<string name="visit_habitica_website">Visit Habitica Website</string>
<string name="current_bonuses">Current Bonuses</string>

View file

@ -192,6 +192,12 @@
<item name="android:drawablePadding">4dp</item>
</style>
<style name="SubscriptionListTitle" parent="GemPurchaseListItem">
<item name="android:layout_gravity">left|center_vertical</item>
<item name="android:fontFamily" tools:targetApi="jelly_bean">@string/font_family_medium</item>
<item name="android:textSize">14sp</item>
</style>
<style name="FragmentDialogTitle">
<item name="android:textSize">@dimen/card_medium_text</item>
<item name="android:textStyle">bold</item>
@ -233,8 +239,11 @@
<style name="subscriptionBox">
<item name="android:background">@color/habit_inactive_gray</item>
<item name="android:padding">12dp</item>
<item name="android:layout_marginTop">16dp</item>
<item name="android:paddingTop">8dp</item>
<item name="android:paddingBottom">8dp</item>
<item name="android:paddingLeft">12dp</item>
<item name="android:paddingRight">12dp</item>
<item name="android:layout_marginBottom">8dp</item>
</style>
<style name="subscriptionBoxText">
@ -253,6 +262,18 @@
<item name="android:textColor">@color/worse_50</item>
</style>
<style name="SubscriptionListDescription" parent="GemPurchaseListItemDescription">
<item name="android:layout_marginBottom">24dp</item>
<item name="android:fontFamily" tools:targetApi="jelly_bean">
@string/font_family_condensed
</item>
<item name="android:textSize">14sp</item>
<item name="android:letterSpacing" tools:targetApi="lollipop">0.035</item>
<item name="android:lineSpacingExtra">2.0dp</item>
<item name="android:layout_marginLeft">16dp</item>
<item name="android:layout_marginRight">16dp</item>
</style>
<style name="Button">
<item name="android:paddingLeft">@dimen/button_padding</item>
<item name="android:paddingRight">@dimen/button_padding</item>

View file

@ -27,6 +27,8 @@ import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
@ -45,6 +47,33 @@ public class SubscriptionFragment extends BaseFragment implements GemPurchaseAct
@Inject
APIHelper apiHelper;
@BindView(R.id.subscribe_listitem1_box)
View subscribeListitem1Box;
@BindView(R.id.subscribe_listitem2_box)
View subscribeListitem2Box;
@BindView(R.id.subscribe_listitem3_box)
View subscribeListitem3Box;
@BindView(R.id.subscribe_listitem4_box)
View subscribeListitem4Box;
@BindView(R.id.subscribe_listitem1_expand)
ImageView subscribeListitem1Button;
@BindView(R.id.subscribe_listitem2_expand)
ImageView subscribeListitem2Button;
@BindView(R.id.subscribe_listitem3_expand)
ImageView subscribeListitem3Button;
@BindView(R.id.subscribe_listitem4_expand)
ImageView subscribeListitem4Button;
@BindView(R.id.subscribe_listitem1_description)
TextView subscribeListItem1Description;
@BindView(R.id.subscribe_listitem2_description)
TextView subscribeListItem2Description;
@BindView(R.id.subscribe_listitem3_description)
TextView subscribeListItem3Description;
@BindView(R.id.subscribe_listitem4_description)
TextView subscribeListItem4Description;
@BindView(R.id.loadingIndicator)
ProgressBar loadingIndicator;
@ -114,6 +143,29 @@ public class SubscriptionFragment extends BaseFragment implements GemPurchaseAct
this.subscription3MonthView.setOnPurchaseClickListener(view1 -> selectSubscription(PurchaseTypes.Subscription3Month));
this.subscription6MonthView.setOnPurchaseClickListener(view1 -> selectSubscription(PurchaseTypes.Subscription6Month));
this.subscription12MonthView.setOnPurchaseClickListener(view1 -> selectSubscription(PurchaseTypes.Subscription12Month));
this.subscribeListitem1Box.setOnClickListener(view1 -> {
toggleDescriptionView(this.subscribeListitem1Button, this.subscribeListItem1Description);
});
this.subscribeListitem2Box.setOnClickListener(view1 -> {
toggleDescriptionView(this.subscribeListitem2Button, this.subscribeListItem2Description);
});
this.subscribeListitem3Box.setOnClickListener(view1 -> {
toggleDescriptionView(this.subscribeListitem3Button, this.subscribeListItem3Description);
});
this.subscribeListitem4Box.setOnClickListener(view1 -> {
toggleDescriptionView(this.subscribeListitem4Button, this.subscribeListItem4Description);
});
}
private void toggleDescriptionView(ImageView button, TextView descriptionView) {
if (descriptionView.getVisibility() == View.VISIBLE) {
descriptionView.setVisibility(View.GONE);
button.setImageResource(R.drawable.ic_keyboard_arrow_down_black_24dp);
} else {
descriptionView.setVisibility(View.VISIBLE);
button.setImageResource(R.drawable.ic_keyboard_arrow_up_black_24dp);
}
}
@Override