Develop Reference

GridView Items Not of Uniform Size

Hi guys I have Written a custom Gridview, However my Issue here is that each single item of them is occupying different height and this has caused alignment issues also looks ugly, I don't want to hard code the height that each individual item should occupy, I wonder if this can be done more efficient. I cannot Post the Image with to illustrate the issue as i need reputation in any case
The Xml Code that i have used which is causing this Mayhem i.e., the grid View
<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/inboxView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#d3d3d3"
android:stretchMode="columnWidth"
android:numColumns="2"
>
</GridView>
and the Code for each GridItem
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:background="#fff"
>
<!-- Image -->
<ImageView
android:id="#+id/thumbnail"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentLeft="true"
android:layout_marginRight="8dp"
android:layout_centerVertical="true"
android:background="#drawable/default_view" />
<!-- Date -->
<TextView
android:id="#+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:gravity="right"
android:padding="2dp"
android:singleLine="true"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/thumbnail"
android:textSize="#dimen/date_info" />
<!-- Cricketer Name -->
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/thumbnail"
android:layout_alignParentRight="true"
android:gravity="right"
android:layout_below="#id/date"
android:textSize="#dimen/name"
android:textColor="#00B0F0" />
<!-- Patient Mobile Number -->
<TextView
android:id="#+id/contact"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:layout_marginTop="1dip"
android:layout_alignParentRight="true"
android:layout_toRightOf="#+id/thumbnail"
android:gravity="right"
android:textSize="#dimen/mobile"
android:textColor="#00B0F0" />
<!-- Short Info -->
<TextView
android:id="#+id/shortInfo"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/contact"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/thumbnail"
android:gravity="right"
android:layout_alignParentRight="true"
android:textSize="#dimen/short_info" />
</RelativeLayout>

Fixing the size of relative layout helps:
RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="100dp" // 100dp is just an example
android:layout_height="100dp"
android:padding="8dp"
android:background="#fff"
>

You are using Height of Relative Layout as wrap_content so height of Grid item depend on your Item like image height and textview height

Adding two buttons which are touching each other in Framelayout

I want to add two buttons one below another in a FrameLayout but they should be touching. However, I am not managing to do this. Here is my code:
<FrameLayout
android:id="#+id/lytOptions"
android:layout_below="#id/imgLine"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<Button
android:id="#+id/btnLogin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/action_via_email"
android:textColor="#android:color/white"
android:textStyle="bold" />
<Button
android:id="#+id/btnSignUp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/action_sign_up"
android:textColor="#android:color/white"
android:textStyle="bold" />
</FrameLayout>

Try this
<RelativeLayout
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:text="Button" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="49dp"
android:text="Button" />
</RelativeLayout>
to get the output like this

Use vertical LinearLayout instead...
<LinearLayout
android:layout_width="fill_parent"
android:layout_below="#id/imgLine"
android:layout_height="wrap_content"
android:orientation="vertical" >
<Button
android:id="#+id/btnLogin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/action_via_email"
android:textColor="#android:color/white"
android:textStyle="bold" />
<Button
android:id="#+id/btnSignUp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/action_sign_up"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>

By using framelayout you are actually placing one image on another, instead use linearlayout with buttons width and height as wrap content,and avoid using layout weights of the buttons.
Let me know if this solves your problem

As others have pointed out, the key answer is to use a LinearLayout to position the buttons next to each other. However, to a "touching" effect, you will need to do one or more of the following:
Change the padding on each Button.
Change the margin on each Button.
Change the button background image so that it goes right to the edge of the View area.
My preference would be to set the margins and paddings to zero and to set the image to be the effect you want:
<LinearLayout
android:layout_width="fill_parent"
android:layout_below="#id/imgLine"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- options 1 and 2 -->
<Button
android:id="#+id/btnLogin"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/action_via_email"
android:textColor="#android:color/white"
android:padding="0dp" <!-- Set there to be no space between the content and the surrounding views -->
android:padding="0dp" <!-- Set to be no space int the content area but between the content and the edge of the content area -->
android:textStyle="bold" />
<!-- option 3 -->
<Button
android:id="#+id/btnSignUp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/action_sign_up"
android:textColor="#android:color/white"
android:background="#drawable/my_background"
android:textStyle="bold" />
</LinearLayout>
You will need to define my_background as an imagine the drawable directory or res. You may the section on 9 patch images from http://developer.android.com/guide/topics/graphics/2d-graphics.html helpful.

