Develop Reference

I can't add another row of buttons

I want my fragment look like it has 3 buttons that fill the screen in both vertically and horizontally on the phone. I managed to do that somehow but I can't add another row of buttons. This is my layout... what am I doing wrong?
<?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="0dp"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</ScrollView>
</LinearLayout>

Scroll view contains only one direct child so you can not add second child directly you have to do following
<?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="0dp"
android:fillViewport="true"
android:layout_weight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<!--add here second row and other continue same -->
</LinearLayout>
</ScrollView>
</LinearLayout>
NOTE: If scrollview is only one element you going to use then you can make it root layout by removing current linearlayout from root and also remove scrollview weight for same case, it is good practice to minimize the layout hierarchy to performance improvement

First Note : scroll view remove effect of weight property
Delete the scroll view element from your layout
Second note : each button make
<Button ...
android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" />
Because 0dp let the Android system calculate the height of button Equally

ScrollView going behind button in Android

Why is the scrollview going behind the button here? I want the scrollview to stretch in height depending on the device but cant get it to work as it always goes behind the button.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_view"
style="#style/DetailView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<TextView
style="#style/TextView"
android:id="#+id/textview_message_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<TextView
style="#style/TextView"
android:id="#+id/textview_message_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<ScrollView
android:id="#+id/scrollview_message_text"
android:layout_height="wrap_content"
android:paddingBottom="20dip"
android:layout_width="fill_parent">
<TextView
style="#style/TextView"
android:id="#+id/textview_message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
</ScrollView>
</LinearLayout>
<LinearLayout style="#style/DetailView.Buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
style="#style/Button"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="#string/viewfile"/>
</LinearLayout>
</RelativeLayout>

Here is a working copy of what I think you are looking for
1: Moved the buttons to the top of the relative layout ( added an id )
android:layout_alignParentBottom="true"
<LinearLayout android:id="#+id/buttons"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="Button"/>
</LinearLayout>
2: Add in the layout containing the scroll change the width and height to match parent
but ( CRITICAL ) add android:layout_above="#id/buttons"
<LinearLayout
android:layout_above="#id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:gravity="center"
android:orientation="vertical" >
So putting it all together:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/detail_view"
>
<!-- Buttons at the top of layout but aligned to the bottom -->
<LinearLayout android:id="#+id/buttons"
android:layout_alignParentBottom="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="Button"/>
</LinearLayout>
<!-- Linear layout to fill screen, but assigned to layout above the buttons -->
<LinearLayout
android:layout_above="#id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="#+id/textview_message_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<TextView
android:id="#+id/textview_message_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<ScrollView
android:id="#+id/scrollview_message_text"
android:layout_height="wrap_content"
android:paddingBottom="20dip"
android:layout_width="fill_parent">
<TextView
android:id="#+id/textview_message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
</ScrollView>
</LinearLayout>
</RelativeLayout>
I removed the styles so I could see it in the layout an make sure this worked before posting. Hope this helps.
Relative layout allows you to layer elements on top of each other. So if that is not what you are looking for you need to make use of the toLeft, toRight, above, below directives to nudge the layouts into the correct position.

This happens because you use Relative layout as the root layout. So both layout are placed on the same place but the button layout is declared after the scrollview so it is shown above the scrollview
The opposite would happen if you were defining the button before the scrollview
So you should define it as shown below to achieve what you want.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/detail_view"
style="#style/DetailView">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_above="#id/layout_bottom"
android:orientation="vertical" >
<TextView
style="#style/TextView"
android:id="#+id/textview_message_title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<TextView
style="#style/TextView"
android:id="#+id/textview_message_date"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center">
</TextView>
<ScrollView
android:id="#+id/scrollview_message_text"
android:layout_height="wrap_content"
android:paddingBottom="20dip"
android:layout_width="fill_parent">
<TextView
style="#style/TextView"
android:id="#+id/textview_message_text"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</TextView>
</ScrollView>
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom"
style="#style/DetailView.Buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<Button
style="#style/Button"
android:layout_marginTop="5dip"
android:id="#+id/button_view_file"
android:text="#string/viewfile"/>
</LinearLayout>
</RelativeLayout>
or you can try and use LinearLayout as the root view and set
layout_height = "0dp"
layout_weight = "1"
to the layout containing the scrollview
using both these way will make the button stick to the bottom of the layout and the top layout will get all the remaining height.
Good Luck

Why is the scrollview going behind the button here?
Because it is coming first in your layout, ReletiveLayout and FrameLayout can be used to provide Z-ordering, So every child which comes later in your layout having higher z value so it goes up.Add android:layout_below = "#id/scrollview_message_text" to your last linearlayout or order your views within in mind of this characteristic of reletivelayout.

Why doesn't my linear layout match my parent height in listview?

