refactor: polish native ad visuals

Author: MihaiCristianCondrea

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

@@ -7,10 +7,10 @@
     <com.google.android.material.card.MaterialCardView
         android:id="@+id/ad_card"
         style="@style/Widget.Material3.CardView.Elevated"
+        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.CardViewBottomRounded"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_margin="16dp"
-        app:cardCornerRadius="24dp"
+        android:layout_marginHorizontal="24dp"
         app:cardUseCompatPadding="false"
         app:cardPreventCornerOverlap="true">
 
@@ -60,37 +60,38 @@
                     android:id="@+id/ad_body"
                     android:layout_width="0dp"
                     android:layout_height="wrap_content"
-                    android:layout_marginTop="4dp"
                     android:ellipsize="end"
                     android:maxLines="2"
                     android:textAppearance="@style/TextAppearance.Material3.BodySmall"
-                    app:layout_constraintTop_toBottomOf="@id/ad_headline"
                     app:layout_constraintStart_toStartOf="@id/ad_headline"
-                    app:layout_constraintEnd_toEndOf="@id/ad_headline" />
+                    app:layout_constraintEnd_toEndOf="@id/ad_headline"
+                    app:layout_constraintTop_toBottomOf="@id/ad_headline" />
 
                 <me.zhanghai.android.materialratingbar.MaterialRatingBar
                     android:id="@+id/ad_stars"
-                    style="@style/Widget.MaterialRatingBar.RatingBar"
+                    style="@style/Widget.MaterialRatingBar.RatingBar.Small"
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:isIndicator="true"
                     android:numStars="5"
                     android:stepSize="0.5"
-                    android:layout_marginTop="8dp"
-                    app:layout_constraintTop_toBottomOf="@id/ad_body"
+                    app:layout_constraintBottom_toBottomOf="parent"
+                    app:layout_constraintEnd_toStartOf="@id/ad_call_to_action"
                     app:layout_constraintStart_toStartOf="@id/ad_headline"
-                    app:layout_constraintBottom_toBottomOf="parent" />
+                    app:layout_constraintTop_toBottomOf="@id/ad_body" />
 
                 <com.google.android.material.button.MaterialButton
                     android:id="@+id/ad_call_to_action"
                     android:layout_width="wrap_content"
                     android:layout_height="40dp"
                     android:minWidth="88dp"
-                    android:insetTop="0dp"
-                    android:insetBottom="0dp"
                     android:layout_marginStart="12dp"
-                    app:layout_constraintBaseline_toBaselineOf="@id/ad_stars"
-                    app:layout_constraintEnd_toEndOf="parent" />
+                    android:layout_marginTop="8dp"
+                    android:paddingHorizontal="12dp"
+                    app:layout_constraintEnd_toEndOf="parent"
+                    app:layout_constraintStart_toEndOf="@id/ad_stars"
+                    app:layout_constraintTop_toBottomOf="@id/ad_body"
+                    app:layout_constraintHorizontal_chainStyle="packed" />
 
             </androidx.constraintlayout.widget.ConstraintLayout>
         </LinearLayout>

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

@@ -56,7 +56,7 @@
         <com.d4rk.androidtutorials.java.ads.views.NativeAdBannerView
             android:id="@+id/ad_view"
             android:layout_width="match_parent"
-            android:layout_height="match_parent"
+            android:layout_height="wrap_content"
             app:nativeAdLayout="@layout/bottom_app_bar_native_ad" />
     </FrameLayout>
 

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

@@ -56,8 +56,8 @@
                 style="@style/Widget.Material3.Button.TextButton"
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
-                android:minWidth="64dp"
-                android:minHeight="36dp"
+                android:minWidth="88dp"
+                android:minHeight="40dp"
                 android:layout_marginStart="8dp" />
         </LinearLayout>
     </LinearLayout>

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

@@ -13,10 +13,11 @@
         <com.google.android.material.card.MaterialCardView
             android:id="@+id/card_view_about"
             style="@style/Widget.Material3.CardView.Elevated"
+            app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.CardViewTopRounded"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_margin="24dp"
-            app:cardCornerRadius="24dp"
+            android:layout_marginHorizontal="24dp"
+            android:layout_marginTop="24dp"
             app:layout_constraintTop_toTopOf="parent">
 
             <androidx.constraintlayout.widget.ConstraintLayout
@@ -172,7 +173,7 @@
             android:id="@+id/ad_view"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:layout_marginTop="16dp"
+            android:layout_marginTop="2dp"
             app:layout_constraintTop_toBottomOf="@id/card_view_about"
             app:nativeAdLayout="@layout/about_native_ad" />