0

I have a layout for the main screen in an app, which I would like to have an evernote style. So far, my code is this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:gravity="center_vertical|center_horizontal"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/btn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button" />

        <ImageButton
            android:id="@+id/btn2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/btn3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button" />

        <ImageButton
            android:id="@+id/btn4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/button" />
    </LinearLayout>

</LinearLayout>

This is how it looks like:

enter image description here

And this is how I'd like it to look like:

enter image description here

How could I achieve this? Grouping the buttons like this?

Thanks a lot in advance!

Community
  • 1
  • 1
noloman
  • 11,411
  • 20
  • 82
  • 129
  • 1
    What you're probably looking for is a Dashboard pattern. Check out this question: http://stackoverflow.com/questions/2873568/android-dashboard-pattern - the second answer – Michał Klimczak Apr 24 '12 at 08:11
  • http://stackoverflow.com/questions/8212035/android-gridlayout-and-space-backport – Siyamed Apr 24 '12 at 08:29

2 Answers2

1

you just need to set the width of the ImageButtons to 0dp and give them a layout_weight of 1. Furthermore set layout_gravity to center_horizontal.

This will make them center nicely.

Best wishes, Tim

Tim
  • 6,692
  • 2
  • 25
  • 30
1

You can adapt it to this, this is from the Google I/O app.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" 
android:layout_width="fill_parent"
android:layout_height="fill_parent" 
android:background="#ffffff">
<LinearLayout android:orientation="vertical"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_weight="1" 
    android:padding="6dip">
    <LinearLayout android:orientation="horizontal"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <Button android:id="@+id/button" 
            android:text="@string/button"
            android:drawableTop="@drawable/button" />
        <Button android:id="@+id/button" 
            android:text="@string/button"
            android:drawableTop="@drawable/button" />
    </LinearLayout>

    <LinearLayout android:orientation="horizontal"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <Button android:id="@+id/button" 
            android:text="@string/button"
            android:drawableTop="@drawable/button" />
        <Button android:id="@+id/button" 
            android:text="@string/button"
            android:drawableTop="@drawable/button" />

    </LinearLayout>

    <LinearLayout android:orientation="horizontal"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="1">
        <Button android:id="@+id/button" 
            android:text="@string/button"
            android:drawableTop="@drawable/button" />
        <Button android:id="@+id/button" 
            android:text="@string/button"
            android:drawableTop="@drawable/button" />
    </LinearLayout>
</LinearLayout>

  • Buttons do not scale up, meaning they do not expand. Thus I recommend using ImageView with TextView. – AlikElzin-kilaka Apr 24 '12 at 12:29
  • Another problem is that the Text view does NOT scale up as well, but it's not a big of deal as the images. – AlikElzin-kilaka Apr 24 '12 at 12:30
  • @kilaka It was just an example for positioning. In my case I used buttons, he can put whatever he wants. In my app it works just fine, I have something similar to `Evernote`. –  Apr 24 '12 at 13:31