Android layout in preview different when I execute the app

Question

I made an app with a fragment and a recyclerviw inside.

The Fragment layout is this

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data>

        <variable
            name="homeViewModel"
            type="com.phatedev.eliquidcalculator.ui.home.HomeViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/e_liquid_list"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:listData="@{homeViewModel.eLiquids}"
            tools:listitem="@layout/list_e_liquid_item" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

and the layout of the single row list_e_liquid_item is

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="eLiquid"
            type="com.phatedev.eliquidcalculator.domains.ELiquid" />
    </data>

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="120dp"
        android:layout_margin="8dp"
        android:backgroundTint="#00AA44">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:padding="16dp">

            <!-- Title, secondary and supporting text -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@{eLiquid.name}"
                tools:text="Banana, Fragola, Ananas"
                android:textAppearance="?attr/textAppearanceHeadline6" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:text="@{eLiquid.description}"
                tools:text="https://www.netflix.com/watch/80111460?trackId=155573558"
                android:textAppearance="?attr/textAppearanceBody2"
                android:textColor="?android:attr/textColorSecondary" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:text="@{eLiquid.base}"
                tools:text="80/20"
                android:textAppearance="?attr/textAppearanceBody2"
                android:textColor="?android:attr/textColorSecondary" />

        </LinearLayout>

    </com.google.android.material.card.MaterialCardView>

</layout>

In the Android Studio preview everything look perfect, as you can see in this screenshot that I take on Android Studio

but when I run the app on the emulator the layout is broke and I don't understand what I'm doing wrong

EDIT:

The app:listData="@{homeViewModel.eLiquids}" in RecyclerView is this bind function

@BindingAdapter("listData")
fun bindRecyclerView(recyclerView: RecyclerView, data: List<ELiquid>?) {
    val adapter = recyclerView.adapter as ELiquidAdapter
    adapter.submitList(data)
}

EDIT: Ok, I found a solution to my problem here but can someone explain me why it work?

nono the `layout_height` and `layout_width` it might be possible that your card is taking all the space his parent (the recyclerview) is allowing it to take — Biscuit, Apr 13 '20 at 22:41
because the preview of `list_e_liquid_item` only gives you the preview of your current XML, in your card XML you only have your card, not the card nested in your recyclerview — Biscuit, Apr 13 '20 at 22:57
looks good to me, maybe the issue is in the activity? or whatever is using this fragment. Take a look to the layout inspector and you should be able to find out what is the container that is not taking the full width. BTW if that is your whole layout, you do not need the ConstraintLayout and you could just have the recyclerview with width and height `match_parent` — dmarin, Apr 14 '20 at 14:06
I don't understand where I'm wrong...I edited the original post adding a repository with the example code — Dennis A. Boanini, Apr 14 '20 at 20:25
@anatoli here the activity layout https://pastebin.com/nbF6mrrj — Dennis A. Boanini, Apr 14 '20 at 20:38
the answer is in your `nav_graph.xml`. This fragment is `Overview` with list of views. Second is detail view. You has used Master-Detail-View — anatoli, Apr 14 '20 at 20:38

score 1 · Answer 1 · answered Feb 13 '21 at 12:29

You didn't share your adapter code, but the issue would likely be that you are inflating the item view without "parent" parameter. I have faced the same issue and below are the changes I have made to fix the problem.

Before:

No parent parameter specified - list item width will be set to wrap content even though set to match parent in the xml.

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        return MyViewHolder(ListViewItemBinding.inflate(LayoutInflater.from(parent.context)))
  }

After:

Specified 'parent' parameter and the list item is inflated properly matching the parent view. Also parameter false is added, as recycler view will be attaching the view.

 override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
        return MyViewHolder(ListViewItemBinding.inflate(LayoutInflater.from(parent.context),parent, false))
    }

score 0 · Answer 2 · answered Apr 13 '20 at 22:28

It also differs from phone to another because of the density variations

edit your layout to matchparent the width

 <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="8dp"
        android:backgroundTint="#00AA44">

score 0 · Answer 3 · answered Apr 14 '20 at 20:51

try to change in your activity.xml

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

to

    <com.google.android.material.navigation.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/activity_main_drawer" />

score 0 · Answer 4 · answered Apr 19 '20 at 10:42

0

Actally i have also faced same kind of problem it looks fine in preview must while run ii it is getting wrap around so what i did is.please add dummy match_parent View like below in your linearlayout of list_e_liquid_item file.

<View android:layout_width=match_parent android :layout_height= 1dp />

Please let me know if it doent work.

answered Apr 19 '20 at 10:42

Maulik Togadiya

594
5
10

I edited my post with a link to a solution that worked well for me. – Dennis A. Boanini Apr 19 '20 at 13:37

score 0 · Answer 5 · answered Jul 15 '23 at 09:35

I share my experience:

That normal if you have other code affecting layout performance during the execution.

For example: 1- You have a listview with margin and during the execution you inflate the listview adapter to layoutout. so you have listview xml code , and layout xml code and adapter java/kotlin code. you have to be sure which one will be executed first, last one will have effect.

2- similar to above case, you have for example textview/layout with a specific width, and you change the width programatically in the code.

solution in your code

Android layout in preview different when I execute the app

5 Answers5

Before:

After: