My Layout /Views out of position when deploying App on Phone ?

Question

Hi , I made a simple app using different views and placed them with respect to my background highlighting where my buttons are supposed to be I've marked the edges.So when Im positioning them in the xml file they're fine,when I deploy it on my phone all the views are out of position where there supposed to be.Im using a phone with size xxxhdpi,I rescaled my background according to my phone size to test it ,but the results were the same !. I also used support screens in androidmanifest to solve the problem but the problem still persists .Am I missing something,surely Im making a big mistake ? I've added my github and xml file below If someone can kindly help me on this ,also just for questioning purpose I only added two buttons in the xml to simplify the question !

@JessieZhang-MSFT
@Leon Lu (Shanghai Wicresoft Co,.Ltd.)

Github : https://github.com/owais19m/Layout_Testing

 <?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="@mipmap/MainActivityTheme_Edit">  

<Button  
    android:text="button1"  
    android:textStyle="bold"  
    android:layout_width="98dp"  
    android:layout_height="55dp"  
    android:padding="15dp"         
    android:layout_marginLeft="262dp"  
    android:layout_marginTop="350dp"  
    android:id="@+id/button2"  
    android:background="#ff637a67" />  

<Button  
    android:text="button2"  
    android:textStyle="bold"  
    android:layout_width="98dp"  
    android:layout_height="68dp"  
    android:padding="15dp"         
    android:layout_marginLeft="262dp"  
    android:layout_marginTop="449dp"  
    android:id="@+id/button1"  
    android:background="#ff637a67" />  
  
 </RelativeLayout>  

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

RelativeLayout is a view group that displays child views in relative positions. The position of each view can be specified as relative to sibling elements (such as to the left-of or below another view) or in positions relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).

A RelativeLayout is a very powerful utility for designing a user interface because it can eliminate nested view groups and keep your layout hierarchy flat, which improves performance.

In your code , the first button( button1) has not been specified to relative to other element. For example, if you want to display button1 and button 2 in the center of your screen, you can add property android:layout_gravity="center" for your root element. And if you want button2 to be placed below button1 , and add property android:layout_below="@id/button1" for button2.

You can refer to the following :

<?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:gravity="center"  
    android:layout_height="match_parent">  

    <LinearLayout  
        android:background="@android:color/transparent"  
        android:gravity="center"  
        android:layout_alignParentBottom="true"  
        android:layout_gravity="center"  
        android:orientation="vertical"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content">  
        <Button  
            android:text="button1"  
            android:textStyle="bold"  
            android:layout_width="98dp"  
            android:layout_height="55dp"  
            android:padding="15dp"  
            android:id="@+id/button1"  
            android:background="#ff637a67" />  
        <Button  
            android:layout_below="@id/button1"  
            android:text="button2"  
            android:textStyle="bold"  
            android:layout_width="98dp"  
            android:layout_height="68dp"  
            android:padding="15dp"  
            android:id="@+id/button2"  
            android:background="#ff637a67" />  

    </LinearLayout>  
</RelativeLayout>  

Note:
1.It is recommended not to use android:layout_marginLeft and android:layout_marginTop to specify position relative to other elements in your code.
So, try to remove these propertied for both button1 and button2.

 android:layout_marginLeft="262dp"  
 android:layout_marginTop="350dp"  

2.RelativeLayout lets child views specify their position relative to the parent view or to each other (specified by ID).
So,you can align two elements by right border, or make one below another, centered in the screen, centered left, and so on. By default, all child views are drawn at the top-left of the layout, so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.

Some of the many layout properties available to views in a RelativeLayout include:

android:layout_alignParentTop
If "true", makes the top edge of this view match the top edge of the parent.
android:layout_centerVertical
If "true", centers this child vertically within its parent.
android:layout_below
Positions the top edge of this view below the view specified with a resource ID.
android:layout_toRightOf

For more details, you can check: https://developer.android.com/guide/topics/ui/layout/relative

Update 1:

There are several ways to achieve this , you can refer to the following code:

