Linear Layout UI Design

Question

The UI Design I'm Looking to Achieve

Hi, I'm a newbie to Android Development and am only 15. I have been trying to produce a UI design like the one above with the red boxes being image buttons. I have experimented with weight etc. but it cuts off the edge of the image every time.

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

    <LinearLayout
        android:id="@+id/linearlayout_02"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1" >

        <ImageButton
            android:id="@+id/squads"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:src="@drawable/squad" />

        <ImageButton
            android:id="@+id/results"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:layout_weight="2"
            android:src="@drawable/results" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearlayout_03"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1" >

        <ImageButton
            android:id="@+id/highlights"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:layout_weight="4"
            android:src="@drawable/highlights" />

        <ImageButton
            android:id="@+id/fixtures"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:layout_weight="4"
            android:src="@drawable/fixtures" />
    </LinearLayout>

</LinearLayout>

You can find many examples XML layouts on SO like here: http://stackoverflow.com/a/11737265/2777098 and here: http://stackoverflow.com/q/10812552/2777098 — display name, Apr 08 '14 at 18:13

score 1 · Answer 1 · answered Apr 08 '14 at 18:11

1

Don't use ImageButtons if you just need clickable images use ImageView with clickable="true" . Using ImageView you can try different scaleType property values to achieve what you need.

answered Apr 08 '14 at 18:11

Lingviston

5,479
5
35
67

score 1 · Accepted Answer · answered Apr 08 '14 at 18:57

try this layout structure,

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

<LinearLayout
    android:id="@+id/linearlayout_02"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    >

    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearlayout_03"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    >

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:layout_weight="2"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

<LinearLayout
    android:id="@+id/linearlayout_04"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
     >

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="2"
        android:src="@drawable/ic_launcher" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="10dp"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

 <LinearLayout
    android:id="@+id/linearlayout_05"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    >

    <ImageButton
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_marginBottom="10dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:src="@drawable/ic_launcher" />
</LinearLayout>

here, default images are taken as ic_launcher.

Linear Layout UI Design

2 Answers2