I have a problem with the layout on the Android Studio. The Editor (XML file) and Emulator (Nexus 10) shows the layout right. But if I run the app on my Huawei Mediaped M5, the layout changes and everything is mixed.
The Emulator and my device have the same Resolution(2560*1600).
The XML file:
<?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=".MainActivity">
<Button
android:id="#+id/button_fahrzeugsimulation"
android:layout_width="461dp"
android:layout_height="203dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="108dp"
android:layout_marginTop="173dp"
android:background="#android:color/holo_blue_dark"
android:text="Fahrzeugsimulation"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_uebungen"
android:layout_width="457dp"
android:layout_height="182dp"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/button_fahrzeugsimulation"
android:layout_marginBottom="106dp"
android:background="#android:color/holo_blue_dark"
android:text="Übungen"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_Weiterbildungsangebot"
android:layout_width="wrap_content"
android:layout_height="207dp"
android:layout_alignBottom="#+id/button_fahrzeugsimulation"
android:layout_alignParentEnd="true"
android:layout_marginEnd="107dp"
android:background="#android:color/holo_blue_dark"
android:text="Weiterbildungsangebot"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_Unterlagen"
android:layout_width="498dp"
android:layout_height="185dp"
android:layout_alignStart="#+id/button_Weiterbildungsangebot"
android:layout_alignTop="#+id/button_uebungen"
android:layout_marginStart="-6dp"
android:layout_marginTop="-2dp"
android:background="#android:color/holo_blue_dark"
android:text="Unterlagen"
android:textColor="#ffffff"
android:textSize="38sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView_eMobility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:text="eMobility"
android:textColor="#android:color/holo_blue_dark"
android:textStyle="bold"
android:textSize="64sp" />
<TextView
android:id="#+id/textView_Lab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/textView_eMobility"
android:layout_toEndOf="#+id/textView_eMobility"
android:text="Lab"
android:textColor="#android:color/holo_red_light"
android:textStyle="bold"
android:textSize="52sp" />
I think the problem is that the screen width of real device is not the same of the emulator, so you need
to create different layouts to support design for your screen width and height and in each layout,
change views dimensions to fit the screen..
this documentation would help : https://developer.android.com/training/multiscreen/screensizes
The device which your testing resolution is different from which you are trying to test on device(Huawei Mediaped M5)
So you are facing the issue.Even you are using marginstart in your layout.There are some static values which will vary with devices.
like this values:
android:layout_width="457dp"
android:layout_height="182dp"
android:layout_marginStart="108dp"
android:layout_marginTop="173dp"
device screen sizes check below link which shows nexus10 and Huawei Mediaped M5
screen size is different
Related
I'm using Relative Layout and I set the width and length to match_parent. It displays fine in Redmi k30 but in Pixel XL it only display up-to Delete Record, it does not display View All Record and scrolling also does not work.
I'm new to android and just starting layout designs, please advice. Thank you!
It should display like this:
But on Pixel XL the last button is missing:
XML 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="#2196F3"
android:padding="10dp"
tools:context=".RUDActivity">
<TextView
android:id="#+id/txtTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Please enter product ID to retrieve"
android:textColor="#37474F"
android:textSize="24dp" />
<EditText
android:id="#+id/prodId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtTitle"
android:hint="Product ID"
android:textColor="#37474F"
android:inputType="number"
android:textSize="24dp" />
<EditText
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/prodId"
android:layout_marginTop="30dp"
android:hint="Name"
android:textColor="#37474F"
android:inputType="textPersonName"
android:textSize="24dp" />
<EditText
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/name"
android:hint="Description"
android:textColor="#37474F"
android:inputType="text"
android:textSize="24dp" />
<EditText
android:id="#+id/price"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/description"
android:hint="Price"
android:textColor="#37474F"
android:inputType="numberDecimal"
android:textSize="24dp" />
<EditText
android:id="#+id/quantity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/price"
android:hint="Quantity"
android:textColor="#37474F"
android:inputType="number"
android:textSize="24dp" />
<Button
android:id="#+id/btnSearch"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/quantity"
android:layout_marginTop="30dp"
android:text="Search Data"
android:textSize="24dp" />
<Button
android:id="#+id/btnView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnDelete"
android:layout_marginTop="30dp"
android:text="View All Record"
android:textSize="24dp" />
<Button
android:id="#+id/btnUpdate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnSearch"
android:layout_marginTop="30dp"
android:text="Update Record"
android:textSize="24dp" />
<Button
android:id="#+id/btnDelete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/btnUpdate"
android:layout_marginTop="30dp"
android:text="Delete Record"
android:textSize="24dp" />
Welcome to android..
Think of arranging 15 people in 5 rows of 3 in a dark room.
If you have to make them look the same whatever the dimensions of the room might be then the space cannot be the same.
Redmi and Pixel XL are high density and long devices.
You can use this library Intuit SDK library for the dimensions. This library helps to automatically scale depending on the screen size.
Going forward However you have to use ConstraintLayout with matchConstraints and come up with a design idea that makes it look the same in most devices.
For eg: Making the upper form 1 section and the lower buttons another.
And instead of following a top-down approach make the form part stick to the top and the buttons part to the bottom.
For the scroll you have to use a ScrollView and wrap your layouts within it , Here is a good Stackover FLow Question to get started
Here the image from my mobile:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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:visibility="visible"
tools:context=".MainActivity">
<TextView
android:id="#+id/textView"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Miles"
android:textSize="24sp"
android:visibility="visible"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="56dp"
tools:visibility="visible" />
<TextView
android:id="#+id/textView2"
android:layout_width="110dp"
android:layout_height="40dp"
android:text="Km"
android:textSize="24sp"
tools:layout_editor_absoluteX="46dp"
tools:layout_editor_absoluteY="140dp" />
<Button
android:id="#+id/buttonConvMilesToKm"
android:layout_width="287dp"
android:layout_height="54dp"
android:text="Convert Miles To Km"
android:textSize="18sp"
tools:layout_editor_absoluteX="62dp"
tools:layout_editor_absoluteY="209dp" />
<Button
android:id="#+id/buttonConvKmToMiles"
android:layout_width="280dp"
android:layout_height="60dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="65dp"
tools:layout_editor_absoluteY="284dp" />
<EditText
android:id="#+id/editTextMiles"
android:layout_width="200dp"
android:layout_height="50dp"
android:text="Convert Km To Miles"
android:textSize="18sp"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="46dp" />
<EditText
android:id="#+id/editTextKm"
android:layout_width="200dp"
android:layout_height="50dp"
android:ems="10"
android:inputType="textPersonName"
tools:layout_editor_absoluteX="179dp"
tools:layout_editor_absoluteY="130dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
This maybe a small error i did , but what am i missing so the interface appears to be overlapped . Im using Android Studio to develop this But the reference design looks alright unless i run it on emulator or my mobile itself . Im guessing im not wrong in coding the layouts n i even tried to change the way the layouts can be written
Your layout has no constraints. Please review the documentation on the valid ConstraintLayout XML attributes you can use to layout views relative to each other within a ConstraintLayout. You are looking for attributes like layout_constraintStart_toEndOf.
How to edit xml file layout. All display screen is the same.
screen size 4.7", 5.0" display accuracy. But screen other than this. Display Distortion. Except screen tablet.
Help me fix it.
screen_main.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="jp.vertice.test.MainScreenFragment">
<!-- TODO: Update blank fragment layout -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#51c8fc">
<ImageView
android:layout_width="200dp"
android:layout_height="195dp"
android:id="#+id/imageView2"
android:src="#mipmap/ic_launcher"
android:background="#fc0c0c"
android:layout_marginLeft="18dp"
android:layout_marginStart="18dp"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn1"
android:layout_alignParentTop="true"
android:layout_alignLeft="#+id/btn3"
android:layout_alignStart="#+id/btn3" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn2"
android:layout_below="#+id/btn1"
android:layout_alignLeft="#+id/btn1"
android:layout_alignStart="#+id/btn1" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn5"
android:layout_below="#+id/btn2"
android:layout_alignLeft="#+id/imageView2"
android:layout_alignStart="#+id/imageView2"
android:layout_marginTop="5dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn4"
android:layout_alignTop="#+id/btn5"
android:layout_toRightOf="#+id/btn5"
android:layout_toEndOf="#+id/btn5"
android:layout_marginLeft="9dp"
android:layout_marginStart="9dp" />
<ImageButton
android:layout_width="100dp"
android:layout_height="100dp"
android:id="#+id/btn3"
android:layout_alignTop="#+id/btn4"
android:layout_toRightOf="#+id/btn4"
android:layout_toEndOf="#+id/btn4"
android:layout_marginLeft="10dp"
android:layout_marginStart="10dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="205dp"
android:background="#F4F4F4"
android:layout_gravity="bottom">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="YYYY.MM.DD"
android:id="#+id/txt1"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="22dp"
android:layout_marginStart="22dp"
android:layout_marginBottom="173dp" />
<TextView
android:layout_width="230dp"
android:layout_height="50dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
android:id="#+id/text2"
android:layout_alignTop="#+id/txt1"
android:layout_alignLeft="#+id/txt1"
android:layout_alignStart="#+id/txt1"
android:layout_marginTop="25dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON"
android:id="#+id/btn6"
android:layout_marginLeft="11dp"
android:layout_marginStart="11dp"
android:layout_alignTop="#+id/text2"
android:layout_toRightOf="#+id/text2"
android:layout_toEndOf="#+id/text2" />
<TextView
android:layout_width="fill_parent"
android:layout_height="20dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="FOOTER"
android:id="#+id/textView2"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textSize="10sp"
android:textStyle="bold"
android:textAlignment="center"
android:gravity="center_vertical"
android:background="#FFFFFF" />
</RelativeLayout>
</FrameLayout>
Don't use Frame Layout here because Frame Layout used to show single view.
I see you are using fixed dp values for layout_width and layout_height.
dp means density independent pixel. It is not a size independent pixel.
The dp makes sure your layout looks the same on devices with the same size, but different pixel density. It will not look the same on bigger devices.
If you want it to scale to larger devices you will have to use match_parent and wrap_content.
Use the power of the relative layout to place items on the right side of the screen also.
You can also make separate layout files for differently sized devices. So you can customise it depending on the size.
You do this by making a new layout folder named for example layout-sw600dp/ (or any number you want) which will only be used on devices that have at least the width you specified (so 600dp in this example).
Make sure your layout file has the same name in this folder as in the normal folder.
You can find very useful information about this in the documentation:
here and here.
You can try using a GridLayout. This way, the image columns will fill the whole screen.
you can't work with dp and expect the same result on different
if you want same display for all the devices you can work with weightSum and weight here is a little example
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/layout1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/layout2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
I already read the developer guide & also refer many SO questions.
but I'm still not sure what is the proper way.
I am develop the application only for Tablet.
I have the following folders,
layout
layout-large
layout-xlarge
Also In the manifest file, I have definied the followings,
<supports-screens
android:largeScreens="true"
android:anyDensity="true" />
If screen resolution greater than 800 * 480 -> application working properlly
My problem,
I tested the same application in china based device with 503 * 320 resolution,
It doesn`t works properly.
Please, tell me how to solve this issue.Thanks.
Update:
Tablet with high resolution,
Tablet with low resolution,
home.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/layout_light_background">
<Button
android:id="#+id/btn_dine_in"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#color/orange"
android:paddingBottom="20dp"
android:paddingLeft="100dp"
android:paddingRight="100dp"
android:paddingTop="20dp"
android:text="#string/dineIn"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<Button
android:id="#+id/btn_delivery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="40dp"
android:layout_marginStart="40dp"
android:layout_marginTop="90dp"
android:layout_toLeftOf="#+id/textView"
android:layout_toStartOf="#+id/textView"
android:background="#color/orange"
android:padding="20dp"
android:text="#string/delivery"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<Button
android:id="#+id/btn_collection"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_delivery"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_marginRight="40dp"
android:layout_toEndOf="#+id/textView"
android:layout_toRightOf="#+id/textView"
android:background="#color/orange"
android:padding="20dp"
android:text="#string/collection"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<Button
android:id="#+id/btn_previous_orders"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn_delivery"
android:layout_alignLeft="#+id/btn_delivery"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/btn_delivery"
android:layout_alignStart="#+id/btn_delivery"
android:layout_marginBottom="71dp"
android:background="#color/orange"
android:paddingBottom="20dp"
android:paddingLeft="100dp"
android:paddingRight="100dp"
android:paddingTop="20dp"
android:text="#string/previousOrders"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btn_delivery"
android:layout_centerHorizontal="true"
android:text=" " />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="#string/sampleRestaurantName"
android:textSize="#dimen/restaurantNameFontSize"
android:textStyle="bold" />
<Button
android:id="#+id/btnAssignDriver"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#+id/btn_collection"
android:layout_alignRight="#+id/btn_collection"
android:layout_alignTop="#+id/btn_previous_orders"
android:layout_toRightOf="#+id/textView"
android:background="#color/orange"
android:paddingBottom="20dp"
android:paddingLeft="100dp"
android:paddingRight="100dp"
android:paddingTop="20dp"
android:text="#string/assignDriver"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white" />
</RelativeLayout>
Currently all of the three folders contains same xml file..
layout/home.xml title is Normal
& layout-large/home.xml title is MyRestaurant
I believe I just found it.
Font size from device to device differs for devices with different resolutions when setting text appearance.
android:textAppearance="?android:attr/textAppearanceLarge"
Since previous orders is a long sentence it didn't fit in its button. because its button width equals to the delivery button width. and because left and right padding is so large 100dp the space left for text is small. thats why the button increased its height cause height is wrap content.
Since your app. doesn't support language directions. you don't have to include the attributes with end and start.
Those will affect the layout appearance if device language direction is different than you expected. which is the language you tested your app on. "English"
Remove everything that have the words end and start in it as:
android:layout_toEndOf="#+id/textView"
android:layout_marginStart="40dp"
and others. do that and check the results.
I have a question regarding Android RelativeLayout. My layout works perfectly on the emulator which is configured like a LG Nexus4 (screen, resolution). But if I run the app on my real Nexus4 it has serious errors and I don't know how to fix them.
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainMenuLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/zeekedLogo"
android:contentDescription="#string/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="24dp"
android:layout_marginRight="24dp"
android:src="#drawable/badge" />
<TextView
android:id="#+id/textButtonPlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="56dp"
android:text="#string/menu_play"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textButtonResume"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textButtonPlay"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="#string/menu_resume"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textLabelLevel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/zeekedLogo"
android:layout_centerHorizontal="true"
android:layout_marginBottom="54dp"
android:text="#string/menu_level"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textButtonSound"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/zeekedLogo"
android:layout_marginLeft="24dp"
android:text="#string/menu_sound_on"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Here are the screenshots of the same layout:
Emulator:
Nexus 4:
Thanks in advance!
After adding a background color to my relativelayout it worked on my Nexus4. It's all I did ... and I think it's strange. But at the end I'm happy that it works.