CODEWITHSUNDEEP
androidandroid-layoutandroid-recyclerview
Vasant Raval
Vasant Raval

Reputation: 303

Layout dosent adjust according to the screen size

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

enter image description here

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>

Upvotes: 0

Views: 76

Answers (1)

rasfarrf5
rasfarrf5

Reputation: 237

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>

Upvotes: 1

Related Questions