How to fill a full line in a vertical LinearLayout - java

This is my first app so sorry I know its not that good. My english neither.
I got a problem with my xml design: I want 2 Buttons and 2 TextViews in one line and to fill the whole line. At the moment it looks like that:
but it gets even worse:
My code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button12"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<TextView
android:id="#+id/textView13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
<!--
skipping additional rows of identical structure
-->
</LinearLayout>

The problem is that you use wrap_content on the children of the linear layout. there are 2 solutions to your problem one is to use match parent on the text views and add gravity centre to them like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="-" />
<TextView
android:id="#+id/textView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="centre"
android:text="TextView" />
<TextView
android:id="#+id/textView13"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="centre"
android:text="TextView" />
<Button
android:id="#+id/button13"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0"
android:text="+" />
</LinearLayout>
And another solution is to use a constraint layout with allows you to spread the child views using chains.

If I understood correctly, you should try for each of your LinearLayout :
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="4" // number of sub items
>
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="-" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<TextView
android:id="#+id/textView11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="TextView" />
<Button
android:id="#+id/button11"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="+" />
Also, you should take a look at RecyclerViews and create your own adapter and rows. It will be much easier to deal with.

Related

I want to show two number picker using one dialog

Hi this is exactly what Ive been looking for to add into my app (I want to show two number picker using dialog) but I'm getting an error mContext is undefined - how do i fix this? Also is there a way to do this with an xml layout? Thank you in advance (I'm pretty new to android)
please follow this link...
https://pandiyanblog.wordpress.com/2014/01/24/android-number-picker-inside-the-custom-dialog-box/
Layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="255dp"
android:layout_height="match_parent"
android:layout_gravity="top|center"
android:background="#50CCCCCC"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:text=" "
android:textAppearance="?android:attr/textAppearanceSmall" />
<NumberPicker
android:id="#+id/np"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/expmin"
android:layout_toLeftOf="#+id/textView3" />
<TextView
android:id="#+id/expmin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/np"
android:layout_below="#+id/textView3"
android:text="Exp.Min"
android:textColor="#3276b1"
android:textStyle="bold|italic"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#+id/numberPicker1"
android:layout_below="#+id/textView3"
android:layout_toRightOf="#+id/textView3"
android:text="Exp.Max"
android:gravity="right"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#3276b1"
android:textStyle="bold|italic" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/np"
android:layout_toRightOf="#+id/np"
android:background="#drawable/button_selector"
android:text=" OK "
android:textColor="#3276b1" />
<NumberPicker
android:id="#+id/numberPicker1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button"
android:layout_toRightOf="#+id/button"
android:gravity="right" />
</RelativeLayout>
<!-- <Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button_selector"
android:text=" OK "
android:textColor="#3276b1" /> -->
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" "
android:textAppearance="?android:attr/textAppearanceMedium" />

App design problems: scroll and amount problems

