Develop Reference

Placing elements in layout file

I want to design a screen as below, I am trying to display the TOTAL and other data next to it.I am not getting how to display it exactly in the screen.
the layout file is
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ListView android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:divider="#00000000"
android:dividerHeight="5dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20dp"
android:textColor="#000000"
android:text="Comment" />
<EditText
android:id="#+id/editText2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_margin="2dp"
android:ems="10"
android:hint="Comment goes here"
android:inputType="textMultiLine" />
</LinearLayout>
I want to display GT, FSP, DIS % and Discount as shown in image

You can use a TableLayout to display your GT,FSP ,DIS % and Discount TextView, and place this TableLayout in a LinearLayout (with horizontal orientation) with your Total TextView, like :
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="GT :"/>
<TextView
android:id="#+id/tv_gt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="54000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Dis % :"/>
<TextView
android:id="#+id/tv_dis"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="29.15"/>
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="FSP :"/>
<TextView
android:id="#+id/tv_fsp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1480000"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Discount :"/>
<TextView
android:id="#+id/tv_discount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="999999"/>
</TableRow>
</TableLayout>
</LinearLayout>

You can add this code as a separate layout and include it in main layout file or use directly in main layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal">
<TextView
android:text="TOTAL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:gravity="center"
android:text="GT : 5400000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:gravity="center"
android:text="FSP : 1480000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
<LinearLayout
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:gravity="center"
android:text="DIS% : 29.15%"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:gravity="center"
android:text="Discount : 9999999"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Its looks like this:
You can update the inner TextViews to LinearLayout/RelativeLayout if you also need to show the pop-up cloud images.
To keep complexity at minimum just use the text like "GT : GT_VALUE" in strings.xml and then setText(getString(text_id).replace("GT_VALUE",value))

size of Button is too abnormal in xml file of android

I want to implement the following file in android .
My implementation so far is as follows :
Here the size of the button at the last of the screen is too large . I cant understand why the size of the button is too large ?
My code is as follows :
<?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:background="#FFFFFF"
android:orientation="vertical"
android:padding="5dp"
android:weightSum="3" >
<RelativeLayout
android:id="#+id/relative_layout_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#BDD6E0"
android:orientation="vertical"
android:padding="5dp"
android:paddingBottom="10dp" >
<TextView
android:id="#+id/textView_Welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#+id/imageView_ProPic"
android:text="Welcome Back"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#000000" />
<TextView
android:id="#+id/textView_Name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/textView_Welcome"
android:layout_toLeftOf="#+id/imageView_ProPic"
android:paddingLeft="10dp"
android:text="Sultan Ahmed Sagor"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#000000" />
<ImageView
android:id="#+id/imageView_ProPic"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginBottom="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"
android:contentDescription="ProPic"/>
</RelativeLayout>
<TableLayout
android:id="#+id/table_layout_1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/relative_layout_1"
android:weightSum="8" >
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/settings_user_name_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Instructional Use :"
android:gravity="center|left"
android:paddingLeft="10sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<TextView
android:id="#+id/settings_user_name_text3"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Drug Name : Gopten"
android:paddingLeft="10sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="4" >
<TextView
android:id="#+id/text_instructions"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/border_for_image"
android:maxLines="15"
android:paddingLeft="10sp"
android:text="#string/text_ins"
android:textColor="#000000" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/border_for_edit_text"
android:layout_margin="10sp"
android:layout_weight="1" >
<Button
android:id="#+id/settings_user_name_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="BACK"
android:gravity="center|center"
android:paddingLeft="10sp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#000000" />
</TableRow>
</TableLayout>
</RelativeLayout>
Can you help me by pointing out in where I have error / Why the size of the button at the last of the screen is too large ?

You have your button set to 'match_parent', which will make it grow to fit the size of it's parent (thus full width in this case).
Try (to make it just as big as the text):
<Button
android:id="#+id/settings_user_name_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
or (to make it a specific size):
<Button
android:id="#+id/settings_user_name_text"
android:layout_width="48dp"
android:layout_height="96dp"

