Migrating to Material Components for Android

Closes: #329 Closes: #315
ghusta · Mar 8, 2023 · 6aa3808 · 6aa3808
1 parent 311b12c
commit 6aa3808
Show file tree

Hide file tree

Showing 12 changed files with 110 additions and 47 deletions.
diff --git a/app/src/main/java/fr/husta/android/dockersearch/MainActivity.java b/app/src/main/java/fr/husta/android/dockersearch/MainActivity.java
@@ -24,6 +24,8 @@
 import android.widget.TextView;
 import android.widget.Toast;
 
+import com.google.android.material.dialog.MaterialAlertDialogBuilder;
+
 import java.util.ArrayList;
 import java.util.Collections;
 import java.util.Objects;
@@ -411,16 +413,16 @@ public void clickAbout(MenuItem item)
                 applicationVersion
         ));
 
-        AlertDialog.Builder builder = new AlertDialog.Builder(this);
         ApplicationInfo applicationInfo = getApplicationInfo();
         PackageManager packageManager = getPackageManager();
         Drawable icon = packageManager.getApplicationIcon(applicationInfo);
-        builder.setIcon(icon);
-        builder.setTitle(R.string.app_name);
-        builder.setView(messageView);
-        builder.setPositiveButton(android.R.string.ok, null);
-        builder.create();
-        builder.show();
+        new MaterialAlertDialogBuilder(this, R.style.Custom_ThemeOverlay_MaterialAlertDialog)
+                .setIcon(icon)
+                .setTitle(R.string.app_name)
+                .setView(messageView)
+                .setPositiveButton(android.R.string.ok, null)
+                .create()
+                .show();
     }
 
     public void clickSubmitIssue(MenuItem item)

diff --git a/app/src/main/res/layout/activity_taglist.xml b/app/src/main/res/layout/activity_taglist.xml
@@ -22,6 +22,9 @@
 
     </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
 
+    <!--
+        Colors used by FAB : https://github.com/material-components/material-components-android/blob/1.7.0/lib/java/com/google/android/material/floatingactionbutton/res/values/styles.xml#L40
+    -->
     <com.google.android.material.floatingactionbutton.FloatingActionButton
         android:id="@+id/fab_tags_next_page"
         android:layout_width="wrap_content"
@@ -30,6 +33,7 @@
         android:clickable="true"
         android:focusable="true"
         android:visibility="gone"
+        app:fabSize="auto"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:srcCompat="@drawable/ic_more_white_24dp" />

diff --git a/app/src/main/res/layout/dialog_about.xml b/app/src/main/res/layout/dialog_about.xml
@@ -19,8 +19,8 @@
             android:autoLink="web"
             android:paddingTop="20dip"
             android:text="@string/msg_about_credits"
-            android:textColor="?android:attr/textColorPrimary"
-            android:textSize="16sp" />
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
+            android:textColor="?android:attr/textColorPrimary" />
 
         <ImageView
             android:layout_width="match_parent"
@@ -36,17 +36,18 @@
             android:autoLink="web"
             android:paddingTop="20dip"
             android:text="@string/msg_about_docker_website"
-            android:textColor="?android:attr/textColorPrimary"
-            android:textSize="16sp" />
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
+            android:textColor="?android:attr/textColorPrimary" />
 
         <TextView
             android:id="@+id/about_version"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:paddingTop="5dp"
             android:text="Version : "
+            android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
             android:textColor="?android:attr/textColorPrimary"
-            android:textSize="16sp" />
+            tools:ignore="HardcodedText" />
 
     </LinearLayout>
 

diff --git a/app/src/main/res/layout/list_docker_image_child_item.xml b/app/src/main/res/layout/list_docker_image_child_item.xml
@@ -8,37 +8,37 @@
               android:gravity="center_vertical|center_horizontal"
               android:orientation="horizontal">
 
+    <!-- See : https://m2.material.io/components/buttons/android#text-button -->
     <ImageButton
         android:id="@+id/btn_image_tags"
-        style="@style/Base.Widget.AppCompat.Button.Borderless"
+        style="@style/Widget.MaterialComponents.Button.TextButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         app:srcCompat="@drawable/ic_tag_black_24dp"
-        app:tint="@android:color/white"
-        android:text="Tags"
-        android:textColor="@android:color/white"/>
+        app:tint="?attr/colorOnPrimary"
+        tools:ignore="HardcodedText" />
 
     <ImageButton
         android:id="@+id/btn_image_hub_page"
-        style="@style/Base.Widget.AppCompat.Button.Borderless"
+        style="@style/Widget.MaterialComponents.Button.TextButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         app:srcCompat="@drawable/ic_public_black_24dp"
-        app:tint="@android:color/white"
+        app:tint="?attr/colorOnPrimary"
         android:text="Docker Hub Page"
