Android: How to balance GridLayout in xml - android

I want to have a layout with a header and a footer and four pictures (ImageView) all the same size in two rows and two columns in the center. I don't want to use GridView.
This is what I'm thinking of:
the GridLayout elements go their own way with size and don't shrink to the size imposed by the surrounding elements. They either become too big and go off the page, or are cropped by the following LinearLayout. Here is an example of what I mean:
I guess you'll need to see the xml:
<?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"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_column="1"
android:layout_columnSpan="2"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:columnCount="2"
android:weightSum="4"
android:rowCount="2" >
<Button
android:id="#+id/button2"
android:layout_column="0"
android:layout_row="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_column="1"
android:layout_row="0"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button14"
android:layout_column="0"
android:layout_row="1"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_column="1"
android:layout_row="1"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
</GridLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
</LinearLayout>
I want:
A header and footer
Four centered pictures of the same size
A left and right margin around the four-picture bock.
Maybe I'm taking the wrong approach to this, so feel free to send me off in a new direction if necessary.

Without GridView you can try it:
It works perfect.
<?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"
android:weightSum="3" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_row="0"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:id="#+id/button14"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
<Button
android:id="#+id/button15"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical|fill_horizontal"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
</LinearLayout>
</LinearLayout>

Related

Scrollable Tile View in android

I have the follwoing way to have tile view of any grid size. But I want only 2x3 tiles on the page and 2x1 on the below the visible part of the page. Which you can access only after scrolling the page. But I am not able to achieve this by the below method.
I tried scroll view for the whole view.xml but then it got shrunk to the top of the page. And I don't have any control on the size of tiles. The change according to the view.
view.xml
<?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
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>
did you test this layout structure:
<?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">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="30dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="horizontal">
<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:layout_weight="1"
android:orientation="horizontal">
<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:layout_weight="1"
android:orientation="horizontal">
<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:layout_weight="1"
android:orientation="horizontal">
<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>
</ScrollView>
</LinearLayout>

defining width and height to layouts android

my requirement is to make 10 layouts in a single layout . Each layout should be 50 % horizontally and 20% Vertically.
Current my code can make horizentally 50% but how to make same layouts to 20% vertical.
Can it be possible.
Code is
<LinearLayout android:layout_width="fill_parent"
android:layout_height="fill_parent" android:orientation="horizontal">
<LinearLayout android:layout_width="0dip"
android:layout_height="wrap_content" android:orientation="horizontal"
android:id="#+id/linearLayoutouter" android:layout_weight=".5"
android:background="#android:color/holo_green_dark">
<Button android:text="Button" android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
</Button>
</LinearLayout>
<LinearLayout android:layout_height="wrap_content"
android:id="#+id/linearLayout1"
android:orientation="vertical"
android:layout_width="0dip"
android:layout_weight=".5"
android:background="#android:color/holo_orange_light">
<Button android:text="Button"
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center">
</Button>
<Button android:layout_width="wrap_content"
android:id="#+id/button2"
android:layout_height="wrap_content"
android:text="Button"
android:layout_gravity="center"></Button>
</LinearLayout>
u should add another child layout in your linear layout to avoid nested weight.
and check this What is android:weightSum in android, and how does it work?
try this..hope works fo u..
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/linearLayoutouter"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:background="#ff0000"
android:orientation="horizontal" >
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button" >
</Button>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight=".5"
android:background="#000000"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:orientation="vertical"
android:weightSum="10" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button5"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button7"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button8"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button9"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<Button
android:id="#+id/button10"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:text="Button" >
</Button>
<!-- added 8 mote view with weight 1 -->
</LinearLayout>
</LinearLayout>
</LinearLayout>
You can do that with nested layouts, like a grid.
<!-- Row 0 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<!-- Row 0: Column 0-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="horizontal">
<Button ... />
</LinearLayout>
<!-- Row 0: Column 1-->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="horizontal">
<Button ... />
</LinearLayout>
</LinearLayout>
...
...
<!-- Row 4 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:orientation="vertical">
<!-- Row 4: Column 0-->
...
</LinearLayout>
It looks a bit odd, maybe you could consider using a ListView or any other strategy that fits better.
You can use weightSum property like below
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="5">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="2"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:weightSum="2"
android:layout_height="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"></LinearLayout>
</LinearLayout>
<!-- 3 more rows here -->
</LinearLayout>
Outer weightSum is used for 5 rows. And inner weightSum is used for 2 columns

how to align button at the bottom of the screen in LinearLayout

