Optimze translation layout with specific landscape layout and use of autocomplete fields instead of spinner

Signed-off-by: Andy Scherzinger <info@andy-scherzinger.de>

app/src/main/java/com/nextcloud/talk/translate/TranslateActivity.kt

@@ -133,8 +133,8 @@ class TranslateActivity : BaseActivity() {
     }
 
     private fun enableSpinners(value: Boolean) {
-        binding.fromLanguageSpinner.isEnabled = value
+        binding.fromLanguageInputLayout.isEnabled = value
-        binding.toLanguageSpinner.isEnabled = value
+        binding.toLanguageInputLayout.isEnabled = value
     }
 
     private fun translate(fromLanguage: String?, toLanguage: String) {
@@ -221,13 +221,15 @@ class TranslateActivity : BaseActivity() {
     }
 
     private fun setupSpinners() {
+        viewThemeUtils.material.colorTextInputLayout(binding.fromLanguageInputLayout)
+        viewThemeUtils.material.colorTextInputLayout(binding.toLanguageInputLayout)
         fillSpinners()
 
-        binding.fromLanguageSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
+        binding.fromLanguage.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
             override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
                 if (++check > 1) {
                     val fromLabel: String = getISOFromLanguage(parent.getItemAtPosition(position).toString())
-                    val toLabel: String = getISOFromLanguage(binding.toLanguageSpinner.selectedItem.toString())
+                    val toLabel: String = getISOFromLanguage(binding.fromLanguage.text.toString())
                     Log.i(TAG, "fromLanguageSpinner :: $FROM_LABEL = $fromLabel, $TO_LABEL = $ count: $check")
                     translate(fromLabel, toLabel)
                 }
@@ -238,11 +240,11 @@ class TranslateActivity : BaseActivity() {
             }
         }
 
-        binding.toLanguageSpinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
+        binding.toLanguage.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
             override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
                 if (++check > 2) {
                     val toLabel: String = getISOFromLanguage(parent.getItemAtPosition(position).toString())
-                    val fromLabel: String = getISOFromLanguage(binding.fromLanguageSpinner.selectedItem.toString())
+                    val fromLabel: String = getISOFromLanguage(binding.fromLanguage.text.toString())
                     Log.i(TAG, "toLanguageSpinner :: $FROM_LABEL = $fromLabel, $TO_LABEL = $toLabel count: $check")
                     translate(fromLabel, toLabel)
                 }
@@ -255,16 +257,19 @@ class TranslateActivity : BaseActivity() {
     }
 
     private fun fillSpinners() {
-        binding.fromLanguageSpinner.adapter = ArrayAdapter(
+        binding.fromLanguage.setAdapter(
-            this,
+            ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, fromLanguages)
-            android.R.layout.simple_spinner_dropdown_item,
-            fromLanguages
         )
-        binding.toLanguageSpinner.adapter = ArrayAdapter(
+        if (fromLanguages.isNotEmpty()) {
-            this,
+            binding.fromLanguage.setText(fromLanguages[0])
-            android.R.layout.simple_spinner_dropdown_item,
+        }
-            toLanguages
+
+        binding.toLanguage.setAdapter(
+            ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, toLanguages)
         )
+        if (toLanguages.isNotEmpty()) {
+            binding.toLanguage.setText(toLanguages[0])
+        }
     }
 
     companion object {

app/src/main/res/layout-land/activity_translate.xml

@@ -0,0 +1,145 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Nextcloud Talk application
+  ~
+  ~ @author Julius Linus
+  ~ Copyright (C) 2023 Julius Linus <julius.linus@nextcloud.com>
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU General Public License as published by
+  ~ the Free Software Foundation, either version 3 of the License, or
+  ~ at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License
+  ~ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -->
+<LinearLayout 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:orientation="vertical"
+    android:weightSum="2">
+
+    <com.google.android.material.appbar.AppBarLayout
+        android:id="@+id/translation_appbar"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content">
+
+        <com.google.android.material.appbar.MaterialToolbar
+            android:id="@+id/translation_toolbar"
+            android:layout_width="match_parent"
+            android:layout_height="?attr/actionBarSize"
+            android:background="@color/appbar"
+            android:theme="?attr/actionBarPopupTheme"
+            app:layout_scrollFlags="scroll|enterAlways"
+            app:navigationIconTint="@color/fontAppbar"
+            app:popupTheme="@style/appActionBarPopupMenu"
+            app:titleTextColor="@color/fontAppbar"
+            tools:title="@string/translation" />
+
+    </com.google.android.material.appbar.AppBarLayout>
+
+    <LinearLayout
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_gravity="center"
+        android:orientation="horizontal"
+        android:padding="@dimen/standard_padding">
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/fromLanguageInputLayout"
+            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:hint="@string/translation_from">
+
+            <com.google.android.material.textfield.MaterialAutoCompleteTextView
+                android:id="@+id/fromLanguage"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:inputType="none" />
+
+        </com.google.android.material.textfield.TextInputLayout>
+
+        <ImageView
+            android:layout_width="@dimen/standard_double_margin"
+            android:layout_height="match_parent"
+            android:contentDescription="@null"
+            android:src="@drawable/ic_chevron_right" />
+
+        <com.google.android.material.textfield.TextInputLayout
+            android:id="@+id/toLanguageInputLayout"
+            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_weight="1"
+            android:hint="@string/translation_to">
+
+            <com.google.android.material.textfield.MaterialAutoCompleteTextView
+                android:id="@+id/toLanguage"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:inputType="none" />
+
+        </com.google.android.material.textfield.TextInputLayout>
+
+    </LinearLayout>
+
+    <ScrollView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="horizontal"
+            android:paddingBottom="@dimen/standard_padding">
+
+            <TextView
+                android:id="@+id/original_message_textview"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/standard_margin"
+                android:layout_marginEnd="@dimen/standard_margin"
+                android:layout_weight="1"
+                android:background="@drawable/shape_grouped_incoming_message"
+                android:padding="@dimen/dialog_padding"
+                android:scrollbars="vertical"
+                android:text=""
+                android:textColor="@color/nc_incoming_text_default"
+                android:textSize="@dimen/message_text_size" />
+
+            <TextView
+                android:id="@+id/translated_message_textview"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:layout_marginStart="@dimen/standard_margin"
+                android:layout_marginEnd="@dimen/standard_margin"
+                android:layout_weight="1"
+                android:background="@drawable/shape_grouped_incoming_message"
+                android:padding="@dimen/dialog_padding"
+                android:scrollbars="vertical"
+                android:text=""
+                android:textColor="@color/nc_incoming_text_default"
+                android:textSize="@dimen/message_text_size"
+                android:visibility="visible" />
+
+            <ProgressBar
+                android:id="@+id/progressBar"
+                style="?android:attr/progressBarStyle"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:visibility="gone" />
+
+        </LinearLayout>
+
+    </ScrollView>
+
+</LinearLayout>

app/src/main/res/layout/activity_translate.xml

@@ -41,9 +41,7 @@
             app:navigationIconTint="@color/fontAppbar"
             app:popupTheme="@style/appActionBarPopupMenu"
             app:titleTextColor="@color/fontAppbar"
-            tools:title="">
+            tools:title="@string/translation" />
-
-        </com.google.android.material.appbar.MaterialToolbar>
 
     </com.google.android.material.appbar.AppBarLayout>
 
@@ -51,31 +49,60 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
-        android:orientation="horizontal"
+        android:orientation="vertical"
         android:padding="@dimen/standard_padding">
 
-        <Spinner
+        <com.google.android.material.textfield.TextInputLayout
-            android:id="@+id/fromLanguageSpinner"
+            android:id="@+id/fromLanguageInputLayout"
-            android:layout_width="wrap_content"
+            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
-            android:layout_height="@dimen/min_size_clickable_area"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
             android:layout_weight="1"
-            android:background="@color/grey_200" />
+            android:hint="@string/translation_from">
 
-        <ImageView
+            <com.google.android.material.textfield.MaterialAutoCompleteTextView
-            android:layout_width="@dimen/min_size_clickable_area"
+                android:id="@+id/fromLanguage"
-            android:layout_height="@dimen/min_size_clickable_area"
+                android:layout_width="match_parent"
-            android:contentDescription="@null"
+                android:layout_height="wrap_content"
-            android:src="@drawable/ic_chevron_right" />
+                android:ellipsize="middle"
+                android:inputType="none"
+                android:lines="1"
+                android:popupTheme="@style/ThemeOverlay.AppTheme.PopupMenu" />
 
-        <Spinner
+        </com.google.android.material.textfield.TextInputLayout>
-            android:id="@+id/toLanguageSpinner"
+
-            android:layout_width="wrap_content"
+        <com.google.android.material.textfield.TextInputLayout
-            android:layout_height="@dimen/min_size_clickable_area"
+            android:id="@+id/toLanguageInputLayout"
+            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.ExposedDropdownMenu"
+            android:paddingTop="@dimen/standard_padding"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
             android:layout_weight="1"
-            android:background="@color/grey_200" />
+            android:hint="@string/translation_to">
+
+            <com.google.android.material.textfield.MaterialAutoCompleteTextView
+                android:id="@+id/toLanguage"
+                android:layout_width="match_parent"
+                android:layout_height="wrap_content"
+                android:ellipsize="middle"
+                android:inputType="none"
+                android:lines="1"
+                android:popupTheme="@style/ThemeOverlay.AppTheme.PopupMenu" />
+
+        </com.google.android.material.textfield.TextInputLayout>
 
     </LinearLayout>
 
+    <ScrollView
+        android:layout_width="match_parent"
+        android:layout_height="match_parent"
+        android:layout_marginTop="@dimen/standard_quarter_margin">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:orientation="vertical">
+
             <TextView
                 android:id="@+id/original_message_textview"
                 android:layout_width="match_parent"
@@ -114,4 +141,8 @@
                 android:layout_height="wrap_content"
                 android:visibility="gone" />
 
+        </LinearLayout>
+
+    </ScrollView>
+
 </LinearLayout>

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

@@ -658,6 +658,8 @@ How to translate with transifex:
     <string name="scroll_to_bottom">Scroll to bottom</string>
     <string name="translate">Translate</string>
     <string name="translation">Translation</string>
+    <string name="translation_from">From</string>
+    <string name="translation_to">To</string>
     <string name="translation_detect_language">Detect language</string>
     <string name="translation_device_settings">Device settings</string>
     <string name="translation_error_title">Translation failed</string>