Develop Reference

Android Normal Layout is displayed differently on devices

I'm relatively new in the area of App Development and still cant get behind the proper way to set up an xml file (in this case for a normal layout) to fit every mobile device that uses this layout type.
For example: I have a Pixel 2 Emulator and a Nexus 5 Emulator (both use the normal layout). However the result on the screen looks different on the devices:
Pixel 2 (1080x1920 - 420dpi): https://i.stack.imgur.com/5zmZ3.png
Nexus 5 (1080x1920 - xxhdpi): https://i.stack.imgur.com/sSLtb.png
After some research in the Google developers section about Device compability I found out that it could be due to the different pixel densities, but I have no clue how to fix this.
The xml code of this 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="#drawable/mybackground"
tools:context=".Start">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerName"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#00FFFFFF"
android:padding="5dp"
android:scrollbars="none"
android:layout_below="#id/name_add"
android:layout_marginTop="15dp"
android:layout_marginBottom="160dp"
android:layout_marginStart="200dp"
/>
<EditText
android:id="#+id/name_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="100dp"
android:layout_marginTop="200dp"
android:width="180dp"
android:ems="10"
android:hint="Name"
android:importantForAutofill="no"
android:inputType="text"
android:singleLine="true"
android:textColor="#424242"
android:textColorHint="#424242"
app:backgroundTint="#585858" />
<ImageButton
android:id="#+id/btn_add"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/name_add"
android:layout_marginBottom="11dp"
android:layout_toEndOf="#id/name_add"
android:layout_marginStart="9dp"
android:src="#drawable/ic_plus"
android:background="#android:color/transparent"
android:contentDescription="add"/>
<Button
android:id="#+id/goToSelection"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="520dp"
android:background="#drawable/play_btn"
android:fontFamily="sans-serif"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:text="#string/btn_play"
android:textAllCaps="false"
android:textSize="20sp"
/>
<Button
android:id="#+id/languagegbr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="15dp"
android:background="#drawable/gbr"
/>
<Button
android:id="#+id/languagedr"
android:layout_width="45dp"
android:layout_height="25dp"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_marginEnd="15dp"
android:layout_marginBottom="55dp"
android:background="#drawable/germanyr"
android:visibility="gone"/>
</RelativeLayout>
All of the images will later be replaced by vector graphics.
My question now is, how I can make my layout on the Nexus 5 (and on any other mobile device with a resolution of 1080x1920 or that uses the normal layout in general) look the same as it looks on the Pixel 2?

I've struggled with this kind of issues for a long time.
This stuff happens when you mess too much with dp's in margins and paddings usually. Given that dp's stay almost equal between different phone sizes, you will get variations of your display, such as the one you're showing us.
The way I solved it is by using Constraint Layout. It's very simple to use, and it has a lot of advantages. If there's no particular reason why you're not using Constraint Layout I highly suggest you to start now.
In a Constraint Layout all you need to do for your error to be solved is set the horizontal constraints to the parent and that's it.
<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=".login.YourActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Just by saying you'll be attached to your parent's left and right, sets the view right in the middle of your screen. Of any screen actually.

Android relative layout using dp jumps all over

