Android Studio Question posted in
The official documentation can be found here.

Android Studio – GridLayout cardview getting out of screen Android

I am trying to make an app using GridLayout, CardView and LinearLayout so everything works fine on the emulator but when I test my app on real devices the card view goes out of the screen I have tested it on different devices but the problem still occurs please help!

This is how it looks inside the emulator

This is how it looks on a real device

XML CODE

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
tools:context=".MainActivity">

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

    <ImageView
        android:id="@+id/logo_img"
        android:src="@drawable/logo"
        android:layout_gravity="center"
        android:layout_width="250dp"
        android:layout_height="wrap_content"/>

    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:layout_margin="5dp"
        android:alignmentMode="alignMargins"
        android:columnCount="2"
        android:columnOrderPreserved="false"
        android:rowCount="4">

        <androidx.cardview.widget.CardView
            android:id="@+id/view1"
            android:layout_width="170dp"
            android:layout_height="170dp"
            android:layout_margin="15dp"
            app:cardBackgroundColor="#DE773C"
            app:cardCornerRadius="12dp"
            app:cardElevation="5dp">

            <Button
                android:id="@+id/btn1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/img1" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:text="TEST"
                    android:textAlignment="center"
                    android:textColor="#272932"
                    android:textSize="25sp"
                    android:textStyle="bold" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:id="@+id/view2"
            android:layout_width="170dp"
            android:layout_height="170dp"
            android:layout_margin="15dp"
            app:cardBackgroundColor="#DE773C"
            app:cardCornerRadius="12dp"
            app:cardElevation="5dp">

            <Button
                android:id="@+id/btn2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@android:color/transparent" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:orientation="vertical">

                <ImageView
                    android:layout_width="80dp"
                    android:layout_height="80dp"
                    android:layout_marginTop="10dp"
                    android:src="@drawable/img2" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="10dp"
                    android:text="TEST"
                    android:textAlignment="center"
                    android:textColor="#272932"
                    android:textSize="25sp"
                    android:textStyle="bold" />

            </LinearLayout>

        </androidx.cardview.widget.CardView>

    </GridLayout>

 </LinearLayout>
</ScrollView>
Tags:

2

Answers


  1. 0

    A lot of your widths and heights are hard coded: 170dp, 80dp, etc. What you have done is to design a layout that works for the layout and size of the designer screen. The layout breaks when the screen width/height changes as it does when you move to an emulator or real device.

    Take a look at Support different screen sizes about how to approach layout that work on different screen sizes. It takes some doing, but is necessary unless your app will only run on one configuration.

    Login or Signup to reply.
  2. 0

    If you want width of both CardViews same in all devices then try to add below in your GridLayout

    Add android:columnCount="2" and android:orientation="horizontal" to GridLayout

    Add android:layout_width="0dp" and android:layout_columnWeight="1" to CardViews

    Example Code:

    <GridLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:layout_margin="5dp"
    android:alignmentMode="alignMargins"
    android:columnCount="2"
    android:orientation="horizontal"
    android:columnOrderPreserved="false"
    android:rowCount="4">

    <androidx.cardview.widget.CardView
        android:id="@+id/view1"
        android:layout_width="0dp"
        android:layout_columnWeight="1"
        android:layout_height="170dp"
        android:layout_margin="15dp"
        app:cardBackgroundColor="#DE773C"
        app:cardCornerRadius="12dp"
        app:cardElevation="5dp">

        <Button
            android:id="@+id/btn1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginTop="10dp"
                android:src="@drawable/img1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:text="TEST"
                android:textAlignment="center"
                android:textColor="#272932"
                android:textSize="25sp"
                android:textStyle="bold" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/view2"
        android:layout_width="0dp"
        android:layout_columnWeight="1"
        android:layout_height="170dp"
        android:layout_margin="15dp"
        app:cardBackgroundColor="#DE773C"
        app:cardCornerRadius="12dp"
        app:cardElevation="5dp">

        <Button
            android:id="@+id/btn2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/transparent" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_marginTop="10dp"
                android:src="@drawable/img2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:text="TEST"
                android:textAlignment="center"
                android:textColor="#272932"
                android:textSize="25sp"
                android:textStyle="bold" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>
</GridLayout>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search