Use a TableLayout instead:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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="match_parent" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:background="#drawable/button_style"/>
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" android:background="#drawable/button_style"/>
</TableRow>
</TableLayout>
Assign a drawable button_style to the buttons:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#38393B"/>
<stroke android:width="0.5dp" android:color="#8aaa"/>
<size android:width="120dp" android:height="80dp" />

Layout with particular position of elements

I have this layout.xml :
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingRight="10dp"
android:paddingLeft="10dp">
<RelativeLayout android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dip"
android:background="#color/white"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/list_linearLayout">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<!-- titre food -->
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_titleT"
android:textColor="#color/black"
android:paddingLeft="5dp"/>
<!-- description food -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:id="#+id/souscarte_element_descT"
android:paddingLeft="5dp"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<!-- promo food -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_promoT"
android:gravity="right"
android:textColor="#color/black"
android:layout_alignParentRight="true"
android:layout_toLeftOf="#+id/souscarte_element_prixT"
android:paddingRight="5dp"/>
<!-- price food -->
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:id="#+id/souscarte_element_prixT"
android:gravity="right"
android:textColor="#color/black"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:paddingRight="5dp"/>
</RelativeLayout>
</FrameLayout>
The render of this is here :
The problem is on the red frame (on the picture): when I have a big content (a lot of words) the second price (in bottom) put himself to the bottom and the text comes between the 1st price and the 2nd..
I would like to know how make it just stay in bottom of 1st price, thank you!

Please check this.
hope this will helpful for you.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingRight="10dp" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="17dp"
android:layout_marginRight="17dp"
android:background="#FFFFFF"
android:orientation="horizontal"
android:padding="5dip" >
<LinearLayout
android:id="#+id/list_linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.2"
android:orientation="vertical" >
<TextView
android:id="#+id/souscarte_element_titleT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/souscarte_element_descT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:textColor="#000000" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.8"
android:orientation="vertical" >
<TextView
android:id="#+id/souscarte_element_promoT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="5dp"
android:textColor="#000000"
android:textStyle="bold" />
<TextView
android:id="#+id/souscarte_element_prixT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingRight="5dp"
android:textColor="#000000"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</FrameLayout>

You have set layout_align_parent_bottom="true" for the second price, that is why it stays fixed to the bottom. Change this to layout_below="#+id/souscarte_element_promoT".
Note that RelativeLayout allows its children to overlap, so it will draw children on top of other children if you aren't careful abotu how you arrange the children.

You could nest two layouts inside the main layout...
One for the texts, and the other one for the prices
Something like this:
<LinearLayout
android:orientation="horizontal" >
<LinearLayout <!--For the texts-->
android:layout_weight="1"
android:orientation="vertical" >
<TextView >
<TextView >
</LinearLayout>
<LinearLayout <!--For the prices-->
android:orientation="vertical" >
<TextView >
<TextView >
</LinearLayout>
</LinearLayout>

This is a rather hard thing to achieve as TextView doesn't provide this feature.
However, it's still possible.
You can extend TextView and when it's supposed to show the text (not sure in which method), you can measure the last 2 lines of text (maybe using Paint.measureText), in order to know where to place the price textView.
I say 2 because the first one would give you the Y coordinate, and the last one would tell you if it would wrap in case you put the textview, so that you will need to add extra to the Y coordinate.
Another possible solution is to put the price as a text inside the description TextView. In this solution you would also need to check the last line so that you could know if you need to create a new line or use the current one, and you need to know how many spaces to put.
Anyway, as others have mentioned, an easy way would be to simply always put the price below the text.

what RelativeLayout properties should i use?

