Home > Back-end >  Space between recyclerView items not showing even after adding margin
Space between recyclerView items not showing even after adding margin

Time:10-13

I tried adding space between recyclerView items in the item_layout. It works well on the XML preview but doesn't work well on the device.

city_item_layout:

<layout 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">

<data>

    <variable
        name="viewClickListener"
        type="android.view.View.OnClickListener" />

    <variable
        name="weatherResponseBody"
        type="com.example.weatherapp.model.WeatherResponseBody" />

    <variable
        name="city"
        type="com.example.weatherapp.model.CityWeatherReport" />
</data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:onClick="@{viewClickListener}"
    android:padding="20dp"
    android:background="@drawable/curved_background"
    android:foreground="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:elevation="1dp">

    <ImageView
        android:id="@ id/weather_state_icon_iv"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_baseline_wb_sunny_24"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:imageUrl="@{city.weatherIcon}"/>

    <TextView
        android:id="@ id/city_tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@{city.city}"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginStart="20dp"
        app:layout_constraintStart_toEndOf="@id/weather_state_icon_iv"
        app:layout_constraintTop_toTopOf="@id/weather_state_icon_iv"
        tools:text="New York" />

    <TextView
        android:id="@ id/country_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{city.country}"
        android:textStyle="italic"
        app:layout_constraintEnd_toEndOf="@id/city_tv"
        app:layout_constraintTop_toBottomOf="@id/city_tv"
        tools:text="Nigeria" />

    <TextView
        android:id="@ id/weather_state_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@{city.mainWeather}"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@id/weather_state_icon_iv"
        app:layout_constraintStart_toStartOf="@id/weather_state_icon_iv"
        app:layout_constraintTop_toBottomOf="@id/weather_state_icon_iv"
        app:layout_constraintVertical_bias="0.0"
        tools:text="Sunny" />

    <TextView
        android:id="@ id/temperature_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="170dp"
        android:text="@{city.tempToString()}"
        android:textSize="24sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@ id/country_tv"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@string/temperature" />

</androidx.constraintlayout.widget.ConstraintLayout>

RecyclerView_layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
tools:context=".MainFragment">

<androidx.appcompat.widget.Toolbar
    android:id="@ id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:elevation="2dp"
    android:minHeight="?attr/actionBarSize">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Weather Forecast"
        android:textSize="18sp"
        android:textStyle="bold" />
</androidx.appcompat.widget.Toolbar>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingHorizontal="20dp">
    <androidx.recyclerview.widget.RecyclerView
        android:id="@ id/city_list_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
        tools:listitem="@layout/city_item_layout" />
</LinearLayout>

XML Preview: enter image description here

After installation on device:

enter image description here

I don't know what I am doing wrong. I need assistance

CodePudding user response:

I'm not familiar with padding in RecyclerView, but it does seem to ignore it. A solution that will work for sure is wrapping your ConstraintLayout inside another ConstraintLayout with 20dp margin at all edges.

Doing something similar but with FrameLayout instead of ConstraintLayout might be more performant.

In any case I can't guarantee you that this is the best solution, but it will work.

CodePudding user response:

try to wrap your ConstraintLayout with LinearLayout in item_layout.xml, It should be as :

<LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:layout_margin="10dp">

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

        android:onClick="@{viewClickListener}"
        android:padding="20dp"
        android:background="@drawable/curved_background"
        android:foreground="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        android:elevation="1dp">

<!-- your code here-->

</LinearLayout>

You can tried it and good luck ;)

  • Related