Layout dosent adjust according to the screen size

Question

Hello i have created a layout which should adjust according to the screen size but in one device which has a bigger screen size the layout fits properly but with another device with smaller screen size the layout dosent fits properly some portion from top is not visible and same for the bottom

Expected

Here is my xml code

post_item_container_home.xml

<RelativeLayout 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="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true">

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/Card_View"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_marginStart="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome"
        tools:ignore="ObsoleteLayoutParam">

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imagePostHome"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:contentDescription="@string/todo"
            app:layout_constraintDimensionRatio="H,16:9"
            app:shapeAppearanceOverlay="@style/RoundedCornerHome" />

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

    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:layout_below="@+id/Card_View"
        app:cardBackgroundColor="@color/grey"
        android:layout_marginStart="5dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        android:layout_marginBottom="10dp"
        android:background="@color/grey"
        app:shapeAppearanceOverlay="@style/RoundedCornerHome">


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


</RelativeLayout>

fragment_home.xml

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black">


    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <include
            android:id="@+id/toolbar"
            layout="@layout/tool_bar" />
    </com.google.android.material.appbar.AppBarLayout>

    <TextView
        android:id="@+id/view_all_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/appBarLayout"
        android:layout_alignParentEnd="true"
        android:layout_marginEnd="20dp"
        android:layout_marginTop="10dp"
        android:text="@string/view_all"
        android:textColor="@color/white"
        android:textStyle="bold" />

    <!--    Horizontal RecyclerView-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/postRecyclerView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/view_all_text"
        android:background="@color/black"
        android:orientation="horizontal"
        android:overScrollMode="never"
        app:reverseLayout="true" />
    <!--    Vertical RecyclerView-->
    <!--    this the one which shows the data from post_item_container_home.xml-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerViewHome"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/postRecyclerView1"
        android:layout_marginBottom="10dp"
        android:orientation="vertical"
        android:overScrollMode="never"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmerEffect"
        android:layout_below="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <include layout="@layout/post_item_container_shimmer_home" />

        <include layout="@layout/post_item_container_shimmer_home" />


    </com.facebook.shimmer.ShimmerFrameLayout>
</RelativeLayout>

check this out, https://stackoverflow.com/a/9477150/12709358 — Elango, Jun 21 '21 at 08:25

rasfarrf5 · Accepted Answer · 2021-06-21T09:32:32.390

In Android XML try not to give hardcoded DP value for the layout width or height unless it is necessary.

From you code it shows android:layout_height="500dp" inside MaterialCardView which is too large for small density devices. If you want to make it full height, try to use match_parent as a height of MaterialCardView.

Use below layout: post_item_container_home.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:weightSum="5"
        android:orientation="vertical"
        >
    
        <com.google.android.material.card.MaterialCardView
            android:id="@+id/Card_View"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_marginStart="5dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="5dp"
            android:background="#000"
            android:layout_weight="4">
    
            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/imagePostHome"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                app:layout_constraintDimensionRatio="H,16:9"
                app:shapeAppearanceOverlay="@style/RoundedCornerHome" />
    
        </com.google.android.material.card.MaterialCardView>
    
        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_below="@+id/Card_View"
            app:cardBackgroundColor="@color/grabpay_blue"
            android:layout_marginStart="5dp"
            android:layout_marginTop="10dp"
            android:layout_marginEnd="5dp"
            android:layout_marginBottom="10dp"
            android:background="@color/grey"
            app:shapeAppearanceOverlay="@style/RoundedCornerHome">
    
    
        </com.google.android.material.card.MaterialCardView>
    </LinearLayout>

ok brother i have uploaded a screenshot of what i want ,please check the question — Vasant Raval, Jun 21 '21 at 09:26
First i didnt have that second material card view i have only one material card view which contains the imageview where the hight and width was match parent previously ,and at that time it works fine with every device i test but becuase i have to include the second material card view i chaged the first one height to be 500 dp and expected that it works fine with all devices but it dosent — Vasant Raval, Jun 21 '21 at 09:33
Thank you so much you saved my day , brother it will be very helpul if you explain layout weight and what is weight sum ,i have implemented it but dont know how it works — Vasant Raval, Jun 21 '21 at 09:43
Happy to know that this works. This link contains more in details about linear layout weightSum: https://stackoverflow.com/questions/7452741/what-is-androidweightsum-in-android-and-how-does-it-work Please help to accept answer. :) — rasfarrf5, Jun 21 '21 at 09:45

Layout dosent adjust according to the screen size

1 Answers1