1

I want to find suitable layout to wrap buttons instead strange streching.

Some example is what I get:

invalid wrap

What I want achieve:

valid wrap

Please help and explain if it possible in Android what is quite easy in HTML5 - I thinking about ScrollView but not sure if it is required. I am search many pages but not find good solution and think that is trivial but not know the answer.

Here is current code:

<RelativeLayout 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"
    tools:context=".MainActivity" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        tools:ignore="HardcodedText" />

    <Button
        android:id="@+id/btn_goHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/button1"
        android:text="@string/button_go_home" />

    <Button
        android:id="@+id/btn_openEmails"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/btn_goHome"
        android:text="@string/button_open_emails" />

    <Button
        android:id="@+id/btn_openTests"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/btn_openEmails"
        android:text="Open tests" />

    <ScrollView
        android:id="@+id/scrollView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_openTests"
        android:layout_centerHorizontal="true" >

        <LinearLayout
            android:id="@+id/list1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="?android:dividerHorizontal"
            android:orientation="vertical"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:showDividers="middle" >

        </LinearLayout>
    </ScrollView>

</RelativeLayout>
Chameleon
  • 9,722
  • 16
  • 65
  • 127
  • It's doing exactly what you asked it to do - in btn_openTests -> `android:layout_toRightOf="@+id/btn_openEmails"`. Did you want `android:layout_below="@+id/button1"` – Simon Feb 03 '13 at 20:53
  • I want make placement relate to "btn_openEmails" not "button1". I understand that you want explain me that if I place bellow "button1" it will be done - that is true only for this resolution and language want achieve generic solution - your solution is good but not solve problem. – Chameleon Feb 03 '13 at 21:01
  • Do you mean that you just want the buttons to wrap around? So if there is only room horizontally for two buttons, buttons 3 and 4 will be on the 2nd row? – Simon Feb 03 '13 at 21:06
  • You should be able to remove `android:layout_toRightOf="@+id/btn_openEmails"` and it will layout where it fits, since it is a `RelativeLayout`. To test, remove the code then run, it should show like your 2nd picture, then switch to landscape and they should all be on the same line. ie. there is enough room – Matt Feb 03 '13 at 21:11
  • @Matt I was removed android:layout_toRightOf="@+id/btn_openEmails" and it bring button placed in top left corner overlapping other buttons - maybe I am doing something wrong. – Chameleon Feb 03 '13 at 22:35
  • @Simon Sure I want that if there is not space for 3 or 4 button in line they should be placed in next line - since never could predict resolution and button sizes. – Chameleon Feb 03 '13 at 22:36

1 Answers1

2

I would recommend FlowLayout created by the man himself - Romain Guy. I think it will do exactly what you want.

Here is the implementation: Android Layouts.zip

And here's his original post: How can I do something like a FlowLayout in Android?

An alternative implementation can be found here: FlowLayout in Android

Finally you have an implementation using BSD license on GitHub: ApmeM / android-flowlayout. There are screenshots and documentation which should get you going pretty fast.

Community
  • 1
  • 1
andr
  • 15,970
  • 10
  • 45
  • 59
  • It need little more implementation thanks for help - it is strange that there is no simpler method - maybe more easier solution is possible. – Chameleon Feb 03 '13 at 22:16
  • @Chameleon I personally think you can get used to it. What do you mean by "more implementation"? I think the third implementation does exactly what you want, as show on the screenshots. It just wraps the buttons to let them take preferred space and puts them on new lines if necessary. – andr Feb 03 '13 at 22:22
  • I think that your solution is good but strange that Android need such "patching" and it is not included in API since it very usefull. – Chameleon Feb 03 '13 at 22:44
  • @Chameleon you can't have everything. *You* find that very useful while for example I've never had need for such a layout in several commercial applications. Another example: Adobe Flex/Actionscript for mobile still has no support for turning the vibrator on/off and you would think that is a must... ;) – andr Feb 03 '13 at 22:55
  • No matter - limits mostly is such as you set yourself - thanks for some Android limits explanation. – Chameleon Feb 03 '13 at 23:05