-        android:textColor="@android:color/white"/>
+        tools:ignore="HardcodedText" />
 
     <ImageButton
         android:id="@+id/btn_image_share"
-        style="@style/Base.Widget.AppCompat.Button.Borderless"
+        style="@style/Widget.MaterialComponents.Button.TextButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         app:srcCompat="@drawable/ic_share_black_24dp"
-        app:tint="@android:color/white"
+        app:tint="?attr/colorOnPrimary"
         android:text="Share"
-        android:textColor="@android:color/white"/>
+        tools:ignore="HardcodedText" />
 
 </LinearLayout>
diff --git a/app/src/main/res/layout/list_docker_image_group_item.xml b/app/src/main/res/layout/list_docker_image_group_item.xml
@@ -13,7 +13,7 @@
         android:layout_marginEnd="2dp"
         android:ellipsize="end"
         android:maxLines="2"
-        android:textAppearance="@style/TextAppearance.AppCompat.Large"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
         android:textColor="@color/textColorPrimary"
         app:layout_constraintBottom_toTopOf="@+id/listitem_image_desc"
         app:layout_constraintEnd_toStartOf="@id/barrier_1"
@@ -30,6 +30,8 @@
         android:layout_marginBottom="2dp"
         android:ellipsize="end"
         android:maxLines="2"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle2"
+        android:textColor="@color/textColorSecondary"
         app:layout_constraintEnd_toStartOf="@id/barrier_1"
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toBottomOf="@+id/listitem_image_name"
@@ -55,7 +57,7 @@
         app:layout_constraintStart_toStartOf="@+id/listitem_image_stars"
         app:layout_constraintTop_toTopOf="parent"
         app:srcCompat="@drawable/ic_star_24dp"
-        app:tint="@color/secondaryTextColor"
+        app:tint="@color/textColorSecondary"
         tools:ignore="ContentDescription"
         tools:layout_gravity="center" />
 
@@ -88,7 +90,7 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toBottomOf="@id/listitem_image_stars"
         app:srcCompat="@drawable/ic_official_image"
-        app:tint="@color/secondaryTextColor"
+        app:tint="@color/textColorSecondary"
         tools:ignore="ContentDescription"
         tools:layout_gravity="center" />
 

diff --git a/app/src/main/res/layout/list_docker_tag_detail_headers.xml b/app/src/main/res/layout/list_docker_tag_detail_headers.xml
@@ -18,7 +18,7 @@
         android:text="@string/lbl_header_digest"
         android:textAlignment="textStart"
         android:textAllCaps="true"
-        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
         android:textColor="@color/textColorPrimary"
         android:textStyle="bold"
         tools:text="Digest" />
@@ -30,7 +30,7 @@
         android:text="@string/lbl_header_osarch"
         android:textAlignment="textStart"
         android:textAllCaps="true"
-        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
         android:textColor="@color/textColorPrimary"
         android:textStyle="bold"
         tools:text="OS/Arch" />

diff --git a/app/src/main/res/layout/list_docker_tag_detail_item.xml b/app/src/main/res/layout/list_docker_tag_detail_item.xml
@@ -17,7 +17,7 @@
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:textAlignment="textStart"
-        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
         android:textColor="@color/textColorPrimary"
         tools:text="sha256" />
 
@@ -27,7 +27,7 @@
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:textAlignment="textStart"
-        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Subtitle1"
         android:textColor="@color/textColorPrimary"
         tools:text="linux/amd64" />
 

diff --git a/app/src/main/res/layout/list_docker_tag_item.xml b/app/src/main/res/layout/list_docker_tag_item.xml
@@ -16,7 +16,7 @@
         android:layout_marginEnd="1dp"
         android:ellipsize="end"
         android:maxLines="2"
-        android:textAppearance="@style/TextAppearance.AppCompat.Large"
+        android:textAppearance="@style/TextAppearance.MaterialComponents.Headline6"
         android:textColor="@color/textColorPrimary"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toStartOf="@id/barrier_1"

diff --git a/app/src/main/res/values-night/colors.xml b/app/src/main/res/values-night/colors.xml
@@ -1,13 +1,21 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="colorPrimary">#2F3D46</color>
-    <color name="colorPrimaryDark">#191B1B</color>
+    <color name="colorOnPrimary">#FFFFFF</color>
+    <color name="colorPrimaryVariant">#191B1B</color>
 
-    <!-- bg color for FAB -->
-    <color name="colorAccent">#157CAD</color>
-    <color name="colorSecondary">#DFA031</color>
+    <color name="colorPrimaryInverse">#1593cd</color>
 
-    <color name="textColorPrimary">#FF1593CD</color>
+    <!-- default color for FAB or radio button, or link href... -->
+    <color name="colorSecondary">#1593cd</color>
+    <color name="colorOnSecondary">#FFFFFF</color>
+
+    <color name="colorSurface">@color/colorPrimary</color>
+    <color name="colorOnSurface">#FFFFFF</color>
 
