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>
To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" (for a vertical layout) or the android:layout_width of each view to "0dp" (for a horizontal layout). Then set the android:layout_weight of each view to "1" .
You can set the android:layout_weight='1' and both buttons will share the screen equally(side by side) or if you want the extra space between them, you can place a button each in a linear layout and set the android:layout_gravity to left and right for each. Save this answer.
To center align LinearLayout, assign android:gravity attribute of this LinearLayout with the value “center”. Let us create an Android application with LinearLayout containing two Button widgets as children. We shall center align these children using gravity attribute.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With