I've tried to match as exactly as possible the tablet this is being designed for, a Samsung Tab S2 - 9.7" screen size, 2048x1536 - I've created an AVD to match that.
I've lined up the images as shown here:
But when I deploy it, they jump around, as shown here:
They get even worse depending on other tablets, but I'm just trying one for now. I'm using a full screen relative layout with DP for the dimensions and margins, so why do they jump around so much? Shouldn't it always be the same distance from the top/sides? How come even though the dimensions and pixels match exactly in the AVD and the tablet, it moves around?
I'm completely lost, I've read everything I can from setting margins in code to absolute layouts (no longer supported). Everything points back to DP, but even using an exact match tablet and designer, they change location and size.
<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"
android:background="#drawable/background_buttons"
tools:context="com.cimulus.samocoseat.MainMenu">
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fullscreen_content_controls_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="UselessParent">
<ImageView
android:id="#+id/seatView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/seat"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:layout_marginLeft="245dp"
/>
<ImageButton
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/seatBackForward"
android:background="#drawable/left_inactive"
android:layout_marginTop="266dp"
android:layout_marginStart="38dp" />
<Button
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/legRightExtension"
android:background="#drawable/left_inactive"
android:layout_marginTop="142dp"
android:layout_marginLeft="100dp" />
</RelativeLayout>
</FrameLayout>
Any help is greatly appreciated.
Edit: I've also tried the relative layout existing on it's own, which gives me the same results overall:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fullscreen_content_controls_a"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background_buttons">
<ImageView
android:id="#+id/seatView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/seat"
android:layout_marginTop="60dp"
android:layout_marginBottom="60dp"
android:layout_marginLeft="245dp"
/>
<ImageButton
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/seatBackForward"
android:background="#drawable/left_inactive"
android:layout_marginTop="266dp"
android:layout_marginStart="38dp" />
<Button
android:layout_width="124dp"
android:layout_height="75dp"
android:text="Seat Back Forward"
android:id="#+id/legRightExtension"
android:background="#drawable/left_inactive"
android:layout_marginTop="142dp"
android:layout_marginLeft="100dp" />
</RelativeLayout>

I had a similar problem and someone suggested using this library - https://github.com/intuit/sdp . It provides units, that are automatically scaled across devices with different screen characteristics. Hope it helps :)

why the design of user interface change in different emulator in android studio?

I'm begin to learning android programming and I did not know much about this language
I write a program. I do not know why when I see my user interface it is good but when I run it with different emulators , each emulator show it in different way
enter code here : <LinearLayout 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" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context="com.example.faezeh.homework2.MainActivity"
android:orientation="vertical"
>
<TextView android:text="تمرین دوم"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="50sp"
android:textColor="#ff4400"
android:paddingTop="30dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="مدیریت یادداشت"
android:layout_gravity="center_horizontal"
android:textSize="40sp"
android:textColor="#000000"
android:paddingTop="30dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="تاریخ : 1393/12/26"
android:layout_gravity="center_horizontal"
android:textSize="40sp"
android:textColor="#000000"
android:paddingTop="30dp"
/>
<Button
android:id="#+id/theList"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="فهرست یادداشت ها"
android:textSize="30sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_gravity="center_horizontal"
android:layout_marginTop="30dp"
/>
<Button
android:id="#+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="جستجوی یادداشت "
android:textSize="30sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="bottom"
>
<Button
android:id="#+id/aboutUs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="درباره ما"
android:textSize="35sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_gravity="left|bottom"
/>
<Button
android:id="#+id/setting"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="تنظیمات"
android:textSize="35sp"
android:textColor="#000000"
android:background="#00ffff"
android:layout_gravity="right|bottom"
/>
</LinearLayout>

try to see this thing in your eclipse then your user interface will never change.
you can convert Activity check at here is schreen size 15 schreen sizes are given here to check all android device follow these size once

Since android is available for various types of devices, here I am saying the screen size of the device. So every device comes under certain category with their corresponding screen size, these category are probably LDPI, MDPI, HDPI, XHDPI and XXHDPI. So the design we do usually varies among different screen size.
For detail information regarding the multiple screen size in android and how to handle it, do visit:
http://developer.android.com/guide/practices/screens_support.html
what i have to do to fix this? for example nexus one and nexus 5 show
my program in different way . what i have to do to both of them show
it in right way? – faezeh 1 hour ago
Well for this case you have to particularly design your screens in such a way that it optimize all the screen size. For this here are some key design parameters you should look on:
use textAppearnce instead of textSize property like :
android:textAppearance="?android:attr/textAppearanceLarge"
Try to hard code your controls specially buttons, as dp automatically resize according to the screen size of device.
Try to use layout_weight property in your design.
If you follow this basic guideline, then there will be no problem.
Cheers

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.

