RelativeLayout: centrage de deux éléments FrameLayout

Question

Dans mon activity_main.xml j'ai un certain nombre d'éléments, ce qui fait de tout ce que je veux faire deux éléments FrameLayout au centre. Si je n'ai que les deux éléments FrameLayout, ils sont correctement centrés. Voici le code et capture d'écran qui montrent que:

<?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:gravity="center" 
    tools:context="com.abcd.testlayout.MainActivity"> 

    <FrameLayout 
     android:id="@+id/vertical_line" 
     android:background="@color/colorPrimary" 
     android:layout_width="50dp" 
     android:layout_height="280dp"> 
     <ImageButton 
      android:id="@+id/imageButton1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      app:srcCompat="@android:drawable/presence_audio_away" /> 
    </FrameLayout> 

    <FrameLayout 
     android:id="@+id/vertical_line2" 
     android:background="@color/colorAccent" 
     android:layout_width="280dp" 
     android:layout_height="50dp" 
     android:layout_below="@+id/vertical_line"> 
     <ImageButton 
      android:id="@+id/imageButton2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      app:srcCompat="@android:drawable/ic_lock_idle_alarm" /> 
    </FrameLayout> 

</RelativeLayout> 

Comme vous pouvez le voir, j'ai deux lignes, une ligne bleue verticale et une ligne horizontale rose. La ligne rose est centrée horizontalement et la ligne bleue est centrée verticalement. C'est exactement ce que je veux.

Maintenant, si j'ajoute tous les autres éléments à la disposition ici sont le code et la capture d'écran:

<?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:gravity="center" 
    tools:context="com.abcd.testlayout.MainActivity"> 

    <FrameLayout 
     android:id="@+id/vertical_line" 
     android:background="@color/colorPrimary" 
     android:layout_width="50dp" 
     android:layout_height="280dp"> 
     <ImageButton 
      android:id="@+id/imageButton1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      app:srcCompat="@android:drawable/presence_audio_away" /> 
    </FrameLayout> 

    <FrameLayout 
     android:id="@+id/vertical_line2" 
     android:background="@color/colorAccent" 
     android:layout_width="280dp" 
     android:layout_height="50dp" 
     android:layout_below="@+id/vertical_line"> 
     <ImageButton 
      android:id="@+id/imageButton2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center" 
      app:srcCompat="@android:drawable/ic_lock_idle_alarm" /> 
    </FrameLayout> 

    <ImageView 
     android:id="@+id/img1" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scaleType="fitCenter" /> 

    <RelativeLayout 
     android:gravity="center" 
     android:id="@+id/rel" 
     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:adjustViewBounds="true" 
      android:antialias="true" 
      android:scaleType="matrix" /> 
    </RelativeLayout> 

    <ImageButton 
     android:id="@+id/img3" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginTop="20dp" 
     android:layout_alignParentTop="true" 
     android:layout_centerHorizontal="true" 
     app:srcCompat="@android:drawable/btn_default_small"/> 

    <ImageButton 
     android:id="@+id/imageButton4" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentStart="true" 
     android:layout_alignParentLeft="true" 
     android:layout_alignTop="@+id/imageButton" 
     android:layout_marginStart="42dp" 
     android:layout_marginLeft="42dp" 
     app:srcCompat="@android:drawable/arrow_up_float"/> 

    <ImageButton 
     android:id="@+id/imageButton" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="20dp" 
     android:layout_marginEnd="30dp" 
     android:layout_marginRight="30dp" 
     android:layout_above="@+id/seekBar" 
     android:layout_alignParentEnd="true" 
     android:layout_alignParentRight="true" 
     app:srcCompat="@android:drawable/arrow_down_float"/> 

    <SeekBar 
     android:id="@+id/seekBar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="40dp" 
     android:layout_marginLeft="40dp" 
     android:layout_marginRight="40dp" 
     android:max="100" 
     android:progress="0" 
     android:visibility="visible" 
     android:layout_alignParentBottom="true" 
     android:layout_alignParentStart="true" 
     android:layout_alignParentLeft="true" /> 

</RelativeLayout> 

Comme vous pouvez le voir les lignes bleues et rouges sont déplacés vers le haut coin gauche, mais j'aime l'emplacement de ces deux éléments pour rester à la position exacte comme dans la capture d'écran précédente.

Existe-t-il un moyen de faire cela, c'est-à-dire déplacer les lignes bleues et rouges au même endroit que la capture d'écran précédente et conserver l'emplacement des autres éléments intacts sans essayer d'ajouter une marge gauche ou bouton? Quelque chose qui fonctionne sur toutes les tailles de téléphone et même les tablettes, juste en utilisant gravity:center ou quelque chose comme ça?

Answer 1

Wrap ces deux points de vue dans un autre RelativeLayout comme suit:

<RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    tools:context=".MainActivity"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:gravity="center" 
     tools:context=".MainActivity"> 

     <FrameLayout 
      android:id="@+id/vertical_line" 
      android:layout_width="50dp" 
      android:layout_height="280dp" 
      android:background="@color/colorPrimary"> 

      <ImageButton 
       android:id="@+id/imageButton1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       app:srcCompat="@android:drawable/presence_audio_away" /> 
     </FrameLayout> 

     <FrameLayout 
      android:id="@+id/vertical_line2" 
      android:layout_width="280dp" 
      android:layout_height="50dp" 
      android:layout_below="@+id/vertical_line" 
      android:background="@color/colorAccent"> 

      <ImageButton 
       android:id="@+id/imageButton2" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       app:srcCompat="@android:drawable/ic_lock_idle_alarm" /> 
     </FrameLayout> 
    </RelativeLayout> 

    <!-- Your other views --> 

</RelativeLayout>