<?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"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:gravity="bottom"  
    android:orientation="vertical"  
    android:layout_height="match_parent">  

    <FrameLayout  
           android:layout_width="match_parent"  
           android:layout_height="wrap_content"/>  

    <LinearLayout  
        android:background="@android:color/darker_gray"  
        android:gravity="center"  
        android:layout_alignParentBottom="true"  
        android:layout_gravity="bottom"  
        android:orientation="vertical"  
        android:layout_width="match_parent"  
        android:layout_height="300dp">  

        <LinearLayout  
            android:id="@+id/linearLayout1"  
            android:orientation="horizontal"  
            android:layout_width="match_parent"  
            android:layout_height="wrap_content">  
        <Button  
            android:layout_margin="5dp"  
            android:layout_weight="1"  
            android:text="button1"  
            android:textStyle="bold"  
            android:layout_width="wrap_content"  
            android:layout_height="68dp"  
            android:padding="15dp"  
            android:id="@+id/button1"  
            android:background="#ff637a67" />  
        <Button  
            android:layout_margin="5dp"  
            android:layout_weight="1"  
            android:text="button2"  
            android:textStyle="bold"  
            android:layout_width="wrap_content"  
            android:layout_height="68dp"  
            android:padding="15dp"  
            android:id="@+id/button2"  
            android:background="#ff637a67" />  
        <Button  
            android:layout_margin="5dp"  
            android:layout_weight="1"  
            android:text="button3"  
            android:textStyle="bold"  
            android:layout_width="wrap_content"  
            android:layout_height="68dp"  
            android:padding="15dp"  
            android:id="@+id/button3"  
            android:background="#ff637a67" />  

        </LinearLayout>  

        <Button  
            android:layout_margin="5dp"  
            android:text="button4"  
            android:textStyle="bold"  
            android:layout_width="wrap_content"  
            android:layout_height="60dp"  
            android:padding="15dp"  
            android:id="@+id/button3"  
            android:background="#ff637a67" />  
    </LinearLayout>  
</LinearLayout>  

The result is:

Update 2

how do I better control the vertical position of my buttons

You can use property(layout_marginBottom , layout_marginLeft , layout_marginRight ) to adjust your UI, and since the buttons are included in LinearLayout, we can adjust the margin of the parent LinearLayout.For example:

  <LinearLayout  
    android:layout_marginLeft="10dp"  
    android:layout_marginRight="10dp"  
    android:layout_marginBottom="20dp"  
    android:background="@android:color/darker_gray"  
    android:gravity="center"  
    android:layout_alignParentBottom="true"  
    android:layout_gravity="bottom"  
    android:orientation="vertical"  
    android:layout_width="match_parent"  
    android:layout_height="300dp">  

And among the several buttons(e.g. the horizontal three buttons), we don't need to set the width for them, we just can set the weight of them , here we set android:layout_weight="1" for these three buttons, so they're going to be the same width in the horizontal direction:

    <LinearLayout  
        android:id="@+id/linearLayout1"  
        android:orientation="horizontal"  
        android:layout_width="match_parent"  
        android:layout_height="wrap_content">  
    <Button  
        android:layout_margin="5dp"  
        android:layout_weight="1"  
        android:text="button1"  
        android:textStyle="bold"  
        android:layout_width="wrap_content"  
        android:layout_height="68dp"  
        android:padding="15dp"  
        android:id="@+id/button1"  
        android:background="#ff637a67" />  
    <Button  
        android:layout_margin="5dp"  
        android:layout_weight="1"  
        android:text="button2"  
        android:textStyle="bold"  
        android:layout_width="wrap_content"  
        android:layout_height="68dp"  
        android:padding="15dp"  
        android:id="@+id/button2"  
        android:background="#ff637a67" />  
    <Button  
        android:layout_margin="5dp"  
        android:layout_weight="1"  
        android:text="button3"  
        android:textStyle="bold"  
        android:layout_width="wrap_content"  
        android:layout_height="68dp"  
        android:padding="15dp"  
        android:id="@+id/button3"  
        android:background="#ff637a67" />  

    </LinearLayout>  

Best Regards,

Jessie Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

I have a question,I understand a little how this is done, but without layoutmargin how do I position it precisely where I want when all you can do is either place it at the ends ,I dont want to do that ,Also I could position it relative to my view group but how do I position it when Im within a view group itself ? Can you altleast provide me an example , I have changed the picture above ,this is actually how I want it ! @JessieZhang-MSFT

 <?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="@mipmap/MainActivityTheme_Edit"  
android:minWidth="25px"  
android:minHeight="25px">  
<LinearLayout  
    android:background="@android:color/transparent"  
    android:layout_width="337.0dp"  
    android:layout_height="wrap_content"  
    android:layout_centerHorizontal="true"  
      
    android:layout_gravity="center"  
    android:orientation="horizontal"  
    android:layout_marginTop="450dp"  
    android:id="@+id/linearLayout2">  
    <Button  
        android:text="button1"  
        android:textStyle="bold"  
        android:layout_width="0dp"  
        android:layout_height="68dp"  
        android:id="@+id/button2"  
        android:background="#ff637a67"  
        android:layout_weight="1"  
          
         />  

    <Button  
        android:text="button2"  
        android:textStyle="bold"  
        android:layout_width="0dp"  
        android:layout_height="68dp"  
        android:layout_weight="1"  
        android:id="@+id/button1"  
        android:background="#ff637a67"  
        android:layout_marginLeft="65.0dp" />  

  </LinearLayout>  
 </RelativeLayout>  

