Develop Reference

How to create a scroll able layout

I am designing a screen for mobile devices (android), i wanted to display multiple text boxes and buttons on a screen.
Would someone please guide me how can i a make my screen scroll able so that all the text boxes and buttons can be created and viewed on same page.
I tried searching different postings also tried to find any property but couldn't get success.
Regards,
Gul

Use a ScrollView. When he contents of a ScrollView cannot fit the allocated height it will become scrollable.
Note that a ScrollView can only contain a single direct child element so if you need multiple things to be scrollable, you need to wrap that content into a layout.
Here is an example
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_long"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/really_long_string" >
</TextView>
<Button
android:id="#+id/btn_act"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="View" >
</Button>
</LinearLayout>
</ScrollView>

Use ScrollView as the main parent layout. If you don't give the scrollview, then you can't scroll the page.
<?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
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 1" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 2" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 3" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 4" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 5" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<RadioButton
android:id="#+id/radioButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton 1" />
<RadioButton
android:id="#+id/radioButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RadioButton 2" />
<ToggleButton
android:id="#+id/toggleButton1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="ToggleButton" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 6" />
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 7" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 8" />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 9" />
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button 10" />
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button 11" />
</LinearLayout>
</ScrollView>

Eclipse Layout: static instead of relative values?

I have a layout with two Buttons. One button is in the Center of the left half, and the other button is in the Center of the right side. But I use relative values (left="60dp" etc.). How can I have the same result with static values? Because I don't want to create an extra layout for every screen size...
<Button
android:id="#+id/button1"
android:layout_width="150dp"
android:layout_height="75dp"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:layout_marginBottom="42dp"
android:layout_marginLeft="60dp"
android:text="Button" />
<Button
android:id="#+id/Button02"
android:layout_width="150dp"
android:layout_height="75dp"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentRight="true"
android:layout_marginRight="60dp"
android:text="Button" />

<LinearLayout
android:orientation=horizontal
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation=horizontal
android:layout_width="0"
android:weight="50"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:gravity="center"
android:text="Button" />
</LinearLayout>
<LinearLayout
android:orientation=horizontal
android:layout_width="0"
android:weight="50"
android:layout_height="match_parent">
<Button
android:id="#+id/Button02"
android:layout_width="wrap_content"
android:layout_height="75dp"
android:gravity="center"
android:text="Button" />
</LinearLayout>
</LinearLayout>

Working with relative layout in android XML

I am trying to create a layout in XML something along of the lines of http://i.stack.imgur.com/aPoeU.png but I am little confused as to how to position the buttons in that format. I have created the buttons and tried different things like alignParentBottom, alignParentRight etc but I can't seem to get it the way I want it to be. Can someone please help me out?
<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"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button" />
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button" />
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button" />

We can manage it in all screen and in all resolution by weight_sum
Paste below code in your xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#000"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bebebe"
android:layout_weight="0.30"
android:text="Button1" />
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.20"
android:background="#bebebe"
android:text="Button3" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="2dp"
android:layout_weight="0.30"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>

Paste it in your XML
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#2258A2"
android:gravity="center"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000"
android:orientation="vertical"
android:weightSum="1" >
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button1" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.20"
android:orientation="horizontal"
android:weightSum="1" >
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button2" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.50"
android:background="#bebebe"
android:text="Button3" />
</LinearLayout>
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="1dp"
android:layout_weight="0.40"
android:background="#bebebe"
android:text="Button4" />
</LinearLayout>

Your code seems correct, but if you want to replicate the size of the buttons then you can't set the height as wrap_content. This will make it as tall as the text, change that to some given value:
android:layout_height="50dp"

