Improve marker detail layout

This commit is contained in:
Jimmy Shih
2013-11-04 12:30:29 -08:00
parent 4b1eea2ed5
commit 48ad505e55
7 changed files with 52 additions and 64 deletions
@@ -17,6 +17,7 @@
<shape xmlns:android="http://schemas.android.com/apk/res/android" > <shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient <gradient
android:angle="90" android:angle="90"
android:endColor="@color/photo_gradient_start" android:centerColor="@color/text_gradient_center"
android:startColor="@color/photo_gradient_end" /> android:endColor="@color/text_gradient_start"
android:startColor="@color/text_gradient_end" />
</shape> </shape>
+3 -3
View File
@@ -24,14 +24,14 @@ limitations under the License.
android:layout_height="match_parent" android:layout_height="match_parent"
android:layout_width="match_parent" android:layout_width="match_parent"
android:scaleType="centerCrop" /> android:scaleType="centerCrop" />
<!-- A gradient on top of the photo --> <!-- A gradient on top of the text -->
<ImageView <ImageView
android:alpha=".6" android:alpha=".6"
android:contentDescription="@string/icon_marker" android:contentDescription="@string/icon_marker"
android:id="@+id/list_item_photo_gradient" android:id="@+id/list_item_text_gradient"
android:layout_height="match_parent" android:layout_height="match_parent"
android:layout_width="match_parent" android:layout_width="match_parent"
android:src="@drawable/photo_gradient" /> android:src="@drawable/text_gradient" />
<!-- Table 1 --> <!-- Table 1 -->
<TableLayout <TableLayout
android:layout_height="match_parent" android:layout_height="match_parent"
+27 -24
View File
@@ -27,31 +27,34 @@ limitations under the License.
android:layout_height="match_parent" android:layout_height="match_parent"
android:layout_width="match_parent" android:layout_width="match_parent"
android:scaleType="fitCenter" /> android:scaleType="fitCenter" />
<!-- A gradient on top of the photo --> <FrameLayout
<ImageView
android:alpha=".6"
android:contentDescription="@string/icon_marker"
android:id="@+id/marker_detail_waypoint_photo_gradient"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:src="@drawable/photo_gradient" />
<LinearLayout
android:id="@+id/marker_detail_waypoint_info"
android:layout_gravity="bottom"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_width="match_parent" android:layout_width="match_parent" >
android:orientation="vertical" <!-- A gradient on top of the text -->
android:padding="8dp" > <ImageView
<TextView android:alpha=".6"
android:id="@+id/marker_detail_waypoint_name" android:contentDescription="@string/icon_marker"
style="@style/TextMedium" /> android:id="@+id/marker_detail_waypoint_text_gradient"
<TextView android:layout_height="match_parent"
android:id="@+id/marker_detail_waypoint_category" android:layout_width="match_parent"
style="@style/TextSmall" /> android:src="@drawable/text_gradient" />
<TextView <LinearLayout
android:id="@+id/marker_detail_waypoint_description" android:id="@+id/marker_detail_waypoint_info"
style="@style/TextSmall" /> android:layout_height="wrap_content"
</LinearLayout> android:layout_width="match_parent"
android:orientation="vertical"
android:padding="8dp" >
<TextView
android:id="@+id/marker_detail_waypoint_name"
style="@style/TextMedium" />
<TextView
android:id="@+id/marker_detail_waypoint_category"
style="@style/TextSmall" />
<TextView
android:id="@+id/marker_detail_waypoint_description"
style="@style/TextSmall" />
</LinearLayout>
</FrameLayout>
</FrameLayout> </FrameLayout>
<ScrollView <ScrollView
android:id="@+id/marker_detail_statistics" android:id="@+id/marker_detail_statistics"
+3 -2
View File
@@ -27,8 +27,9 @@ limitations under the License.
<color name="chart_power_fill">#40401465</color> <!-- transparent purple --> <color name="chart_power_fill">#40401465</color> <!-- transparent purple -->
<color name="chart_speed_border">#FF0066FF</color> <!-- blue --> <color name="chart_speed_border">#FF0066FF</color> <!-- blue -->
<color name="chart_speed_fill">#40C8E0FF</color> <!-- transparent blue --> <color name="chart_speed_fill">#40C8E0FF</color> <!-- transparent blue -->
<color name="photo_gradient_end">#00000000</color> <!-- black 0% opacity --> <color name="text_gradient_center">#B2000000</color> <!-- black 70% opacity -->
<color name="photo_gradient_start">#FF000000</color> <!-- black 100% opacity --> <color name="text_gradient_end">#00000000</color> <!-- black 0% opacity -->
<color name="text_gradient_start">#FF000000</color> <!-- black 100% opacity -->
<color name="recording_text">#FFBE161B</color> <!-- red --> <color name="recording_text">#FFBE161B</color> <!-- red -->
<color name="stats_large_label">#FFFAAD2C</color> <!-- orange --> <color name="stats_large_label">#FFFAAD2C</color> <!-- orange -->
<color name="stats_separator">#99999999</color> <!-- light gray --> <color name="stats_separator">#99999999</color> <!-- light gray -->
@@ -37,14 +37,12 @@ import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentActivity;
import android.util.Log; import android.util.Log;
import android.view.Display; import android.view.Display;
import android.view.Gravity;
import android.view.LayoutInflater; import android.view.LayoutInflater;
import android.view.Menu; import android.view.Menu;
import android.view.MenuInflater; import android.view.MenuInflater;
import android.view.MenuItem; import android.view.MenuItem;
import android.view.View; import android.view.View;
import android.view.ViewGroup; import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView; import android.widget.ImageView;
import android.widget.LinearLayout; import android.widget.LinearLayout;
import android.widget.TextView; import android.widget.TextView;
@@ -72,14 +70,14 @@ public class MarkerDetailFragment extends Fragment {
private MyTracksProviderUtils myTracksProviderUtils; private MyTracksProviderUtils myTracksProviderUtils;
private Handler handler; private Handler handler;
private ImageView photo; private ImageView photo;
private ImageView photoGradient; private ImageView textGradient;
private LinearLayout waypointInfo; private LinearLayout waypointInfo;
private Waypoint waypoint; private Waypoint waypoint;
private Runnable hideText = new Runnable() { private Runnable hideText = new Runnable() {
@Override @Override
public void run() { public void run() {
photoGradient.setVisibility(View.GONE); textGradient.setVisibility(View.GONE);
waypointInfo.setVisibility(View.GONE); waypointInfo.setVisibility(View.GONE);
} }
}; };
@@ -110,11 +108,11 @@ public class MarkerDetailFragment extends Fragment {
public void onClick(View v) { public void onClick(View v) {
handler.removeCallbacks(hideText); handler.removeCallbacks(hideText);
int visibility = waypointInfo.getVisibility() == View.GONE ? View.VISIBLE : View.GONE; int visibility = waypointInfo.getVisibility() == View.GONE ? View.VISIBLE : View.GONE;
photoGradient.setVisibility(visibility); textGradient.setVisibility(visibility);
waypointInfo.setVisibility(visibility); waypointInfo.setVisibility(visibility);
} }
}); });
photoGradient = (ImageView) view.findViewById(R.id.marker_detail_waypoint_photo_gradient); textGradient = (ImageView) view.findViewById(R.id.marker_detail_waypoint_text_gradient);
waypointInfo = (LinearLayout) view.findViewById(R.id.marker_detail_waypoint_info); waypointInfo = (LinearLayout) view.findViewById(R.id.marker_detail_waypoint_info);
return view; return view;
@@ -221,14 +219,12 @@ public class MarkerDetailFragment extends Fragment {
String photoUrl = waypoint.getPhotoUrl(); String photoUrl = waypoint.getPhotoUrl();
if (photoUrl == null || photoUrl.equals("")) { if (photoUrl == null || photoUrl.equals("")) {
photo.setVisibility(View.GONE); photo.setVisibility(View.GONE);
photoGradient.setVisibility(View.GONE); textGradient.setVisibility(View.GONE);
waypointInfo.setVisibility(View.VISIBLE); waypointInfo.setVisibility(View.VISIBLE);
setLayoutGravity(waypointInfo, Gravity.TOP);
} else { } else {
photo.setVisibility(View.VISIBLE); photo.setVisibility(View.VISIBLE);
photoGradient.setVisibility(View.VISIBLE); textGradient.setVisibility(View.VISIBLE);
waypointInfo.setVisibility(View.VISIBLE); waypointInfo.setVisibility(View.VISIBLE);
setLayoutGravity(waypointInfo, Gravity.BOTTOM);
Display defaultDisplay = getActivity().getWindowManager().getDefaultDisplay(); Display defaultDisplay = getActivity().getWindowManager().getDefaultDisplay();
PhotoUtils.setImageVew(photo, Uri.parse(photoUrl), defaultDisplay.getWidth(), PhotoUtils.setImageVew(photo, Uri.parse(photoUrl), defaultDisplay.getWidth(),
@@ -258,19 +254,6 @@ public class MarkerDetailFragment extends Fragment {
} }
} }
/**
* Sets the layout gravity. Assuming the parent is a framelayout.
*
* @param linearLayout the linear layout
* @param gravity the gravity
*/
private void setLayoutGravity(LinearLayout linearLayout, int gravity) {
FrameLayout.LayoutParams layoutParams = (FrameLayout.LayoutParams) linearLayout
.getLayoutParams();
layoutParams.gravity = gravity;
linearLayout.setLayoutParams(layoutParams);
}
/** /**
* Sets a text view. * Sets a text view.
* *
@@ -144,13 +144,13 @@ public class ListItemUtils {
} }
ImageView photo = (ImageView) view.findViewById(R.id.list_item_photo); ImageView photo = (ImageView) view.findViewById(R.id.list_item_photo);
ImageView photoGradient = (ImageView) view.findViewById(R.id.list_item_photo_gradient); ImageView textGradient = (ImageView) view.findViewById(R.id.list_item_text_gradient);
if (photoUrl == null || photoUrl.equals("")) { if (photoUrl == null || photoUrl.equals("")) {
photo.setVisibility(View.GONE); photo.setVisibility(View.GONE);
photoGradient.setVisibility(View.GONE); textGradient.setVisibility(View.GONE);
} else { } else {
photo.setVisibility(View.VISIBLE); photo.setVisibility(View.VISIBLE);
photoGradient.setVisibility(View.VISIBLE); textGradient.setVisibility(View.VISIBLE);
Display defaultDisplay = activity.getWindowManager().getDefaultDisplay(); Display defaultDisplay = activity.getWindowManager().getDefaultDisplay();
PhotoUtils.setImageVew( PhotoUtils.setImageVew(
photo, Uri.parse(photoUrl), defaultDisplay.getWidth(), getPhotoHeight(activity), false); photo, Uri.parse(photoUrl), defaultDisplay.getWidth(), getPhotoHeight(activity), false);
@@ -46,7 +46,7 @@ public class ChartFragmentTest extends AndroidTestCase {
/** /**
* Tests the logic to get the incorrect values of sensor in {@link ChartFragment#fillDataPoint(Location, * Tests the logic to get the incorrect values of sensor in {@link ChartFragment#fillDataPoint(Location,
* double[], android.content.Context)} * double[])}
*/ */
public void testFillDataPoint_sensorIncorrect() { public void testFillDataPoint_sensorIncorrect() {
MyTracksLocation myTracksLocation = TrackStubUtils.createMyTracksLocation(); MyTracksLocation myTracksLocation = TrackStubUtils.createMyTracksLocation();
@@ -80,7 +80,7 @@ public class ChartFragmentTest extends AndroidTestCase {
/** /**
* Tests the logic to get the correct values of sensor in {@link ChartFragment#fillDataPoint(Location, * Tests the logic to get the correct values of sensor in {@link ChartFragment#fillDataPoint(Location,
* double[], android.content.Context)}. * double[])}.
*/ */
public void testFillDataPoint_sensorCorrect() { public void testFillDataPoint_sensorCorrect() {
MyTracksLocation myTracksLocation = TrackStubUtils.createMyTracksLocation(); MyTracksLocation myTracksLocation = TrackStubUtils.createMyTracksLocation();
@@ -112,7 +112,7 @@ public class ChartFragmentTest extends AndroidTestCase {
/** /**
* Tests the logic to get the value of metric Distance in {@link ChartFragment#fillDataPoint(Location, * Tests the logic to get the value of metric Distance in {@link ChartFragment#fillDataPoint(Location,
* double[], android.content.Context)}. * double[])}.
*/ */
public void testFillDataPoint_distanceMetric() { public void testFillDataPoint_distanceMetric() {
// By distance. // By distance.
@@ -153,7 +153,7 @@ public class ChartFragmentTest extends AndroidTestCase {
/** /**
* Tests the logic to get the value of imperial Distance in {@link ChartFragment#fillDataPoint(Location, * Tests the logic to get the value of imperial Distance in {@link ChartFragment#fillDataPoint(Location,
* double[], android.content.Context)}. * double[])}.
*/ */
public void testFillDataPoint_distanceImperial() { public void testFillDataPoint_distanceImperial() {
// By distance. // By distance.
@@ -198,7 +198,7 @@ public class ChartFragmentTest extends AndroidTestCase {
/** /**
* Tests the logic to get the values of time in {@link ChartFragment#fillDataPoint(Location, * Tests the logic to get the values of time in {@link ChartFragment#fillDataPoint(Location,
* double[], android.content.Context)}. * double[])}.
*/ */
public void testFillDataPoint_time() { public void testFillDataPoint_time() {
// By time // By time
@@ -215,7 +215,7 @@ public class ChartFragmentTest extends AndroidTestCase {
/** /**
* Tests the logic to get the value of elevation in {@link ChartFragment#fillDataPoint(Location, * Tests the logic to get the value of elevation in {@link ChartFragment#fillDataPoint(Location,
* double[], android.content.Context)} by one and two points. * double[])} by one and two points.
*/ */
public void testFillDataPoint_elevation() { public void testFillDataPoint_elevation() {
MyTracksLocation myTracksLocation1 = TrackStubUtils.createMyTracksLocation(); MyTracksLocation myTracksLocation1 = TrackStubUtils.createMyTracksLocation();
@@ -240,7 +240,7 @@ public class ChartFragmentTest extends AndroidTestCase {
/** /**
* Tests the logic to get the value of speed in {@link ChartFragment#fillDataPoint(Location, * Tests the logic to get the value of speed in {@link ChartFragment#fillDataPoint(Location,
* double[], android.content.Context)}. In this test, firstly remove all * double[])}. In this test, firstly remove all
* points in memory, and then fill in two points one by one. The speed values * points in memory, and then fill in two points one by one. The speed values
* of these points are 129, 130. * of these points are 129, 130.
*/ */