I am using linearlayout as parent and inside it I have two child linearlayouts. I want to align the buttons in the last linearlayout to the bottom of the screen.The bottom margin of the buttons should match the main linearlayouts bottom margin
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/parentlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/submit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/delete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Delete" />
<Button
android:id="#+id/reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Reset" />
</LinearLayout>
</LinearLayout>
Just reduce the textsize of the button Text. Since it is not able to display text in one line the margin is getting distorted.
Here I have made textSize to 11dp for each buttontext and the view is perfect for NexusOne size display
<?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" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/parentlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save"
android:textSize="11dp" />
<Button
android:id="#+id/submit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Submit"
android:textSize="11dp" />
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel"
android:textSize="11dp" />
<Button
android:id="#+id/delete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Delete"
android:textSize="11dp" />
<Button
android:id="#+id/reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Reset"
android:textSize="11dp" />
</LinearLayout>
</LinearLayout>
try this using your parent as RelativeLayout
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/parentlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/submit"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/delete"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Delete" />
<Button
android:id="#+id/reset"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1"
android:text="Reset" />
</LinearLayout>
Its better if you use RelativeLayout for this kind of requirements. Would work without hassle.
<?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"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/parentlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:orientation="horizontal" >
<Button
android:id="#+id/save"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="#+id/submit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Submit" />
<Button
android:id="#+id/cancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/delete"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Delete" />
<Button
android:id="#+id/reset"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Reset" />
</LinearLayout>
</RelativeLayout>
<?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" >
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/parentlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</LinearLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:id="#+id/save"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Save"
android:textSize="12sp" />
<Button
android:id="#+id/submit"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Submit"
android:textSize="12sp" />
<Button
android:id="#+id/cancel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Cancel"
android:textSize="12sp" />
<Button
android:id="#+id/delete"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Delete"
android:textSize="12sp" />
<Button
android:id="#+id/reset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Reset"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
</FrameLayout>

Android linear layout, how to match remaining parent?

I am going to create a listview with two button at the bottom
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>
How to make the listview match the height to the remaining parent?
If I set a height to listview
android:layout_height="400dp"
this is not suitable to all device
If I set match_parent
android:layout_height="match_parent"
The listview will over the buttons at the bottom
If you set its height to 0dp and it's layout weight to 1, it will fill out the remaining space. Also, you don't need the LinearLayout surrounding the ListView.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#android:id/list" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2" />
</LinearLayout>
</LinearLayout>
This will work and I have also reduced number of lines in your code:
<?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" >
<ListView
android:id="#android:id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
</ListView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/addTaskButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task" >
</Button>
<Button
android:id="#+id/addTaskButton2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2" >
</Button>
</LinearLayout>
</LinearLayout>
Use this layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.9" >
<ListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.1">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>
You may use this layout :
<RelativeLayout 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"
>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/lv_button"
android:layout_alignParentTop="true"
android:layout_marginBottom="#dimen/margin_bottom"
>
</ListView>
<LinearLayout
android:id="#+id/lv_button"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="#dimen/margin_bottom"
android:layout_marginLeft="#dimen/margin_left"
android:layout_marginRight="#dimen/margin_right"
android:layout_marginTop="#dimen/margin_top"
android:orientation="horizontal" >
<Button
android:id="#+id/btn1"
android:layout_width="0.0dip"
android:layout_height="#dimen/button_height"
android:layout_marginRight="#dimen/margin_right"
android:layout_weight="1.0"
android:text="Button1"
/>
<Button
android:id="#+id/btn2"
android:layout_width="0.0dip"
android:layout_height="#dimen/button_height"
android:layout_marginLeft="#dimen/margin_left"
android:layout_weight="1.0"
android:text="Button2"
/>
</LinearLayout>
</RelativeLayout>
Use weight sum. Refer this link to know about weightsum
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" android:weightSum="10">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8"
>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0"
android:layout_weight="2"
>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ListView
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="#android:id/list"></ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:text="Add Task"
android:id="#+id/addTaskButton"></Button>
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:text="Add Task2"
android:id="#+id/addTaskButton2"></Button>
</LinearLayout>
</LinearLayout>

How can i create a grid of buttons with a textview below

Hi,
I want to create a screen like I've (tried to) drawn above.
A,b,c,d,e,f,g and h are buttons, and p is a EditText.
Now what I want to accomplish is that when deployed on a larger or smaller screen, or rotated, the following will happen:
element 'p' stays the same height but sizes horizontally (gets
wider/smaller)
elements a-h (the buttons) all size horizontally and
vertically. So when the screen gets twice as wide, the buttons are
two times wider, and when it's twice as high, the buttons are twice
as high.
I've been able to create one row of buttons to size horizontally (with a lineairlayout and a android:layout_weight, but I am not getting any further.
Try it out,hope it works:
<?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="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp" />
</LinearLayout>
Here's a solution that will work:
Set the EditText height as you wish.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="40dp" />
</LinearLayout>
One quick solution is to make use of nested layouts and nested weights. An example of this could be:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
However, nested weights aren't recommended as they are computationally heavy. An alternative (superior) layout could be based on relative layouts to replace nested LinearLayouts and their weights. A hidden center component is used to split the relative layout in two. An example of this is posted below:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView1" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView1" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView2" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView2" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView3" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView3" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal" >
<!-- Hidden center view used to split relative layout in half -->
<View
android:id="#+id/hiddenView4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"/>
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#id/hiddenView4" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toRightOf="#id/hiddenView4" />
</RelativeLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
The solution using RelativeLayout was inspired by the answer from DeeV in this SO question: Making two LinearLayouts have 50% of the screen each without using layout_weight
If you want to avoid the soft keyboard from showing when the layouts are inflated you can do the following to your parent LinearLayout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:focusableInTouchMode="true">
// try this
<?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:padding="5dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="a"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="b"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="c"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="d"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="e"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="f"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:layout_height="0dp">
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:text="g"
android:layout_weight="1"/>
<Button
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp"
android:text="h"
android:layout_weight="1"/>
</LinearLayout>
</LinearLayout>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:hint="p"/>
</LinearLayout>

Categories

Resources