Well, in RelativeLayout, as the name suggests, the elements are positioned relative to something else, like the parent view, or another widget in the layout. So you can align the widget in many many ways, like apending it to the right of a view, to the left, above, below, and so on.
Please refer to this link and this other link for more information.
So, if you want to make your buttons look exactly like your example image, try this:
<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"
tools:context=".MainActivity" >
<Button
android:id="#+id/button1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:text="Button 1" />
<Button
android:id="#+id/button2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button1"
android:text="Button 2" />
<Button
android:id="#+id/button3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button2"
android:text="Button 3" />
<Button
android:id="#+id/button4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_below="#+id/button3"
android:text="Button 4" />
You can simply make the button width to fill_parent instead of align left and right. And the height, you can define the measures you'd like to use.
Btw, I used alignParentLeft and alignParentStart because I don't know which API level you're using, so I've used both parameters, old and new. But the effect is the same, your buttons will always start to the left of the parent view.
EDIT: As the user hasternet suggested, you could also use LinearLayout and get similar results.
EDIT 2: And if you like to change the look of your buttons, try to change the style (Take a look here to know what I mean).

Since you need to set the height of the buttons differently and also it depends on different screen size, you cannot achieve this with Relative Layout.
So go for LinearLayout and weightsum attribute. This way screen big or small, you can achieve your expected UI. Mentioned code below modified.
<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"
tools:context=".MainActivity"
android:Orientation="vertical"
android:weightsum="8" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Button"
android:layout_weight="1"
/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"
android:text="Button"
android:layout_weight="3"
/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button2"
android:text="Button"
android:layout_weight="3"/>
<Button
android:id="#+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/button3"
android:text="Button"
android:layout_weight="1"/>
</LinearLayout>

Android TableLayout in LinearLayout - Remove spaces in between columns and rows

I struggle more with UI design in Android than actually making the application, so I was giving something a go:
<?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" >
<TableLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/rowOne"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BOne"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwo"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BThree"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowTwo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BFive"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSix"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BSeven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEight"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/rowThree"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/BNine"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTen"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BEleven"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
<Button
android:id="#+id/BTwelve"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</LinearLayout>
I have been trying to remove the spaces in between the rows and the columns, I tried giving a negative margin to the rows and the buttons like so:
android:layout_marginRight="-20sp"
But that is really "fiddly" not very accurate and I don't think it will scale the same for all screens (correct me if I am wrong). I also through giving the rows layout_weight attributes of one would make them cover the entire width of the screen (I know the weight is simply the importance given to the element). Perhaps I need to use stretchColumns? or perhaps there is another tag that might be useful here?
The reson that I have put it in a LinearLayout is because I plan to add other elements and experiment with those as well.

Replace your buttons :
<Button
android:id="#+id/BFour"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Button" />
with
<Button
android:id="#+id/BFour"
android:layout_height="fill_parent"
android:layout_width="0dp"
android:layout_weight="1"
android:text="Button" />

Complex layout with same layout_margin in Android

I have a problems with my layout_margin. I want to make my layout look like that:
(with "a" is margin)
My problems is, when i build my layout in other screen size, it look like that:
How can i make it beautiful with different screen size? This is my layout:
<LinearLayout
android:id="#+id/footer_result_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/btn_recommendtion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/coodinate" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_gravity="center"
android:layout_marginTop="20dip"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/btn_facebook"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dip"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/fb" />
<ImageView
android:id="#+id/btn_mixi"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="5dip"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/mixi" />
</LinearLayout>
</LinearLayout>

Try using a relative layout.
Here is an example using buttons. You can swap out the values of the buttons with your image views, and adjust your margins as needed. This should center the buttons, with the same margins on any screen.
<Button
android:id="#+id/btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:text="BUTTON 1"
android:layout_centerHorizontal="true"/>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_below="#+id/btn_1"
android:layout_centerHorizontal="true"
android:layout_marginTop="5dip"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_margin="5dip"
android:text="BUTTON 2" />
<Button
android:id="#+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:layout_margin="5dip"
android:text="BUTTON 3" />
</LinearLayout>
It looks like this:

You'll need to use RelativeLayout for that.
Center button1 with android:layout_alignParentTop="true" and align it in the parent top with android:layout_centerHorizontal="true and work from there.

The code:-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_margin="10dip"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_margin="10dip"
android:layout_alignParentLeft="true"
android:layout_below="#+id/button1"/>
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3"
android:layout_margin="10dip"
android:layout_alignParentRight="true"
android:layout_below="#+id/button1"/>
</RelativeLayout>
Considering the a=10