updated the Small MainView to use the Material 2 theme

app/src/main/AndroidManifest.xml

@@ -31,7 +31,8 @@
 		<activity
 			android:label="@string/app_name_short"
 			android:name="io.github.sspanak.tt9.preferences.PreferencesActivity"
-			android:exported="true">
+			android:exported="true"
+			android:theme="@style/TTheme.Preferences">
 			<intent-filter>
 				<action android:name="android.intent.action.MAIN"/>
 				<category android:name="android.intent.category.LAUNCHER" />

app/src/main/java/io/github/sspanak/tt9/ime/UiHandler.java

@@ -51,8 +51,7 @@ abstract class UiHandler extends AbstractHandler {
 
 	protected void setDarkTheme() {
 		mainView.setDarkTheme(settings.getDarkTheme());
-		statusBar.setDarkTheme(settings.getDarkTheme());
+		getSuggestionOps().setDarkTheme();
-		getSuggestionOps().setDarkTheme(settings.getDarkTheme());
 	}
 
 

app/src/main/java/io/github/sspanak/tt9/ime/helpers/SuggestionOps.java

@@ -164,7 +164,7 @@ public class SuggestionOps {
 	}
 
 
-	public void setDarkTheme(boolean yes) {
+	public void setDarkTheme() {
-		suggestionBar.setDarkTheme(yes);
+		suggestionBar.setDarkTheme();
 	}
 }

app/src/main/java/io/github/sspanak/tt9/ui/main/BaseMainLayout.java

@@ -1,5 +1,6 @@
 package io.github.sspanak.tt9.ui.main;
 
+import android.content.res.Configuration;
 import android.os.Build;
 import android.view.ContextThemeWrapper;
 import android.view.View;
@@ -28,17 +29,7 @@ abstract class BaseMainLayout {
 	}
 
 
-	/** setDarkTheme
+	@Deprecated
-	 * <p>Changes the main view colors according to the theme.</p>
-	 *
-	 * <p>We need to do this manually, instead of relying on the Context to resolve the appropriate colors,
-	 * because this View is part of the main service View. And service Views are always locked to the
-	 * system context and theme.</p>
-	 *
-	 * <p>More info:
-	 * <a href="https://stackoverflow.com/questions/72382886/system-applies-night-mode-to-views-added-in-service-type-application-overlay">...</a>
-	 * </p>
-	 */
 	void setDarkTheme(boolean dark) {}
 
 
@@ -50,13 +41,27 @@ abstract class BaseMainLayout {
 	@NonNull protected ArrayList<SoftKey> getKeys() { return keys; }
 
 
+	/**
+	 * getThemedContext
+	 * 1. Overrides the system dark/light them with the one in our settings.
+	 * 2. Fixes this error log: "View class SoftKeyXXX is an AppCompat widget that can only be used
+	 * with a Theme.AppCompat theme (or descendant)."
+	 */
+	private ContextThemeWrapper getThemedContext() {
+			int nightModeFlag = tt9.getSettings().getDarkTheme() ? Configuration.UI_MODE_NIGHT_YES : Configuration.UI_MODE_NIGHT_NO;
+			Configuration config = new Configuration(tt9.getResources().getConfiguration());
+			config.uiMode = nightModeFlag | (config.uiMode & ~Configuration.UI_MODE_NIGHT_MASK);
+
+			ContextThemeWrapper themedCtx = new ContextThemeWrapper(tt9, R.style.TTheme);
+			themedCtx.applyOverrideConfiguration(config);
+
+			return themedCtx;
+	}
+
+
 	protected View getView() {
 		if (view == null) {
-			// Adding the ContextThemeWrapper fixes this error log:
+			view = View.inflate(getThemedContext(), xml, null);
-			// "View class SoftKeyXXX is an AppCompat widget that can only be used with a
-			// Theme.AppCompat theme (or descendant)."
-			ContextThemeWrapper themedCtx = new ContextThemeWrapper(tt9, R.style.TTheme);
-			view = View.inflate(themedCtx, xml, null);
 		}
 
 		return view;

app/src/main/java/io/github/sspanak/tt9/ui/main/MainLayoutSmall.java

@@ -1,6 +1,5 @@
 package io.github.sspanak.tt9.ui.main;
 
-import android.view.View;
 import android.widget.LinearLayout;
 
 import androidx.annotation.NonNull;
@@ -23,7 +22,7 @@ class MainLayoutSmall extends MainLayoutTray {
 			height = super.getHeight(forceRecalculate);
 
 			if (!isCommandPaletteShown() && !isTextEditingPaletteShown()) {
-				height += tt9.getResources().getDimensionPixelSize(R.dimen.soft_key_height);
+				height += tt9.getResources().getDimensionPixelSize(R.dimen.main_small_key_wrapper_height);
 			}
 		}
 
@@ -63,19 +62,4 @@ class MainLayoutSmall extends MainLayoutTray {
 		}
 		return keys;
 	}
-
-	@Override
-	protected ArrayList<View> getSeparators() {
-		ArrayList<View> separators = super.getSeparators();
-		separators.add(view.findViewById(R.id.main_separator_left));
-		separators.add(view.findViewById(R.id.main_separator_right));
-
-		return separators;
-	}
-
-	@Override
-	void setDarkTheme(boolean dark) {
-		super.setDarkTheme(dark);
-		view.findViewById(R.id.main_soft_keys).setBackground(getBackgroundColor(view, dark));
-	}
 }

app/src/main/java/io/github/sspanak/tt9/ui/main/MainLayoutTray.java

@@ -1,15 +1,11 @@
 package io.github.sspanak.tt9.ui.main;
 
 import android.content.res.Resources;
-import android.graphics.drawable.Drawable;
-import android.view.View;
 import android.widget.LinearLayout;
 
 import androidx.annotation.NonNull;
-import androidx.core.content.ContextCompat;
 
 import java.util.ArrayList;
-import java.util.Arrays;
 
 import io.github.sspanak.tt9.R;
 import io.github.sspanak.tt9.ime.TraditionalT9;
@@ -25,10 +21,10 @@ class MainLayoutTray extends BaseMainLayout {
 	int getHeight(boolean forceRecalculate) {
 		if (height <= 0 || forceRecalculate) {
 			Resources resources = tt9.getResources();
-			height = resources.getDimensionPixelSize(R.dimen.candidate_height) + getBottomInsetSize();
+			height = resources.getDimensionPixelSize(R.dimen.status_bar_height) + getBottomInsetSize();
 
 			if (isCommandPaletteShown() || isTextEditingPaletteShown()) {
-				height += resources.getDimensionPixelSize(R.dimen.numpad_key_height);
+				height += resources.getDimensionPixelSize(R.dimen.main_small_key_text_editing_height);
 			}
 		}
 
@@ -45,13 +41,11 @@ class MainLayoutTray extends BaseMainLayout {
 		view.findViewById(R.id.text_editing_container).setVisibility(LinearLayout.GONE);
 		view.findViewById(R.id.main_soft_keys).setVisibility(LinearLayout.GONE);
 		view.findViewById(R.id.main_command_keys).setVisibility(LinearLayout.VISIBLE);
-
 		getHeight(true);
 	}
 
 	void hideCommandPalette() {
 		view.findViewById(R.id.main_command_keys).setVisibility(LinearLayout.GONE);
-
 		getHeight(true);
 	}
 
@@ -64,14 +58,12 @@ class MainLayoutTray extends BaseMainLayout {
 		view.findViewById(R.id.main_command_keys).setVisibility(LinearLayout.GONE);
 		view.findViewById(R.id.main_soft_keys).setVisibility(LinearLayout.GONE);
 		view.findViewById(R.id.text_editing_container).setVisibility(LinearLayout.VISIBLE);
-
 		getHeight(true);
 	}
 
 	@Override
 	void hideTextEditingPalette() {
 		view.findViewById(R.id.text_editing_container).setVisibility(LinearLayout.GONE);
-
 		getHeight(true);
 	}
 
@@ -80,43 +72,6 @@ class MainLayoutTray extends BaseMainLayout {
 		return view != null && view.findViewById(R.id.text_editing_container).getVisibility() == LinearLayout.VISIBLE;
 	}
 
-	protected Drawable getBackgroundColor(@NonNull View contextView, boolean dark) {
-		return ContextCompat.getDrawable(
-			contextView.getContext(),
-			dark ? R.drawable.button_background_dark : R.drawable.button_background
-		);
-	}
-
-	protected Drawable getSeparatorColor(@NonNull View contextView, boolean dark) {
-		return ContextCompat.getDrawable(
-			contextView.getContext(),
-			dark ? R.drawable.button_separator_dark : R.drawable.button_separator
-		);
-	}
-
-	@Override
-	void setDarkTheme(boolean dark) {
-		if (view == null) {
-			return;
-		}
-
-		// background
-		view.findViewById(R.id.main_command_keys).setBackground(getBackgroundColor(view, dark));
-		view.findViewById(R.id.text_editing_container).setBackground(getBackgroundColor(view, dark));
-
-		// text
-		for (SoftKey key : getKeys()) {
-			key.setDarkTheme(dark);
-		}
-
-		// separators
-		for (View separator : getSeparators()) {
-			if (separator != null) {
-				separator.setBackground(getSeparatorColor(separator, dark));
-			}
-		}
-	}
-
 	@Override
 	void render() {
 		getView();
@@ -136,24 +91,4 @@ class MainLayoutTray extends BaseMainLayout {
 		}
 		return keys;
 	}
-
-	protected ArrayList<View> getSeparators() {
-		return new ArrayList<>(Arrays.asList(
-			view.findViewById(R.id.separator_top),
-			view.findViewById(R.id.separator_candidates_bottom),
-			view.findViewById(R.id.separator_1_1),
-			view.findViewById(R.id.separator_1_2),
-			view.findViewById(R.id.separator_2_1),
-			view.findViewById(R.id.separator_2_2),
-			view.findViewById(R.id.separator_10_1),
-			view.findViewById(R.id.separator_10_2),
-			view.findViewById(R.id.separator_10_2),
-			view.findViewById(R.id.separator_10_3),
-			view.findViewById(R.id.separator_10_4),
-			view.findViewById(R.id.separator_10_5),
-			view.findViewById(R.id.separator_10_6),
-			view.findViewById(R.id.separator_10_7),
-			view.findViewById(R.id.separator_10_8)
-		));
-	}
 }

app/src/main/java/io/github/sspanak/tt9/ui/main/keys/SoftKey.java

@@ -2,21 +2,13 @@ package io.github.sspanak.tt9.ui.main.keys;
 
 import android.content.Context;
 import android.graphics.Paint;
-import android.graphics.Typeface;
 import android.os.Handler;
 import android.os.Looper;
 import android.text.SpannableStringBuilder;
-import android.text.Spanned;
-import android.text.style.ForegroundColorSpan;
-import android.text.style.RelativeSizeSpan;
-import android.text.style.StyleSpan;
 import android.util.AttributeSet;
 import android.view.MotionEvent;
 import android.view.View;
 
-import androidx.core.content.ContextCompat;
-
-import io.github.sspanak.tt9.R;
 import io.github.sspanak.tt9.ime.TraditionalT9;
 import io.github.sspanak.tt9.preferences.settings.SettingsStore;
 import io.github.sspanak.tt9.ui.Vibration;
@@ -24,7 +16,7 @@ import io.github.sspanak.tt9.util.Logger;
 import io.github.sspanak.tt9.util.Text;
 import io.github.sspanak.tt9.util.chars.Characters;
 
-public class SoftKey extends androidx.appcompat.widget.AppCompatButton implements View.OnTouchListener, View.OnLongClickListener {
+public class SoftKey extends com.google.android.material.button.MaterialButton implements View.OnTouchListener, View.OnLongClickListener {
 	private final String LOG_TAG = getClass().getSimpleName();
 
 	protected TraditionalT9 tt9;
@@ -168,11 +160,6 @@ public class SoftKey extends androidx.appcompat.widget.AppCompatButton implement
 
 
 	public void setDarkTheme(boolean darkEnabled) {
-		int textColor = ContextCompat.getColor(
-			getContext(),
-			darkEnabled ? R.color.dark_button_text : R.color.button_text
-		);
-		setTextColor(textColor);
 	}
 
 
@@ -223,7 +210,6 @@ public class SoftKey extends androidx.appcompat.widget.AppCompatButton implement
 				|| (new Text(getText().toString()).startsWithGraphic() && !new Paint().hasGlyph(getText().toString()))
 			)
 		) {
-			setTextSize(SettingsStore.SOFT_KEY_TITLE_SIZE);
 			return getContext().getString(getNoEmojiTitle());
 		} else {
 			return getTitle();
@@ -275,37 +261,10 @@ public class SoftKey extends androidx.appcompat.widget.AppCompatButton implement
 
 		SpannableStringBuilder sb = new SpannableStringBuilder(title);
 		if (subtitle != null) {
-			sb.append('\n');
+			sb.append(" ");
 			sb.append(subtitle);
 		}
 
-		// title styles
-		int titleLength = title.length();
-		float titleRelativeSize = subtitle == null ? getSingleLabelRelativeSize() : getTitleRelativeSize();
-
-		sb.setSpan(new RelativeSizeSpan(titleRelativeSize), 0, titleLength, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
-		if (subtitle != null && !new Text(title).startsWithGraphic()) {
-			sb.setSpan(new StyleSpan(Typeface.ITALIC), 0, titleLength, Spanned.SPAN_EXCLUSIVE_INCLUSIVE);
-		}
-
-		if (isTitleDisabled) {
-			sb.setSpan(new ForegroundColorSpan(0x44000000), 0, titleLength, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
-		}
-
-		if (subtitle == null) {
-			setText(sb);
-			return;
-		}
-
-		// subtitle styles
-		float padding = SettingsStore.SOFT_KEY_COMPLEX_LABEL_TITLE_RELATIVE_SIZE;
-		if (titleRelativeSize == SettingsStore.SOFT_KEY_COMPLEX_LABEL_ARABIC_TITLE_RELATIVE_SIZE) {
-			padding /= 10;
-		}
-
-		sb.setSpan(new RelativeSizeSpan(padding), titleLength, titleLength + 1, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
-		sb.setSpan(new RelativeSizeSpan(getSubTitleRelativeSize()), titleLength + 1, sb.length(), Spanned.SPAN_INCLUSIVE_INCLUSIVE);
-
 		setText(sb);
 	}
 

app/src/main/java/io/github/sspanak/tt9/ui/main/keys/SoftKeyF3.java

@@ -16,11 +16,6 @@ public class SoftKeyF3 extends SoftKeyFn {
 		super(context, attrs, defStyleAttr);
 	}
 
-	@Override
-	protected String getSubTitle() {
-		return "🎤";
-	}
-
 	@Override
 	public void render() {
 		setVisibility(tt9 != null && tt9.isVoiceInputMissing() ? GONE : VISIBLE);

app/src/main/java/io/github/sspanak/tt9/ui/main/keys/SoftKeyF5.java

@@ -3,9 +3,6 @@ package io.github.sspanak.tt9.ui.main.keys;
 import android.content.Context;
 import android.util.AttributeSet;
 
-import io.github.sspanak.tt9.R;
-import io.github.sspanak.tt9.util.chars.Characters;
-
 public class SoftKeyF5 extends SoftKeyFn {
 	public SoftKeyF5(Context context) {
 		super(context);
@@ -19,11 +16,6 @@ public class SoftKeyF5 extends SoftKeyFn {
 		super(context, attrs, defStyleAttr);
 	}
 
-	@Override
-	protected String getSubTitle() {
-		return Characters.noEmojiSupported() ? getTextSubTitle(R.string.virtual_key_text_editing) : "✂";
-	}
-
 	@Override
 	public void render() {
 		setVisibility(tt9 != null && tt9.isInputLimited() ? GONE : VISIBLE);

app/src/main/java/io/github/sspanak/tt9/ui/main/keys/SoftKeyFn.java

@@ -1,79 +1,18 @@
 package io.github.sspanak.tt9.ui.main.keys;
 
 import android.content.Context;
-import android.content.res.ColorStateList;
-import android.graphics.drawable.Drawable;
-import android.os.Build;
 import android.util.AttributeSet;
 
-import androidx.core.graphics.drawable.DrawableCompat;
-import androidx.core.widget.TextViewCompat;
-
 import io.github.sspanak.tt9.R;
-import io.github.sspanak.tt9.util.chars.Characters;
 
 public class SoftKeyFn extends SoftKeyNumber {
 	public SoftKeyFn(Context context) { super(context);}
 	public SoftKeyFn(Context context, AttributeSet attrs) { super(context, attrs);}
 	public SoftKeyFn(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);}
 
-	@Override protected float getSubTitleRelativeSize() { return super.getSubTitleRelativeSize() * 0.8f; }
+	@Override protected void handleHold() { preventRepeat(); }
-
+	@Override protected String getTitle() { return getNumber(getId()) + ""; }
-
+	@Override protected String getSubTitle() { return null; }
-	@Override protected void handleHold() {
-		preventRepeat();
-	}
-
-
-	@Override
-	public void setDarkTheme(boolean darkEnabled) {
-		super.setDarkTheme(darkEnabled);
-
-		final int color = darkEnabled ? R.color.dark_button_text : R.color.button_text;
-
-		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
-			TextViewCompat.setCompoundDrawableTintList(this, ColorStateList.valueOf(getContext().getColor(color)));
-		} else {
-			setDarkThemeLegacy(color);
-		}
-	}
-
-
-	private void setDarkThemeLegacy(int color) {
-		Drawable[] icons = getCompoundDrawables();
-
-		if (icons.length >= 4 && icons[3] != null) {
-			Drawable icon = DrawableCompat.wrap(icons[3]);
-			DrawableCompat.setTint(icon, getResources().getColor(color));
-			setCompoundDrawables(null, null, null, icon);
-		}
-	}
-
-
-	protected String getTextSubTitle(int resId) {
-		return getContext().getString(resId);
-	}
-
-
-	@Override
-	protected String getTitle() {
-		return getNumber(getId()) + "";
-	}
-
-
-	@Override
-	protected String getSubTitle() {
-		boolean noIconSupport = Characters.noEmojiSupported();
-		int keyId = getId();
-
-		// command palette
-		if (keyId == R.id.soft_key_1) return noIconSupport ? getTextSubTitle(R.string.virtual_key_settings) : "⚙";
-		if (keyId == R.id.soft_key_2) return "＋";
-		if (keyId == R.id.soft_key_8) return noIconSupport ? getTextSubTitle(R.string.virtual_key_change_keyboard) : "⌨";
-
-		return null;
-	}
-
 
 	@Override
 	protected int getNumber(int keyId) {

app/src/main/java/io/github/sspanak/tt9/ui/tray/StatusBar.java

@@ -54,28 +54,6 @@ public class StatusBar {
 	}
 
 
-	public void setDarkTheme(boolean darkTheme) {
-		if (statusView == null) {
-			return;
-		}
-
-		Context context = statusView.getContext();
-
-		int backgroundColor = ContextCompat.getColor(
-			context,
-			darkTheme ? R.color.dark_candidate_background : R.color.candidate_background
-		);
-		int color = ContextCompat.getColor(
-			context,
-			darkTheme ? R.color.dark_candidate_color : R.color.candidate_color
-		);
-
-		statusView.setBackgroundColor(backgroundColor);
-		statusView.setTextColor(color);
-		this.render();
-	}
-
-
 	private void render() {
 		if (statusView == null) {
 			return;

app/src/main/java/io/github/sspanak/tt9/ui/tray/SuggestionsAdapter.java

@@ -24,6 +24,7 @@ public class SuggestionsAdapter extends RecyclerView.Adapter<SuggestionsAdapter.
 
 	private int colorDefault;
 	private int colorHighlight;
+	private int backgroundHighlight;
 	private int selectedIndex = 0;
 
 
@@ -46,8 +47,8 @@ public class SuggestionsAdapter extends RecyclerView.Adapter<SuggestionsAdapter.
 	@Override
 	public void onBindViewHolder(ViewHolder holder, int position) {
 		holder.suggestionItem.setText(mSuggestions.get(position));
-		holder.suggestionItem.setTextColor(colorDefault);
+		holder.suggestionItem.setTextColor(selectedIndex == position ? colorHighlight : colorDefault);
-		holder.suggestionItem.setBackgroundColor(selectedIndex == position ? colorHighlight : Color.TRANSPARENT);
+		holder.suggestionItem.setBackgroundColor(selectedIndex == position ? backgroundHighlight : Color.TRANSPARENT);
 		holder.suggestionItem.setOnClickListener(v -> onItemClick.accept(holder.getAdapterPosition()));
 	}
 
@@ -81,6 +82,11 @@ public class SuggestionsAdapter extends RecyclerView.Adapter<SuggestionsAdapter.
 	}
 
 
+	public void setBackgroundHighlight(int backgroundHighlight) {
+		this.backgroundHighlight = backgroundHighlight;
+	}
+
+
 	public class ViewHolder extends RecyclerView.ViewHolder {
 		final TextView suggestionItem;
 

app/src/main/java/io/github/sspanak/tt9/ui/tray/SuggestionsBar.java

@@ -29,10 +29,10 @@ public class SuggestionsBar {
 	private final String STEM_PUNCTUATION_VARIATION_PREFIX = "​";
 	@NonNull private String stem = "";
 
+	private int backgroundColor = Color.TRANSPARENT;
 	private double lastClickTime = 0;
-	private final List<String> suggestions = new ArrayList<>();
 	protected int selectedIndex = 0;
-	private boolean isDarkThemeEnabled = false;
+	private final List<String> suggestions = new ArrayList<>();
 
 	private final ResizableMainView mainView;
 	private final Runnable onItemClick;
@@ -86,7 +86,7 @@ public class SuggestionsBar {
 		);
 		mView.setAdapter(mSuggestionsAdapter);
 
-		setDarkTheme(settings.getDarkTheme());
+		setDarkTheme();
 	}
 
 
@@ -280,28 +280,21 @@ public class SuggestionsBar {
 
 	/**
 	 * setDarkTheme
-	 * Changes the suggestion colors according to the theme.
+	 * Changes the suggestion colors according to the theme. Due to the fact we change the colors
-	 *
+	 * dynamically based on the selected index and whether the suggestions are empty or not, we
-	 * We need to do this manually, instead of relying on the Context to resolve the appropriate colors,
+	 * need to set them manually.
-	 * because this View is part of the main service View. And service Views are always locked to the
-	 * system context and theme.
-	 *
-	 * More info:
-	 * <a href="https://stackoverflow.com/questions/72382886/system-applies-night-mode-to-views-added-in-service-type-application-overlay">...</a>
 	 */
-	public void setDarkTheme(boolean darkEnabled) {
+	public void setDarkTheme() {
 		if (mView == null) {
 			return;
 		}
 
-		isDarkThemeEnabled = darkEnabled;
 		Context context = mView.getContext();
 
-		int defaultColor = darkEnabled ? R.color.dark_candidate_color : R.color.candidate_color;
+		backgroundColor = ContextCompat.getColor(context, R.color.keyboard_background);
-		int highlightColor = darkEnabled ? R.color.dark_candidate_selected : R.color.candidate_selected;
+		mSuggestionsAdapter.setColorDefault(ContextCompat.getColor(context, R.color.keyboard_text_color));
-
+		mSuggestionsAdapter.setColorHighlight(ContextCompat.getColor(context, R.color.suggestion_selected_color));
-		mSuggestionsAdapter.setColorDefault(ContextCompat.getColor(context, defaultColor));
+		mSuggestionsAdapter.setBackgroundHighlight(ContextCompat.getColor(context, R.color.suggestion_selected_background));
-		mSuggestionsAdapter.setColorHighlight(ContextCompat.getColor(context, highlightColor));
 
 		setBackground(suggestions);
 	}
@@ -323,12 +316,7 @@ public class SuggestionsBar {
 			return;
 		}
 
-		int color = ContextCompat.getColor(
+		mView.setBackgroundColor(backgroundColor);
-			mView.getContext(),
-			isDarkThemeEnabled ? R.color.dark_candidate_background : R.color.candidate_background
-		);
-
-		mView.setBackgroundColor(color);
 	}
 
 

app/src/main/res/drawable/button_background.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-android:shape="rectangle">
-	<gradient
-		android:startColor="#989A98"
-		android:endColor="#E7EBE7"
-		android:angle="90" />
-</shape>

app/src/main/res/drawable/button_background_dark.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-android:shape="rectangle">
-	<!--  Gradient Bg for button -->
-	<gradient
-		android:startColor="#181C18"
-		android:endColor="#6B6D6B"
-		android:angle="90" />
-</shape>

app/src/main/res/drawable/button_separator.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-android:shape="rectangle">
-	<gradient
-		android:startColor="#686C68"
-		android:endColor="#B8BCB8"
-		android:angle="90" />
-</shape>

app/src/main/res/drawable/button_separator_dark.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android"
-android:shape="rectangle">
-	<gradient
-		android:startColor="#2E322E"
-		android:endColor="#878B87"
-		android:angle="90" />
-</shape>

app/src/main/res/drawable/ic_fn_add_word.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+	<path android:fillColor="@android:color/white" android:pathData="M480,840Q463,840 451.5,828.5Q440,817 440,800L440,520L160,520Q143,520 131.5,508.5Q120,497 120,480Q120,463 131.5,451.5Q143,440 160,440L440,440L440,160Q440,143 451.5,131.5Q463,120 480,120Q497,120 508.5,131.5Q520,143 520,160L520,440L800,440Q817,440 828.5,451.5Q840,463 840,480Q840,497 828.5,508.5Q817,520 800,520L520,520L520,800Q520,817 508.5,828.5Q497,840 480,840Z"/>
+</vector>

app/src/main/res/drawable/ic_fn_next_keyboard.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+	<path android:fillColor="@android:color/white" android:pathData="M160,880Q127,880 103.5,856.5Q80,833 80,800L80,400Q80,367 103.5,343.5Q127,320 160,320L800,320Q833,320 856.5,343.5Q880,367 880,400L880,800Q880,833 856.5,856.5Q833,880 800,880L160,880ZM160,800L800,800Q800,800 800,800Q800,800 800,800L800,400Q800,400 800,400Q800,400 800,400L160,400Q160,400 160,400Q160,400 160,400L160,800Q160,800 160,800Q160,800 160,800ZM360,760L600,760Q617,760 628.5,748.5Q640,737 640,720Q640,703 628.5,691.5Q617,680 600,680L360,680Q343,680 331.5,691.5Q320,703 320,720Q320,737 331.5,748.5Q343,760 360,760ZM160,800Q160,800 160,800Q160,800 160,800L160,400Q160,400 160,400Q160,400 160,400L160,400Q160,400 160,400Q160,400 160,400L160,800Q160,800 160,800Q160,800 160,800ZM375,160L400,160Q417,160 428.5,171.5Q440,183 440,200Q440,217 428.5,228.5Q417,240 400,240L280,240Q263,240 251.5,228.5Q240,217 240,200L240,80Q240,63 251.5,51.5Q263,40 280,40Q297,40 308.5,51.5Q320,63 320,80L320,101Q352,72 393,56Q434,40 480,40Q560,40 623,87.5Q686,135 709,210Q713,223 702,231.5Q691,240 675,240Q659,240 645,234Q631,228 625,214Q605,172 566.5,146Q528,120 480,120Q450,120 423,130.5Q396,141 375,160ZM240,520Q257,520 268.5,508.5Q280,497 280,480Q280,463 268.5,451.5Q257,440 240,440Q223,440 211.5,451.5Q200,463 200,480Q200,497 211.5,508.5Q223,520 240,520ZM360,520Q377,520 388.5,508.5Q400,497 400,480Q400,463 388.5,451.5Q377,440 360,440Q343,440 331.5,451.5Q320,463 320,480Q320,497 331.5,508.5Q343,520 360,520ZM480,520Q497,520 508.5,508.5Q520,497 520,480Q520,463 508.5,451.5Q497,440 480,440Q463,440 451.5,451.5Q440,463 440,480Q440,497 451.5,508.5Q463,520 480,520ZM600,520Q617,520 628.5,508.5Q640,497 640,480Q640,463 628.5,451.5Q617,440 600,440Q583,440 571.5,451.5Q560,463 560,480Q560,497 571.5,508.5Q583,520 600,520ZM720,520Q737,520 748.5,508.5Q760,497 760,480Q760,463 748.5,451.5Q737,440 720,440Q703,440 691.5,451.5Q680,463 680,480Q680,497 691.5,508.5Q703,520 720,520ZM240,640Q257,640 268.5,628.5Q280,617 280,600Q280,583 268.5,571.5Q257,560 240,560Q223,560 211.5,571.5Q200,583 200,600Q200,617 211.5,628.5Q223,640 240,640ZM360,640Q377,640 388.5,628.5Q400,617 400,600Q400,583 388.5,571.5Q377,560 360,560Q343,560 331.5,571.5Q320,583 320,600Q320,617 331.5,628.5Q343,640 360,640ZM480,640Q497,640 508.5,628.5Q520,617 520,600Q520,583 508.5,571.5Q497,560 480,560Q463,560 451.5,571.5Q440,583 440,600Q440,617 451.5,628.5Q463,640 480,640ZM600,640Q617,640 628.5,628.5Q640,617 640,600Q640,583 628.5,571.5Q617,560 600,560Q583,560 571.5,571.5Q560,583 560,600Q560,617 571.5,628.5Q583,640 600,640ZM680,600Q680,617 691.5,628.5Q703,640 720,640Q737,640 748.5,628.5Q760,617 760,600Q760,583 748.5,571.5Q737,560 720,560Q703,560 691.5,571.5Q680,583 680,600Z"/>
+</vector>

app/src/main/res/drawable/ic_fn_settings.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+	<path android:fillColor="@android:color/white" android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z"/>
+</vector>

app/src/main/res/drawable/ic_fn_voice.xml

@@ -0,0 +1,3 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp">
+	<path android:fillColor="@android:color/white" android:pathData="M12,14c1.66,0 2.99,-1.34 2.99,-3L15,5c0,-1.66 -1.34,-3 -3,-3S9,3.34 9,5v6c0,1.66 1.34,3 3,3zM17.3,11c0,3 -2.54,5.1 -5.3,5.1S6.7,14 6.7,11L5,11c0,3.41 2.72,6.23 6,6.72L11,21h2v-3.28c3.28,-0.48 6,-3.3 6,-6.72h-1.7z"/>
+</vector>

app/src/main/res/drawable/suggestion_separator.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
-<shape xmlns:android="http://schemas.android.com/apk/res/android" >
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-	<size android:width="1px" />
+    <item android:top="2dp" android:bottom="2dp"> <!-- padding -->
-	<solid android:color="@color/candidate_separator" />
+        <shape>
-</shape>
+            <size android:width="1dp" />
+            <solid android:color="@color/suggestion_separator" />
+        </shape>
+    </item>
+</layer-list>

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

@@ -40,7 +40,7 @@
 					android:layout_width="@dimen/numpad_arrow_key_width"
 					android:layout_height="match_parent"
 					android:text="@string/key_dpad_left"
-					android:textSize="@dimen/soft_key_icon_size" />
+					android:textSize="@dimen/main_small_key_icon_size" />
 
 				<View
 					android:id="@+id/separator_candidates_1"
@@ -79,7 +79,7 @@
 					android:layout_width="@dimen/numpad_arrow_key_width"
 					android:layout_height="match_parent"
 					android:text="@string/key_dpad_right"
-					android:textSize="@dimen/soft_key_icon_size" />
+					android:textSize="@dimen/main_small_key_icon_size" />
 
 			</LinearLayout>
 

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

@@ -2,6 +2,7 @@
 <LinearLayout
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	xmlns:tools="http://schemas.android.com/tools"
+	style="@style/TTheme.Keyboard"
 	android:layout_width="match_parent"
 	android:layout_height="wrap_content"
 	android:orientation="vertical">
@@ -11,46 +12,34 @@
 		style="@style/numRowSeparator" />
 
 	<FrameLayout
-		android:layout_width="fill_parent"
+		style="@style/TTheme.MainSmall.StatusBar.Wrapper"
-		android:layout_height="@dimen/candidate_height"
 		android:defaultFocusHighlightEnabled="false"
 		android:focusable="false"
 		android:focusableInTouchMode="false">
 
 		<TextView
 			android:id="@+id/status_bar"
-			android:layout_width="match_parent"
+			style="@style/TTheme.MainSmall.StatusBar.Status"
-			android:layout_height="match_parent"
 			android:defaultFocusHighlightEnabled="false"
 			android:focusable="false"
 			android:focusableInTouchMode="false"
-			android:gravity="center"
-			android:textStyle="italic"
 			tools:text="@tools:sample/lorem" />
 
 		<androidx.recyclerview.widget.RecyclerView
 			android:id="@+id/suggestions_bar"
-			android:layout_width="match_parent"
+			style="@style/TTheme.MainSmall.StatusBar.SuggestionList"
-			android:layout_height="match_parent"
 			android:defaultFocusHighlightEnabled="false"
 			android:focusable="false"
-			android:focusableInTouchMode="false"
+			android:focusableInTouchMode="false" />
-			android:gravity="center_vertical"
-			android:orientation="horizontal"
-			android:scrollbars="none" />
 
 	</FrameLayout>
 
-	<View
-		android:id="@+id/separator_candidates_bottom"
-		style="@style/numRowSeparator" />
-
 	<include
 		layout="@layout/panel_small_function_keys"
 		android:id="@+id/main_soft_keys" />
 
 	<include
-		layout="@layout/panel_command_palette"
+		layout="@layout/panel_small_command_palette"
 		android:id="@+id/main_command_keys"
 		android:visibility="gone" />
 

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

@@ -1,65 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<LinearLayout
-	xmlns:android="http://schemas.android.com/apk/res/android"
-	xmlns:tools="http://schemas.android.com/tools"
-	tools:showIn="@layout/main_small"
-	android:layout_width="match_parent"
-	android:layout_height="wrap_content"
-	android:orientation="horizontal">
-
-	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
-		android:id="@+id/soft_key_1"
-		style="@android:style/Widget.Holo.Button.Borderless"
-		android:layout_width="0dp"
-		android:layout_height="@dimen/numpad_key_height"
-		android:layout_weight="1"
-		android:textSize="@dimen/soft_key_icon_size" />
-
-	<View
-		android:id="@+id/separator_1_1"
-		style="@style/numSeparator" />
-
-	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
-		android:id="@+id/soft_key_2"
-		style="@android:style/Widget.Holo.Button.Borderless"
-		android:layout_width="0dp"
-		android:layout_height="@dimen/numpad_key_height"
-		android:layout_weight="1"
-		android:textSize="@dimen/soft_key_icon_size" />
-
-	<View
-		android:id="@+id/separator_1_2"
-		style="@style/numSeparator" />
-
-	<io.github.sspanak.tt9.ui.main.keys.SoftKeyF3
-		android:id="@+id/soft_key_3"
-		style="@android:style/Widget.Holo.Button.Borderless"
-		android:layout_width="0dp"
-		android:layout_height="@dimen/numpad_key_height"
-		android:layout_weight="1"
-		android:textSize="@dimen/soft_key_icon_size" />
-
-	<View
-		android:id="@+id/separator_2_1"
-		style="@style/numSeparator" />
-
-	<io.github.sspanak.tt9.ui.main.keys.SoftKeyF5
-		android:id="@+id/soft_key_5"
-		style="@android:style/Widget.Holo.Button.Borderless"
-		android:layout_width="0dp"
-		android:layout_height="@dimen/numpad_key_height"
-		android:layout_weight="1"
-		android:textSize="@dimen/soft_key_icon_size" />
-
-	<View
-		android:id="@+id/separator_2_2"
-		style="@style/numSeparator" />
-
-	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
-		android:id="@+id/soft_key_8"
-		style="@android:style/Widget.Holo.Button.Borderless"
-		android:layout_width="0dp"
-		android:layout_height="@dimen/numpad_key_height"
-		android:layout_weight="1"
-		android:textSize="@dimen/soft_key_icon_size" />
-</LinearLayout>

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

@@ -21,7 +21,7 @@
 			android:layout_height="match_parent"
 			android:layout_weight="@dimen/numpad_function_key_layout_weight"
 			android:text="⚙"
-			android:textSize="@dimen/soft_key_icon_size" />
+			android:textSize="@dimen/main_small_key_icon_size" />
 
 		<View
 			android:id="@+id/separator_1_1"
@@ -46,7 +46,7 @@
 			android:layout_width="0dp"
 			android:layout_height="match_parent"
 			android:layout_weight="@dimen/numpad_function_key_layout_weight"
-			android:textSize="@dimen/soft_key_icon_size" />
+			android:textSize="@dimen/main_small_key_icon_size" />
 
 	</LinearLayout>
 
@@ -63,7 +63,7 @@
 			android:layout_width="0dp"
 			android:layout_height="match_parent"
 			android:layout_weight="@dimen/numpad_function_key_layout_weight"
-			android:textSize="@dimen/soft_key_icon_size" />
+			android:textSize="@dimen/main_small_key_icon_size" />
 
 		<View
 			android:id="@+id/separator_2_1"

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

@@ -8,7 +8,7 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_dpad_left"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
@@ -19,7 +19,7 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_txt_select_none"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
@@ -30,6 +30,6 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_dpad_right"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 </merge>

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

@@ -8,7 +8,7 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_txt_word_back"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
@@ -19,7 +19,7 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_txt_select_all"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
@@ -30,6 +30,6 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_txt_word_forward"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 </merge>

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

@@ -8,7 +8,7 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_txt_cut"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
@@ -19,7 +19,7 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_txt_copy"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 
 
@@ -31,6 +31,6 @@
 		android:layout_weight="1"
 		android:drawableBottom="@drawable/ic_txt_paste"
 		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size"
+		android:textSize="@dimen/numpad_text_editing_font_size"
 		android:visibility="gone" />
 </merge>

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

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout
+	xmlns:android="http://schemas.android.com/apk/res/android"
+	xmlns:tools="http://schemas.android.com/tools"
+	tools:showIn="@layout/main_small"
+	android:layout_width="match_parent"
+	android:layout_height="wrap_content"
+	android:orientation="horizontal">
+
+	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
+		style="@style/TTheme.CommandPalette.Key"
+		android:id="@+id/soft_key_1"
+		android:drawableBottom="@drawable/ic_fn_settings" />
+
+	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
+		style="@style/TTheme.CommandPalette.Key"
+		android:id="@+id/soft_key_2"
+		android:drawableBottom="@drawable/ic_fn_add_word" />
+
+	<io.github.sspanak.tt9.ui.main.keys.SoftKeyF3
+		style="@style/TTheme.CommandPalette.Key"
+		android:id="@+id/soft_key_3"
+		android:drawableBottom="@drawable/ic_fn_voice" />
+
+	<io.github.sspanak.tt9.ui.main.keys.SoftKeyF5
+		style="@style/TTheme.CommandPalette.Key"
+		android:id="@+id/soft_key_5"
+		android:drawableBottom="@drawable/ic_txt_cut" />
+
+	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
+		style="@style/TTheme.CommandPalette.Key"
+		android:id="@+id/soft_key_8"
+		android:drawableBottom="@drawable/ic_fn_next_keyboard" />
+</LinearLayout>

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

@@ -2,49 +2,28 @@
 <LinearLayout
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	xmlns:tools="http://schemas.android.com/tools"
+	style="@style/TTheme.MainSmall.Wrapper"
 	tools:ignore="HardcodedText,KeyboardInaccessibleWidget"
-	tools:showIn="@layout/main_small"
+	tools:showIn="@layout/main_small">
-	android:layout_width="match_parent"
-	android:layout_height="@dimen/soft_key_height"
-	android:baselineAligned="true"
-	android:orientation="horizontal">
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyCommandPalette
 		android:id="@+id/soft_key_command_palette"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.MainSmall.Key"
-		android:layout_width="0dp"
-		android:layout_height="match_parent"
 		android:layout_weight="3"
 		android:focusable="false"
-		android:text="🛠"
+		android:text="☰" />
-		android:textSize="@dimen/soft_key_icon_size" />
-
-	<View
-		android:id="@+id/main_separator_left"
-		style="@style/hSeparator"
-		android:background="@drawable/button_separator_dark" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyOk
 		android:id="@+id/soft_key_ok"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.MainSmall.Key.OK"
-		android:layout_width="0dp"
-		android:layout_height="match_parent"
 		android:layout_weight="5"
 		android:focusable="false"
 		android:text="@android:string/ok" />
 
-	<View
-		android:id="@+id/main_separator_right"
-		style="@style/hSeparator"
-		android:background="@drawable/button_separator_dark" />
-
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyBackspace
 		android:id="@+id/soft_key_backspace"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.MainSmall.Key"
-		android:layout_width="0dp"
-		android:layout_height="match_parent"
 		android:layout_weight="3"
 		android:focusable="false"
-		android:text="⌫"
+		android:text="⌫" />
-		android:textSize="@dimen/soft_key_icon_size" />
 </LinearLayout>

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

@@ -3,130 +3,52 @@
 <LinearLayout
 	xmlns:android="http://schemas.android.com/apk/res/android"
 	xmlns:tools="http://schemas.android.com/tools"
-	android:layout_width="match_parent"
+	style="@style/TTheme.CommandPalette.Wrapper"
-	android:layout_height="@dimen/numpad_key_height"
 	tools:showIn="@layout/main_small">
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_101"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_dpad_left" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_dpad_left"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_1"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_102"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_txt_select_none" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_txt_select_none"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_2"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_103"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_dpad_right" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_dpad_right"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_3"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_104"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_txt_word_back" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_txt_word_back"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_4"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_105"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_txt_select_all" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_txt_select_all"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_5"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_106"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_txt_word_forward" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_txt_word_forward"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_6"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_107"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_txt_cut" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_txt_cut"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_7"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_108"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_txt_copy" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_txt_copy"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
-
-	<View
-		android:id="@+id/separator_10_8"
-		style="@style/numSeparator" />
 
 	<io.github.sspanak.tt9.ui.main.keys.SoftKeyFn
 		android:id="@+id/soft_key_109"
-		style="@android:style/Widget.Holo.Button.Borderless"
+		style="@style/TTheme.CommandPalette.Key"
-		android:layout_width="0dp"
+		android:drawableBottom="@drawable/ic_txt_paste" />
-		android:layout_height="match_parent"
-		android:layout_weight="1"
-		android:drawableBottom="@drawable/ic_txt_paste"
-		android:paddingBottom="@dimen/soft_key_drawable_bottom_padding"
-		android:textSize="@dimen/soft_key_drawable_title_size" />
 
 </LinearLayout>

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

@@ -15,7 +15,7 @@
 		android:paddingEnd="15dp"
 		android:text="✕"
 		android:textAppearance="@android:style/TextAppearance.DeviceDefault.Widget.TextView"
-		android:textSize="@dimen/soft_key_icon_size"
+		android:textSize="@dimen/main_small_key_icon_size"
 		tools:ignore="HardcodedText,RtlSymmetry" />
 
 	<TextView

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

@@ -4,17 +4,13 @@
 	android:layout_height="match_parent"
 	android:defaultFocusHighlightEnabled="false"
 	android:focusable="false"
-	android:focusableInTouchMode="false"
+	android:focusableInTouchMode="false">
-	android:orientation="horizontal">
 
 	<TextView
 		android:id="@+id/suggestion_list_item"
-		android:layout_width="wrap_content"
+		style="@style/TTheme.MainSmall.StatusBar.SuggestionList.Item"
-		android:layout_height="match_parent"
 		android:defaultFocusHighlightEnabled="false"
 		android:focusable="false"
 		android:focusableInTouchMode="false"
-		android:gravity="center"
+		/>
-		android:paddingHorizontal="@dimen/candidate_padding_horizontal"
-		android:textSize="@dimen/candidate_font_size" />
 </LinearLayout>

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

@@ -10,6 +10,6 @@
 		android:layout_height="match_parent"
 		android:gravity="center"
 		android:minWidth="@dimen/numpad_candidate_min_width"
-		android:paddingHorizontal="@dimen/candidate_padding_horizontal"
+		android:paddingHorizontal="@dimen/suggestion_padding_horizontal"
 		android:textSize="@dimen/numpad_candidate_font_size" />
 </LinearLayout>

app/src/main/res/values-night-v31/styles.xml

@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-	<style name="TTheme" parent="Theme.Material3.DynamicColors.Dark">
+	<style name="TTheme" parent="Theme.Material3.DynamicColors.Dark" />
-		<item name="preferenceTheme">@style/PreferenceOverlay</item>
+
+	<style name="TTheme.Preferences" parent="Theme.Material3.DynamicColors.Dark">
+		<item name="preferenceTheme">@style/TTheme.PreferenceOverlay</item>
 
 		<!-- title bar -->
 		<item name="tint">@color/material_dynamic_neutral90</item> <!-- back button color -->
@@ -15,8 +17,8 @@
 <!--		<item name="android:popupMenuStyle">@style/AppDropDownStyle</item> &lt;!&ndash; dropdown background &ndash;&gt;-->
 	</style>
 
-	<style name="PreferenceOverlay" parent="@style/PreferenceThemeOverlay">
+	<style name="TTheme.PreferenceOverlay" parent="@style/PreferenceThemeOverlay">
-		<item name="switchPreferenceCompatStyle">@style/AppSwitchStyle</item>
+		<item name="switchPreferenceCompatStyle">@style/TTheme.Switch</item>
 	</style>
 
 <!--	<style name="AppDropDownStyle" parent="Widget.AppCompat.ListPopupWindow">-->
@@ -24,7 +26,7 @@
 <!--		<item name="popupMenuBackground">@color/material_dynamic_neutral_variant30</item>-->
 <!--	</style>-->
 
-	<style name="AppSwitchStyle" parent="@style/Preference.SwitchPreferenceCompat.Material">
+	<style name="TTheme.Switch" parent="@style/Preference.SwitchPreferenceCompat.Material">
 		<item name="widgetLayout">@layout/pref_switch_v31</item>
 	</style>
 

app/src/main/res/values-night/colors.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+	<color name="keyboard_background">#292e33</color>
+	<color name="keyboard_text_color">#d4d5d6</color>
+
+	<color name="key_num_background">#484c4f</color>
+	<color name="key_num_color">#fff</color>
+	<color name="key_num_alternative_color">#b6b7b9</color> <!-- 'hold' functions -->
+
+	<color name="key_fn_background">#373c41</color>
+	<color name="key_fn_alternative_color">#898c8f</color> <!-- 'hold' functions -->
+
+	<color name="key_ok_background">#5e97f6</color>
+	<color name="key_ok_color">#fff</color>
+
+	<color name="suggestion_selected_background">#007ACC</color>
+	<color name="suggestion_selected_color">#fff</color>
+	<color name="suggestion_separator">#888888</color>
+</resources>

app/src/main/res/values-night/styles.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+<!--	<style name="TTheme" parent="Theme.AppCompat" />-->
+
+<!--	<style name="TTheme.Colored.Key" parent="TTheme.Key">-->
+<!--		<item name="android:textColor">@color/button_text</item>-->
+<!--		<item name="android:color">@color/dark_button_color</item>-->
+<!--		<item name="android:textColor">@color/dark_button_color</item>-->
+<!--		<item name="android:textColorPrimary">@color/dark_button_color</item>-->
+<!--		<item name="android:tint">@color/dark_button_color</item>-->
+<!--		<item name="tint">@color/dark_button_color</item>-->
+<!--	</style>-->
+
+</resources>

app/src/main/res/values-v31/styles.xml

@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-	<style name="TTheme" parent="Theme.Material3.DynamicColors.Light">
+	<style name="TTheme" parent="Theme.Material3.DynamicColors.Light" />
-		<item name="preferenceTheme">@style/PreferenceOverlay</item>
+
+	<style name="TTheme.Preferences" parent="Theme.Material3.DynamicColors.Light">
+		<item name="preferenceTheme">@style/TTheme.PreferenceOverlay</item>
 
 		<!-- title bar -->
 		<item name="tint">@color/material_dynamic_neutral20</item> <!-- back button color -->
@@ -28,11 +30,11 @@
 		-->
 	</style>
 
-	<style name="PreferenceOverlay" parent="@style/PreferenceThemeOverlay">
+	<style name="TTheme.PreferenceOverlay" parent="@style/PreferenceThemeOverlay">
-		<item name="switchPreferenceCompatStyle">@style/AppSwitchStyle</item>
+		<item name="switchPreferenceCompatStyle">@style/TTheme.Switch</item>
 	</style>
 
-	<style name="AppSwitchStyle" parent="@style/Preference.SwitchPreferenceCompat.Material">
+	<style name="TTheme.Switch" parent="@style/Preference.SwitchPreferenceCompat.Material">
 		<item name="widgetLayout">@layout/pref_switch_v31</item>
 	</style>
 

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

@@ -1,8 +1,28 @@
 <?xml version="1.0" encoding="utf-8"?>
+<!--
+	What colors look good together: https://www.canva.com/colors/color-wheel/
+-->
 <resources>
-	<!-- Light theme -->
+	<color name="keyboard_background">#e8eaed</color>
-	<color name="button_text">#242424</color>
+	<color name="keyboard_text_color">#3d3d3f</color>
 
+	<color name="key_num_background">#fff</color>
+	<color name="key_num_color">#333</color>
+	<color name="key_num_alternative_color">#666</color> <!-- 'hold' functions -->
+
+	<color name="key_fn_background">#ccced5</color>
+	<color name="key_fn_alternative_color">#888</color> <!-- 'hold' functions -->
+
+	<color name="key_ok_background">#1a73e8</color>
+	<color name="key_ok_color">#fff</color>
+
+	<color name="suggestion_selected_background">#8ab5f6</color> <!-- 8ed0fe / 7ecbff / #FFB27E / 73c7ff / 7ecfe2 / 8ac8f1 -->
+	<color name="suggestion_selected_color">#000</color>
+	<color name="suggestion_separator">#888888</color>
+
+	<!-- legacy -->
+
+	<!-- Light theme -->
 	<color name="candidate_background">#D3D3D3</color>
 	<color name="candidate_color">#202020</color>
 	<color name="candidate_selected">#B8B8B8</color>
@@ -12,8 +32,6 @@
 	<color name="numpad_separator">#CCC</color>
 
 	<!-- Dark theme -->
-	<color name="dark_button_text">#C0C0C0</color>
-
 	<color name="dark_candidate_background">#2C2C2C</color>
 	<color name="dark_candidate_color">#CCCCCC</color>
 	<color name="dark_candidate_selected">#555555</color>

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

@@ -1,18 +1,23 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-	<dimen name="candidate_font_size">18sp</dimen>
+	<dimen name="status_bar_height">26sp</dimen>
-	<dimen name="candidate_height">26sp</dimen>
+	<dimen name="status_bar_font_size">16sp</dimen>
-	<dimen name="candidate_padding_horizontal">6sp</dimen>
+	<dimen name="suggestion_font_size">18sp</dimen> <!-- for some reason the RecyclerView displays the text smaller than the TextView, so we to make the suggestions slightly bigger than the regular Status Bar text. -->
+	<dimen name="suggestion_padding_horizontal">6sp</dimen>
 
+	<dimen name="main_small_key_icon_size">32sp</dimen>
+	<dimen name="main_small_key_height">44dp</dimen>
+	<dimen name="main_small_key_wrapper_height">46dp</dimen>
+
+	<dimen name="main_small_key_text_editing_height">65dp</dimen>
+
+	<!-- Preferences, default font size -->
 	<dimen name="preferences_text_min_height">48dp</dimen>
 	<dimen name="preference_search_height">72dp</dimen>
+	<dimen name="pref_padding_horizontal">16dp</dimen>
+	<dimen name="pref_padding_vertical">12dp</dimen>
 
-	<dimen name="soft_key_height">44dp</dimen>
+	<!-- Preferences, large font size -->
-	<dimen name="soft_key_icon_size">24sp</dimen>
-	<dimen name="soft_key_drawable_bottom_padding">6dp</dimen>
-	<dimen name="soft_key_drawable_title_size">12sp</dimen>
-
-	<!-- Large font size -->
 	<dimen name="pref_large_category_padding_top">30dp</dimen>
 	<dimen name="pref_large_category_padding_bottom">12dp</dimen>
 	<dimen name="pref_large_padding_horizontal">16dp</dimen>
@@ -21,10 +26,6 @@
 	<dimen name="pref_large_summary_size">19sp</dimen>
 
 
-	<!-- Default font size -->
-	<dimen name="pref_padding_horizontal">16dp</dimen>
-	<dimen name="pref_padding_vertical">12dp</dimen>
-
 	<!-- Numpad -->
 	<dimen name="numpad_max_width">10000dp</dimen>
 	<dimen name="numpad_padding_bottom">6dp</dimen>
@@ -37,4 +38,7 @@
 	<dimen name="numpad_candidate_font_size">17sp</dimen>
 	<dimen name="numpad_candidate_height">40dp</dimen>
 	<dimen name="numpad_candidate_min_width">36dp</dimen>
+
+	<dimen name="numpad_text_editing_font_size">17sp</dimen>
+	<dimen name="soft_key_drawable_bottom_padding">6dp</dimen>
 </resources>

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

@@ -1,7 +1,118 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-	<style name="TTheme" parent="Theme.AppCompat.DayNight" />
+	<style name="TTheme" parent="Theme.MaterialComponents.DayNight" />
+	<style name="TTheme.Preferences" parent="Theme.AppCompat.DayNight" />
 
+
+	<style name="TTheme.AddWord" parent="Theme.AppCompat.Dialog.Alert">
+		<item name="windowNoTitle">true</item> <!-- hide some weird floating rectangle above the dialog -->
+	</style>
+
+
+	<style name="TTheme.Keyboard">
+		<item name="android:background">@color/keyboard_background</item>
+	</style>
+
+
+	<!-- status bar -->
+	<style name="TTheme.MainSmall.StatusBar.Wrapper" parent="">
+		<item name="android:layout_height">@dimen/status_bar_height</item>
+		<item name="android:layout_width">match_parent</item>
+	</style>
+
+	<style name="TTheme.MainSmall.StatusBar.Status" parent="">
+		<item name="android:gravity">center</item>
+		<item name="android:layout_height">match_parent</item>
+		<item name="android:layout_width">match_parent</item>
+
+		<item name="android:textSize">@dimen/status_bar_font_size</item>
+		<item name="android:textStyle">italic</item>
+		<item name="android:textColor">@color/keyboard_text_color</item>
+	</style>
+
+	<style name="TTheme.MainSmall.StatusBar.SuggestionList" parent="">
+		<item name="android:layout_gravity">center_vertical</item>
+		<item name="android:layout_height">match_parent</item>
+		<item name="android:layout_width">match_parent</item>
+		<item name="android:orientation">horizontal</item>
+		<item name="android:scrollbars">none</item>
+	</style>
+
+	<style name="TTheme.MainSmall.StatusBar.SuggestionList.Item" parent="">
+		<item name="android:gravity">center</item>
+		<item name="android:layout_width">wrap_content</item>
+		<item name="android:layout_height">match_parent</item>
+		<item name="android:paddingLeft">@dimen/suggestion_padding_horizontal</item>
+		<item name="android:paddingRight">@dimen/suggestion_padding_horizontal</item>
+
+		<item name="android:textSize">@dimen/suggestion_font_size</item>
+	</style>
+
+
+	<!-- general purpose key style -->
+	<style name="TTheme.Key" parent="Widget.MaterialComponents.Button">
+		<item name="android:layout_width">0dp</item>
+		<item name="android:layout_height">wrap_content</item>
+		<item name="android:layout_weight">1</item>
+	</style>
+
+
+	<!-- Main Small view (backspace and OK) -->
+	<style name="TTheme.MainSmall.Wrapper" parent="">
+		<item name="android:baselineAligned">true</item>
+		<item name="android:gravity">center</item>
+		<item name="android:layout_height">@dimen/main_small_key_wrapper_height</item>
+		<item name="android:layout_width">match_parent</item>
+		<item name="android:orientation">horizontal</item>
+	</style>
+
+	<style name="TTheme.MainSmall.Key" parent="TTheme.Key">
+		<item name="android:layout_height">match_parent</item>
+		<item name="android:layout_marginLeft">6dp</item>
+		<item name="android:layout_marginRight">6dp</item>
+		<item name="android:layout_marginTop">1dp</item>
+		<item name="android:layout_marginBottom">1dp</item>
+
+		<item name="android:paddingTop">0dp</item>
+		<item name="android:paddingBottom">0dp</item>
+		<item name="android:textAppearance">@style/TextAppearance.AppCompat.Medium</item>
+
+		<item name="android:textColor">@color/keyboard_text_color</item>
+		<item name="backgroundTint">@color/key_num_background</item>
+	</style>
+
+	<style name="TTheme.MainSmall.Key.OK" parent="TTheme.MainSmall.Key">
+		<item name="android:textColor">@color/key_ok_color</item>
+		<item name="backgroundTint">@color/key_ok_background</item>
+	</style>
+
+
+	<!-- Fn keys (command palette or text-editing palette) -->
+	<style name="TTheme.CommandPalette.Wrapper" parent="">
+		<item name="android:layout_height">@dimen/main_small_key_text_editing_height</item>
+		<item name="android:layout_width">match_parent</item>
+		<item name="android:orientation">horizontal</item>
+	</style>
+
+	<style name="TTheme.CommandPalette.Key" parent="TTheme.MainSmall.Key">
+		<item name="android:drawablePadding">0dp</item>
+		<item name="android:layout_marginTop">0dp</item>
+		<item name="android:layout_marginBottom">0dp</item>
+		<item name="android:layout_marginLeft">1dp</item>
+		<item name="android:layout_marginRight">1dp</item>
+		<item name="android:paddingTop">0dp</item>
+		<item name="android:paddingBottom">2dp</item>
+		<item name="android:paddingLeft">0dp</item>
+		<item name="android:paddingRight">0dp</item>
+
+		<item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
+		<item name="android:textSize">@dimen/status_bar_font_size</item>
+		<item name="drawableTint">@color/keyboard_text_color</item>
+	</style>
+
+
+
+	<!-- LEGACY -->
 	<style name="hSeparator">
 		<item name="android:layout_height">match_parent</item>
 		<item name="android:layout_width">3dp</item>
@@ -20,9 +131,7 @@
 		<item name="android:layout_marginRight">@dimen/numpad_row_separator_margin</item>
 		<item name="android:layout_height">1dp</item>
 		<item name="android:layout_width">match_parent</item>
-	</style>
 
-	<style name="TTheme.AddWord" parent="Theme.AppCompat.DayNight.Dialog.Alert">
+		<item name="android:background">@color/suggestion_separator</item>
-		<item name="windowNoTitle">true</item> <!-- hide some weird floating rectangle above the dialog -->
 	</style>
 </resources>