Change UI for graph toggle

Change UI for graph toggle (Overview | Altitude | Speed). The same toggle is used in Configure Map -> Terrain.
This commit is contained in:
androiddevkotlin 2021-01-24 19:30:44 +02:00
parent 5bf7dd6b8a
commit 5e68d14273
8 changed files with 210 additions and 81 deletions

View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/apk/res-auto"
android:id="@+id/center_button_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/center_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
android:text="@string/altitude"/>
</FrameLayout>

View file

@ -1,6 +1,5 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" <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" xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/custom_radio_buttons" android:id="@+id/custom_radio_buttons"
android:layout_width="match_parent" android:layout_width="match_parent"
@ -13,59 +12,10 @@
android:orientation="horizontal" android:orientation="horizontal"
tools:showIn="@layout/fragment_route_between_points_bottom_sheet_dialog"> tools:showIn="@layout/fragment_route_between_points_bottom_sheet_dialog">
<FrameLayout <include layout="@layout/left_button_container"/>
android:id="@+id/left_button_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<net.osmand.plus.widgets.TextViewEx <include layout="@layout/center_button_container"/>
android:id="@+id/left_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
tools:text="@string/shared_string_left"/>
</FrameLayout> <include layout="@layout/right_button_container"/>
<FrameLayout
android:id="@+id/center_button_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:visibility="gone">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/center_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
tools:text="@string/position_on_map_center"/>
</FrameLayout>
<FrameLayout
android:id="@+id/right_button_container"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/right_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
tools:text="@string/shared_string_right"/>
</FrameLayout>
</LinearLayout> </LinearLayout>

View file

@ -5,7 +5,7 @@
android:layout_width="match_parent" android:layout_width="match_parent"
android:layout_height="wrap_content"> android:layout_height="wrap_content">
<include layout="@layout/list_item_divider"/>
<net.osmand.plus.views.controls.PagerSlidingTabStrip <net.osmand.plus.views.controls.PagerSlidingTabStrip
android:id="@+id/sliding_tabs" android:id="@+id/sliding_tabs"

View file

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:id="@+id/left_button_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/left_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
android:text="@string/shared_string_overview" />
</FrameLayout>

View file

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:osmand="http://schemas.android.com/apk/res-auto"
android:id="@+id/right_button_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1">
<net.osmand.plus.widgets.TextViewEx
android:id="@+id/right_button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackground"
android:gravity="center"
android:textSize="@dimen/default_desc_text_size"
osmand:typeface="@string/font_roboto_medium"
android:text="@string/map_widget_speed"/>
</FrameLayout>

View file