I am new to StackOverflow and I am not totaly shure if this is right but I want to make an android app for my fathers company, He is the owner of a Bed&Breakfirst and he wants an app to keep track of consumptions. I planed an interface of the product list where all consumptions can be chosen like this:
http://imgur.com/cwY4YtK
Now the problem is that we need to be able to add and remove products. otherwise i whold have done it like this:
<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
android:id="#+id/widget46"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<Button
android:id="#+id/widget47"
android:layout_width="48dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="2dp" />
<Button
android:id="#+id/widget52"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="266dp"
android:layout_y="43dp" />
<TextView
android:id="#+id/widget53"
android:layout_width="253dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="9dp"
android:layout_y="10dp" />
<TextView
android:id="#+id/widget54"
android:layout_width="251dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="8dp"
android:layout_y="50dp" />
<Button
android:id="#+id/widget55"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="85dp" />
<Button
android:id="#+id/widget56"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_x="267dp"
android:layout_y="128dp" />
<TextView
android:id="#+id/widget57"
android:layout_width="259dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="2dp"
android:layout_y="92dp" />
<TextView
android:id="#+id/widget58"
android:layout_width="256dp"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_x="6dp"
android:layout_y="136dp" />
</AbsoluteLayout>
But that can only be done if you know the ammount of products that you have. But wee need to add and remove products (Editing isen't neccesary.).
Also if we add to many products to fit on the screen I want to make a scroll option that can scroll trough all products like that.
Is there any way to do those twoo things or is this immpossibile?
A1:
Use TableLayout (or GridLayout etc) and page change buttons.
(This is easier.)
In this pattern, table (in layout) has fixed count rows.
Set OnClickListener to next / prev button to update each cell (text views) text.
(ex: page1: product name of row 0 to 4 is shown, page2: row 5 to 9 is shown)
OnClickListeners of each buttons next to cell text views needs to be modified too.
<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="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_01"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 01" />
<Button
android:id="#+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_02"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 02" />
<Button
android:id="#+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_03"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 03" />
<Button
android:id="#+id/button_03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_04"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 04" />
<Button
android:id="#+id/button_04"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_05"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 05" />
<Button
android:id="#+id/button_05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Prev" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Next" />
</LinearLayout>
</LinearLayout>
A2:
Use ScrollView that contains TableLayout (or GridLayout etc.) inside.
In this pattern, table (in layout) row count must be changed to suit your data count.
(Create/remove TableRows in your code and add/remove them from table)
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_01"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 01" />
<Button
android:id="#+id/button_01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<TextView
android:id="#+id/text_02"
android:layout_width="#dimen/text_view_width"
android:layout_height="wrap_content"
android:text="cell 02" />
<Button
android:id="#+id/button_02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
</ScrollView>
for A1 and A2:
res/values/dimens.xml
<resources>
<dimen name="text_view_width">250dp</dimen>
</resources>
You might want to use android listview or gridview, whatever suits you. Here is a good tutorial on how to use a list view.

How to put an image below textview in layout?

How can I put the image view below two of the text views, tv_pw and tv_un. So that in the layout the two text views are on top of the image, while the image serves as a background for that two text views. How could I do that?
Here is my xml file:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="510dip"
android:layout_marginTop="10dip"
android:background="#DDDDDD">"
<EditText
android:id="#+id/et_pw"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/et_un"
android:layout_below="#+id/et_un"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="textPassword" />
<TextView
android:id="#+id/tv_pw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/et_pw"
android:layout_alignBottom="#+id/et_pw"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/et_pw"
android:text="Password:"
android:textColor="#444444"
android:textSize="10pt" />
<Button
android:id="#+id/btn_login"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_below="#+id/et_pw"
android:layout_centerHorizontal="true"
android:text="Login" />
<TextView
android:id="#+id/tv_un"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/tv_pw"
android:layout_marginTop="98dp"
android:text="User Name:"
android:textColor="#444444"
android:textSize="10pt" />
<EditText
android:id="#+id/et_un"
android:layout_width="150dip"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tv_un"
android:layout_centerHorizontal="true"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="text" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/btn_login"
android:layout_centerHorizontal="true"
android:text="" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="32dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="14dp"
android:src="#drawable/bkground" />
There's a lot more in your XML but, focusing on what you are asking, you can use the margin attribute to overlap the textviews.
Try something like 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" >
<ImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/myImage">
</ImageView>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/image"
android:layout_marginTop="-50dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/hello_world2" />
</LinearLayout>
</RelativeLayout>
In this example I wrapped the two textviews inside a linear-layout (vertical) and set the linear-layout below the imageview and a margin of -50dp so it goes up and overlap.
HIH
Another way would be to use drawableBottom="#drawable/ic_launcher" inside your textview
If you don't care about having control on how the image scales, you can set the background of a LinearLayout that's wrapped around the TextViews.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/your_background_image_here"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_view_1" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/text_view_2" />
</LinearLayout>
Try this way,hope this will help you to solve your problem.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="510dp"
android:layout_marginTop="10dp"
android:orientation="vertical"
android:gravity="center"
android:background="#DDDDDD">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="98dp">
<LinearLayout
android:layout_width="110dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/bkground">
<TextView
android:id="#+id/tv_un"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="User Name:"
android:textColor="#444444"
android:textSize="10pt" />
<TextView
android:id="#+id/tv_pw"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:text="Password:"
android:textColor="#444444"
android:textSize="10pt" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginLeft="20dp">
<EditText
android:id="#+id/et_un"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="text" />
<EditText
android:id="#+id/et_pw"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:background="#android:drawable/editbox_background"
android:ems="10"
android:inputType="textPassword" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/btn_login"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Login" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
Wrap the two TextViews in linear layout with vertical orientation and assign background for linear layout.
use android:weight on the the two text views and boom
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Ensure the EditText is directly below the label using LinearLayout

I have the following XML code (partial for this example purposes):
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingLeft="0dp"
android:paddingRight="0dp" >
<RadioGroup
android:id="#+id/rgVehicle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1.5" >
<RadioButton
android:id="#+id/rbCar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Car" />
<RadioButton
android:id="#+id/rbTruck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Truck" />
<RadioButton
android:id="#+id/rbCycle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Motorcycle" />
</RadioGroup>
<EditText
android:id="#+id/etToll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal"
android:layout_weight=".5" />
</LinearLayout>
For smaller screen like Galaxy Nexus and Nexus One the layout comes out like this:
How do I fix it so the EditText is directly below the #6 label as shown below (no matter what size the screen is):
There you 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="wrap_content" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="5. Vehicle type"
android:textAppearance="?android:attr/textAppearanceLarge" />
<RadioGroup
android:id="#+id/rgVehicle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<RadioButton
android:id="#+id/rbCar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="Car" />
<RadioButton
android:id="#+id/rbTruck"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Truck" />
<RadioButton
android:id="#+id/rbCycle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Motorcycle" />
</RadioGroup>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="6. Total amount"
android:textAppearance="?android:attr/textAppearanceLarge" />
<EditText
android:id="#+id/etToll"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
</LinearLayout>
</LinearLayout>
Use something like this:
<tablelayout>
<tablerow android:layout_weightsum="2">
<textview android:layout_weight="1" android:text="4">
<textview android:layout_weight="1" android:text="6">
</tablerow>
<tablerow android:layout_weightsum="2">
<radiogroup android:layout_weight="1">
<!-- add radio buttons here -->
</radiogroup>
<edittext android:layout_weight="1" >
</tablerow>
</tablelayout>

How can i make a layout like as give below in the picture?

I am actually trying to create a layout like this but it seems to scatter all over the place.
Any help or idea to optimize it will be greatly appreciated.
xml
<RelativeLayout
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" >
<ImageView
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/menu_normal"
android:onClick="onClickContentButton" />
<ImageView
android:id="#+id/new_chat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:onClick="actionPerformed"
android:src="#drawable/invite_friends_normal" />
<TextView
android:id="#+id/headerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Profile"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/header"
android:background="#049080"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="My profile"
android:textColor="#FFFFFF"
android:textSize="15sp" />
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_below="#+id/textView1"
android:orientation="vertical"
android:weightSum="2" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/darker_gray"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="20dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:src="#drawable/com_facebook_profile_picture_blank_square" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="10dp"
android:layout_alignTop="#+id/imageView1"
android:src="#drawable/bang_selected" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imageView1"
android:layout_toRightOf="#+id/imageView1"
android:text="John smith"
android:textColor="#2D2D2D"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/textView2"
android:layout_below="#+id/textView2"
android:text="latitude:"
android:textColor="#2d2d2d"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#+id/textView2"
android:text="longitude:"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>
Graphical layout
I would make the main layout be a relative layout.
The "My Profile" button would be the first object in the layout
The segment underneath that can be another relative layout in which you would specify the association of all the elements.
And the bottom map portion would be the map view
Within the second portion, use a mix of vertical and horizontal linear layouts to get the look you desire

Categories

Resources