Keep button placed relative to background image

Question

Im trying to make a Flashlight app for android (being an absolute beginner)

The concept is to make IronMan's chest light as the toggle button for the flash light UI.

I set Iron Man as a background ImageView. And set the chest light photo as the button's image src.

The problem is that, in different screen sizes, the alignment of the button gets changed as you can see in the screenshots below. This is what it has to look like:

Button displaced when screensize changed:

If someone could help me out on how I could solve this problem, it would be great.

My XML code if that would be of any help:

     <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    tools:context="example.flash.flash">

    <!-- view for AdMob Interstitial Ad -->

    <TextView
        android:id="@+id/app_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="@string/interstitial_ad_sample"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <TextView
        android:id="@+id/level"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/app_title"
        android:layout_centerHorizontal="true"
        android:text="@string/start_level"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:id="@+id/next_level_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/next_level" />
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/iron"
        android:id="@+id/imageView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorBackground"
        android:src="@drawable/onn"
        android:scaleType="fitCenter"
        android:layout_marginBottom="57dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true" />

    <com.google.android.gms.ads.AdView
        android:id="@+id/adView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        ads:adSize="BANNER"
        ads:adUnitId="@string/banner_home_footer"></com.google.android.gms.ads.AdView>

</RelativeLayout>

Answer 1

The problem is that you are designing the layout specific to one device/screen.

From the docs-

Android supports several configuration qualifiers that allow you to control how the system selects your alternative resources based on the characteristics of the current device screen. A configuration qualifier is a string that you can append to a resource directory in your Android project and specifies the configuration for which the resources inside are designed.

See Different values folders in android as to how you can make different values/dimens.xml to suit different screens.

So create different values folder and check the docs - link

Answer 2

What parent layout are you using? If RelativeLayout then you have to make buttons relative to each other.