I have the following code
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/list_view_layout_margin"
android:paddingRight="#dimen/list_view_layout_margin"
android:background="#color/yellow">
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/gameNameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/game_list_text_size" />
<TextView
android:id="#+id/gameCreationDateView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textSize="#dimen/small_text_size"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red"
android:orientation="horizontal" >
<Button
android:id="#+id/infoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<Button
android:id="#+id/deleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/delete" />
</LinearLayout>
</RelativeLayout>
The LinearLayout with id itemLinearLayoutView is the main layout that wrap everything in a row of listview. The problem I am having is that the second linear layout child does not take the height of the parent linear layout with id itemLinearLayoutView. Any solutions? or Problem with the code?

Your problem lies here:
android:layout_height="wrap_content"
This needs to be changed to "match_parent" in the LinearLayout which you want to be the parent's size. Also, you said
the second linear layout child does not take the height of the parent linear layout
These two layouts are not parents and children to one another. The parent is your RelativeLayout and both of your LinearLayouts are equivalent children of that RelativeLayout. Maybe this will help you debug any further problems you encounter.

just change the layout height to match parent . problem will be resolved.
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
// use match_parent instead of wrap_content
android:layout_height="match_parent"
android:orientation="vertical" >

the layout needs to be nested within the first linear layout to take the parameters of it, and the value of the layout height needs to be changed. Code as Follows.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/list_view_layout_margin"
android:paddingRight="#dimen/list_view_layout_margin"
android:background="#color/yellow">
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/gameNameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/game_list_text_size" />
<TextView
android:id="#+id/gameCreationDateView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textSize="#dimen/small_text_size"
android:textStyle="italic" />
<LinearLayout
android:id="#+id/LinearLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/red"
android:orientation="horizontal" >
<Button
android:id="#+id/infoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<Button
android:id="#+id/deleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/delete" />
</LinearLayout>
</LinearLayout>

<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent" <!-- you should use match_parent here -->
android:orientation="vertical" >

// try this way i have used LinearLayout as parent rather than RelativeLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/itemLayoutView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="#dimen/list_view_layout_margin"
android:paddingRight="#dimen/list_view_layout_margin"
android:background="#color/yellow">
<LinearLayout
android:id="#+id/itemLinearLayoutView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/gameNameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="#dimen/game_list_text_size" />
<TextView
android:id="#+id/gameCreationDateView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/gray"
android:textSize="#dimen/small_text_size"
android:textStyle="italic" />
</LinearLayout>
<LinearLayout
android:id="#+id/LinearLayoutView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="right"
android:background="#color/red"
android:orientation="horizontal" >
<Button
android:id="#+id/infoButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/info" />
<Button
android:id="#+id/deleteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/delete" />
</LinearLayout>
</LinearLayout>

Unable to make all UI components appear in RelativeLayout

I want a RelativeLayout based android UI that looks like the below mock graphic:
Below is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- surface view that contains camera preview , and seats above #+id/linearLayoutToolbar -->
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- LinearLayout that contains toolbar that is divided into 3 sections horizontally -->
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/surfaceViewBarcodeScanner"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</RelativeLayout>
I used Eclipse GUI palette and my own editing , however the output was not what I expected, the SurfaceView seems to covering all the screen, the LinearLayout at the bottom does not appear.
Snapshot of my current result on Galaxy S3 device:
Any help will be appreciated, Thanks.

Could you please try out to modify your layout as the follows:
Define your SurfaceView and set it's layout_above value to the ID of the linear layout made in the previous step. Set the layout_alignParentTop to true.
Define your bottom linear layout and set the layout_alignParentBottom to true.
Smart code snippet with only the important parts:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/linearLayoutToolbar" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
I hope this will solve your problem.

you can use Linearlayout instead of Realtive Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- inside elements -->
</LinearLayout>
</LinearLayout>
else you should use android:layout_above="#+id/linearLayoutToolbar" to your surfaceview
and remove android:layout_below attribute and add android:layout_alignParentBottom="true" to your toolbar view.

// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="2">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

scrollview, tablelayout and linearlayout doesnt work together in android

I have a layout xml file which crashes and couldnt understand why. here is my xml, but I am not posting the entire xml.
<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="wrap_content"
android:orientation="vertical">
<TableLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TableRow
android:background="#drawable/gradient"
android:gravity="center">
.......
</TableRow>
</TableLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/sw_layout"
android:orientation="vertical">
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
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:background="#EEEEEE" >
<TableRow
android:id="#+id/tableRowDate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
..........
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btn_date"
android:layout_height="35dp"
android:padding="5dp"
android:drawableLeft="#drawable/calendar"
android:text="Tarih" />
<Button
android:id="#+id/btn_converter"
android:layout_height="35dp"
android:padding="5dp"
android:drawableLeft="#drawable/calendar"
android:text="Hesap" />
</LinearLayout>
</ScrollView>
</LinearLayout>
If I remove the last linearlayout. it works perfectly but I need to add button at the bottom of the screen. How can I add the buttons? I want to add the buttons and center them horizontally

Scrollview will allow only one child, so you have to kept that TableLayout and LinearLayout in one more separate layout as child of ScrollView.
Like this
<ScrollView
<LinearLayout
<TableLayout />
<LinearLayout />
</LinearLayout>
</ScrollView>