Why does image view take lot of space than mentioned by weight?

Why does image view take lot of space than mentioned by weight? - android

My XML code:
<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"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/rl_upload_header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:minHeight="50dp" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/upload_activity"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:id="#+id/ll_middle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/ll_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2"
android:gravity="center" >
<ImageView
android:id="#+id/image_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/app_icon_17"
android:contentDescription="#string/empty" >
</ImageView>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_eds"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="5"
android:baselineAligned="false"
android:gravity="center"
android:orientation="vertical" >
<EditText
android:id="#+id/ed_img_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:background="#drawable/text_box_background"
android:hint="#string/name"
android:paddingLeft="12dp" />
<EditText
android:id="#+id/ed_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/text_box_background"
android:hint="#string/amount"
android:paddingLeft="12dp" />
<EditText
android:id="#+id/ed_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/text_box_background"
android:hint="#string/desc"
android:paddingLeft="12dp" />
</LinearLayout>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/rl_upload_bottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:gravity="center"
android:minHeight="70dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:baselineAligned="false"
android:gravity="center" >
<Button
android:id="#+id/button_upload"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/upload" >
</Button>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:baselineAligned="false"
android:gravity="center"
android:minHeight="50dp" >
<Button
android:id="#+id/button_cancel"
android:layout_width="120dp"
android:layout_height="40dp"
android:background="#drawable/discard" >
</Button>
</LinearLayout>
</LinearLayout>
</LinearLayout>
In this there is ImageVIew(id =image_view) which I want to take only 25% approx space (width) of screen and remaining width should be taken by layout containing edit texts (id =ll_eds).
But when the image is big in width, its taking almost 90% width of screen.
So what wrong I'm doing?
Roughly I want this kind of design.

Set layout_width to 0 dip when using layout_weight on a View.
See Android Engineer Romain Guy's answer: Android Layout Weight

If the sizes look reversed, try switching the weights of the image and the other layout. Sometimes the weight system of Android can easily throw people off
If #drawable/app_icon_17 is a permanent image that doesn't change, you can try a RelativeLayout. You can anchor the image to the left of the screen, and then put the other ViewGroup to the right of it.

Related

How I can put "Imagenview" under all the elements?

Hi, I commented that I have this layout and if you can see there is a line on the right which should go below the text
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_promocion_item0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#363636"
android:padding="10dip" >
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal"
>
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp"
android:tag="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/vertical"
android:layout_gravity="left"/>
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp"
/>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight=".50"
android:src="#drawable/divierblanco"
android:layout_alignParentLeft="true"/>
</LinearLayout>
</LinearLayout>
.. so is something like:
NAME: PRICE
I can not locate the image below the text .... Can you help me?

You have way too many nested LinearLayouts, IMHO, which can be bad for performance and decrease readability. I would use a RelativeLayout and 1 nested LinearLayout
<RelativeLayout
...>
<LinearLayout
android:id="#+id/someId"
....
<TextView
...>
<ImageView
...>
<TextView
...>
</LinearLayout>
<ImageView
android:layout_below="id/someId"
...>
Something like this should work.
Alternatively if this doesn't work for you, then placing that ImageVIew outside of the first child LinearLayout should also work
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/layout_promocion_item0"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#363636"
android:padding="10dip" >
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal" >
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp"
android:tag="bold" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/vertical"
android:layout_gravity="left"/>
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_weight=".50"
android:src="#drawable/divierblanco"
android:layout_alignParentLeft="true"/> // this doesn't do anything in a LinearLayout
</LinearLayout>

