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.
Related
I need help...
I was trying to build 3 buttons aligned in 1 row and 3 columns inside of a GridLayout, and looks its working, but I think I haven't done that right, because if change the size of the text inside the button (textSize) the GridLayout and the buttons are going outside of the screen.
I think that I'm setting the layout_witdh and/or layout_height wrong, but I'm not sure.
Can anyone help me? Thanks :)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#drawable/background"
tools:context="com.markus.tssproject.MainActivity">
<RelativeLayout
android:layout_weight="2"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="5dp"
android:layout_marginRight="5dp"
android:layout_marginLeft="5dp"
android:columnCount="3"
android:rowCount="1">
<Button
android:id="#+id/id0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_column="0"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_marginRight="3dp"
android:layout_row="0"
android:layout_rowWeight="1"
android:padding="30dp"
android:tag="0"
android:text="test tested testing"
android:textSize="20sp" />
<Button
android:id="#+id/open1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_column="1"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:padding="30dp"
android:tag="1"
android:text="test tested testing"
android:texSize="20sp" />
<Button
android:id="#+id/open2"
android:layout_width="wrap_content"
android:layout_column="2"
android:layout_height="wrap_content"
android:layout_columnWeight="1"
android:layout_gravity="fill"
android:layout_row="0"
android:layout_rowWeight="1"
android:padding="30dp"
android:tag="2"
android:text="teste tested testing"/>
</GridLayout>
</RelativeLayout>
</LinearLayout>
change the following in each button
android:layout_width="0dip"
android:layout_weight ="1"
you can do this in LinearLayout itself, no need of grid layout
Use this
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="horizontal"
tools:context="com.markus.tssproject.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="110dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:orientation="horizontal">
<Button
android:id="#+id/id0"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:padding="30dp"
android:tag="0"
android:text="test tested testing"
android:textSize="20sp" />
<Button
android:id="#+id/open1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginRight="3dp"
android:layout_weight="1"
android:padding="30dp"
android:tag="1"
android:texSize="20sp"
android:text="test tested testing" />
<Button
android:id="#+id/open2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:padding="30dp"
android:tag="2"
android:text="teste tested testing" />
</LinearLayout>
I am new to Android. I want to put 4 buttons horizontally with equal margins with both left and right side as shown in the wire-frame diagram below:
I searched a lot on Google and Stackoverflow also. I tried to set android:layout_weight="1" . But it only sets equal margin from left-side. I want to set it on both sides and on multiple screen layouts. I want to know which layout and properties should be applied for this. I am using in Android studio and mostly used Drag-Drop method for design.
Currently I've XML layout as follows:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/frameLayout"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="10dp"
android:id="#+id/relativeLayout">
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:id="#+id/b3"
android:layout_gravity="left|center_vertical"
android:onClick="buttonThree"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="false"
android:layout_alignParentStart="true"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5"
android:id="#+id/b5"
android:layout_gravity="left|center_vertical"
android:onClick="buttonFive"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b3"
android:layout_toEndOf="#+id/b3"
android:layout_alignParentRight="false"
android:layout_alignParentLeft="false"
android:layout_weight="1"
android:width="0dp"
android:layout_alignParentBottom="false" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7"
android:id="#+id/b7"
android:layout_gravity="left|center_vertical"
android:onClick="buttonSeven"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b5"
android:layout_toEndOf="#+id/b5"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:id="#+id/b9"
android:layout_gravity="left|center_vertical"
android:onClick="buttonNine"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/b7"
android:layout_toEndOf="#+id/b7"
android:layout_alignParentRight="false"
android:layout_weight="1"
android:width="0dp" />
</RelativeLayout>
Layout weight works with LinearLayout, each view in linearlayout will take designeatedweight/weightsum times total width or height.
Move your buttons into linear layout with weight sum to 4. Assigning weight of buttons to 1 will make them take 1/4 th of screen space automatically.
For equal spacing allocating margin to linear layout will make them look equally spaced.
<Button
android:id="#+id/b3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonThree"
android:text="3" />
<Button
android:id="#+id/b5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonFive"
android:text="5" />
<Button
android:id="#+id/b7"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonSeven"
android:text="7" />
<Button
android:id="#+id/b9"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:onClick="buttonNine"
android:text="9" />
</LinearLayout>
Result
that's right to set android:layout_weight="1" ,but only Linearlylayout effective,so you can
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
<Button
android:layout_weight="1"
android:layout_width="0dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_height="wrap_content" />
</LinearLayout>
Try to use LinearLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:layout_marginBottom="3dp"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:orientation="horizontal">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:layout_marginLeft="3dp"
android:text="B1"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B2"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B3"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginRight="3dp"
android:text="B4"/>
</LinearLayout>
try out this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp"
android:weightSum="4" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="1"
android:text="B1"
android:textColor="#fff" />
</LinearLayout>
it will look something like this.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3"
>
<Button android:id="#+id/button1"
...
android:layout_weight="1"/>
<Button android:id="#+id/button2"
...
android:layout_weight="1"/>
<Button
android:id="#+id/button3"
...
android:layout_weight="1"/>
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'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
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>