Develop Reference

Overlay of layout in android

I think to do a overlay of layout, this is the code that I have now.:
<?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="#color/white">
<ScrollView
android:id="#+id/content_scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout
android:id="#+id/container_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/text_search"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="#color/white"
android:weightSum="2">
<EditText
android:id="#+id/input_search"
android:layout_width="0dp"
android:layout_height="match_parent"
android:hint="#string/placeholder_search"
android:layout_margin="5dp"
android:layout_weight="1.5"
android:inputType="text"
android:padding="5dp"
android:drawableRight="#drawable/ic_search"
android:background="#drawable/style_input"
android:imeOptions="actionSend"/>
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:src="#drawable/img_header" />
</LinearLayout>
<LinearLayout
android:id="#+id/list_search"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="-5dp"
android:layout_gravity="top"
android:orientation="vertical">
<TextView
android:id="#+id/no_result"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:visibility="gone"
android:text="#string/no_result"
android:gravity="center_horizontal|center_vertical|center"/>
<ListView
android:id="#+id/search_categorias"
android:layout_width="fill_parent"
android:layout_height="wrap_content"></ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/container_buttons_tall"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#drawable/style_header">
<TextView
android:id="#+id/otherlayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="Other Layout" />
</LinearLayout>
<LinearLayout
android:id="#+id/container_buttons_tall1"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#drawable/style_header"
android:weightSum="3">
<TextView
android:id="#+id/otherlayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="Other Layout 2" />
</LinearLayout>
<LinearLayout
android:id="#+id/container_buttons_tall2"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#drawable/style_header"">
<TextView
android:id="#+id/otherlayoutn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:text="Other Layout N" />
</LinearLayout>
</ScrollView>
</RelativeLayout>
I want to overlay the next layouts after of the ID "#+id/text_search" with the rest, this list is the a search and show suggestions to users.
This list will overlay about others layouts that I define below, if the user want to make a search.
Are there some way easy of overlay? Or tutorial that can help me. I try to use RelativeLayout, but I didn't get to make it well.
Thanks in advance.

