I'm trying to use Gridlayout. I want my grid's buttons to fill the screen but I have a problem doing that. I notice that the layout itself fill the screen but his children are not filling the layout. This is the output:
http://i.imgur.com/TWNuTaj.png
I searched a lot on the internet but most of the answers are offering to replace the GridLayout to LinearLayout or RelativeLayout But I have to stay with GridLayout.
Also I dont want to give the buttons specific size but rather stay with the structure in the linked picture.
Here is my code:
<GridLayout 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"
android:layout_margin="0.5dp"
android:columnCount="4"
android:orientation="horizontal"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:rowCount="5"
tools:context=".Level1" >
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="0"
android:text="0" />
<Button
android:id="#+id/b_1"
android:layout_column="1"
android:layout_gravity="fill_horizontal"
android:layout_row="0"
android:text="1" />
<Button
android:id="#+id/b_2"
android:layout_column="2"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowSpan="3"
android:text="2" />
<Button
android:id="#+id/b_3"
android:layout_column="3"
android:layout_row="0"
android:text="3" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="1"
android:text="0" />
<Button
android:id="#+id/b_4"
android:layout_column="1"
android:layout_gravity="fill_vertical"
android:layout_row="1"
android:layout_rowSpan="3"
android:text="4" />
<Button
android:id="#+id/b_6"
android:layout_column="3"
android:layout_gravity="fill_vertical"
android:layout_row="1"
android:layout_rowSpan="3"
android:text="6" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="2"
android:text="0" />
<Button
android:id="#+id/b_5"
android:layout_column="2"
android:layout_row="3"
android:text="5" />
<Button
android:layout_width="0dp"
android:layout_column="0"
android:layout_row="3"
android:text="0" />
<Button
android:layout_height="0dp"
android:layout_column="0"
android:layout_columnSpan="4"
android:layout_row="4"
android:text="0" />
</GridLayout>
Try this way,hope this will help you to solve your problem.
GridLayout : "GridLayout does not provide support for the principle of weight, as defined in weight. In general, it is not therefore possible to configure a GridLayout to distribute excess space in non-trivial proportions between multiple rows or columns ... For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group."
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="1" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="4" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="5" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<Button
android:layout_width="match_parent"
android:layout_weight="0.20"
android:layout_height="0dp"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_weight="0.80"
android:layout_height="0dp"
android:text="6" />
</LinearLayout>
</LinearLayout>
Based on previous answer by #Haresh Chhelana, it worked like so just sharing my solution:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_1">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<!-- position 1 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_elsa" />
<!-- position 3 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_daniel" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical">
<!-- position 2 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_anna" />
<!-- position 4 -->
<ImageView
android:layout_width="match_parent"
android:layout_weight="0.50"
android:layout_height="0dp"
android:src="#drawable/bt_elmo" />
</LinearLayout>
</LinearLayout>
sample
source: https://github.com/eduardocerqueira/sing
Related
I'm new to Android and I want to create an activity with 3 set (line) of Buttons at the bottom of screen .For my example I wrote this code for 2 set (line) of buttons:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="10" />
</LinearLayout>
</RelativeLayout>
I want to buttons 6-10 put on (above) the buttons 1-5 (like Stack).
How I can do this?
Thanks
You are using a RelativeLayout with two LinearLayouts.
You should give both your LinearLayout ids and after that you will position the other LinearLayout which you want to be on top by giving it the atrribute
android:layout_above="#id/the_id_of_the_one_you_want_to_be_below"
Try to wrap your two LinearLayout in a parent linearLayout.
That parent layout need to be aligned to the bottom.
Something like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5" />
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="10" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
i'm trying to create a vertical linear layout the contains multiple horizontal linear layouts of buttons and at the bottom a Banner ad. But what i'm doing is clearly not working. In the following screenshot it comes out basically how i want it in the preview but in the emulator it is not coming out like i want it leaving a lot of blank space. https://gyazo.com/468c575c8f56f167b8ff029e076b964f
So if anyone has a solution that'd be great, i'm really stuck.
*Note ignore the vulgarity in string names and button names, this is for a soundboard application.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:ads="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="com.example.android.soundboard.MainActivity"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="vertical"
android:paddingTop="2dp"
android:paddingBottom="2dp"
android:layout_weight="1"
android:weightSum="12"
>
<!-- a lot of buttons -->
<!-- row 1 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/ethan_bradberry"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button_ethanBradberry"
/>
<Button
android:text="#string/shut_the_fuck_up"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button_stfu"
/>
<Button
android:text="#string/HaHa"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:id="#+id/button_haha"
/>
</LinearLayout>
<!-- row 2 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/oh_now_i_get_it"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_ohNowIGetIt"
/>
<Button
android:text="#string/what_the_fuck"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_whatTheFuck"
/>
<Button
android:text="#string/lying"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_whyTheFuckULyin"
/>
</LinearLayout>
<!-- row 3 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/why_you_haff_be_mad"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_whyYouHeffBeMad"
/>
<Button
android:text="#string/nigga_you_gay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_niggaYouGay"
/>
<Button
android:text="#string/hit_marker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_hitMarker"
/>
</LinearLayout>
<!-- row 4 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/its_a_trap"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_itsATrap"
/>
<Button
android:text="#string/shut_up_and_take_my_money"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_shutUpAndTakeMyMoney"
/>
<Button
android:text="#string/_smoke_weed"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_smokeWeedEveryDay"
/>
</LinearLayout>
<!-- row 5 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/stop"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_stop"
/>
<Button
android:text="#string/wow"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_wow"
/>
<Button
android:text="#string/twenty_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_twentyOne"
/>
</LinearLayout>
<!-- row 6 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/Surprise_Mother_fucker"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_surpriseMotherFucker"
/>
<Button
android:text="#string/another_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_anotherOne"
/>
<Button
android:text="#string/damn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_daaamn"
/>
</LinearLayout>
<!-- row 7 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/hoopla"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_hoopla"
/>
<Button
android:text="#string/dontGetIt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_i_dont_get_it"
/>
<Button
android:text="#string/dontNeedIt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_i_dont_need_it"
/>
</LinearLayout>
<!-- row 8 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/myLeg"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_my_leg"
/>
<Button
android:text="#string/niggaHush"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_nigga_hush"
/>
<Button
android:text="#string/soiledIt"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_soiled_it"
/>
</LinearLayout>
<!-- row 9 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/LoadOfBarnacles"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_loadOfBarnacles"
/>
<Button
android:text="#string/tight"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_tight"
/>
<Button
android:text="#string/wereWaiting"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_wereWaiting"
/>
</LinearLayout>
<!-- Row 10 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/pinhead"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_pinhead"
/>
<Button
android:text="#string/okaaay"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_okay"
/>
<Button
android:text="#string/yeaaah"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_yeaaah"
/>
</LinearLayout>
<!-- Row 11 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="1"
>
<Button
android:text="#string/whaaat"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_whaaat"
/>
<Button
android:text="New Button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button32"
/>
<Button
android:text="#string/ding"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:id="#+id/button_ding"
/>
</LinearLayout>
<!-- Ad -->
<com.google.android.gms.ads.AdView
android:layout_weight="1"
android:layout_gravity="center_horizontal"
ads:adSize="BANNER"
ads:adUnitId="#string/banner_ad_unit_id"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/adView"
>
</com.google.android.gms.ads.AdView>
Change android:layout_height of parent Linear layout which has vertical orientation to match_parent so that it's height will be same as its parent. Change android:layout_height of AdView to 0dp so that weight will show effect.
Everytime i use nested layouts, my sweet ide shows the error saying "nested layouts are bad performance". So i dig up a little why it is and found that it is the exponential calculation thing etc. Also relative layout usage over linear layout is suggested generally. But suppose the below code;
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent" android:background="#cccccc"
android:layout_height="match_parent" android:orientation="vertical"
tools:context=".MainActivity" android:weightSum="10">
<LinearLayout android:layout_marginTop="9dp" android:layout_marginLeft="10dp"
android:background="#drawable/sub_background_dashboard" android:layout_marginRight="10dp"
android:layout_marginBottom="3dp"
android:layout_width="match_parent" android:layout_weight="4"
android:layout_height="0dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent" android:weightSum="2"
android:layout_weight="2.3"
android:layout_height="0dp" android:layout_marginTop="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" android:layout_marginBottom="2dp">
<LinearLayout
android:layout_width="0dp" android:background="#drawable/sub_background_dashboard"
android:layout_weight="1" android:layout_marginRight="3.5dp"
android:layout_height="match_parent" >
</LinearLayout>
<LinearLayout
android:layout_width="0dp" android:background="#drawable/sub_background_dashboard"
android:layout_weight="1" android:layout_marginLeft="3.5dp"
android:layout_height="match_parent" >
</LinearLayout>
</LinearLayout>
<LinearLayout android:layout_marginTop="5dp" android:layout_marginLeft="10dp"
android:background="#drawable/sub_background_dashboard" android:layout_marginRight="10dp"
android:layout_marginBottom="3dp"
android:layout_width="match_parent" android:layout_weight="2.7"
android:layout_height="0dp">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent" android:weightSum="10"
android:layout_weight="1"
android:layout_height="0dp" android:layout_marginTop="3dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent" android:weightSum="3"
android:layout_weight="9" android:background="#77000000"
android:layout_height="0dp"
android:orientation="horizontal">
<Button
android:layout_width="0dp" android:layout_weight="1" android:textColor="#DDDDDDDD"
android:layout_height="match_parent" android:background="#00000000"
android:gravity="center" android:textSize="17sp"
android:text="Snooze"/>
<View
android:layout_width="1dp" android:layout_marginTop="5dp"
android:layout_height="match_parent" android:layout_marginBottom="5dp"
android:background="#bbbbbbbb"/>
<Button
android:layout_width="0dp" android:layout_weight="1"
android:textSize="17sp" android:background="#00000000"
android:text="Dismiss" android:gravity="center"
android:layout_height="match_parent" android:textColor="#DDDDDDDD"/>
<View
android:layout_width="1dp" android:layout_marginTop="5dp"
android:layout_height="match_parent" android:layout_marginBottom="5dp"
android:background="#bbbbbbbb"/>
<Button
android:layout_width="0dp" android:layout_weight="1"
android:textSize="17sp" android:background="#00000000"
android:text="Cancel" android:gravity="center"
android:layout_height="match_parent" android:textColor="#DDDDDDDD"/>
</LinearLayout>
<View
android:layout_width="match_parent" android:background="#ff0000"
android:layout_height="0dp" android:layout_weight="1"/>
</LinearLayout>
</LinearLayout >
Think Linear Layouts as templates for views etc. This line of xml code will work for every screen size for portrait mode!!!. Calculations are already done, no percentage calculation needed(and implementation of it) from my side and everything covers space as it expected to be.
If i would use Relative Layout, for horizontal views that width calculation would be much longer and maybe would require dynamic side( I am not suggesting doing gui in dynamic side is bad, sure it is better even) So even small nested layouts like this, is it ill-advised still?
I use nested linear-layouts as well, because its easy. But for performance you can better use GRIDLAYOUT. Android introduced it in Ice Cream Sandwich to avoid nested layouts.
A little example:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:rowCount="7"
tools:context=".MainActivity" >
<ImageView
android:id="#+id/imageView1"
android:layout_column="0"
android:layout_row="0"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView1"
android:layout_column="1"
android:layout_gravity="right"
android:layout_row="0"
android:text="TextView" />
<View
android:id="#+id/view1"
android:layout_height="16dp"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_row="1"
android:background="#F90" />
<Button
android:id="#+id/button1"
android:layout_column="0"
android:layout_row="2"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_column="0"
android:layout_row="3"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_column="0"
android:layout_row="4"
android:text="Button3" />
<View
android:id="#+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_column="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="5"
android:background="#F90" />
<ImageView
android:id="#+id/imageView2"
android:layout_column="0"
android:layout_row="6"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/textView3"
android:layout_column="1"
android:layout_gravity="right"
android:layout_row="2"
android:text="HEADER" />
<View
android:id="#+id/view3"
android:layout_width="0dp"
android:layout_height="16dp"
android:layout_column="1"
android:layout_gravity="bottom|fill_horizontal"
android:layout_row="6"
android:background="#F90" />
I am trying to create a button layout that looks like this on the first row:
[ 1 ][2][3]
Button 1 should occupy 2 columns and be twice the width of buttons 2 and 3. Buttons 2 and 3 should be the same width (1 column wide).
However, what I am seeing is this:
[1][2][ 3 ]
Can somebody please tell me why button 3 completely fills the rest of the screen and why the buttons don't seem to be obeying the layout_column_span rules?
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:layout_margin="0dp"
android:adjustViewBounds="true"
android:alignmentMode="alignMargins"
android:clipToPadding="false"
android:columnCount="4"
android:fitsSystemWindows="false"
android:layoutMode="clipBounds"
android:orientation="horizontal"
android:padding="0dp"
android:rowCount="6"
android:useDefaultMargins="true" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_weight="1"
android:layout_margin="0dp"
android:background="#ff0000"
android:layout_row="0"
android:layout_column="0"
android:layout_columnSpan="2"
android:layout_rowSpan="2"
android:text="1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="fill"
android:layout_weight="1"
android:layout_margin="0dp"
android:background="#ffff00"
android:layout_row="0"
android:layout_column="2"
android:layout_columnSpan="1"
android:layout_rowSpan="2"
android:text="2" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="3"
android:layout_columnSpan="1"
android:layout_gravity="fill"
android:layout_margin="0dp"
android:layout_row="0"
android:layout_rowSpan="2"
android:layout_weight="1"
android:background="#00ff00"
android:text="3" />
</GridLayout>
Check this may help you
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/favorites_grid"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:columnCount="1"
android:rowCount="2"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_column="0"
android:layout_gravity="left|top"
android:layout_row="0"
android:orientation="horizontal"
android:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Cell 1"
android:textSize="14dip" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cell 2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cell 3"
android:textSize="14dip" />
</LinearLayout>
According to this post, there are some limitations when it comes to arranging space in a non-trivial manner on a GridLayout . You can try another approach or you can use a LinearLayout for each row, so you can control weights for its children Views.
Here is an example for your case:
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:singleLine="true"
android:text="Button 1" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="Button 2" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="Button 3" />
</LinearLayout>
Hope to have helped you.
sorry for this newbie question. I have googled a while and cannot find an answer.
I have 10 buttons in a row. This looks ok on my tablet. But when I start the app on my phone only the first 5 buttons are shown, the rest is cut off.
If there is not enough space the remaining buttons should be displayed in a second row. How can I do that?
Thanks.
<LinearLayout 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"
android:orientation="horizontal"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
/>
Interesting! take scrollview parents of LinearLayout#
<ScrollView...
<LinearLayout...//android:orientation="horizontal"
<Button... // your all buttons
</Button>
</LinearLayout>
</ScrollView>
<?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="wrap_content"
>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="4"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="8"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="10"
/>
</LinearLayout>
</ScrollView>
You have a few options:
Place all your buttons into a GridView - this will work across any screen size and is relatively straightforward and neat.
Put them into a ScrollView. This is quite popular but a bit annoying for the user as it can lead to mis-clicks and they may not realise you can scroll the buttons.
If you only ever want exactly 1 or 2 rows depending on screen size, put each row of buttons into a separate layout file. Then create 2 additoinal screen-dependent layouts containing LinearLayout which include both rows, but give the portrait version a vertical orientation. So when that layout is loaded, you get two rows.
Work out if you can present the buttons in a different way - maybe using just icons, or combine them into dropdowns.
// try this way
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="horizontal"
tools:context=".MainActivity">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="1"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="2"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="3"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="4"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="5"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="6"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="7"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="8"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="9"/>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1.2"
android:text="10"/>
</LinearLayout>