How to make the items never get inside with other in different screen sizes?

Question

i'm trying to put webview and admob banner in one xml but the thing is when i do they get mixed up i opened it in another device with different screen size. this is my xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="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="com.example.median1.psalmsmarket.Psalms">

    <WebView
        android:id="@+id/Pslamsview"
        android:layout_width="match_parent"
        android:layout_height="1400px" />

    <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_ad_unit_id"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="450dp"></com.google.android.gms.ads.AdView>

</RelativeLayout>

and if you seen when i open this application with size 720*1280 it show in normal way they dont get mixed

but when i open it with a different size that will happens

Answer 1

Do not use fix size. If you are using Relative Layout then this is the best way to ensure the preferred output -

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="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="com.example.median1.psalmsmarket.Psalms">

    <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_ad_unit_id"/>

    <WebView
        android:id="@+id/Pslamsview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/adView"/>
</RelativeLayout>

Answer 2

Remove your hard height 1400px and make it match_parent then set the webview to be above the adView android:layout_above="@+id/adView"

<WebView
        android:id="@+id/Pslamsview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/adView" />

Answer 3

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="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="com.example.median1.psalmsmarket.Psalms">

<WebView
    android:id="@+id/Pslamsview"
    android:layout_width="match_parent"
      android:layout_height="match_parent"
    android:layout_above="@+id/adView" />

<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_ad_unit_id"
    tools:layout_editor_absoluteX="0dp"
    tools:layout_editor_absoluteY="450dp"></com.google.android.gms.ads.AdView>

Change height of your webview to android:layout_height="match_parent" and add this property android:layout_above="@+id/adView"

Answer 4

You can change your layout from Relative to LinearLayout , with linear layout you can use weightSum concept and layout_weight , with this the view will get equally spaced in all screens .

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="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:weightSum="1"
    tools:context="com.example.median1.psalmsmarket.Psalms">
    <WebView
        android:id="@+id/Pslamsview"
        android:layout_width="match_parent"
        android:layout_height="0"
        android:layout_weight="1"  />

    <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_ad_unit_id"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="450dp"></com.google.android.gms.ads.AdView>

</RelativeLayout>