Skip to content
This repository has been archived by the owner on Jan 15, 2024. It is now read-only.

Commit

Permalink
Fixes #98: Redesigned AppDetails page (#131)
Browse files Browse the repository at this point in the history 
* Redesigned AppDetails page

* Updated support libraries
  • Loading branch information
@bobheadxi
bobheadxi authored Sep 1, 2017
1 parent 881cf03 commit 269d4fa
Show file tree
Hide file tree
Showing 6 changed files with 137 additions and 88 deletions.
2 changes: 1 addition & 1 deletion app/build.gradle
View file
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ tasks.withType(Test) {
systemProperty "robolectric.logging", "stdout"
}
ext {
supportLibVersion = '25.1.0'
supportLibVersion = '25.3.1'
}
//noinspection GroovyAssignabilityCheck
configurations.all {
Expand Down
35 changes: 28 additions & 7 deletions app/src/main/java/subreddit/android/appstore/screens/details/AppDetailsFragment.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.customtabs.CustomTabsIntent;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
Expand Down Expand Up @@ -54,16 +56,19 @@

public class AppDetailsFragment extends BasePresenterFragment<AppDetailsContract.Presenter, AppDetailsContract.View>
implements AppDetailsContract.View, ScreenshotsAdapter.ScreenshotClickedListener, View.OnClickListener, Toolbar.OnMenuItemClickListener {
@BindView(R.id.description) TextView description;
@BindView(R.id.tag_container) FlowLayout tagContainer;
@BindView(R.id.download_fab) FloatingActionButton downloadButton;
@BindView(R.id.details_toolbar) Toolbar toolbar;
@BindView(R.id.collapsingToolbar) CollapsingToolbarLayout collapsingToolbar;
@BindView(R.id.appbar) AppBarLayout appBar;

@BindView(R.id.icon_frame) View iconFrame;
@BindView(R.id.icon_image) ImageView iconImage;
@BindView(R.id.icon_placeholder) View iconPlaceholder;
@BindView(R.id.title_primary) TextView primaryTitle;
@BindView(R.id.title_secondary) TextView secondaryTitle;
@BindView(R.id.tag_container) FlowLayout tagContainer;

@BindView(R.id.screenshot_pager) ViewPager screenshotPager;
@BindView(R.id.description) TextView description;

private static final String REDDIT_MSG_URL_HEADER="https://www.reddit.com/message/compose/?to=/r/Android&subject=**RAS Flag Report**&message=";

Expand Down Expand Up @@ -116,7 +121,7 @@ public void onClick(DialogInterface dialogInterface, int i) {
if (flagMessage.getText().toString().isEmpty()) {
Toast.makeText(getContext(), getContext().getResources().getString(R.string.no_message), Toast.LENGTH_LONG).show();
} else {
openInChrome(REDDIT_MSG_URL_HEADER + "*****" + toolbar.getSubtitle() +" REPORT" + "*****" + "%0A" +(flagMessage.getText().toString().trim()));
openInChrome(REDDIT_MSG_URL_HEADER + "*****" + collapsingToolbar.getTitle() +" REPORT" + "*****" + "%0A" +(flagMessage.getText().toString().trim()));
}
}
})
Expand All @@ -132,13 +137,23 @@ public void onClick(DialogInterface dialogInterface, int i) {
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View layout = inflater.inflate(R.layout.fragment_appdetails_layout, container, false);
unbinder = ButterKnife.bind(this, layout);
toolbar.setContentInsetStartWithNavigation(0);

appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
float scrollRange = (float) appBarLayout.getTotalScrollRange();
fadeHeaderItems(scrollRange, verticalOffset);
}
});

return layout;
}

@Override
public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
toolbar.setNavigationIcon(R.drawable.ic_arrow_back_white_48px);
toolbar.setNavigationIcon(R.drawable.ic_close_white_24dp);
toolbar.setNavigationOnClickListener(this);
toolbar.inflateMenu(R.menu.appdetails_fragment);
toolbar.setOnMenuItemClickListener(this);
Expand Down Expand Up @@ -223,7 +238,7 @@ public void displayDetails(@Nullable AppInfo appInfo) {
getActivity().finish();
return;
}
primaryTitle.setText(appInfo.getAppName());
collapsingToolbar.setTitle(appInfo.getAppName());
secondaryTitle.setText(appInfo.getSecondaryCategory());
downloads = new ArrayList<>(appInfo.getDownloads());
contacts = new ArrayList<>(appInfo.getContacts());
Expand All @@ -245,7 +260,6 @@ public void displayDetails(@Nullable AppInfo appInfo) {
tagContainer.addView(tv);
}
tagContainer.setVisibility(appInfo.getTags().isEmpty() ? View.GONE : View.VISIBLE);
toolbar.setSubtitle(appInfo.getAppName());
createMenus();

}
Expand Down Expand Up @@ -317,4 +331,11 @@ public void displayIcon(@Nullable AppInfo appInfo) {
public void onScreenshotClicked(String url) {
new ScreenshotDialog(getContext(), screenshotUrls, screenshotUrls.indexOf(url)).show();
}

private void fadeHeaderItems(float scrollRange, int verticalOffset) {
float fadeFactor = 1.0f - Math.abs(2 * verticalOffset / scrollRange);
secondaryTitle.setAlpha(fadeFactor);
tagContainer.setAlpha(fadeFactor);
iconFrame.setAlpha(fadeFactor);
}
}
9 changes: 9 additions & 0 deletions app/src/main/res/drawable/ic_close_white_24dp.xml
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FFFFFF"
android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>
174 changes: 97 additions & 77 deletions app/src/main/res/layout/fragment_appdetails_layout.xml
View file
Original file line number Diff line number Diff line change
@@ -1,121 +1,141 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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.support.design.widget.CoordinatorLayout
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.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.v7.widget.Toolbar
android:id="@+id/details_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:theme="@style/AppTheme.Dark"
app:title="@string/screen_details"/>