@ -90,6 +90,12 @@ public class UiUtilities {
END, END,
} }
public enum CustomRadioButtonTypeGroup {
START,
CENTER,
END,
}
public UiUtilities(OsmandApplication app) { public UiUtilities(OsmandApplication app) {
this.app = app; this.app = app;
} }
@ -484,6 +490,87 @@ public class UiUtilities {
} }
} }
public static void updateCustomRadioButtonsGroup(Context app, View buttonsView, boolean nightMode,
CustomRadioButtonTypeGroup buttonType) {
int activeColor = ContextCompat.getColor(app, nightMode
? R.color.active_color_primary_dark
: R.color.active_color_primary_light);
int inActiveColor = ContextCompat.getColor(app, nightMode
? R.color.text_color_secondary_dark
: R.color.text_color_secondary_light);
int textColor = ContextCompat.getColor(app, nightMode
? R.color.text_color_primary_dark
: R.color.text_color_primary_light);
int roundedCorner = AndroidUtils.dpToPx(app, 4);
boolean isLayoutRtl = AndroidUtils.isLayoutRtl(app);
TextView startButtonText = buttonsView.findViewById(R.id.left_button);
View startButtonContainer = buttonsView.findViewById(R.id.left_button_container);
TextView centerButtonText = buttonsView.findViewById(R.id.center_button);
View centerButtonContainer = buttonsView.findViewById(R.id.center_button_container);
TextView endButtonText = buttonsView.findViewById(R.id.right_button);
View endButtonContainer = buttonsView.findViewById(R.id.right_button_container);
GradientDrawable background = new GradientDrawable();
background.setColor(UiUtilities.getColorWithAlpha(activeColor, 0.1f));
background.setStroke(AndroidUtils.dpToPx(app, 1), UiUtilities.getColorWithAlpha(activeColor, 0.5f));
GradientDrawable startButtonSharpCorner = new GradientDrawable();
startButtonSharpCorner.setStroke(AndroidUtils.dpToPx(app, 1), UiUtilities.getColorWithAlpha(inActiveColor, 0.5f));
GradientDrawable endButtonRoundedCorner = new GradientDrawable();
endButtonRoundedCorner.setStroke(AndroidUtils.dpToPx(app, 1), UiUtilities.getColorWithAlpha(inActiveColor, 0.5f));
GradientDrawable centerButtonSharpCorner = new GradientDrawable();
centerButtonSharpCorner.setStroke(AndroidUtils.dpToPx(app, 1), UiUtilities.getColorWithAlpha(inActiveColor, 0.5f));
setStartEndCenterRoundedCorner(roundedCorner, isLayoutRtl, startButtonSharpCorner, endButtonRoundedCorner, centerButtonSharpCorner);
if (buttonType == CustomRadioButtonTypeGroup.START) {
if (isLayoutRtl) {
background.setCornerRadii(new float[]{0, 0, roundedCorner, roundedCorner, roundedCorner, roundedCorner, 0, 0});
} else {
background.setCornerRadii(new float[]{roundedCorner, roundedCorner, 0, 0, 0, 0, roundedCorner, roundedCorner});
}
endButtonContainer.setBackground(endButtonRoundedCorner);
endButtonText.setTextColor(activeColor);
centerButtonContainer.setBackground(centerButtonSharpCorner);
centerButtonText.setTextColor(activeColor);
endButtonText.setTextColor(activeColor);
startButtonContainer.setBackgroundDrawable(background);
startButtonText.setTextColor(textColor);
} else if (buttonType == CustomRadioButtonTypeGroup.CENTER){
endButtonContainer.setBackground(endButtonRoundedCorner);
endButtonText.setTextColor(activeColor);
startButtonContainer.setBackground(startButtonSharpCorner);
startButtonText.setTextColor(activeColor);
endButtonText.setTextColor(activeColor);
centerButtonContainer.setBackgroundDrawable(background);
centerButtonText.setTextColor(textColor);
} else {
if (isLayoutRtl) {
background.setCornerRadii(new float[]{roundedCorner, roundedCorner, 0, 0, 0, 0, roundedCorner, roundedCorner});
} else {
background.setCornerRadii(new float[]{0, 0, roundedCorner, roundedCorner, roundedCorner, roundedCorner, 0, 0});
}
endButtonContainer.setBackgroundDrawable(background);
endButtonText.setTextColor(textColor);
startButtonContainer.setBackground(startButtonSharpCorner);
startButtonText.setTextColor(activeColor);
centerButtonContainer.setBackground(centerButtonSharpCorner);
centerButtonText.setTextColor(activeColor);
}
}
private static void setStartEndCenterRoundedCorner(int roundedCorner, boolean isLayoutRtl, GradientDrawable startButtonRoundedCorner, GradientDrawable endButtonRoundedCorner, GradientDrawable centerButtonSharpCorner) {
if (isLayoutRtl) {
startButtonRoundedCorner.setCornerRadii(new float[]{0, 0, roundedCorner, roundedCorner, roundedCorner, roundedCorner, 0, 0});
} else {
startButtonRoundedCorner.setCornerRadii(new float[]{roundedCorner, roundedCorner, 0, 0, 0, 0, roundedCorner, roundedCorner});
}
if (isLayoutRtl) {
endButtonRoundedCorner.setCornerRadii(new float[]{roundedCorner, roundedCorner, 0, 0, 0, 0, roundedCorner, roundedCorner});
} else {
endButtonRoundedCorner.setCornerRadii(new float[]{0, 0, roundedCorner, roundedCorner, roundedCorner, roundedCorner, 0, 0});
}
centerButtonSharpCorner.setCornerRadii(new float[]{0, 0, 0, 0, 0, 0, 0, 0});
}
public static void setupCompoundButtonDrawable(Context ctx, boolean nightMode, @ColorInt int activeColor, Drawable drawable) { public static void setupCompoundButtonDrawable(Context ctx, boolean nightMode, @ColorInt int activeColor, Drawable drawable) {
int inactiveColor = ContextCompat.getColor(ctx, nightMode ? R.color.icon_color_default_dark : R.color.icon_color_default_light); int inactiveColor = ContextCompat.getColor(ctx, nightMode ? R.color.icon_color_default_dark : R.color.icon_color_default_light);
int[][] states = new int[][]{ int[][] states = new int[][]{

View file

@ -13,6 +13,7 @@ import android.widget.TextView;
import androidx.annotation.NonNull; import androidx.annotation.NonNull;
import androidx.appcompat.widget.SwitchCompat; import androidx.appcompat.widget.SwitchCompat;
import androidx.viewpager.widget.PagerAdapter; import androidx.viewpager.widget.PagerAdapter;
import androidx.viewpager.widget.ViewPager.OnPageChangeListener;
import com.github.mikephil.charting.charts.LineChart; import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.data.Entry;
@ -23,6 +24,7 @@ import com.github.mikephil.charting.listener.ChartTouchListener.ChartGesture;
import com.github.mikephil.charting.listener.OnChartGestureListener; import com.github.mikephil.charting.listener.OnChartGestureListener;
import com.github.mikephil.charting.listener.OnChartValueSelectedListener; import com.github.mikephil.charting.listener.OnChartValueSelectedListener;
import net.osmand.AndroidUtils;
import net.osmand.GPXUtilities; import net.osmand.GPXUtilities;
import net.osmand.GPXUtilities.GPXFile; import net.osmand.GPXUtilities.GPXFile;
import net.osmand.GPXUtilities.GPXTrackAnalysis; import net.osmand.GPXUtilities.GPXTrackAnalysis;
@ -78,7 +80,7 @@ public class GPXItemPagerAdapter extends PagerAdapter implements CustomTabProvid
private boolean chartClicked; private boolean chartClicked;
public GPXItemPagerAdapter(@NonNull PagerSlidingTabStrip tabs, public GPXItemPagerAdapter(@NonNull final PagerSlidingTabStrip tabs,
@NonNull GpxDisplayItem gpxItem, @NonNull GpxDisplayItem gpxItem,
@NonNull TrackDisplayHelper displayHelper, @NonNull TrackDisplayHelper displayHelper,
@NonNull SegmentActionsListener actionsListener) { @NonNull SegmentActionsListener actionsListener) {
@ -89,6 +91,34 @@ public class GPXItemPagerAdapter extends PagerAdapter implements CustomTabProvid
this.actionsListener = actionsListener; this.actionsListener = actionsListener;
app = (OsmandApplication) tabs.getContext().getApplicationContext(); app = (OsmandApplication) tabs.getContext().getApplicationContext();
iconsCache = app.getUIUtilities(); iconsCache = app.getUIUtilities();
tabs.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
UiUtilities.CustomRadioButtonTypeGroup type;
if (arg0 == 0) {
type = UiUtilities.CustomRadioButtonTypeGroup.START;
} else if (arg0 == 1) {
type = UiUtilities.CustomRadioButtonTypeGroup.CENTER;
} else {
type = UiUtilities.CustomRadioButtonTypeGroup.END;
}
View parent = (View) tabs.getChildAt(0);
UiUtilities.updateCustomRadioButtonsGroup(app, parent, false, type);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
});
fetchTabTypes(); fetchTabTypes();
} }
@ -588,7 +618,15 @@ public class GPXItemPagerAdapter extends PagerAdapter implements CustomTabProvid
@Override @Override
public View getCustomTabView(@NonNull ViewGroup parent, int position) { public View getCustomTabView(@NonNull ViewGroup parent, int position) {
View tab = LayoutInflater.from(parent.getContext()).inflate(R.layout.gpx_tab, parent, false); int layoutId;
if (position == 0) {
layoutId = R.layout.left_button_container;
} else if (position == 1) {
layoutId = R.layout.center_button_container;
} else {
layoutId = R.layout.right_button_container;
}
View tab = LayoutInflater.from(parent.getContext()).inflate(layoutId, parent, false);
tab.setTag(tabTypes[position].name()); tab.setTag(tabTypes[position].name());
deselect(tab); deselect(tab);
return tab; return tab;
@ -597,29 +635,25 @@ public class GPXItemPagerAdapter extends PagerAdapter implements CustomTabProvid
@Override @Override
public void select(View tab) { public void select(View tab) {
GPXTabItemType tabType = GPXTabItemType.valueOf((String) tab.getTag()); GPXTabItemType tabType = GPXTabItemType.valueOf((String) tab.getTag());
ImageView img = tab.findViewById(R.id.tab_image); UiUtilities.CustomRadioButtonTypeGroup type;
switch (tabs.getTabSelectionType()) { if (tabType == GPXTabItemType.GPX_TAB_ITEM_GENERAL) {
case ALPHA: type = UiUtilities.CustomRadioButtonTypeGroup.START;
img.setAlpha(tabs.getTabTextSelectedAlpha()); } else if (tabType == GPXTabItemType.GPX_TAB_ITEM_ALTITUDE) {
break; type = UiUtilities.CustomRadioButtonTypeGroup.CENTER;
case SOLID_COLOR: } else {
img.setImageDrawable(iconsCache.getPaintedIcon(tabType.getIconId(), tabs.getTextColor())); type = UiUtilities.CustomRadioButtonTypeGroup.END;
break;
} }
View parent = (View) tab.getParent();
UiUtilities.updateCustomRadioButtonsGroup(app,parent , false, type);
ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) parent.getLayoutParams();
int contentPadding = app.getResources().getDimensionPixelSize(R.dimen.content_padding);
int containerMargin = app.getResources().getDimensionPixelSize(R.dimen.bottom_sheet_content_margin_small);
AndroidUtils.setMargins(params, contentPadding, containerMargin, contentPadding, containerMargin);
} }
@Override @Override
public void deselect(View tab) { public void deselect(View tab) {
GPXTabItemType tabType = GPXTabItemType.valueOf((String) tab.getTag());
ImageView img = tab.findViewById(R.id.tab_image);
switch (tabs.getTabSelectionType()) {
case ALPHA:
img.setAlpha(tabs.getTabTextAlpha());
break;
case SOLID_COLOR:
img.setImageDrawable(iconsCache.getPaintedIcon(tabType.getIconId(), tabs.getTabInactiveTextColor()));
break;
}
} }
@Override @Override

View file

@ -352,13 +352,6 @@ public class PagerSlidingTabStrip extends HorizontalScrollView {
tab_title.setTextColor(pager.getCurrentItem() == i ? tabTextColor : tabInactiveTextColor); tab_title.setTextColor(pager.getCurrentItem() == i ? tabTextColor : tabInactiveTextColor);
break; break;
} }
if (pager.getAdapter() instanceof CustomTabProvider) {
if (pager.getCurrentItem() == i) {
((CustomTabProvider) pager.getAdapter()).select(v);
} else {
((CustomTabProvider) pager.getAdapter()).deselect(v);
}
}
// setAllCaps() is only available from API 14, so the upper case is made manually if we are on a // setAllCaps() is only available from API 14, so the upper case is made manually if we are on a
// pre-ICS-build // pre-ICS-build
@ -370,6 +363,13 @@ public class PagerSlidingTabStrip extends HorizontalScrollView {
} }
} }
} }
if (pager.getAdapter() instanceof CustomTabProvider) {
if (pager.getCurrentItem() == i) {
((CustomTabProvider) pager.getAdapter()).select(v);
} else {
((CustomTabProvider) pager.getAdapter()).deselect(v);
}
}
} }
} }