Styjun

I am working on an app that displays a parking lot and shows the available parking spots. However, I am having issues when showing the available parking spots in different devices. The background image is the sketch of a parking lot but and the parking spots are shown available by adding a red box on top of the parking spot. But the red boxes keep changing location as I use different devices.

First, this is my XML file where I upload the image in the background and set the location for some boxes that have to be placed on top of the background image.

<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"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context=".Map.LotDisplay">

 <LinearLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleType="centerInside"
 android:id="@+id/map"
 android:orientation="horizontal"
 android:background="@drawable/parkingmap">
 </LinearLayout>

 <Spot
 android:id="@+id/spot0"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginLeft="344dp"
 android:layout_marginTop="250dp"
 app:height="14dp"
 app:width="33dp" />

 <Spot
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:id="@+id/spot1"
 app:height="14dp"
 app:width="33dp"
 android:layout_marginTop="266dp"
 android:layout_marginLeft="344dp"/>

</RelativeLayout>

Here is how the image should be looking:

However, this is how it looks when I use a different device:

Can anyone tell me why is this happening and why to fix it? I thought using dp should solve the issue but it didn't.

This is parkingmap.png referenced in the XML file:

Thank you!

Please try this one.Hope this will be work for multiple screen type

<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.support.constraint.ConstraintLayout
 android:id="@+id/map"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@drawable/map"
 android:orientation="horizontal"
 android:scaleType="centerInside"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintTop_toTopOf="parent">




 <Spot
 android:id="@+id/spot0"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginEnd="@dimen/_26sdp"
 android:layout_marginBottom="@dimen/_100sdp"
 android:layout_weight="1"
 android:background="@color/colorPrimaryDark"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintTop_toTopOf="parent" />

 <Spot
 android:id="@+id/spot1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginEnd="@dimen/_26sdp"
 android:layout_marginBottom="@dimen/_135sdp"
 android:layout_weight="1"
 android:background="@color/colorPrimaryDark"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintEnd_toEndOf="parent"
 app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

add this on Gradle file

implementation 'com.intuit.sdp:sdp-android:1.0.6'

First of all I'm sorry that I'm posting this as an answer because I can't comment (I don't have the 50 reputations).

It's obvious that position will change because you are hardcoding layout_marginTop and marginLeft values, which should be generic for all devices.

But there is a solution, try this library android sdp .

This library will let you use sdp in the place of dp as a unit.

I hope this will help you.