<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content">

</android.support.v4.widget.NestedScrollView>
android:fitsSystemWindows="true">

<LinearLayout
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:orientation="vertical">
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:expandedTitleMarginStart="8dp"
app:expandedTitleMarginEnd="8dp"
app:expandedTitleMarginBottom="124dp"
app:expandedTitleGravity="center_horizontal|bottom"
app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title">

<android.support.v7.widget.Toolbar
android:id="@+id/details_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorPrimary"
android:theme="@style/AppTheme.Dark"
app:layout_collapseMode="pin"/>

<LinearLayout
android:id="@+id/details_header"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">

<FrameLayout
android:id="@+id/icon_frame"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="top"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:visibility="gone">

android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center"
android:visibility="gone"
android:gravity="center"
android:paddingBottom="40dp">
<ImageView
android:id="@+id/icon_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:contentDescription="App icon"
android:gravity="center_horizontal"
android:visibility="invisible"/>

<ProgressBar
android:id="@+id/icon_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center_horizontal"
android:visibility="visible"/>
</FrameLayout>

<LinearLayout
<TextView
android:id="@+id/title_secondary"
style="@style/TextAppearance.AppCompat.Caption"
android:theme="@style/AppTheme.Dark"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
android:gravity="center"
tools:text="Lorem ipsum"/>

<TextView
android:id="@+id/title_primary"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Lorem ipsum"/>

<TextView
android:id="@+id/title_secondary"
style="@style/TextAppearance.AppCompat.Caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:text="Lorem ipsum"/>
</LinearLayout>
<com.wefika.flowlayout.FlowLayout
android:id="@+id/tag_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:paddingEnd="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingStart="16dp"
android:paddingTop="8dp"/>
</LinearLayout>

<android.support.v4.view.ViewPager
android:id="@+id/screenshot_pager"
android:layout_width="match_parent"
android:layout_height="200dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<TextView
android:id="@+id/description"
style="@style/TextAppearance.AppCompat.Body1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
tools:text="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:behavior_overlapTop="30dp"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<android.support.v7.widget.CardView
android:id="@+id/description_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:cardElevation="8dp"
app:contentPadding="16dp">

<com.wefika.flowlayout.FlowLayout
android:id="@+id/tag_container"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:orientation="horizontal"
android:paddingEnd="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingStart="16dp"/>
</LinearLayout>
</LinearLayout>
android:orientation="vertical">

<android.support.v4.view.ViewPager
android:id="@+id/screenshot_pager"
android:layout_width="match_parent"
android:layout_height="200dp"/>

<TextView
android:id="@+id/description"
style="@style/TextAppearance.AppCompat.Body1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
tools:text="Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>

</LinearLayout>
</android.support.v7.widget.CardView>

</android.support.v4.widget.NestedScrollView>

<android.support.design.widget.FloatingActionButton
android:id="@+id/download_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@drawable/ic_file_download_white_24dp"
app:layout_anchor="@id/description_card"
app:layout_anchorGravity="bottom|end"
app:fabSize="normal"/>

</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
3 changes: 1 addition & 2 deletions app/src/main/res/menu/appdetails_fragment.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,8 @@
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/menu_contact"
android:icon="@drawable/ic_email_white_24dp"
android:title="@string/button_contact"
app:showAsAction="always"/>
app:showAsAction="never"/>
<item
android:id="@+id/menu_flag"
android:title="@string/flag"
Expand Down
2 changes: 1 addition & 1 deletion app/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<string name="button_filter">Filter</string>
<string name="button_search">Search</string>
<string name="screen_details">Details</string>
<string name="button_contact">Contact</string>
<string name="button_contact">Contact developer</string>
<string name="button_download">Download</string>
<string name="gplay">Google Play</string>
<string name="fdroid">F-Droid</string>
Expand Down

0 comments on commit 269d4fa

Please sign in to comment.