I'm trying to create a layout with 6 buttons that automatically adapt to the screen size as the tiles of windows phone. In the code I create dynamically the 6 button, 2 for line but the button should fit the size of the screen filling the latter. how can I proceed?
<?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="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/conv_up" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/conv_up"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/conv_up"
/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/conv_up"
/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:weightSum="2" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/conv_up"
/>
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/conv_up"
/>
</LinearLayout>
I'd use a vertical LinearLayout
with three rows of same weight as children, each row being a horizontal LinearLayout
having two children of same weights, which will make sure the full area is filled. For six buttons performance shouldn't be an issue.
If performance is a concern, you can make the rows as RelativeLayout
s and use a strut to split in half and position the two children based on that.
When I say a strut, I mean this:
<View android:id="@+id/strut"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerHorizontal="true"/>
Update:
Since you're trying the LinearLayout
s, here's how you can deal with the heights and widths:
The parent LinearLayout
can have:
android:layout_width="match_parent"
android:layout_height="match_parent"
The three LinearLayout
children will have:
android:layout_width="match_parent"
android:layout_height="0dip"
The Button
s will have:
android:layout_width="0dip"
android:layout_height="match_parent"
As you can notice, we have 0dip
for the property that weight is applied on (either on height if parent is vertical oriented, or width if parent is horizontal oriented), which will need to grow to fill in the space.
Here's the full XML (buttons don't include drawables, so feel free to add yours):
<?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="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:layout_weight="1" >
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
And the result:
I think you should take a look at GridView
Use GridLayout! This is perfect for this situation
<GridLayout
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_margin="0.5dp"
android:columnCount="2"
android:rowCount="3" >
<Button
android:id="@+id/b_1"
/>
<Button
android:id="@+id/b_2"
/>
<Button
android:id="@+id/b_3"
/>
<Button
android:id="@+id/b_4"
/>
<Button
android:id="@+id/b_5"
/>
<Button
android:id="@+id/b_6"
/>
</GridLayout>
I am using the Android .v7
libraries. This xml worked for me to create the 2 columns, 3 rows layout that fills the entire screen:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/lib/android.support.v7.widget.GridLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:layout_margin="0.5dp"
app:columnCount="2"
app:rowCount="3"
app:useDefaultMargins="true">
<Button
android:id="@+id/b_1"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="0"
grid:layout_column="0"
android:text="Hellooo"/>
<Button
android:id="@+id/b_2"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="0"
grid:layout_column="1"
android:text="Hellooo"/>
<Button
android:id="@+id/b_3"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="1"
grid:layout_column="0"
android:text="Hellooo"/>
<Button
android:id="@+id/b_4"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="1"
grid:layout_column="1"
android:text="Hellooo"/>
<Button
android:id="@+id/b_5"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="2"
grid:layout_column="0"
android:text="Hellooo"/>
<Button
android:id="@+id/b_6"
grid:layout_columnWeight="1"
grid:layout_rowWeight="1"
grid:layout_row="2"
grid:layout_column="1"
android:text="Hellooo"/>
</android.support.v7.widget.GridLayout>