improve character setup design

This commit is contained in:
Phillip Thelen 2017-03-30 14:02:37 +02:00
parent c923e93d35
commit a9edc575fd
21 changed files with 172 additions and 94 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

View file

@ -20,10 +20,10 @@
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:background="@color/brand_300"
android:paddingLeft="21dp"
android:paddingRight="21dp"
android:paddingLeft="@dimen/content_inset"
android:paddingRight="@dimen/content_inset"
android:gravity="center_vertical"
android:elevation="4dp">
android:elevation="8dp">
<Button
android:layout_width="wrap_content"

View file

@ -4,14 +4,16 @@
android:orientation="vertical"
android:layout_width="70dp"
android:layout_height="70dp"
android:gravity="center_horizontal"
tools:background="@color/brand_200">
android:gravity="center"
tools:background="@color/brand_200">
<ImageView
android:id="@+id/icon_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:src="@drawable/icon_body"
android:layout_gravity="center" />
android:layout_gravity="center"/>
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
@ -20,5 +22,6 @@
android:textAllCaps="true"
android:layout_marginTop="8dp"
android:textColor="@color/white_50_alpha"
android:layout_gravity="center"/>
android:layout_gravity="center"
android:ellipsize="marquee"/>
</LinearLayout>

View file

@ -7,7 +7,7 @@
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="130dp"
android:layout_height="@dimen/customization_drawer_subcategory_height"
android:background="@color/brand_100">
<android.support.design.widget.TabLayout
android:id="@+id/subcategory_tabs"
@ -29,40 +29,49 @@
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="@color/brand_200"
android:orientation="horizontal"
android:gravity="center"
android:elevation="2dp">
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/body_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_body"
app:categoryTitle="@string/avatar_body"/>
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/skin_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_skin"
app:categoryTitle="@string/avatar_skin"/>
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/hair_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_hair"
app:categoryTitle="@string/avatar_hair"/>
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/extras_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_extras"
app:categoryTitle="@string/avatar_extras"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/customization_drawer_category_height"
android:background="@color/brand_200"
android:orientation="horizontal"
android:gravity="center"
android:elevation="4dp">
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/body_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_body"
app:categoryTitle="@string/avatar_body"
android:gravity="center"/>
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/skin_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_skin"
app:categoryTitle="@string/avatar_skin"
android:gravity="center"/>
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/hair_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_hair"
app:categoryTitle="@string/avatar_hair"
android:gravity="center"/>
<com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView
android:id="@+id/extras_button"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
app:iconDrawable="@drawable/icon_extras"
app:categoryTitle="@string/avatar_extras"
android:gravity="center"/>
</LinearLayout>
</LinearLayout>

View file

@ -1,29 +1,39 @@
<?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"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/light_gray_bg"
android:gravity="center_horizontal">
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/light_gray_bg"
android:gravity="center_horizontal">
<Button
android:id="@+id/randomize_button"
android:layout_width="wrap_content"
android:text="@string/randomize"
style="@style/DiamondButton"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"/>
<Button
android:id="@+id/randomize_button"
android:layout_width="wrap_content"
android:text="@string/randomize"
style="@style/DiamondButton"
android:layout_marginTop="@dimen/setup_vertical_spacing"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="@+id/avatar_background"
android:layout_marginTop="@dimen/setup_vertical_spacing"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/randomize_button"
android:src="@drawable/creator_purple_bg"
android:layout_centerHorizontal="true" />
<com.habitrpg.android.habitica.ui.AvatarView
android:id="@+id/avatarView"
android:layout_width="@dimen/avatar_small_width"
android:layout_height="@dimen/avatar_small_height"
app:showBackground="false"
app:showMount="false"
app:showPet="false"
android:layout_centerHorizontal="true"
android:layout_alignTop="@id/avatar_background"
android:layout_marginTop="6dp"/>
<com.habitrpg.android.habitica.ui.AvatarView
android:id="@+id/avatarView"
android:layout_width="224dp"
android:layout_height="108dp"
app:showBackground="true"
app:showMount="false"
app:showPet="false"
android:layout_centerHorizontal="true"
android:layout_below="@id/randomize_button"/>
<com.habitrpg.android.habitica.ui.views.setup.AvatarCustomizationDrawer
android:id="@+id/customization_drawer"
@ -32,15 +42,15 @@
android:layout_alignParentBottom="true"
/>
<com.habitrpg.android.habitica.ui.SpeechBubbleView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:namePlate="Justin"
app:text="@string/avatar_setup_description"
app:npcDrawable="@drawable/npc_justin_only"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"
android:layout_above="@id/customization_drawer"
android:layout_marginBottom="12dp"/>
<com.habitrpg.android.habitica.ui.SpeechBubbleView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:namePlate="Justin"
app:text="@string/avatar_setup_description"
app:npcDrawable="@drawable/npc_justin_only"
android:layout_marginLeft="@dimen/content_inset"
android:layout_marginRight="@dimen/content_inset"
android:layout_above="@id/customization_drawer"
android:layout_marginBottom="12dp"/>
</RelativeLayout>

