Version 1.6.6: improvements to text drawing for icons and exports

Also added link to browser-based app preview

Author: simonrob

MediaPhone/build.gradle

@@ -10,8 +10,8 @@ android {
 
 		targetSdkVersion 29
 		minSdkVersion 14
-		versionCode 47
-		versionName '1.6.5'
+		versionCode 48
+		versionName '1.6.6'
 		// versionNameSuffix = '-beta-1'
 		resConfigs 'en', 'es', 'fr', 'nl', 'pt', 'pl', 'ru'
 	}
@@ -48,7 +48,7 @@ android {
 dependencies {
 	implementation project(':MediaUtilities')
 
-	implementation 'com.google.android.material:material:1.2.1' // for overall UI appearance
+	implementation 'com.google.android.material:material:1.3.0' // for overall UI appearance
 	implementation 'androidx.exifinterface:exifinterface:1.3.2' // for auto-selection of export resolution
 	implementation 'androidx.core:core:1.3.2' // for FileProvider
 	implementation 'androidx.documentfile:documentfile:1.0.1' // for Storage Access Framework

MediaPhone/src/main/java/ac/robinson/mediaphone/MediaPhoneActivity.java

@@ -492,7 +492,8 @@ protected void prepareMediaMenuNavigationButtons(Menu menu, String mediaId) {
 					menu.findItem(R.id.menu_copy_media).setVisible(true);
 					menu.findItem(R.id.menu_paste_media).setVisible(false);
 				} else {
-					SharedPreferences copyFrameSettings = getSharedPreferences(MediaPhone.APPLICATION_NAME, Context.MODE_PRIVATE);
+					SharedPreferences copyFrameSettings = getSharedPreferences(MediaPhone.APPLICATION_NAME,
+							Context.MODE_PRIVATE);
 					String copiedFrameId = copyFrameSettings.getString(getString(R.string.key_copied_frame), null);
 					menu.findItem(R.id.menu_copy_media).setVisible(false);
 					menu.findItem(R.id.menu_paste_media).setVisible(!TextUtils.isEmpty(copiedFrameId));
@@ -1880,22 +1881,21 @@ public void onClick(DialogInterface dialog, int item) {
 				final Map<Integer, Object> settings = new Hashtable<>();
 				settings.put(MediaUtilities.KEY_AUDIO_RESOURCE_ID, R.raw.ic_audio_playback);
 
-				// some output settings (TODO: make sure HTML version respects these)
+				// configure output settings (TODO: make sure HTML version respects all of these)
 				settings.put(MediaUtilities.KEY_BACKGROUND_COLOUR, res.getColor(R.color.export_background));
 				settings.put(MediaUtilities.KEY_TEXT_COLOUR_NO_IMAGE, res.getColor(R.color.export_text_no_image));
 				settings.put(MediaUtilities.KEY_TEXT_COLOUR_WITH_IMAGE, res.getColor(R.color.export_text_with_image));
 				settings.put(MediaUtilities.KEY_TEXT_BACKGROUND_COLOUR, res.getColor(R.color.export_text_background));
+
 				// TODO: do we want to do getDimensionPixelSize for export?
-				settings.put(MediaUtilities.KEY_TEXT_SPACING, res.getDimensionPixelSize(R.dimen.export_icon_text_padding));
-				settings.put(MediaUtilities.KEY_TEXT_CORNER_RADIUS,
-						res.getDimensionPixelSize(R.dimen.export_icon_text_corner_radius));
 				settings.put(MediaUtilities.KEY_TEXT_BACKGROUND_SPAN_WIDTH,
 						Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB);
 				settings.put(MediaUtilities.KEY_MAX_TEXT_FONT_SIZE, res.getDimensionPixelSize(R.dimen.export_maximum_text_size));
-				settings.put(MediaUtilities.KEY_MAX_TEXT_CHARACTERS_PER_LINE,
-						res.getInteger(R.integer.export_maximum_text_characters_per_line));
-				settings.put(MediaUtilities.KEY_MAX_TEXT_HEIGHT_WITH_IMAGE,
-						res.getDimensionPixelSize(R.dimen.export_maximum_text_height_with_image));
+				settings.put(MediaUtilities.KEY_MAX_TEXT_PERCENTAGE_HEIGHT_WITH_IMAGE,
+						res.getInteger(R.integer.export_maximum_text_percentage_height_with_image));
+				settings.put(MediaUtilities.KEY_TEXT_SPACING, res.getDimensionPixelSize(R.dimen.export_icon_text_padding));
+				settings.put(MediaUtilities.KEY_TEXT_CORNER_RADIUS,
+						res.getDimensionPixelSize(R.dimen.export_icon_text_corner_radius));
 
 				if (contentList != null && contentList.size() > 0) {
 					switch (item) {
@@ -2955,7 +2955,7 @@ public void run() {
 									IOUtilities.getFileExtension(mediaFile.getName()));
 							IOUtilities.copyFile(mediaFile, outputFile);
 							MediaScannerConnection.scanFile(MediaPhoneActivity.this,
-							 new String[]{ outputFile.getAbsolutePath() },
+									new String[]{ outputFile.getAbsolutePath() },
 									null, new MediaScannerConnection.OnScanCompletedListener() {
 										@Override
 										public void onScanCompleted(String path, Uri uri) {

MediaPhone/src/main/java/ac/robinson/mediaphone/provider/FrameItem.java

@@ -291,13 +291,12 @@ public Bitmap loadIcon(Resources res, ContentResolver contentResolver, BitmapUti
 			int textBackgroundColour = imageLoaded ? res.getColor(R.color.frame_icon_text_background) : 0;
 			float leftOffset = isFirstFrame ? indicatorWidth : 0;
 			int maxTextHeight = (imageLoaded ?
-					res.getDimensionPixelSize(R.dimen.frame_icon_maximum_text_height_with_image) - textPadding :
-					bitmapHeight - textPadding);
+					(bitmapHeight * res.getInteger(R.integer.frame_icon_maximum_text_percentage_height_with_image) / 100) :
+					bitmapHeight);
 			BitmapUtilities.drawScaledText(textString, frameBitmapCanvas, frameBitmapPaint, textColour, textBackgroundColour,
 					textPadding, textCornerRadius, imageLoaded, leftOffset,
 					Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB, maxTextHeight,
-					res.getDimensionPixelSize(R.dimen.frame_icon_maximum_text_size),
-					res.getInteger(R.integer.frame_icon_maximum_text_characters_per_line));
+					res.getDimensionPixelSize(R.dimen.frame_icon_maximum_text_size));
 
 			// add border if there's no image (looks much tidier)
 			if (!imageLoaded) {

MediaPhone/src/main/java/ac/robinson/mediaphone/provider/UpgradeManager.java

@@ -236,10 +236,14 @@ public static void installHelperNarrative(Context context) {
 		final int narrativeSequenceIdIncrement = res.getInteger(R.integer.frame_narrative_sequence_increment);
 
 		// add a narrative that gives a few tips on first use
+		// note: \u00A0 (non-breaking space) is used to force spacing in the frame icon after improvements to text drawing which
+		// mean the text maximum size/height is now properly used (rather than being overridden by the old maximum line width
+		// parameter, which it turns out we unintentionally relied upon for the helper narrative's initial appearance)
 		String[] mediaStrings = {
-				context.getString(R.string.helper_narrative_frame_1, context.getString(R.string.app_name)),
+				"\u00A0\n" + context.getString(R.string.helper_narrative_frame_1, context.getString(R.string.app_name)) +
+						"\n\u00A0",
 				context.getString(R.string.helper_narrative_frame_2),
-				context.getString(R.string.helper_narrative_frame_3),
+				"\u00A0\n" + context.getString(R.string.helper_narrative_frame_3),
 				context.getString(R.string.helper_narrative_frame_4, context.getString(R.string.preferences_contact_us_title),
 						context.getString(R.string.title_preferences))
 		};
@@ -301,16 +305,18 @@ public static void installTimingEditorNarrative(Context context) {
 		final String narrativeId = NarrativeItem.TIMING_EDITOR_NARRATIVE_ID;
 		final int narrativeSequenceIdIncrement = res.getInteger(R.integer.frame_narrative_sequence_increment);
 
-		// add a narrative that gives instructions for using the timing editor
+		// add a narrative that gives instructions for using the timing editor (\u00A0 used as above)
 		String[] mediaStrings = {
 				context.getString(R.string.timing_editor_narrative_frame_1),
 				context.getString(R.string.timing_editor_narrative_frame_2, context.getString(R.string.timing_editor_ffwd_icon)),
 				context.getString(R.string.timing_editor_narrative_frame_3, context.getString(R.string.timing_editor_rew_icon),
 						context.getString(R.string.menu_edit_timing), context.getString(R.string.timing_editor_menu_icon),
 						context.getString(R.string.timing_editor_record_icon_alternative)),
 				context.getString(R.string.timing_editor_narrative_frame_4),
-				context.getString(R.string.timing_editor_narrative_frame_5,
-						context.getString(R.string.preferences_contact_us_title), context.getString(R.string.title_preferences)),
+				"\u00A0\n" + context.getString(R.string.timing_editor_narrative_frame_5,
+						context.getString(R.string.preferences_contact_us_title),
+						context.getString(R.string.title_preferences)) +
+						"\n\u00A0",
 		};
 
 		for (int i = 0, n = mediaStrings.length; i < n; i++) {

MediaPhone/src/main/res/values/attrs.xml

@@ -26,16 +26,14 @@
 	<dimen name="frame_icon_width">162dp</dimen>
 	<dimen name="frame_icon_height">@dimen/frame_icon_width</dimen>
 	<dimen name="frame_icon_progress_size">40dp</dimen>
-	<dimen name="frame_icon_maximum_text_size">30sp</dimen>
-	<dimen name="frame_icon_maximum_text_height_with_image">60dp</dimen>
+	<dimen name="frame_icon_maximum_text_size">30sp</dimen><!-- note that this is converted to a pixel size before drawing -->
+	<integer name="frame_icon_maximum_text_percentage_height_with_image">37</integer><!-- percentage of icon height -->
 	<dimen name="frame_icon_indicator_maximum_text_size">30dp</dimen>
 	<dimen name="frame_icon_border_width">2dp</dimen>
 	<dimen name="frame_icon_selector_corner_radius">0dp</dimen>
 	<dimen name="frame_icon_text_padding">6dp</dimen>
 	<dimen name="frame_icon_text_corner_radius">0dp</dimen>
 
-	<integer name="frame_icon_maximum_text_characters_per_line">26</integer>
-
 	<item name="frame_icon_scale_factor" format="float" type="dimen">0.9</item>
 	<item name="frame_icon_overlay_scale_factor" format="float" type="dimen">0.22</item>
 	<item name="frame_icon_overlay_spacing_factor" format="float" type="dimen">0.02</item>
@@ -225,12 +223,10 @@
 	<integer name="export_smil_player_bar_adjustment">16</integer>
 	<integer name="export_html_width">@integer/export_smil_width</integer>
 	<integer name="export_html_height">@integer/export_smil_height</integer>
-	<integer name="export_maximum_text_characters_per_line">@integer/frame_icon_maximum_text_characters_per_line
-	</integer>
 
+	<!-- TODO: make text size a configurable setting? Same for percentage of output height? -->
 	<dimen name="export_maximum_text_size">@dimen/frame_icon_maximum_text_size</dimen>
-	<!-- TODO: export_maximum_text_height_with_image doesn't currently work (not actually passed to video creators) -->
-	<dimen name="export_maximum_text_height_with_image">@dimen/frame_icon_maximum_text_height_with_image</dimen>
+	<integer name="export_maximum_text_percentage_height_with_image">24</integer><!-- percentage of output height -->
 	<dimen name="export_icon_text_padding">@dimen/frame_icon_text_padding</dimen>
 	<dimen name="export_icon_text_corner_radius">@dimen/frame_icon_text_corner_radius</dimen>
 

MediaPhone/src/main/res/values/strings.xml

@@ -203,7 +203,7 @@
 	<string name="timing_editor_ffwd_icon" translatable="false">&#x25b8;&#x25b8;</string>
 	<string name="timing_editor_menu_icon" translatable="false">&#x22ee;</string>
 	<string name="timing_editor_record_icon_alternative" translatable="false">&#x1f534;</string>
-	<string name="timing_editor_narrative_frame_1">Getting started:\ntiming editor tips\n\nLong press here to watch an introduction, then edit its timing to practice</string>
+	<string name="timing_editor_narrative_frame_1">Getting started: timing editor\ntips\n\nLong press here to watch an introduction, then edit its timing to practice</string>
 	<string name="timing_editor_narrative_frame_2">When editing, you record each frame\'s duration in live time\n\nAudio will play as normal, but images and text will be extended until you press %1$s to change frames</string>
 	<string name="timing_editor_narrative_frame_3">If you make a mistake, press %1$s to go back. You can reset timings or cancel your changes anytime\n\nTry it now – select \"%2$s\" from the %3$s menu, then press %4$s to start</string>
 	<string name="timing_editor_narrative_frame_4">Why not use the timing editor to set your own durations for photo captions?\n\nOr, use it with spanning media to match subtitles with background music</string>

MediaUtilities

@@ -1,6 +1,6 @@
 MediaPhone
 ==========
-MediaPhone is an Android storytelling and multimedia narrative application. You can find it on Google Play as [Com-Phone Story Maker](https://play.google.com/store/apps/details?id=ac.robinson.mediaphone). It is also available on [F-Droid](https://f-droid.org/packages/ac.robinson.mediaphone/), [Amazon](https://www.amazon.co.uk/dp/B00C2RMU0M/) and [App Bazaar](appbazaar://details?id=ac.robinson.mediaphone).
+MediaPhone is an Android storytelling and multimedia narrative application. You can find it on Google Play as [Com-Phone Story Maker](https://play.google.com/store/apps/details?id=ac.robinson.mediaphone). It is also available on [F-Droid](https://f-droid.org/packages/ac.robinson.mediaphone/), [Amazon](https://www.amazon.co.uk/dp/B00C2RMU0M/) and [App Bazaar](appbazaar://details?id=ac.robinson.mediaphone), or you can try a [preview in your browser](https://appetize.io/app/ytq8mk02pp86770jzdzzx7d1jw).
 
 What does it do?
 ----------------

README.md

@@ -7,7 +7,7 @@ buildscript {
 	dependencies {
 		// distributionSha256Sum in gradle-wrapper.properties is also required for F-Droid (see distributionUrl version number)
 		// see: https://gradle.org/release-checksums/
-		classpath 'com.android.tools.build:gradle:4.1.2'
+		classpath 'com.android.tools.build:gradle:4.1.3'
 	}
 }
 

build.gradle

@@ -0,0 +1 @@
+- Improved text appearance for frame icons and exported media