CODEWITHSUNDEEP
androidandroid-linearlayoutandroid-relativelayout
Anik Chakraborty
Anik Chakraborty

Reputation: 187

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>

Upvotes: 9

Views: 7843

Answers (3)

Gene Bo
Gene Bo

Reputation: 12063

I have posted details for a simple and relatively concise solution here:

https://stackoverflow.com/a/23228213/2162226

Summary:

Upvotes: 0

Vivek Khandelwal
Vivek Khandelwal

Reputation: 7849

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>

Upvotes: 10

Karakuri
Karakuri

Reputation: 38585

Generally you would make alternate layout XML files for different configurations. Each of these folders will have an xml file with the same name (the one you use when you call setContentView() in your Activity).

/res/layout/
/res/layout-sw600dp/
/res/layout-sw720dp/

If your project does not have these folders, you can go ahead and make them yourself. This tells the system at runtime that, based on the smallest available width of the device in density-independent pixels, one of these three layouts will be used. sw600dp is recommended for specifying "large screens" like 7-inch tablets; sw720dp is recommended for specifying "xlarge screens" like 10-inch tablets. These numbers can be arbitrary.

You could also do as Vivek Khandelwal suggested using a FlowLayout implementation, but that may or may not work exactly as you desire.

Upvotes: 0

Related Questions