-    <color name="secondaryTextColor">#66FFFFFF</color>
+    <color name="colorSurfaceInverse">@color/m3_sys_color_dark_inverse_surface</color>
+    <color name="colorOnSurfaceInverse">@color/m3_sys_color_dark_inverse_on_surface</color>
+
+    <color name="textColorPrimary">#FF1593CD</color>
+    <color name="textColorSecondary">#66FFFFFF</color>
 </resources>
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
@@ -1,14 +1,24 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="colorPrimary">#1593cd</color>
-    <color name="colorPrimaryDark">#09658f</color>
+    <color name="colorOnPrimary">#FFFFFF</color>
+    <color name="colorPrimaryVariant">#09658f</color>
 
-    <!-- bg color for FAB -->
-    <color name="colorAccent">#138ac1</color>
-    <color name="colorSecondary">#ffab00</color>
+    <color name="colorPrimaryInverse">#1593cd</color>
+
+    <!-- default color for FAB or radio button, or link href... -->
+    <color name="colorSecondary">#1593cd</color>
+    <color name="colorOnSecondary">#FFFFFF</color>
+
+    <color name="colorSurface">#FFFFFF</color>
+    <color name="colorOnSurface">#1593cd</color>
+
+    <color name="colorSurfaceInverse">@color/m3_sys_color_light_inverse_surface</color>
+    <color name="colorOnSurfaceInverse">@color/m3_sys_color_light_inverse_on_surface</color>
 
-    <!--<color name="textColorPrimary">#3F51B5</color>-->
     <color name="textColorPrimary">#FF1593CD</color>
+    <color name="textColorSecondary">#66000000</color>
 
-    <color name="secondaryTextColor">#4D000000</color>
+    <!-- unused colors -->
+    <color name="altColorSecondary">#DFA031</color>
 </resources>
diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -1,14 +1,49 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="@style/Theme.AppCompat.DayNight.DarkActionBar">
+    <style name="AppTheme" parent="@style/Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/colorPrimary</item>
-        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
-        <item name="colorAccent">@color/colorAccent</item>
+        <item name="colorOnPrimary">@color/colorOnPrimary</item>
+
+        <item name="colorSecondary">@color/colorSecondary</item>
+        <item name="colorOnSecondary">@color/colorOnSecondary</item>
+
+        <item name="colorSurface">@color/colorSurface</item>
+<!--        <item name="colorOnSurface">?attr/colorOnSurface</item>-->
 
         <item name="android:navigationBarColor">@color/colorPrimary</item>
+        <item name="android:statusBarColor">@color/colorPrimaryVariant</item>
+
+        <!-- See layout in file : mtrl_layout_snackbar -->
+        <item name="snackbarStyle">@style/Custom.Snackbar</item>
+        <!-- See layout in file : mtrl_layout_snackbar_include -->
+        <item name="snackbarTextViewStyle">@style/Custom.SnackbarText</item>
+        <item name="snackbarButtonStyle">@style/Custom.SnackbarButton</item>
+    </style>
+
+    <!-- See : https://stackoverflow.com/questions/32425191/style-snackbar-in-theme-app#58607153 -->
+    <style name="Custom.Snackbar" parent="Widget.MaterialComponents.Snackbar">
+        <!-- Default attr with M3 : ?attr/colorSurfaceInverse -->
+        <item name="backgroundTint">@color/colorSurfaceInverse</item>
+    </style>
+
+    <style name="Custom.SnackbarText" parent="Widget.MaterialComponents.Snackbar.TextView">
+        <!-- Default attr with M3 : ?attr/colorOnSurfaceInverse -->
+        <item name="android:textColor">@color/colorOnSurfaceInverse</item>
+    </style>
+
+    <style name="Custom.SnackbarButton" parent="Widget.MaterialComponents.Button.TextButton.Snackbar">
+        <!-- Default attr with M3 : ?attr/colorPrimaryInverse -->
+        <item name="android:textColor">@color/colorPrimaryInverse</item>
+    </style>
+
+    <style name="Custom.ThemeOverlay.MaterialAlertDialog" parent="ThemeOverlay.MaterialComponents.MaterialAlertDialog">
+        <item name="buttonBarPositiveButtonStyle">@style/Custom.Widget.Button.Dialog</item>
+    </style>
 
+    <style name="Custom.Widget.Button.Dialog" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
+        <item name="android:textColor">@color/colorPrimaryInverse</item>
     </style>
 
 </resources>
diff --git a/app/src/main/res/values/themes.xml b/app/src/main/res/values/themes.xml
@@ -5,7 +5,8 @@
         <item name="windowNoTitle">true</item>
     </style>
 
-    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
+    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" />
+
+    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.MaterialComponents.Light" />
 
-    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
 </resources>