Refine onboarding indicators

Author: MihaiCristianCondrea

app/src/main/java/com/d4rk/androidtutorials/java/ui/screens/onboarding/OnboardingActivity.java

@@ -5,6 +5,7 @@
 import android.view.View;
 import android.widget.ImageView;
 import android.widget.LinearLayout;
+import android.util.TypedValue;
 
 import androidx.annotation.NonNull;
 import androidx.appcompat.app.AppCompatActivity;
@@ -81,10 +82,11 @@ public void onPageSelected(int position) {
         new TabLayoutMediator(binding.tabIndicator, binding.viewPager, (tab, position) -> {
             ImageView dot = new ImageView(this);
             dot.setImageResource(R.drawable.onboarding_dot_unselected);
+            int margin = dpToPx(2);
             LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                     LinearLayout.LayoutParams.WRAP_CONTENT,
                     LinearLayout.LayoutParams.WRAP_CONTENT);
-            params.setMargins(8,0,8,0);
+            params.setMargins(margin, 0, margin, 0);
             dot.setLayoutParams(params);
             tab.setCustomView(dot);
         }).attach();
@@ -171,6 +173,11 @@ private void updateButtons(int position) {
         }
     }
 
+    private int dpToPx(int dp) {
+        return Math.round(TypedValue.applyDimension(
+                TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics()));
+    }
+
     private static class OnboardingPagerAdapter extends FragmentStateAdapter {
 
         OnboardingPagerAdapter(@NonNull AppCompatActivity activity) {

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

@@ -2,7 +2,7 @@
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="oval">
     <size
-        android:width="8dp"
-        android:height="8dp" />
+        android:width="12dp"
+        android:height="12dp" />
     <solid android:color="?attr/colorPrimary" />
 </shape>

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

@@ -4,5 +4,5 @@
     <size
         android:width="8dp"
         android:height="8dp" />
-    <solid android:color="@android:color/darker_gray" />
+    <solid android:color="?attr/colorOutline" />
 </shape>