Search code examples
androidandroid-linearlayoutandroid-relativelayout

How to wrap Image buttons in a horizontal linear layout?


Is there any way to wrap Image buttons in Horizontal Linear Layout? Or is there any other way to do the following thing?

I have six image buttons. Suppose these buttons are appearing in a mid resolution device like this:

Image button 1 | Image button 2 | Image button 3 | (1st row)

Image button 4 | Image button 5 | Image button 6 | (2nd row)

I want these buttons to appear in a tablet or any high resolution device like this:

Image button 1 | Image button 2 | Image button 3 | Image button 4 | (1st row)

Image button 5 | Image button 6 |      (2nd row)

Or like this:

Image button 1 | Image button 2 | Image button 3 | Image button 4 | Image button 5 | 
Image button 6 |

According to device screens.

Here is my main XML file:

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

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@layout/back2">


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/lib/com.google.ads"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@layout/back2">
<TextView
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@layout/button5"
        android:gravity="center"
        android:orientation="vertical"
        android:text="@string/hello"
        android:textColor="#D5D5D5"
        android:textSize="20sp" />
<com.google.ads.AdView android:id="@+id/adView"
                         android:layout_width="wrap_content"
                         android:layout_height="wrap_content"
                         ads:adUnitId="a150c75f96c352c"
                         ads:adSize="BANNER"

                         ads:loadAdOnCreate="true"/>

<org.core.mywindows8.FlowLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:f="http://schemas.android.com/apk/res/org.core.mywindows8"
f:horizontalSpacing="6dip"
f:verticalSpacing="12dip"
f:fitContent="true"

   android:layout_width="fill_parent"
android:layout_height="wrap_content"
>

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
      android:background="@color/morange1"
        android:drawableTop="@drawable/tutorials"
        android:textColor="#ffffff"
        android:id="@+id/button1"
        android:paddingTop="16sp"
        android:drawablePadding="10sp"
        android:text="@string/tutorials"
/>
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    android:background="@color/mviolet"
        android:drawableTop="@drawable/themes"
        android:textColor="#ffffff"
        android:id="@+id/button2"
        android:paddingTop="16sp"
        android:drawablePadding="10sp"
        android:text="@string/themes"
        />
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
     android:background="@color/mblu2"
        android:drawableTop="@drawable/gadgets"
         android:textColor="#ffffff"
        android:id="@+id/button3"
        android:paddingTop="16sp"
        android:drawablePadding="10sp"
        android:text="@string/gadgets"/>
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
android:background="@color/mgree"
        android:drawableTop="@drawable/network"
        android:textColor="#ffffff"
        android:id="@+id/button4"
        android:paddingTop="16sp"

        android:drawablePadding="10sp"
       android:text="@string/networking"/>
<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    android:background="@color/mblu3"
        android:drawableTop="@drawable/search"
         android:textColor="#ffffff"
        android:id="@+id/button5"
        android:paddingTop="16sp"
        android:drawablePadding="10sp"
        android:text="@string/win8index"/>


 </org.core.mywindows8.FlowLayout>
</LinearLayout>
</ScrollView>

Solution

  • You could use FlowLayout for this.

    Check this

    EDITED

    Add the required class, styles and attributes to your project from the link i gave you. And use this layout, by adding it to your layout XML.


    Mentioned in the Git Project.. Copy all the files from Git Project to your projects

    User FlowLayout instead LinearLayout in XML

    <com.yourpackage.FlowLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    >
    </com.yourpackage.FlowLayout>
    

    And then add your child view in that FlowLayout, may be in XML only or at run time.

    Other Parameters supported are :

    xmlns:f="http://schemas.android.com/apk/res/your.namespace"
    f:horizontalSpacing="6dip"
    f:verticalSpacing="12dip"
    f:orientation="vertical"
    f:layout_horizontalSpacing="32dip"
    f:layout_verticalSpacing="32dip"
    

    I have added a support to fit the content in a line. Get my github source

    To make this work. you need to give one more attribute as fitContent to true for your layout.

    f:fitContent="true"

    Answer for your Comments

    f:verticalSpacing="12dip" - Is used to specify the vertical spacing for the whole FlowLayout. i.e Every child view/button will have the vertical spacing.

    Example

     <org.apmem.tools.layouts.FlowLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            f:verticalSpacing="12dip"
        >
    
    </org.apmem.tools.layouts.FlowLayout>
    

    Whereas, f:layout_verticalSpacing="32dip" is specified to a child button as we specify the weight

    Example

    <Button
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        f:layout_verticalSpacing="32dip"
    >
    </Button>