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>
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.
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>
Related
I am implementing card view through GridLayout in android but my card view is not showing up. I want to display main layout is Liner Layout inside Grid Layout its contain Card View . I have tried all things but the card view is not showing up.
activity_main.xml
<?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"
android:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:rowCount="3">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
÷ hope any one fix this problem.
Make the height of the ScrollView as wrap_content as its height is determined at runtime. and also the same for its nested LinearLayout
To make the ImageView & TextView visible use android:gravity="center_vertical" for their surrounding LinearLayout
so change your layout to be:
<?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="wrap_content"
android:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:rowCount="3">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
Edit:
Anyone explain why its not showing my GridLayout width as match_parent
I want this :
Solution:
Changes:
Making Gridlayout width to match_parent
Adding android:layout_gravity="center" to the Gridlayout
Making the width & height of all CardViews and underlying
LinearLayouts to "wrap_content" >>>>>> This is the real cause to
the problem.
Making android:gravity="center" to the CardViews underlying
LinearLayout for symmetric purpose >> you can leave it as center_vertical if you wish.
<?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="wrap_content"
android:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="50dp"
android:rowCount="2">
<!-- First Row , First Column -->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- First Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , First Column-->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
you can ConstrainLayout
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
</androidx.constraintlayout.widget.ConstraintLayout>
Thanks #Zain your answer is work well , but i have a one more mistake in GridLayout when i try to make GridLayout width as match_parent its not showing anything so i change as Layout_Width ,
<?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="wrap_content"
android:background="#drawable/bgapps"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="15dp">
<GridLayout
android:layout_width="wrap_content" // here i want to match_parent
android:layout_height="wrap_content"
android:alignmentMode="alignMargins"
android:columnCount="2"
android:columnOrderPreserved="false"
android:padding="50dp"
android:rowCount="2">
<!-- First Row , First Column -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- First Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , First Column-->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
<!-- Second Row , Second Column-->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_rowWeight="1"
android:layout_columnWeight="1"
android:layout_margin="12dp"
app:cardCornerRadius="12dp"
app:cardElevation="6dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="vertical"
android:padding="16dp">
<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:src="#drawable/bookmark" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="12dp"
android:text="Calendar"
android:textColor="#6f6f6f"
android:textSize="14dp" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</LinearLayout>
</ScrollView>
Anyone explain why its not showing my GridLayout width as match_parent
I want this :
Currently, I have this code for this page.
But my preview should that my button is at the center of the second half layout, but in my emulator, it shows it still at the top of the layout.
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_profile">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_img"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/default_person_icon"
app:civ_border_color="#android:color/black"
app:civ_border_width="2dp"
android:layout_centerInParent="true"
android:layout_marginTop="100dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User Email"
android:textSize="28sp"
android:textColor="#android:color/white"
android:layout_below="#+id/profile_img"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>
</RelativeLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/btn_change_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Change Password"
app:cornerRadius="50dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"/>
<Button
android:id="#+id/btn_sign_out"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign Out"
app:cornerRadius="50dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"/>
</LinearLayout>
</LinearLayout>
Here the image for preview
https://i.stack.imgur.com/QLaot.jpg
and here is the image for the emulator
https://i.stack.imgur.com/ED3FP.jpg
Different phones got different screen size, in your layout you are using fixed size on your view (fixed size is android:layout_width="100dp" for example) and the result is that what may look good on one screen (your android studio preview screen) will not look good on another screen (your actual phone).
If you want to create one layout to support all screen sizes you can use ConstraintLayout with guidelines and Chains to support different screen sizes.
Here is an example using ConstaintLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent=".5" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline7"
app:layout_constraintEnd_toStartOf="#+id/guideline9"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars[1]" />
<TextView
android:id="#+id/textView9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:text="Email"
app:layout_constraintEnd_toEndOf="#+id/imageView2"
app:layout_constraintStart_toStartOf="#+id/imageView2"
app:layout_constraintTop_toBottomOf="#+id/imageView2" />
<Button
android:id="#+id/button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline9"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toTopOf="#+id/guideline7" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Button"
app:layout_constraintEnd_toStartOf="#+id/guideline9"
app:layout_constraintStart_toStartOf="#+id/guideline8"
app:layout_constraintTop_toBottomOf="#+id/button" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline9"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent=".9" />
</androidx.constraintlayout.widget.ConstraintLayout>
Here is how it will look (I am attaching an image from the layout editor so you could see the constraints and guidelines):
You can use the tag android:layout_weight so that you don't have to worry about the different screen sizes. Here I made an example using android:layout_weight, android:layout_gravity and android:gravityfor making a structure you need. Hope it helps you. The screenshot of the structure is here.
You can get more reference about android:layout_weight from here.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#android:color/holo_blue_dark"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/profile_picture"
android:src="#drawable/user_profile_picture"
android:layout_centerInParent="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/profile_picture"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="User Email"
android:textColor="#android:color/white"
android:textSize="28sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical"
android:gravity="center">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_horizontal">
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/btn_change_password"
android:layout_gravity="bottom"
android:text="change password"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center_horizontal">
<Button
android:layout_width="200dp"
android:layout_height="wrap_content"
android:id="#+id/btn_sign_out"
android:layout_gravity="top"
android:text="sign out"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
You seem to be doing it right. I guess you just missed adding the weightSum in the parent tag.
<?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:orientation="vertical"
android:weightSum="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_profile">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_img"
android:layout_width="100dp"
android:layout_height="100dp"
android:src="#drawable/default_person_icon"
app:civ_border_color="#android:color/black"
app:civ_border_width="2dp"
android:layout_centerInParent="true"
android:layout_marginTop="100dp" a/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="User Email"
android:textSize="28sp"
android:textColor="#android:color/white"
android:layout_below="#+id/profile_img"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"/>
</RelativeLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center">
<Button
android:id="#+id/btn_change_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Change Password"
app:cornerRadius="50dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"/>
<Button
android:id="#+id/btn_sign_out"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Sign Out"
app:cornerRadius="50dp"
android:layout_marginStart="40dp"
android:layout_marginEnd="40dp"/>
</LinearLayout>
</LinearLayout>
This seemed to make it work for me. All the best!
I am working on an activity that has three recyclerviews.
My issue is that the output is different on different devices.
I am testing the app on my real device and on the Android Studio emulators, and the output is right. But I have some customers users who say that the output is wrong.
Here is my screen shot with the right output:
And this is the wrong output on some devices:
I have tried changing text size, but with no success.
I ask you where should I start looking for a solution, at recyclerview or at item view?
EDIT
Activity Layout:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f2f2f2">
<LinearLayout
android:id="#+id/cabeceraTicket"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_dark_background"
android:orientation="horizontal">
<TextView
android:id="#+id/txtTicket"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Ticket: "
android:textColor="#color/cardview_light_background"
android:textSize="18sp" />
<TextView
android:id="#+id/txtSalon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Salón: "
android:textColor="#color/cardview_light_background"
android:textSize="18sp" />
<TextView
android:id="#+id/txtMesa"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="Mesa:"
android:textColor="#color/cardview_light_background"
android:textSize="18sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/botones"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/cabeceraTicket"
android:orientation="horizontal">
<Button
android:id="#+id/btnTodo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Menu/Ticket" />
<Button
android:id="#+id/btnMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Menu" />
<Button
android:id="#+id/btnTicket"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Ticket" />
</LinearLayout>
<LinearLayout
android:id="#+id/botones2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/botones"
android:layout_weight="1"
android:orientation="horizontal">
<Button
android:id="#+id/btnRegresar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#009688"
android:text="Salir"
android:textColor="#color/white" />
<Button
android:id="#+id/btnMarchar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#3F51B5"
android:text="Marchar todo"
android:textColor="#color/white" />
</LinearLayout>
<Button
android:id="#+id/btnConectar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:visibility="gone" />
<LinearLayout
android:id="#+id/menus"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/botones2"
android:orientation="vertical">
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Menú"
android:textSize="24sp"
android:textStyle="bold" />
<LinearLayout
android:id="#+id/lmenu1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/l0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_previous" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewMenu0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
<ImageView
android:id="#+id/r0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_next" />
</LinearLayout>
<LinearLayout
android:id="#+id/lmenu2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:visibility="visible">
<ImageView
android:id="#+id/l1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_previous" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewMenu1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
<ImageView
android:id="#+id/r1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_next" />
</LinearLayout>
<LinearLayout
android:id="#+id/lmenu3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal"
android:visibility="visible">
<ImageView
android:id="#+id/l2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_previous" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewArticulos1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="10"
android:orientation="horizontal">
</android.support.v7.widget.RecyclerView>
<ImageView
android:id="#+id/r2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1"
android:src="#android:drawable/ic_media_next" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/ticket"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/menus"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/titulo"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Ticket"
android:textSize="24sp"
android:textStyle="bold" />
<ListView
android:id="#+id/listview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/titulo"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:listSelector="#drawable/list_selector"
android:state_activated="true" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
First recyclerview item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:cardCornerRadius="4dp"
app:cardElevation="1dp"
app:cardMaxElevation="2dp">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:layout_weight="4"
android:autoSizeMaxTextSize="15sp"
android:autoSizeMinTextSize="8sp"
android:autoSizeTextType="uniform"
android:gravity="center|center_horizontal|center_vertical"
android:padding="12dp"
android:text="Canada"
android:textAllCaps="false"
android:textColor="#color/red_A700"
android:textSize="30sp"
android:textStyle="bold"
app:autoSizeMinTextSize="20sp"
app:fontFamily="sans-serif" />
</LinearLayout>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Second recyclerview item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:cardCornerRadius="4dp"
app:cardElevation="1dp"
app:cardMaxElevation="2dp">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:autoSizeMaxTextSize="15sp"
android:autoSizeMinTextSize="8sp"
android:autoSizeTextType="uniform"
android:gravity="center|center_horizontal|center_vertical"
android:padding="12dp"
android:text="Canada"
android:textAllCaps="false"
android:textColor="#color/red_A700"
android:textSize="30sp"
android:textStyle="bold"
app:autoSizeMinTextSize="20sp"
app:fontFamily="sans-serif" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
Third recyclerview item layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_margin="1dp">
<android.support.v7.widget.CardView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:cardCornerRadius="4dp"
app:cardElevation="1dp"
app:cardMaxElevation="2dp">
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginStart="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:layout_marginEnd="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="5dp"
android:autoSizeMaxTextSize="15sp"
android:autoSizeMinTextSize="8sp"
android:autoSizeTextType="uniform"
android:gravity="center|center_horizontal|center_vertical"
android:padding="12dp"
android:text="Canada"
android:textAllCaps="false"
android:textColor="#color/red_A700"
android:textSize="30sp"
android:textStyle="bold"
app:autoSizeMinTextSize="20sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
your code contain like this,
<RelativeLayout
android:id="#+id/relative"
android:layout_width="120dp"
android:layout_height="50dp"
android:gravity="center_horizontal|center_vertical"></>
you need to change the item layout fixed length width
I would suggest not to set values for the textsize in your xml at all (either in dp or sp). Let each user choose their preferred textSize by changing the system-wide font size in the device's Settings--->Display--->FontSize.
Just make sure any container for these textViews (the parent layout of each textView) can accommodate textViews of varying sizes. One way this can be accomplished, is by setting the container's width and height values to 'WrapContent' if possible.
My answer should be viewed like a shift in your approach to text sizes in general, rather than a specific answer to a specific problem like the one you are facing. There may well be easier and faster solutions if you just want to quick-fix your current issue.
Image link
I want to create the dialog layout as shown in the image. The Dialog size must be responsive as per the screen size. The code I have written is not responsive. I also want to maintain he aspect ration into the Imageswitcher.
I have tried making different layout file for different screen sizes i.e small,normal,large but nothing worked for me.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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"
android:layout_gravity="center"
>
<LinearLayout
android:id="#+id/ll"
android:layout_width="355dp"
android:layout_height="match_parent"
android:layout_marginStart="8dp"
android:layout_marginTop="2dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:elevation="0dp"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="493dp"
android:layout_gravity="center"
android:background="#fff"
app:cardCornerRadius="3dp"
app:cardElevation="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="435dp"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:layout_marginRight="3dp"
android:layout_marginBottom="0dp"
app:cardCornerRadius="3dp"
>
<ImageSwitcher
android:id="#+id/custompop_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</android.support.v7.widget.CardView>
<TextView
android:id="#+id/customIdText"
android:layout_width="match_parent"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:layout_margin="4dp"
android:background="#fff"
android:orientation="horizontal"
android:padding="0dp">
<Button
android:id="#+id/share_Button"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_height"
android:layout_marginLeft="0dp"
android:layout_marginTop="#dimen/button_top_margin"
android:background="#drawable/share10"
android:gravity="center_vertical"
android:textAppearance="#style/popupText" />
<Button
android:id="#+id/download_Button"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_height"
android:layout_marginLeft="4dp"
android:layout_marginTop="#dimen/button_top_margin"
android:background="#drawable/save_final"
android:gravity="center_vertical"
android:paddingLeft="30dp"
android:textAppearance="#style/popupText" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_marginTop="35dp"
android:background="#android:color/transparent"
android:orientation="horizontal">
<ImageView
android:id="#+id/goback"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginLeft="62dp"
android:layout_marginTop="7dp"
android:src="#drawable/previous" />
<ImageView
android:id="#+id/cancelButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="76dp"
android:src="#drawable/close_button" />
<ImageView
android:id="#+id/goforward"
android:layout_width="wrap_content"
android:layout_height="24dp"
android:layout_marginLeft="76dp"
android:layout_marginTop="7dp"
android:src="#drawable/next" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
try this code, i have create custom layout for dialog
its same as you need dialog layout
try this code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:gravity="center"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:translationZ="10dp">
<LinearLayout
android:id="#+id/layout_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="450dp"
android:background="#drawable/nature" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<android.support.v7.widget.CardView
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="10dp"
android:elevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Share"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:elevation="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Go"
android:textSize="20sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/layout_1"
android:layout_marginTop="10dp"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_menu_send" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Main Activity
Dialog stardialog = new Dialog(this);
stardialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
stardialog.getWindow().setBackgroundDrawable(new
ColorDrawable(android.graphics.Color.TRANSPARENT));
stardialog.setContentView(R.layout.item);
stardialog.show();
I'm new in android programming and my problem is that i created a simple calculator interface with some LienarLayouts and the result is not the same on the design display and my physical phone.
The result i get on the design
The result i get on my phone (Galaxy S7)
I couldn't find any solutions for that. For the operators it's some images that i put on different drawable folders (hdpi, xhdpi and xxhdpi).
i will put my xml file here.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="165dp"
android:background="#color/clrBlue"
android:orientation="vertical">
<TextView
android:id="#+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:gravity="right"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="50dp"
android:text="567"
android:textColor="#android:color/background_light"
android:textSize="45sp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="7"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="8"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="9"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/divide" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="4"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="5"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="6"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/multiply" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="87dp"
android:orientation="horizontal"
android:weightSum="4">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="1"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="2"
android:textColor="#android:color/black"
android:textSize="30sp" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
android:text="3"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:color/background_light"
app:srcCompat="#drawable/subtract" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="192dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<Button
android:id="#+id/button15"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#color/clrBlue"
android:text="clear"
android:textSize="25sp" />
</LinearLayout>
<Button
android:id="#+id/button3"
android:layout_width="96dp"
android:layout_height="match_parent"
android:background="#android:color/background_light"
android:text="0"
android:textColor="#android:color/black"
android:textSize="30sp" />
<ImageButton
android:id="#+id/imageButton"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/background_light"
app:srcCompat="#drawable/add" />
</LinearLayout>
</LinearLayout>
<ImageButton
android:id="#+id/imageButton5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#color/transparent"
android:paddingRight="50dp"
android:paddingTop="125dp"
app:srcCompat="#drawable/equal" />
</RelativeLayout>
The result is different because of the different sizes. At the top of your layout display you will see that Nexus 4 is selected which is of screen size 4.7" and I think Galaxy S7 is of size 5.1".
Also, there can be a difference in density pixels.
You can refer to the android document for different pixel densities.
Support Different Pixel Densities
Relative and Linear layouts is not best choice for create calculator layout. To make this layout try use GridLayout or ConstraintLayout. It will be easier and more reliable solution
Edited