View file

@ -58,6 +58,6 @@
android:layout_height="wrap_content"
app:namePlate="Justin"
app:text="@string/welcome_text"
android:layout_marginLeft="24dp"
android:layout_marginRight="24dp"/>
android:layout_marginLeft="@dimen/content_inset"
android:layout_marginRight="@dimen/content_inset"/>
</LinearLayout>

View file

@ -4,8 +4,8 @@
android:layout_height="match_parent"
xmlns:tools="http://schemas.android.com/tools"
android:gravity="center_vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingLeft="12dp"
android:paddingRight="12dp"
tools:background="@color/brand_200">
<ImageView
android:id="@+id/imageView"

View file

@ -15,8 +15,8 @@
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:paddingLeft="21dp"
android:paddingTop="16dp"

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="setup_vertical_spacing">8dp</dimen>
<dimen name="customization_drawer_subcategory_height">120dp</dimen>
<dimen name="customization_drawer_category_height">80dp</dimen>
</resources>

View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="setup_vertical_spacing">20dp</dimen>
<dimen name="customization_drawer_subcategory_height">130dp</dimen>
<dimen name="customization_drawer_category_height">100dp</dimen>
</resources>

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="content_inset">6dp</dimen>
</resources>

View file

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="content_inset">21dp</dimen>
</resources>

View file

@ -320,7 +320,7 @@
<item name="android:padding">16dp</item>
</style>
<style name="DiamondButton">
<style name="DiamondButton" parent="@style/Widget.AppCompat.Button.Borderless">
<item name="android:layout_height">36dp</item>
<item name="android:background">@drawable/login_button</item>
<item name="android:paddingLeft">36dp</item>

View file

@ -114,8 +114,8 @@ public class SetupCustomizationRepositoryImpl implements SetupCustomizationRepos
private List<SetupCustomization> getHairBases() {
return Arrays.asList(
SetupCustomization.createHairPonytail("0", R.drawable.creator_blank_face),
SetupCustomization.createHairPonytail("1", R.drawable.creator_hair_bangs_1_red),
SetupCustomization.createHairPonytail("2", R.drawable.creator_hair_bangs_2_red)
SetupCustomization.createHairPonytail("1", R.drawable.creator_hair_base_1_red),
SetupCustomization.createHairPonytail("3", R.drawable.creator_hair_base_3_red)
);
}

View file

@ -103,7 +103,7 @@ public class CustomizationSetupAdapter extends RecyclerView.Adapter<RecyclerView
case "flower":
return Integer.parseInt(customization.key) == prefs.getHair().getFlower();
case "wheelchair":
return customization.key.equals(prefs.getChair());
return ("chair_"+customization.key).equals(prefs.getChair()) || customization.key.equals(prefs.getChair()) || (customization.key.equals("none") && prefs.getChair() == null);
}
}
}

View file