Your imageView (with the id separador) is inside a linearLayout with an orientation set to "horizontal". Move the imageView to the outermost linearlayout like so:
EDIT: The xml that's displayed below is completely different than what I typed in my answer. What's up with that? Regardless, move the imageView down an element.
<LinearLayout
android:id="#+id/contenido"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/contenido_Nombre"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".75"
android:orientation="horizontal" >
<TextView
android:id="#+id/nombre_promo"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="bold"
android:text="Vodka + Nectar"
android:textColor="#ffffff"
android:textSize="25sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/contenido_precio"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".25"
android:orientation="horizontal" >
<ImageView
android:id="#+id/separador_lateral"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_gravity="left"
android:src="#drawable/vertical" />
<TextView
android:id="#+id/precio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="$2200"
android:textColor="#ffffff"
android:textSize="24dp" />
</LinearLayout>
</LinearLayout>
<ImageView
android:id="#+id/separador"
android:layout_width="0dp"
android:layout_height="19dp"
android:layout_alignParentLeft="true"
android:layout_weight=".50"
android:src="#drawable/divierblanco" /></LinearLayout>

designing a view that make icons fill screen but not stretch the images

I currently have the following layout (see below). Now the issue I am having with it, is that i need the icons to fill up the screen (So i need to split the screen into 6 blocks. But the biggest problem is my images are stretching and that looks really bad. all the images are 256X256. What can I do to rather have more while space above or below than have them stretched?
Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.60"
android:orientation="horizontal"
android:weightSum="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/category_menu_button_food"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/menu_icon"
android:contentDescription="Food Menu"
android:onClick="foodMenuItemClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Menu"
android:textSize="25sp" >
<requestFocus />
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/search_icon"
android:contentDescription="Drinks Menu"
android:onClick="searchMenuItemClicked"
android:paddingTop="55dp"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Search"
android:textSize="25sp" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/cart_icon"
android:contentDescription="Favorites"
android:onClick="favoritesMenuItemClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Cart"
android:textSize="25sp" >
</TextView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.60"
android:orientation="horizontal"
android:weightSum="3" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/bill_icon"
android:contentDescription="View Bill"
android:onClick="billMenuItemClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Bill"
android:textSize="25sp" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/activity_category_menu_button_callWaiter"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/callwaiter_icon"
android:contentDescription="Call Waiter"
android:onClick="callWaiterButtonClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Call Waiter"
android:textSize="25sp" >
</TextView>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<ImageButton
android:id="#+id/button6"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="10dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:background="#drawable/exit_icon"
android:contentDescription="Exit App"
android:onClick="exitButtonClicked"
android:scaleType="centerInside" />
<TextView
android:id="#+id/category_menu_label_food"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:ems="20"
android:gravity="center"
android:text="Exit App"
android:textSize="25sp" >
</TextView>
</LinearLayout>
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Space
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Do not set the width and height of images , Leave the height/width attribute to WRAP_CONTENT in this way images will neither shrink nor stretch.

please try to change the width and height to wrap content instead of giving match parent.
or else change the scaletype to fitxy.

I think you can to use wrap_content for layout_width and layout_height of ImageView
and
you use RelativeLayout instead of LinearLayout.
you use RelativeLayout in Root of layout and two ReltavieLayout in sub of Root. and for not stretch your image, you should to use different size image for different size and density device.

how to allign spinner equal in width of edittext

how do i align spinner to show equal in width in all screen? in my code spinner show different width in different screen what do i do? i have given fixed length
android:layout_marginRight="45dp"
android:layout_marginLeft="45dp"
in edittext and spinner but spinner show diffrent width in diffrent screen how do i fix this issue? i this is my image of screen http://imgur.com/RtWNgNI
and below is my full source code of screen.
<?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:background="#000000"
android:orientation="vertical"
android:weightSum="6" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="55dp"
android:layout_weight="0.5"
android:orientation="horizontal"
android:weightSum="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:paddingBottom="10dp"
android:src="#drawable/agappbg" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_weight="0.2"
android:orientation="horizontal"
android:weightSum="1" >
<EditText
android:id="#+id/txtMobileNo"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:layout_weight="1"
android:background="#ffffff"
android:gravity="left"
android:hint="#string/MobileNo"
android:singleLine="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:orientation="horizontal"
android:weightSum="1" >
<EditText
android:id="#+id/txtPinNo"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:layout_weight="1"
android:background="#ffffff"
android:gravity="left"
android:hint="#string/PinNo"
android:inputType="textPassword"
android:singleLine="true" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:orientation="horizontal"
android:weightSum="1" >
<Spinner
android:id="#+id/lgnspinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="-17dp"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:layout_marginTop="-15dp"
android:layout_weight="1"
android:paddingBottom="12dp"
android:paddingTop="12dp"
android:prompt="#string/network_prompt" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:layout_weight="0"
android:orientation="horizontal"
android:weightSum="4" >
<Button
android:id="#+id/btnLogin"
style="?android:attr/buttonStyleSmall"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="45dp"
android:layout_weight="1"
android:background="#drawable/curvedplanebutton_small"
android:text="Login"
android:textColor="#drawable/button_text_color" />
</LinearLayout>

It is not your fault, default background of Spinner has this kind of image (transparent padding around it). You can see yourself by setting android:background="#ffffff" on Spinner, doing this will remove padding from Spinner's sides and your problem will solve but you will loose Spinner arrow. I suggest you to create your own drawable for Spinner (because you are changing backgrounds of other View) otherwise default background is different for different OS versions and your implementation will seem broke.
Also you are using so many LinerLayouts for this simple layout. Consider this:
<?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:background="#000000"
android:orientation="vertical"
android:weightSum="100" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="30"
android:paddingBottom="10dp"
android:src="#drawable/ic_launcher" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="70"
android:orientation="vertical"
android:padding="16dp" >
<EditText
android:id="#+id/txtMobileNo"
style="?android:attr/buttonStyleSmall"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginBottom="4dp"
android:background="#ffffff"
android:gravity="center_vertical"
android:hint="MobileNo"
android:padding="4dp"
android:singleLine="true" />
<EditText
android:id="#+id/txtPinNo"
android:layout_width="fill_parent"
android:layout_height="40dp"
android:layout_marginBottom="4dp"
android:background="#ffffff"
android:gravity="center_vertical"
android:hint="Pin no"
android:inputType="textPassword"
android:padding="4dp"
android:singleLine="true" />
<Spinner
android:id="#+id/lgnspinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:background="#ffffff" />
<Button
android:id="#+id/btnLogin"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="Login" />
</LinearLayout>
</LinearLayout>
Adjust your references again, in case you copy paste my code.

Actually you did code right. It just seem like its not same size with EditText box because you used default background in spinner.
If you changed its background color or image like
android:background="#android:color/darker_gray"
And you can change its background image
android:background="#drawable/spinnerDropDownBackground"
And make sure image is 9 path So that it will not starched in big screen
How to create 9 patch for spinner ?
you will find that you did code right.
And if you want to use default background you have to change your code
android:layout_marginRight="40dp"
android:layout_marginLeft="40dp"
Hope this will help

Unable to Align the Views

This is the part of the Code of a very long Layout.So posting of whole code was of no use.
I want to align the RED circle.Both the positions are shown in the RED colored circles.
The ParentLayout of whole activity is a RelativeLayout but has nothing to do with this.
Please help me.I have tried all the things that I knew.
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#drawable/Layoutborder"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:background="#drawable/image_bg"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"/>
</LinearLayout>
</LinearLayout>

Change the 3rd LinearLayout to :
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="right"
android:padding="5dp" >
Not sure if you are satisfied with that kind of layout.

If this whole thing is inside a RelativeLayout, remove the outer LinearLayout (moving margins and such to the first child LinearLayout as required), and change the second child LinearLayout - the one with 5dp padding - to have
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
If you don't want to do this and have to keep the outer LinearLayout for some reason, move
android:layout_marginTop="20dp"
from the parent LinearLayout to the first child, and set layout_width of the second child to fill_parent, and add android:gravity="right" to it.

The code you provided does not show where you have specified the properties of RED text "here". You could probably just add it as another element in your relative layout where you specify the availability and stock which would align it with the preceding text.
Edit: (after understanding your actual problem)
I would suggest wrapping in another linear layout which will enable you to position the text above the picture as shown in the code below.
<?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="100dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="20dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Availability "
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp" />
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="3dp"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/texttitle"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:padding="3dip" >
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/texttitle"
android:src="#drawable/button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

This was the Another way achieve the above Output.Hope it may help SomeOne.
<RelativeLayout
android:id="#+id/thumbnail"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:background="#color/white"
>
<LinearLayout
android:id="#+id/Linearimagetop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:background="#drawable/image_bg"
android:layout_alignParentLeft="true"
>
<ImageView
android:id="#+id/productimage1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/defaultimage"
android:layout_below="#+id/texttitle"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5dp"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Availability "
android:textColor="#color/black"
android:textStyle="normal" />
<View
android:layout_width="1dp"
android:layout_height="fill_parent"
android:background="#color/black"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
/>
<TextView
android:id="#+id/availibility"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="In Stock"
android:textColor="#4A7023"
android:textStyle="normal"
android:layout_marginLeft="3dp"
/>
</LinearLayout>
</RelativeLayout>

How to create a neat two-columns input form in Android?

I want to create a neat two-columns input form like this:
My xml layout code so far:
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblTitle" />
<EditText
android:id="#+id/txtTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblAuthor" />
<EditText
android:id="#+id/txtAuthor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblPublisher" />
<EditText
android:id="#+id/txtPublisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblIsbn" />
<EditText
android:id="#+id/txtIsbn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<Button
android:id="#+id/btnSubmit"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.375"
android:text="#string/submit" />
<Button
android:id="#+id/btnCancel"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.375"
android:text="#string/cancel" />
</LinearLayout>
</LinearLayout>
You can see that I used LinearLayout utilizing layout_weight & layout_width="0dp" trick to make the two columns division looks neat. In HTML code, we can use with % width size. But in android xml layout, there is no %-value for layout_width. I want to avoid hardcoded dp-values for column width. Is it possible in android?
So far that's the best I can do. Now I want to resize the ISBN textbox to become smaller (50% size less from the current size). But I cannot resize the textbox width since layout_width must be "0dp" for layout_weight to work. I also want to do the same with the Submit and Cancel button size.
I wonder if using LinearLayout is a correct way to create input form neatly in android. Could TableLayout better for this? I heard that you cannot change child view's layout_width in TableLayout.
There are some people here recommend me using RelativeLayout, I tried it but it doesn't support layout_weight.

Alright, I found out the way with LinearLayout. The trick is by wrapping the Views that you want to resize with LinearLayout. Then the width of View itself can be adjusted by using: android:layout_width or android:ems property.
Here is the xml code:
<?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="wrap_content"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblTitle" />
<EditText
android:id="#+id/txtTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblAuthor" />
<EditText
android:id="#+id/txtAuthor"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25"
android:text="#string/lblPublisher" />
<EditText
android:id="#+id/txtPublisher"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:ems="10" />
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="0.25"
android:text="#string/lblIsbn" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<EditText
android:id="#+id/txtIsbn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<View
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.25" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.75"
android:orientation="horizontal" >
<Button
android:id="#+id/btnSubmit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:text="#string/submit" />
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="5"
android:text="#string/cancel" />
</LinearLayout>
</LinearLayout>
</LinearLayout>

you should also consider the gridLayout , which can be used (by using an android library) on API7+ .
here's a link:
http://android-developers.blogspot.com/2011/11/new-layout-widgets-space-and-gridlayout.html

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Why does image view take lot of space than mentioned by weight? - android

Set layout_width to 0 dip when using layout_weight on a View. See Android Engineer Romain Guy's answer: Android Layout Weight

Related

How I can put "Imagenview" under all the elements?

designing a view that make icons fill screen but not stretch the images

how to allign spinner equal in width of edittext

Unable to Align the Views

How to create a neat two-columns input form in Android?

Categories

Resources