Different position on different screen size

Question

I want to put a text, a button or something like that in a specific place on an image. But as devices have different screen resolution, the text is changing position and don't remain there where I have positioned it.

That is a view on Nexus 4:

That is a view on Pixel 2 XL

How can I solve this problem?

tuner_activity.xml

<?xml version="1.0" encoding="utf-8"?>
  <android.support.constraint.ConstraintLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/manico"
    android:contentDescription="@string/chords" />

  <TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="81dp"
    android:layout_marginStart="81dp"
    android:layout_marginTop="100dp"
    android:text="D"
    android:textColor="@color/black"
    android:textSize="35sp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/imageView" />

  <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="180dp"
    android:layout_marginStart="180dp"
    android:layout_marginTop="100dp"
    android:text="G"
    android:textColor="@color/black"
    android:textSize="35sp"
    app:layout_constraintStart_toEndOf="@+id/textView"
    app:layout_constraintTop_toTopOf="@+id/imageView" />
    </android.support.constraint.ConstraintLayout>

That's normal in Android because it supports [different screen sizes](https://developer.android.com/training/multiscreen/screensizes) — Alessio, Oct 26 '18 at 10:45
Here an helpful [link](https://robots.thoughtbot.com/android-imageview-scaletype-a-visual-guide) on ImageView properties — Alessio, Oct 26 '18 at 10:47
Please provide you xml and java code in which you have used this. — Ümañg ßürmån, Oct 26 '18 at 10:50
This is gonna be a bit tricky cause you wanna put stuff in relation to your background image. Is there any rule to how much space these pins (Idk what they're called) take and how much they are from the top/each other etc? If so, you can use `ConstraintLayout` with `Guidelines` set to some values, e.g. to middle of each row of pins and then based on that put the `textviews`. — Vucko, Oct 26 '18 at 10:56
Why don't you edit the image to include the string name instead of placing it with the text view? — Samuel Robert, Oct 26 '18 at 11:02
@SamuelRobert I want to make it clickable,to play sound on click.If i will draw it on image the problem will be the same :( — saniok2713, Oct 26 '18 at 11:07
Check below link https://stackoverflow.com/questions/32860815/how-to-define-dimens-xml-for-every-different-screen-size-in-android — Atman Bhatt, Oct 26 '18 at 12:41

score 0 · Answer 1 · answered Oct 26 '18 at 11:00

Seems like you are using match_parent for ImageView width,height. Your ImageView will stretch/skew based on device screen size, so it won't be possible for you to move your ButtonView accordingly.

However, in this case, you know image dimensions and aspect ratio in advance, you should create your ImageView based on those dimensions(instead of match_parent).Now ImageView will always maintain the aspect ratio and size and you can position your TextView,ButtonView accordingly.

Different position on different screen size

1 Answers1