i want to design a layout for my app as shown below in image
but im getting problem which is that the properties im applying for relative layout are not going right as in below my xml code there is horizontal ruler image having centerInParent property and a verticle ruler image also having property of centerInParent by doing this the both rulers come to accurate place but when i put a child above the horizontal ruler or a child toLeftOf verticle ruler they dont appear as the graphical view of xml file shows the reason that although by applying centerInParent the both rulers come to center but their reference remains at edges thats why by using layout_above or layout_toLeftOf the childs go outside of layout
My 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="fill_parent"
android:background="#FFFFFF"
android:orientation="vertical">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/title"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/icon_img"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dip"
android:layout_marginTop="2.5dip"
android:src="#drawable/smicon"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_toRightOf="#id/icon_img"
android:layout_marginTop="3dip"
android:text="Welcome To JEM"
android:textStyle="bold"
android:id="#+id/wcm_id"
android:textSize="18dip"
android:textColor="#FFFFFF"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/wcm_id"
android:layout_alignParentRight="true"
android:layout_marginRight="5dip"
android:text="APPS BY SAM"
android:id="#+id/app_by"
android:textSize="16dip"
android:textColor="#FFFFFF"
/>
</RelativeLayout>
<!-- This relative layout which is showing the main cross and icon around it -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_hr"
android:layout_centerInParent="true"
android:src="#drawable/horizontal"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/center_vr"
android:layout_centerInParent="true"
android:src="#drawable/verticle"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/getuser"
android:src="#drawable/adduser"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/set"
android:src="#drawable/set"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toLeftOf="#id/center_vr"
android:id="#+id/get"
android:src="#drawable/get"
/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/center_hr"
android:layout_toRightOf="#id/center_vr"
android:id="#+id/ico"
android:src="#drawable/icon"
/>
</RelativeLayout>
</LinearLayout>
so guys please tell me how can i achive this main cross and icon to lef,right and above,below it as shown in image

Try this..
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/vertical_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imageView1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
/>
<ImageView
android:id="#+id/horizontal_ruler"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/imageView1"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/horizontal_ruler"/>
<ImageView
android:id="#+id/imageView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/vertical_ruler"
android:layout_below="#id/horizontal_ruler"
/>
May be it helpful for you..

You could use a TableLayout embedded in a RelativeLayout. The RelativeLayout can be used to center the TableLayout on the screen and in the TableLayout you can add your pictures/buttons and state how many rows and colums you want the TableLayout to have.

problem to make scroll able,set scroll for whole layout android

had make layout for showing the content in listview and a button below on list view for displaying more information on list view ,so first i am showing only 4 rows in list view and when i next time click on button 4 rows again added in list so now my button goes down in screen so how to make whole layout scroll able so that i can go to button via scrolling my layout is..
listplacehold.xml is
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#1A77BD"
>
<ListView
android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawSelectorOnTop="false" />
<View
android:id="#+id/horizontolline"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_below="#id/android:list"
android:background="#000000"
/>
<Button
android:text="Load More..."
android:textColor="#color/white"
android:id="#+id/keywordsearchbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/horizontolline"
android:drawableLeft="#drawable/load_more_off"
android:gravity="left|center_vertical"
android:background="#1A77BD"
/>
</RelativeLayout>
and for list item layout is: listitem.xml is
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:id="#+id/img"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<!-- Location where barrio items will be displayed -->
<TextView
android:id="#+id/reportid"
android:layout_marginLeft="70dip"
android:text="reporet id"
android:textColor="#color/white"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
<TextView android:id="#+id/status"
android:textColor="#color/white"
android:text="status"
android:layout_marginTop="40dip"
android:layout_marginLeft="200dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView android:id="#+id/title"
android:text="title"
android:layout_marginLeft="150dip"
android:textColor="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/date"
android:text="dateeeeeee"
android:layout_marginLeft="70dip"
android:layout_marginTop="40dip"
android:textColor="#color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
items are dynamically loadein list view when button click
i think that scroll will be set on above xml means on "listplacehold.xml" but how?,when i am doing it is set to for half screen,means it is not displaying in whole view... Thanks for help in advance.

don't use the ScrollView with the combination of the ListView. Instead make your layout like this.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#1A77BD" >
<Button
android:id="#+id/lodmore"
android:text="Load More..."
android:textColor="#color/white"
android:id="#+id/keywordsearchbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true""
android:drawableLeft="#drawable/load_more_off"
android:gravity="left|center_vertical"
android:background="#1A77BD"/>
<View
android:id="#+id/horizontolline"
android:layout_width="fill_parent"
android:layout_height="1dip"
android:layout_above="#id/loadmore"
android:background="#000000"/>
<ListView
android:id="#+id/android:list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_alignParentTop="true"
android:layout_above="#id/horizontolline/>
</RelativeLayout>

put scrollview over your root layout and remember only one layout node is allowed under scrollview.....
refer this doc:
http://developer.android.com/reference/android/widget/ScrollView.html