Android - Fitting 6 ImageButtons to layout

Question

I've been having a huge problem with fitting 6 image buttons to one screen.

I have tried Intellij and ADT but came up with nothing. I've also used two methods and played around them. One of them was inserting linear layouts to relative layout and inserting the image buttons inside them. This seemed well in the first place, however, i got bad results on big screens. The other method was to use regular alignment methods in xml but this gave me a lot worse results and I'm really stuck right now. I think I'm going to go with the first method but I want to get a good result since this is my senior project. You can find the two methods below. Can you help me what I'm doing wrong? Thank you very much.

---EDIT---

My intent is 3 lines, 2 buttons at each line. And screenshots are below. I have nexus 7 2013 and galaxy s2, and the results are similar to the ones below, so I assume the results below are correct.

This is the picture for 1st method:

This is the picture for 2nd method:

---END OF EDIT---

First method (inserting image buttons to 3 linear layouts in relative layout):

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="390dp"
        android:layout_alignParentBottom="true" android:layout_alignParentStart="true">

    <ImageButton
        android:id="@+id/apuButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/apu"
        android:scaleType="fitCenter"
        />
    <ImageButton
        android:id="@+id/lmsButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/lms"
        android:scaleType="fitCenter"
        />

</LinearLayout>

<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentTop="true" android:layout_alignParentStart="true"
        android:layout_marginTop="140dp" android:layout_marginBottom="255dp" android:id="@+id/linearLayout">

    <ImageButton
        android:id="@+id/mailButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/mail"
        android:scaleType="fitCenter"/>

    <ImageButton
            android:id="@+id/scaButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/sca"
            android:scaleType="fitCenter"/>

</LinearLayout>
<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginTop="119dp" android:layout_alignTop="@+id/linearLayout"
        android:layout_alignParentStart="true" android:layout_marginBottom="140dp" android:id="@+id/linearLayout2">

    <ImageButton
            android:id="@+id/libraryButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/library"
            android:scaleType="fitCenter"/>

    <ImageButton
            android:id="@+id/ratingButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/rating"
            android:scaleType="fitCenter"/>

</LinearLayout>
<LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignTop="@+id/linearLayout2" android:layout_alignParentEnd="true"
        android:layout_marginTop="127dp">
</LinearLayout>

Second method (using alignments):

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
<ImageButton
        android:id="@+id/apuButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/apu"
        android:scaleType="fitCenter"


        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />
<ImageButton
        android:id="@+id/lmsButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/lms"

        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true" />



<ImageButton
        android:id="@+id/mailButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/mail"
        android:scaleType="fitCenter"

        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        />

<ImageButton
        android:id="@+id/scaButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/sca"
        android:scaleType="fitCenter"

        android:layout_alignParentRight="true"
        android:layout_centerVertical="true" />

<ImageButton
        android:id="@+id/libraryButton"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"

        android:src="@drawable/library"
        android:scaleType="fitCenter"

        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        />
<ImageButton
        android:id="@+id/ratingButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:src="@drawable/rating"
        android:scaleType="fitCenter"

        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        />

Answer 1

Check out this code, please comment if it works

 <LinearLayout
    android:id="@+id/grd_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="33"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/apuButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/lmsButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="33"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/mailButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/scaButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="33"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/libraryButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher" />

        <ImageButton
            android:id="@+id/ratingButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>
</LinearLayout>

Answer 2

// Try this way,hope this will help you to solve your problem...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageButton
            android:id="@+id/apuButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY" />
        <ImageButton
            android:id="@+id/lmsButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageButton
            android:id="@+id/mailButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY"/>

        <ImageButton
            android:id="@+id/scaButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY"/>

    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <ImageButton
            android:id="@+id/libraryButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY"/>

        <ImageButton
            android:id="@+id/ratingButton"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY"/>

    </LinearLayout>
</LinearLayout>

Answer 3

You'll want to use your first method with linear layouts and add in weights so that it doesn't become separated out like that. Here is the modified code of yours that should fix that issue (you'll want to create bigger images for each device so that it comes out looking a bit cleaner too).

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.test.MainActivity$PlaceholderFragment" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_alignParentStart="true"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/apuButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/apu" />

    <ImageButton
        android:id="@+id/lmsButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/lms" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_alignParentStart="true"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/mailButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/mail" />

    <ImageButton
        android:id="@+id/scaButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/sca" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_alignParentStart="true"
    android:layout_weight="1"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/libraryButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/library" />

    <ImageButton
        android:id="@+id/ratingButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/rating" />
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_alignParentEnd="true"
    android:layout_marginTop="127dp"
    android:layout_weight="1"
    android:orientation="horizontal" >
</LinearLayout>