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>
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>