you can use the Relative Layout for this, but you need to specify the relations (thats why relative => relative to what)
means you have to set the postion of your +id/text_search relative to parent.
and also the elements which should do the overlayer have to be relative to parent.
todo so relative Layout uses layout properties like: below=(ID) toRightOf(ID) and so on.
you can start reading about it here:
http://developer.android.com/guide/topics/ui/layout/relative.html
but for the search you want todo, there is already a good advice howto it: so i recommend reading this article:
http://developer.android.com/guide/topics/search/search-dialog.html
and doing it right, like all the others apps do it, your customers will be satisfied then (don't need to learn something new )

how to move image and align it to right of screen

In my code image1 is show on left side but image test_button_image2 not move at right of screen what do i do? this is my screenshot
i wan tomake likie this
please help me how do I move image2 on right of layout?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffffff"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/imagelogo2"
android:orientation="horizontal" >
<ImageView
android:id="#+id/test_button_image"
android:layout_width="wrap_content"
android:paddingLeft="5dp"
android:layout_height="wrap_content"
android:paddingTop="15dp"
android:src="#drawable/back" >
</ImageView>
<ImageView
android:id="#+id/test_button_image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:paddingTop="15dp"
android:src="#drawable/back" />
</LinearLayout>
<LinearLayout
android:id="#+id/lytContent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/txtCopyright"
android:layout_marginTop="10dp"
android:background="#drawable/border2"
android:layout_below="#+id/lytTitlebar"
android:orientation="vertical" >
<ListView
android:id="#+id/listMainMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:listSelector="#drawable/listview_selector"
android:dividerHeight="1dip"
android:fadeScrollbars="true" />
</LinearLayout>
</LinearLayout>

This layout is kinda messy, but from what I can see:
Your university's logo is set as the background of the layout (android:background="#drawable/imagelogo2"). It seems that you need to move it into a separate ImageView.
You have 2 ImageViews displaying the back button.
Please consider using margins instead of paddings. I think this would better fit what you're trying to do.

Creating a layout for a skype-style text input bubble

In iPhone there is a method on UIImage called stretchableimagewithleftcapwidth which can be used to create a chat bubble to stretch for any size (keeping the corners natural size).
We don't seem to have this in Android so I've set out to make a layout that I can then use as a background image with a FrameLayout. The trouble I'm having at the moment is the top row which consists of 3 columns: the left top corner, the stretchable top, and the right top corner. How do I get the left and right top corners to remain fixed size (11dip) and tell the middle to fill any remaining space in the parent? This is what I have so far.
<?xml version="1.0" encoding="UTF-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/layout_bubble_container"
android:orientation="vertical">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_toprow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_top_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_top_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_lefttop" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_top"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_top" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_top_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_top_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_righttop" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_middlerow"
android:orientation="horizontal"
android:background="#color/WHITE">
<LinearLayout
android:id="#+id/layout_left"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="left"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_left"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_left" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_right"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="right"
android:layout_weight="1">
<ImageView
android:id="#+id/bubble_right"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:src="#drawable/bubble_right" />
</LinearLayout>
</LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="11dip"
android:id="#+id/layout_bubble_bottomrow"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/layout_bottom_leftCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="left|top">
<ImageView
android:id="#+id/bubble_bottom_leftcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_leftbottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="top|center" >
<ImageView
android:id="#+id/bubble_bottom"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="#drawable/bubble_bottom" />
</LinearLayout>
<LinearLayout
android:id="#+id/layout_bottom_rightCorner"
android:layout_width="11dip"
android:layout_height="fill_parent"
android:gravity="right|top" >
<ImageView
android:id="#+id/bubble_bottom_rightcorner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src="#drawable/bubble_rightbottom" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Here is the layout tree in eclipse if this helps.
Here is what it looks like rendered in the layout editor in eclipse. Note the top and bottom rows not stretching appropriately.
Thanks in advance.

i also needed a chat bubble kind of view in my app so I used a 9 patch drawable as the background image and it is working fine.
check this question:
Why do 9-patch graphics size correctly in the emulator but not on a phone?
And also this link:
http://warting.se/2012/06/04/chat-bubbles-in-android/

Space unwanted layout and image

like the title said it there are some "space" before and after an image and i don't want it.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond"
>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/top"
android:layout_gravity="top"
/>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond1"
>
</LinearLayout>
</LinearLayout>
So like you can see i have a first Layout with a background.
The ImageView is just after and should be on the top but it didn't.
The second Layout is to much after the image.
->
first layout
--unwanted space--
image
--unwanted space--
second layout
If anyone know how to delete this "space", thanks.

Use android:adjustViewBounds="true" inside your ImageView. That way your ImageView will be adjusted to the provided image bounds.

Use Relative layout this Way::
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#drawable/fond"
>
<ImageView
android:id="#+id/imageView1"
android:contentDescription="#string/desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/top"
android:layout_gravity="top"
android:layout_alignParentTop="true"
/>
<LinearLayout
android:layout_below="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#drawable/fond1"
>
</LinearLayout>
</RelativeLayout>

GridView items: set relative sizes

I'm trying to display some items in a GridView. I want each item to fill a relative part of the screen (image B) and all I have is GridView take just the space it needs at the top of the screen (image A). The image:
(I want each item sizes over 15-20% height of the main layout)
EDIT : I found this question Percentage width in a RelativeLayout. 'LadaRaider' gives a good answer but I don't know how to use that solution in my GridView cells. This is my layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/background">
<TextView
android:id="#+id/label_name"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:gravity="center_horizontal"/>
<LinearLayout
android:id="#+id/ll_ok"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lbl_choose"
android:textAppearance="?android:attr/textAppearanceMedium" />
<GridView
android:id="#+id/grid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="2"
android:columnWidth="100dp"
android:stretchMode="columnWidth"/>
</LinearLayout>
<LinearLayout
android:id="#+id/ll_wait"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/lbl_wait"
android:gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</LinearLayout>
I have also created a custom layout to use in GridView items. It has just a TextView and a background.