try adding this to your xml for the buttton
android:layout_width="wrap_content"
android:layout_height="wrap_content"

ScrollView cutting off part of the layout

I have a weird issue with a ScrollView in my layout, which is that it cuts off the bottom of the TableLayout within.
Here's what it looks like when scrolling to the top.
The green background with the rounded corners should be the same for the bottom, i.e. it's really just a plain rectangle drawable with rounded corners. But when I try to scroll to the bottom, here's what I see:
As you see, the bottom corners are invisible, I can't scroll any further. Now, I only see all lines of the Comments section because I manually added some android:paddingBottom to the TableLayout (see below), otherwise more would be cut off. And I just cannot figure out, what the problem is.
Can somebody tell me what I'm missing? Here is the XML layout. It is populated by a database query at runtime.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableLayout
android:id="#+id/table"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="30dp"
android:background="#drawable/some_shape"
android:paddingBottom="40dp" >
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/code_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Code:" />
<TextView
android:id="#+id/code_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/name_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Name:" />
<TextView
android:id="#+id/name_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/pra_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Type:" />
<TextView
android:id="#+id/pra_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/day_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Day:" />
<TextView
android:id="#+id/day_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/room_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Room:" />
<TextView
android:id="#+id/room_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/time_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Time:" />
<LinearLayout android:orientation="horizontal" >
<TextView
android:id="#+id/time_field1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="#string/to" />
<TextView
android:id="#+id/time_field2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="test2" />
</LinearLayout>
</TableRow>
<TableRow android:layout_margin="20dp" >
<TextView
android:id="#+id/comment_label"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="20dp"
android:text="Comments:" />
<TextView
android:id="#+id/comment_field"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="test" />
</TableRow>
</TableLayout>
</ScrollView>

I know it's too late, but the answer is remove android:layout_margin="30dp" from TableLayout

How to leave spaces between views in android

Below there are two row views .......... How to leave a space between them i mean blank space between Views
What code do i need to add between the rows
I am not speaking abot padding between the rows, ......... I am
trying to achieve Blank space between
I am trying to achieve this in relative layout not grid layout
Any Ideas
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/BuyReservedButtonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<Button
android:id="#+id/BuyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>

Just make your table-row like this, you can leave any space you need:
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/editText2"
android:gravity="center"
android:padding="2sp" >
<!-- HERE IS THE THING YOU NEED -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp" >
</LinearLayout>
</LinearLayout>
<!-- MAKE SPACE AS MUCH AS YOU WANT, 20DP FOR EXAMPLE -->
</TableRow>
Hope this helps.

Use Space view between them like this
<Space
android:id="#+id/space1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/mainListView"
android:layout_alignParentBottom="true"
android:layout_marginBottom="150dp" />

You can use LinearLayout as well:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".SecondActivity" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/BuyReservedButtonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<Button
android:id="#+id/BuyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</LinearLayout>

I think what you need are margins like android:layout_marginTop="10dp". Because in your code you already use padding, so I assume you know what happens if you use it. A margin will add some room around your View, depends on which margin you will use.
Try this:
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp"
android:marginBottom="10dp"
>
<TextView
android:id="#+id/TimingsID"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Timings"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/BuyReservedButtonRow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="2sp" >
<Button
android:id="#+id/BuyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>

Table layout in android (span/shrink)?

I want this special table layout:
In my current layout the cells that are shorter are at the same size like the cells with the long text:
How do have to do it?
It should look like the first picture.

There may be better ways of doing this, I actually haven't used TableLayout before, but the XML below gives the basic layout that you asked for:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="4"
android:layout_weight="1"
android:text="Text"
android:gravity="center" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_span="3"
android:layout_weight="0.75"
android:text="Text that is longer than other cells" />
</TableRow>
<TableRow
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Text" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="Text" />
</TableRow>
</TableLayout>

Yojimbo, you are right, however if you use
android:layout_weight
you must remember about replacing (in this special case) android:layout_width="wrap_content" with
android:layout_width="0dp" .
Here you have a nice reference.