Android : ImageView overlapping

Question

I have five ImageViews (ImageButtons) and I want to display this on one line, but when I'am on a small device my last image is cropped ?

How I can fix it ?

Is there a way to detect screen width ?

| A | B | C | D | E |

in my RelativeLayout xml file :

<ImageButton
        android:id="@+id/mFooterProfileImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/mFooterMembersImg"
        android:layout_alignParentEnd="true"
        android:background="@drawable/icon_bar_profile"
        android:contentDescription="@string/footer_img_profile" />

    <ImageButton
        android:id="@id/mFooterMembersImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/mFooterCameraImg"
        android:background="@drawable/icon_bar_members"
        android:contentDescription="@string/footer_img_members" />

    <ImageButton
        android:id="@id/mFooterCameraImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/mFooterMediaImg"
        android:background="@drawable/icon_bar_camera"
        android:contentDescription="@string/footer_img_camera" />

    <ImageButton
        android:id="@id/mFooterMediaImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/mFooterHomeImg"
        android:background="@drawable/icon_bar_medias"
        android:contentDescription="@string/footer_img_media" />

    <ImageButton
        android:id="@id/mFooterHomeImg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:background="@drawable/icon_bar_home"
        android:contentDescription="@string/footer_img_home" />

Answer 1

I am posting Der Golem's comment as answer, just to help you. Use the following code in your xml to achieve your objective:

<LinearLayout

android:layout_width = "match_parent"
android:layout_height= "match_parent">

<ImageButton
        android:id="@+id/mFooterProfileImg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight = "1"

        android:background="@drawable/icon_bar_profile"
        android:contentDescription="@string/footer_img_profile" />

    <ImageButton
        android:id="@id/mFooterMembersImg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
      android:layout_weight = "1"
        android:background="@drawable/icon_bar_members"
        android:contentDescription="@string/footer_img_members" />

    <ImageButton
        android:id="@id/mFooterCameraImg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
       android:layout_weight = "1"
        android:background="@drawable/icon_bar_camera"
        android:contentDescription="@string/footer_img_camera" />

    <ImageButton
        android:id="@id/mFooterMediaImg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
       android:layout_weight = "1"
        android:background="@drawable/icon_bar_medias"
        android:contentDescription="@string/footer_img_media" />

    <ImageButton
        android:id="@id/mFooterHomeImg"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
       android:layout_weight = "1"
        android:background="@drawable/icon_bar_home"
        android:contentDescription="@string/footer_img_home" />

<LinearLayout/>

Hope this might help you