Answer 3

everything looks set ,I just changed marginbotton in the linearlayout so I can align the 3 buttons on the highlighted boxes .I redeploy it on my phone and it still gives me the same out of position buttons .At this point I really dont understand why this is so annoying.I know I've taken a lot of your time on this but trust me I've design the whole app logic in 2 months starting from c# itself.I thought the layout part isnt going to be a problem so I left it out .I would just request you to check my github code so you can deploy it and see it for your self .I have taken a snap of the current state of the app with the xml file I changed.Also in the xamarin docs ,there using marginTop in the code without any problem as it seems . Sorry for throwing so many things at once .

 <LinearLayout 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:gravity="bottom"  
     android:orientation="vertical"  
     android:layout_height="match_parent"  
       
      
    android:background="@mipmap/MainActivityTheme_Edit">  
      
    
    <LinearLayout  
     android:id="@+id/linearLayout1"  
     android:orientation="horizontal"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
    android:layout_marginBottom="90dp">  
 <Button  
     android:layout_margin="5dp"  
     android:layout_weight="1"  
     android:text="button1"  
     android:textStyle="bold"  
     android:layout_width="wrap_content"  
     android:layout_height="68dp"  
     android:padding="15dp"  
     android:id="@+id/button1"  
     android:background="#ff637a67" />  
 <Button  
     android:layout_margin="5dp"  
     android:layout_weight="1"  
     android:text="button2"  
     android:textStyle="bold"  
     android:layout_width="wrap_content"  
     android:layout_height="68dp"  
     android:padding="15dp"  
     android:id="@+id/button2"  
     android:background="#ff637a67" />  
 <Button  
     android:layout_margin="5dp"  
     android:layout_weight="1"  
     android:text="button3"  
     android:textStyle="bold"  
     android:layout_width="wrap_content"  
     android:layout_height="68dp"  
     android:padding="15dp"  
     android:id="@+id/button3"  
     android:background="#ff637a67" />  

 </LinearLayout>  
 </LinearLayout>  

Answer 4

Okay so I did manage to fix the out of position part I believe for now I also broke the background into two parts and used vertical linearlayout to adjust the positions.I integrated it in my actual App but I had one problem. If for sake of making things easier I use your code that you wrote in update 1 and add another linearLayout (Code edited below ) on the top and deploy it on the phone ,there's always some space left out ,I've shown the result picture below on the phone, same phone ,android version 9 .

@JessieZhang-MSFT

  <?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"  
 xmlns:tools="http://schemas.android.com/tools"  
 android:layout_width="match_parent"  
 android:gravity="top"  
 android:orientation="vertical"  
 android:layout_height="match_parent">  
  
  <LinearLayout  
    android:background="@android:color/holo_blue_dark"  
    android:orientation="horizontal"  
    android:layout_width="match_parent"  
    android:layout_height="310.5dp"  
   >  


</LinearLayout>       
  

 <LinearLayout  
     android:background="@android:color/holo_orange_light"  
     android:gravity="center"  
     android:layout_alignParentBottom="true"  
     android:layout_gravity="bottom"  
     android:orientation="vertical"  
     android:layout_width="match_parent"  
     android:layout_height="300dp">  
  
     <LinearLayout  
         android:id="@+id/linearLayout1"  
         android:orientation="horizontal"  
         android:layout_width="match_parent"  
         android:layout_height="wrap_content">  
     <Button  
         android:layout_margin="5dp"  
         android:layout_weight="1"  
         android:text="button1"  
         android:textStyle="bold"  
         android:layout_width="wrap_content"  
         android:layout_height="68dp"  
         android:padding="15dp"  
         android:id="@+id/button1"  
         android:background="#ff637a67" />  
     <Button  
         android:layout_margin="5dp"  
         android:layout_weight="1"  
         android:text="button2"  
         android:textStyle="bold"  
         android:layout_width="wrap_content"  
         android:layout_height="68dp"  
         android:padding="15dp"  
         android:id="@+id/button2"  
         android:background="#ff637a67" />  
     <Button  
         android:layout_margin="5dp"  
         android:layout_weight="1"  
         android:text="button3"  
         android:textStyle="bold"  
         android:layout_width="wrap_content"  
         android:layout_height="68dp"  
         android:padding="15dp"  
         android:id="@+id/button3"  
         android:background="#ff637a67" />  
  
     </LinearLayout>  
  
     <Button  
         android:layout_margin="5dp"  
         android:text="button4"  
         android:textStyle="bold"  
         android:layout_width="wrap_content"  
         android:layout_height="60dp"  
         android:padding="15dp"  
         android:id="@+id/button3"  
         android:background="#ff637a67" />  
 </LinearLayout>  
 </LinearLayout>