Same layout looks different on a Samsung Galaxy Tab

I'm developing an Android 2.2.2 application which will support multiple screens sizes and all screens will be portrait. I won't support landscape.
I have test the following layout on an HTC Desire and on a Samsung Galaxy Tab 7.7.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/no_conectado"
android:orientation="vertical" >
<TextView
android:id="#+id/labelSelGateName"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:layout_marginTop="80dp" />
<TextView
android:id="#+id/labelSelOpened"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" />
<ProgressBar
android:id="#+id/indicatorActivityView"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="22dp"
android:layout_gravity="center_horizontal" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="110dp"
android:layout_marginTop="60dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnMyGates"
android:layout_width="50dp"
android:layout_height="110dp"
android:layout_marginLeft="20dp"
android:layout_weight=".33"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onGateClick" />
<LinearLayout
android:layout_width="90dp"
android:layout_height="110dp"
android:layout_weight=".33"
android:orientation="vertical" >
<ImageButton
android:id="#+id/btnOpen"
android:layout_width="90dp"
android:layout_height="55dp"
android:layout_gravity="center_horizontal"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onOpenDoorClick" />
<ImageButton
android:id="#+id/btnClose"
android:layout_width="90dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onCloseDoorClick" />
</LinearLayout>
<ImageButton
android:id="#+id/btnOptions"
android:layout_width="50dp"
android:layout_height="110dp"
android:layout_marginRight="20dp"
android:layout_weight=".33"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onOptionClick" />
</LinearLayout>
<ImageButton
android:id="#+id/btnFaqs"
android:layout_width="110dp"
android:layout_height="60dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onFAQClick" />
<ImageButton
android:id="#+id/btnInfo"
android:layout_width="110dp"
android:layout_height="60dp"
android:layout_gravity="right"
android:layout_marginTop="20dp"
android:background="#null"
android:contentDescription="#string/layout_empty"
android:onClick="onInfoClick" />
</LinearLayout>
I have images for ldpi, mdpi, hdpi and x-hdpi.
Background image looks great, but all widgets (TextView, ProgressBar, ImageButton, etc) aren't in the right position when I test it on Samsung Galaxy Tab.
I have designed this layout on Eclipse using 'Nexus One` as a model.
Here people are recommend me that use only one layout for every screen size and densitiy, but it doesn't work. I'm using dp units and fill_parent, etc. but it is different on Galaxy Tab.
Do I need a layout for x-large screen sizes?

Indeed, the advice you received was good: it's possible to have only one layout file, but as it was already suggested in comments, it's not good to hardcode dimensions, even if you use dp or dip, specially when you are targeting all the screen sizes and densities available.
Instead, you should replace those values with links to dimensions values.
For example, instead of android:layout_marginLeft="10dp", you'll have something like
android:layout_marginLeft="#dimen/textview_margin_left"
where textview_margin_left is defined in the dimens.xml, having different values in different folders;
probably in folder values: <dimen name="textview_margin_left">10dp</dimen>,
in folder values-large: <dimen name="textview_margin_left">20dp</dimen>,
while in values-xlarge: <dimen name="textview_margin_left">30dp</dimen>
But this is just an example, you have to test on all dimensions and resolutions and find the best values for your layout. In Eclipse, in Graphical Layout mode, you can easily get an idea about how your layout looks on various devices, just by clicking on Nexus One, and choosing another model from the list, and the layout will automatically update.
Also, you can move in dimens.xml all the text sizes, and that will be very useful for x-large devices.
Using only one RelativeLayout instead many imbricated LinearLayouts might also be a good idea, and using relative positioning for your objects, instead some of the hardcoded values.

The Problem is following you use in your layout, static values (100dp, 60dp). Now the problem is on a higher resolution this dp isn't the same.
That means you should create a layout for x-large screens. Also I wouldn't use those static values. Than your application will behave good on many diffrent screensizes!
Have a great Day
safari