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

Not getting same result in apk and designer view in android studio

Hello everyone i am new to android development and i was trying to design an activity and i desgined it the way i wanted it to be but when i installed the apk in my phone the design is not same i check all the constraints and they are also right , here is the Images from both android studio and my mobile:-
Screen shot from mobile :- Screenshot from Mobile

Screenshot from android studio :- Screenshot from android studio

Here is the layout code :-

<?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=".Details_Page">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="234dp"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/android_3" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout3"
        android:layout_width="417dp"
        android:layout_height="483dp"
        android:background="@drawable/modern_bg_2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.333"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0">

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Tags:

3

Answers


  1. 0

    Install Device Info on your Android device. Then open it and locate the Display tab. There you will find your screen size in pixels like this: 1080×1920. Suppose if your screen size is 1080×2220, choose the device with the same size.

                                              OR

    You can make layout folders for different density buckets. There are

    LDPI: 0.75x or 75% (~120 DPI)

    MDPI: 1x or 100% (base screen) (~160 DPI)

    HDPI: 1.5x or 150% (~240 DPI)

    XHDPI: 2x or 200% (~320 DPI)

    XXHDPI: 3x or 300% (~480 DPI)

    XXXHDPI: 4x or 400% (~640 DPI)

    Suppose if a device is xhdpi, so the layout with a xhdpi support will only scale on the xhdpi device.

    So if you want to make different layout folders for different density buckets, right click on res folder and select new and then Layout folder.

    Now choose Density buckets from the list and select the last Density bucket.
    Keep doing this until you have all the layout folders for density buckets.

    Then choose the device for the layout. Suppose I am in file for a xhdpi device so in layout editor choose a xhdpi device. Do this for all layout files..

    Then design different layouts for different density buckets.
    I hope it may help you.

    Please edit the answer if english is not good
    Thanks

    Login or Signup to reply.
  2. 0

    As Alexander has commented, your UI need to be scalable, you need to create relative constraint between views so that it can scale properly in different displays.

    First, you should remove app:layout_constraintHorizontal_bias="0.333" and app:layout_constraintVertical_bias="1.0" as they either don’t work in this context or scale differently in different screen size.

    Next, since your image has a fixed height, an easy way to achieve what you want is to use margin_top. You will have to find out the exact value yourself in order to make the curvy background hide a part of your image. Here is some example, I set the margin_top temporarily as 200dp :

    <?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=".Details_Page">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="234dp"
        android:scaleType="fitXY"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/android_3" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="200dp" 
        android:background="@drawable/modern_bg_2">

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
    Login or Signup to reply.
  3. 0

    could use RelativeLayout:

    <?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"
tools:context=".Details_Page">

<ImageView
    android:id="@+id/imageView"
    android:layout_width="0dp"
    android:layout_height="234dp"
    android:scaleType="fitXY"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@drawable/android_3" />

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/constraintLayout3"
    android:layout_width="417dp"
    android:layout_height="483dp"
    android:background="@drawable/modern_bg_2"
    android:layout_below="@+id/imageView"
    android:layout_marginTop="-100dp"
/>

</RelativeLayout>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search