@ -4,22 +4,20 @@ import com.habitrpg.android.habitica.APIHelper;
import com.habitrpg.android.habitica.R;
import com.habitrpg.android.habitica.components.AppComponent;
import com.habitrpg.android.habitica.data.SetupCustomizationRepository;
import com.habitrpg.android.habitica.events.commands.UpdateUserCommand;
import com.habitrpg.android.habitica.ui.AvatarView;
import com.habitrpg.android.habitica.ui.activities.SetupActivity;
import com.habitrpg.android.habitica.ui.adapter.setup.CustomizationSetupAdapter;
import com.habitrpg.android.habitica.ui.fragments.BaseFragment;
import com.habitrpg.android.habitica.ui.helpers.MarginDecoration;
import com.habitrpg.android.habitica.ui.views.setup.AvatarCategoryView;
import com.magicmicky.habitrpgwrapper.lib.models.Customization;
import com.magicmicky.habitrpgwrapper.lib.models.HabitRPGUser;
import com.raizlabs.android.dbflow.sql.builder.Condition;
import com.raizlabs.android.dbflow.sql.language.Select;
import com.raizlabs.android.dbflow.sql.language.Where;
import com.magicmicky.habitrpgwrapper.lib.models.SetupCustomization;
import org.greenrobot.eventbus.EventBus;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v7.widget.GridLayoutManager;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
@ -27,7 +25,11 @@ import android.view.View;
import android.view.ViewGroup;
import java.util.Arrays;
import java.util.Collections;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import javax.inject.Inject;
@ -66,6 +68,7 @@ public class AvatarSetupFragment extends BaseFragment {
private AvatarCategoryView activeButton;
private String activeCategory;
private String activeSubCategory;
private Random random;
@Nullable
@Override
@ -112,6 +115,8 @@ public class AvatarSetupFragment extends BaseFragment {
this.selectedBodyCategory();
this.random = new Random();
if (this.user != null) {
this.updateAvatar();
}
@ -163,7 +168,7 @@ public class AvatarSetupFragment extends BaseFragment {
activateButton(skinButton);
this.activeCategory = "skin";
this.subCategoryTabs.removeAllTabs();
this.subcategories = Arrays.asList("color");
this.subcategories = Collections.singletonList("color");
this.subCategoryTabs.addTab(subCategoryTabs.newTab().setText(R.string.avatar_skin_color));
loadCustomizations();
}
@ -192,6 +197,38 @@ public class AvatarSetupFragment extends BaseFragment {
loadCustomizations();
}
@OnClick(R.id.randomize_button)
protected void randomizeCharacter() {
if (user == null) {
return;
}
UpdateUserCommand command = new UpdateUserCommand();
Map<String, Object> updateData = new HashMap<>();
updateData.put("preferences.size", chooseRandomKey(customizationRepository.getCustomizations("body", "size", user), false));
updateData.put("preferences.shirt", chooseRandomKey(customizationRepository.getCustomizations("body", "shirt", user), false));
updateData.put("preferences.skin", chooseRandomKey(customizationRepository.getCustomizations("skin", "color", user), false));
updateData.put("preferences.hair.color", chooseRandomKey(customizationRepository.getCustomizations("hair", "color", user), false));
updateData.put("preferences.hair.base", chooseRandomKey(customizationRepository.getCustomizations("hair", "ponytail", user), false));
updateData.put("preferences.hair.bangs", chooseRandomKey(customizationRepository.getCustomizations("hair", "bangs", user), false));
updateData.put("preferences.hair.flower", chooseRandomKey(customizationRepository.getCustomizations("extras", "flower", user), true));
updateData.put("preferences.chair", chooseRandomKey(customizationRepository.getCustomizations("extras", "wheelchair", user), true));
command.updateData = updateData;
EventBus.getDefault().post(command);
}
private String chooseRandomKey(List<SetupCustomization> customizations, boolean weighFirstOption) {
if (customizations.size() == 0) {
return null;
}
if (weighFirstOption) {
if (random.nextInt(10) > 3) {
return customizations.get(0).key;
}
}
return customizations.get(random.nextInt(customizations.size())).key;
}
private void activateButton(AvatarCategoryView button) {
if (this.activeButton != null) {
this.activeButton.setActive(false);

View file

@ -5,7 +5,6 @@ import com.habitrpg.android.habitica.R;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.drawable.Drawable;
import android.support.annotation.Nullable;