Develop Reference

Android whole screen gets dimmer or lighter depending on its child view's background

I have been facing a strange problem with layout. The problem is that the main layout have a background i.e. gray color (#DCDCDC). It consists of a child which is ScrollView with vertical LinearLayout. It contains 2 views: one is TextView with black background and next is google map.
Now the problem is: when the TextView becomes visible it is ok. But when ScrollView is scrolled to make the map visible whole screen gets dimmer which is not desirable from the consistency point of view.
And the surprising thing is that the problem is only in case of 4.x versions of Android.
Following is the layout:
<?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="#color/grey"
android:orientation="vertical"
android:padding="5dp" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp" >
<Button
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:background="#drawable/_btn_back"
android:onClick="clickHandler"
android:paddingLeft="15dp"
android:paddingRight="10dp"
android:text="#string/terms_and_condition_terug"
android:textColor="#color/white"
android:textStyle="normal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal" />
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" />
<ImageView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_marginRight="10dp"
android:clickable="true"
android:onClick="clickHandler"
android:src="#drawable/_info" />
</LinearLayout>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView
android:layout_width="fill_parent"
android:layout_height="700dp"
android:background="#drawable/itemlistbackground" />
<com.readystatesoftware.maps.TapControlledMapView
android:id="#+id/mapview"
android:layout_width="fill_parent"
android:layout_height="700dp"
android:layout_weight="1"
android:apiKey="#string/mapApiKey"
android:clickable="true" />
</LinearLayout>
</ScrollView>
</LinearLayout>
And following is the screenshot when the TextView is visible
and following screenshot was taken when map was visible
If you look carefully at those screen second image is dimmer than the first which is not desired. I don't want the dimmer screen while showing map in it. Please help me out.

I cut out pieces of the grey border to compare them next to each other, they look the same to me. There is also a gradient in the first screenshot which gives it a glossier feel as well.

Android stacked views

The view that I would like to have would be shown in the figure.

For that you can take FrameLayout.
For example - 1:
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:src="#drawable/icon"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="Learn-Android.com"
android:textSize="24sp"
android:textColor="#000000"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center"/>
</FrameLayout>
Update:
For Example - 2: Superb example and Trick, found here: http://www.curious-creature.org/2009/03/01/android-layout-tricks-3-optimize-part-1/
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="center"
android:src="#drawable/golden_gate" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dip"
android:layout_gravity="center_horizontal|bottom"
android:padding="12dip"
android:background="#AA000000"
android:textColor="#ffffffff"
android:text="Golden Gate" />
</FrameLayout>

Putting the 2 custom views inside a relative layout will give what you've shown in the image.
Yes the customview2 will be transparent in the areas where you don't draw anything. To avoid that you will need to set a background to that view.

How to avoid space between imageview and gridview in linearlayout

I have a image view and grid view in my .xml file. When I am executing this file its getting some space between grid view and image view. How to avoid this space...can any one help me to solve this problem.
thanks in advance...
my xml code is:
android:layout_width="0px"
android:layout_height="0px">
</Button>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/prevMonth"
android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
<Button
android:id="#+id/currentMonth"
android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</Button>
<ImageView
android:id="#+id/nextMonth"
android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</ImageView>
</LinearLayout>
<LinearLayout
android:layout_gravity="bottom|center_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/calendarheader"
android:src="#drawable/blue_bg_with_text2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
</ImageView>
</LinearLayout>
<GridView
android:id="#+id/calendar"
android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
</GridView>

You should try setting the android:gravity attribute correctly, and it has to work:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:gravity="bottom|center_horizontal"
android:layout_width="fill_parent" android:layout_height="wrap_content">
<ImageView android:id="#+id/calendarheader" android:src="#color/blue_start"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:minWidth="250dp" android:minHeight="30dp">
</ImageView>
</LinearLayout>
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:background="#color/blue_start">
</GridView>
</LinearLayout>
i'm using here simple color background, and there is no gap:
If you still having the problem, then you should see your blue_bg_with_text2 image, whether it has any empty pixels at the bottom.
ps: ignore the android:minWidth="250dp" android:minHeight="30dp" part, it is there to imitate an image with that size.
Update
Here is the same view using RelativeLayout (it's a bit clearer at least for me):
<?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">
<Button android:id="#+id/selectedDayMonthYear"
android:textColor="#000000" android:layout_gravity="center"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_width="0px" android:layout_height="0px" />
<ImageView android:id="#+id/prevMonth" android:src="#drawable/cal_left_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="#+id/nextMonth" android:src="#drawable/cal_right_arrow_off2"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentRight="true" />
<Button android:id="#+id/currentMonth" android:layout_weight="0.6"
android:textAppearance="?android:attr/textAppearanceMedium"
android:background="#drawable/calendar_bar2" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/prevMonth"
android:layout_toLeftOf="#id/nextMonth"
android:layout_alignBottom="#id/prevMonth"
android:layout_alignTop="#id/prevMonth" />
<ImageView android:id="#+id/calendarheader" android:src="#drawable/calendarheader"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:minHeight="25dp"
android:layout_centerInParent="true"
android:layout_below="#id/currentMonth"
android:layout_margin="0dp"
android:scaleType="fitXY" />
<GridView android:id="#+id/calendar" android:numColumns="7"
android:layout_gravity="top" android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/calendarheader"
android:layout_margin="0dp"
android:background="#color/white_fader_end">
</GridView>
</RelativeLayout>
I've added to it my resources as background (two of them are actually screenshots from yours).
What i observed is, you must
either use a static image for your
calendar header background, or,
if you use an xml drawable, you have
to drop the stroke element from it / set its android:width to 0
otherwise it will add an unnecessary gap around your view's drawable, that is as wide as the stroke width you've specified.
my output using static images as backgrounds looks this way:
Update 2
The problem is not between your calendar header and gridView, but inside your gridView.
It has a 'padding' of 5 px inside (not real padding, see how it gets there):
The default selector for the GridView is a 9x9 patch rectangle with a border of 5px.
That 5 px is visible all around your gridView.
You can specify a different listSelector for this grid either by xml:
android:listSelector="#drawable/grid_selector"
or from code (onCreate):
gridView.setSelector(R.drawable.grid_selector);
Now if your grid_selector is an image or is a drawable xml without any margins, then the gap that causes the problem is gone.
You can also hide that gap, by setting a background color to your gridView, that matches or grandients the calendar header's background color.

trouble with nested layouts

I'm just beginning Android and have gotten myself stuck. I've made a simple app/view. The idea is draw a line-maze in the top, with motion buttons on the bottom. My app only draws an x with a couple lines in the frame, but that works. The problem is that my buttons are being drawn too far down, and are clipped in height.
I assume the problem is all in 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">
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" >
<none.maze.MazeView
android:id="#+id/maze"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="#+id/text"
android:text="#string/maze_layout_text_text"
android:visibility="visible"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center_horizontal"
android:textColor="#ff8888ff"
android:textSize="24sp"/>
</RelativeLayout>
</FrameLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left"
android:layout_weight="1"
/>
<Button
android:id="#+id/forward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Forward"
android:layout_weight="1"
/>
<Button
android:id="#+id/right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right"
android:layout_weight="1"
/>
</LinearLayout>
</LinearLayout>

I think you shouldn't use layout_height="fill_parent" and layout_weight at the same time. Try to set layout_height="0dip" and layout_weight="1" for the FrameLayout and layout_height="wrap_content" for the lower LinearLayout. The lower LinearLayout mustn't have the layout_weight attribute.

Use Hierarchy Viewer to debug your layout. Its pretty cool.

Your entire layout is just way too bloated and ineffective. You use way too many ViewGroups. I recommend reading about RelativeLayouts and especially the entire Layout Tricks series.

Balloon chat application issues

I am doing a simple chat application and I want to show balloons similar to the iphone's sms app.
So I am doing an Activity with a ListView with a certain layout.
This are my layouts:
/* Activity Layout */
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ListView android:id="#+id/chat_log"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stackFromBottom="true"
android:layout_marginTop="50dp"
android:transcriptMode="alwaysScroll"
android:layout_weight="1"
android:cacheColorHint="#00000000"
android:clickable="false"
/>
<LinearLayout android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<EditText android:id="#+id/chat_input_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_gravity="bottom"
/>
<Button android:id="#+id/chat_send_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/chat_send_button"
/>
</LinearLayout>
</LinearLayout>
Other:
/* Row Layout */
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/userprofile_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/chat_ballon_left" >
<TextView
android:id="#+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="2dp"
android:text="haasdasdasdasdasdasdasdoo" />
</FrameLayout>
Here's the result.
My issues:
The gray line which I would like to remove.
Text is not using the whole space.
Somehow even thought I've added android:clickable="false" the balloons are clickable.

The FrameLayout is unnecessary, so use the TextView as a root element (with the chat_ballon_left background of course). Set the width to match_parent so that the text takes the whole space.
BTW nice baloons, don't forget to have hdpi versions too :)