Android -tag adds extra margin to CardView

Question

I'm in the middle of doing a design-focused school project in Android studio (Java code is not the priority) where I wanted to design a workout app of sorts. However I'm currently having issues with my XML-layouts not displaying as the same way in Android Studio, as they are on an emulator. This even though both the emulator and the Android studio is using the Pixel 3 XL as base.

I want to include a layout I've made of a CardView in a fragment. I'm doing this because I want to reuse the same CardView on multiple different fragments later. I've included the layout in a include layout=""-tag and from within that tag set the margins (16dp) I want on the CardView (see code below). This looks totally fine in the Android Studio preview, but running on the emulator it looks like the margin is set to 48dp or something ridiculous like that (see images below).

Fragment Layout

<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"
    tools:context=".ui.home.HomeFragment">

    <include layout="@layout/personinfo_cardview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp" />

</LinearLayout>

CardView Layout

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/personInfo_cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:padding="16dp"
app:cardCornerRadius="0dp">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="16dp"
    android:paddingBottom="16dp">

    <TextView
        android:id="@+id/weightValue_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/value_unknown"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@id/weightHeading_textView"
        app:layout_constraintEnd_toStartOf="@+id/heightValue_textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/heightValue_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/value_unknown"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@id/heightHeading_textView"
        app:layout_constraintEnd_toStartOf="@+id/ageValue_textView"
        app:layout_constraintStart_toEndOf="@id/weightValue_textView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/ageValue_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/value_unknown"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@id/ageHeading_textView"
        app:layout_constraintEnd_toStartOf="@+id/genderValue_textView"
        app:layout_constraintStart_toEndOf="@id/heightValue_textView"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/genderValue_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/value_unknown"
        android:textSize="18sp"
        app:layout_constraintBottom_toTopOf="@id/genderHeading_textView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/ageValue_textView"
        app:layout_constraintTop_toTopOf="parent" />


    <TextView
        android:id="@+id/weightHeading_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/kilogram_short"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/heightValue_textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/weightValue_textView" />

    <TextView
        android:id="@+id/heightHeading_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/centimeter_short"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/ageValue_textView"
        app:layout_constraintStart_toEndOf="@id/weightValue_textView"
        app:layout_constraintTop_toBottomOf="@id/heightValue_textView" />

    <TextView
        android:id="@+id/ageHeading_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/age_short"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/genderValue_textView"
        app:layout_constraintStart_toEndOf="@id/heightValue_textView"
        app:layout_constraintTop_toBottomOf="@id/ageValue_textView" />

    <TextView
        android:id="@+id/genderHeading_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/gender_short"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/ageValue_textView"
        app:layout_constraintTop_toBottomOf="@id/genderValue_textView" />

</androidx.constraintlayout.widget.ConstraintLayout>

What is going on here? I've tried to change the margins both inside the Layout-file and in the include-tag, but nothing changes. I've also tried both a LinearLayout and a ConstraintLayout as a wrapper, but with the same outcome.

Any help is appritated!

score 0 · Answer 1 · answered Aug 03 '20 at 12:16

0

Remove padding/margin on your CardView, include, ConstraintLayout. set cardView elevation to app:cardElevation="0dp"

answered Aug 03 '20 at 12:16

AagitoEx

484
2
8

Thanks, but the top margin in still the same after making those changes – William Larsson Aug 03 '20 at 12:21
i cant help with step by step process, you need to be more specific, and also upvote the answer if it helped. – AagitoEx Aug 04 '20 at 17:48

score 0 · Answer 2 · answered Aug 03 '20 at 12:41

0

Turn out it was the nav_host_fragment that had some strange margins. This answers my question: https://stackoverflow.com/a/57629281/13877395

answered Aug 03 '20 at 12:41

William Larsson

25
4

Android -tag adds extra margin to CardView

2 Answers2