Develop Reference

Making a view displayed on top of other views and always onscreen

I have this layout
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/imgDisplay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<LinearLayout
android:id="#+id/MainLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#drawable/bg"
android:keepScreenOn="true"
tools:context=".MainActivity">
<TextView
style="#style/MyTextStyle"
android:id="#+id/MessageTextView"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_centerHorizontal="true"
android:visibility="gone"/>
<ImageButton
android:src="#drawable/ic_angry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/AngryImageButton"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:background="#null"
android:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/BottomLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:layout_below="#+id/FacesHolderFrameLayout"
android:orientation="horizontal"
android:foregroundGravity="bottom">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageButton
android:layout_weight="1"
android:src="#drawable/ic_insert_chart_white_48dp"
android:layout_width="wrap_content"
android:layout_height="54dp"
android:id="#+id/StatisticsImageButton"
android:background="#null"
android:layout_marginTop="20dp"
android:scaleType="fitCenter" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Which in general is an imageview that takes the whole screen and acts as a background image, the above it i have a linearlayout (MainLinearLayout) that hold vertically a textview, an imagebutton (AngryImageButton) and another linearlayout (BottomLinearLayout) that is just display a small image (like the logo) horizontally centered.
I want to be able to change programatically the size of the AngryImageButton and the BottomLinearLayout to be displayed in the bottom of the screen and to be always visible. I mean to be on top of the other views.
Right now the BottomLinearLayout appears in the center and below the MainLinearLayout and if i make the AngryImageButton very large, it pushes below the BottomLinearLayout until its not visible in the screen at all, i don't want that. I want it to be at the bottom, and always visible.
How i can accomplish that? Also i want the layout to work in both orientations

To bring View to front, you can use
myView.bringToFront()
or You can make use of ViewCompat and set its translation Z like below.
ViewCompat.setTranslationZ(view, 1)
here's the doc for bringToFront() bringToFront()

TextView in RelativeLayout improper alignment

I need to implement the following UI:
For this, I am using the following layout:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<ImageView
android:id="#+id/news_image0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="#dimen/news_cell0_imageview_min_height"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/news0_cell_image_overlay_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/news_image0"
android:layout_alignTop="#+id/news_image0"
android:layout_alignLeft="#+id/news_image0"
android:layout_alignStart="#+id/news_image0"
android:layout_alignEnd="#+id/news_image0"
android:layout_alignRight="#+id/news_image0"
android:background="#drawable/news_cell0_overlay_gradient">
<TextView
android:id="#+id/news_title0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_vertical|start"
android:layout_alignParentBottom="true"
android:maxLines="3"
android:ellipsize="end"
android:textColor="#color/colorNewsCellType0TitleText"
android:layout_margin="#dimen/news_cell0_textview_margin"
android:textSize="#dimen/news_cell0_title_text_size"
android:typeface="monospace" />
</RelativeLayout>
</RelativeLayout>
Into the ImageView I am loading image using Picasso from a URL. I am getting output correctly in most of the devices, but in some of the devices running android less than Lollipop, this shows up like the screenshot below. The text shows up at the top, instead of bottom. But I have set android:layout_alignParentBottom="true" for the TextView. The RelativeLayout is rendered correctly, and it fits the image(it has a background gradient, which can clearly be seen at the bottom of the image).
What is causing this problem and how can I solve this?

You can try with FRAMELAYOUT
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_launcher"
android:scaleType="fitCenter"
android:layout_height="fill_parent"
android:layout_width="fill_parent"/>
<TextView
android:text="Hi.."
android:textSize="17sp"
android:textStyle="bold"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:gravity="center|bottom"/>
</FrameLayout>

You can try this layout,
<?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="wrap_content"
android:background="#android:color/white">
<ImageView
android:id="#+id/news_image0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:minHeight="100dp"
android:scaleType="fitXY"/>
<TextView
android:id="#+id/news_title0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/news_image0"
android:layout_centerHorizontal="true"
android:ellipsize="end"
android:maxLines="3"
android:padding="12dp"
android:text="fsdsdfdsdsfsdfsdf"
android:textColor="#f00"
android:typeface="monospace"/>
</RelativeLayout>

How to create a stampcard type layout?

Im trying to create a stampcard system on my application but when its coming to laying out the stamps (they wil be invisable untill requested and shoud be spaced evenly in 2xrows of 3),
I cant get the view to sit right, I want the stamps to appear evenly over an Image view but it just wont happen, I tried to get my linear layout that will hold the 2 rows to stretch to the relative view ( who's size is set by the stampcard ImageView) so i could space them out evenly using their weight but it wouldn't stretch it would allways wrap the content any help would be appreciated.
The layout xml:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/main_fragment_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/home_page_title"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#drawable/bottom_bar"
android:gravity="center_horizontal|fill_vertical"
android:text="#string/home_fragment_title"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#FFFFFF"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/stamp_card_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/home_page_title"
android:gravity="center" >
<ImageView
android:id="#+id/the_stamp_card"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/stamp_card" />
<LinearLayout
android:id="#id/row_holder"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/stamp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<Button
android:id="#+id/scanBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/stamp_card_layout"
android:background="#drawable/brown_btn"
android:text="Scan?"
android:textColor="#FFFFFF"
android:textSize="23sp"
android:textStyle="bold"
android:typeface="normal" />
</RelativeLayout>
The Result:
I don't know what to do as they have to be over the image and stay relative to the stampcard and the only way I know how was using a relative layout and it is being designed for api 8 so it has to be simple :/
thanks in advanced!

The solution I came to is to just have multiple Stampcard images each with a one more stamp than the last and to cycle though them.

Top and bottom images overlay on imageview Issue

I want to make my layout like this as per below picture. this image i am able to see in iphone devices.
Here i used frame layout to achieve make overlays of top and bottom image bar on imageview but after using frame layout i can only able to see top imagebar overlay not bottom image bar? why its happens?
Forgot about the content of top and bottom iamge bar.. i am focusing to achieve this functionality.
Please make me correct if i am wrong in my code.
xml file code :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>

per android documentation
Child views are drawn in a stack, with the most recently added child on top.
so you need to arrange your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
in this case the actual location of the view is not determined by the order that the views are declared in the xml. For a linear layout this would be true however not so with the FrameLayout, in a framelayout the location is determined by gravity so your views will still be placed in the correct locations and they will be loaded in order they were declared, so first is the image view, then the first include is placed on top of that, then the second include is placed on top of that (however in this case they dont intersect so it doesn't matter).
edit2: after chatting with sam we were able to figure out the problem here's our solution
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/greenImage"
android:src="#2dff3d"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView1"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
note the usage of layout_gravity as apposed to just gravity.

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.