Develop Reference

Android transparent toolbar over an ImageView

I'm trying to have a transparent toolbar,
such that it will be shown on top of an ImageView which is set as follow:
<ImageView
android:layout_width="fill_parent"
android:layout_height="0px"
android:layout_weight="8"
android:scaleType="center"
android:id="#+id/imageView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:elevation="0dp"
/>
Illustration (blue area is an ImageView):
so, it is transparent, but it pushes the ImageView down, instead of being on top of it.
I also tried using android:elevation, but it didn't help.

Use frame layout
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
// Your imageview
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
//your toolbar
</FrameLayout>
This should help

Toolbar is just ViewGroup. So consider making layout like Relative layout.
In Relative layout, u have such order : the lower position in layout code, then this view would be considered as highest layer of layout. So put your views in correct order and you will achieve desired result. Worked for me many times before.

aChartEngine Plots pushed off top off ScrollView

I've been struggling with this problem for awhile now. Basically, I've created a class that returns me a properly stylized GraphicalView chart; I have one class for bar charts and another for pie charts (I used renderer.setInScroll(true) BTW). I populate my Activity with a few charts and a few TextViews, but the more I add Views (any View) they are pushed off the top of the screen and there is a big empty space at the bottom of the scroll view.
My XML:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/scrollingProfilePaid"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="00dp"
android:orientation="vertical">
<TextView
android:id="#+id/totalScore"
android:layout_width="wrap_content"
android:layout_height="350dp"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastScoresChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<TextView
android:id="#+id/totalTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<TextView
android:id="#+id/totalAverageResponseTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
style="#style/GameTextWhite"
/>
<LinearLayout
android:id="#+id/pastTimesChart"
android:layout_width="fill_parent"
android:layout_height="350dp"
android:orientation="vertical"/>
<!--...........-->
</LinearLayout>
</ScrollView>
What I've tried:
1.ScrollView->android:fillViewport="true"
2.Instead of specifying a height for the charts I set it in the java class using pastScoresChart.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, (int)(dens*350)));
3.Wrapping the ScrollView in a , using a child Relative Layout with android:alignParentTop="true" as the header, another child Relative Layout with android:alignParentBottom="true" as the footer, and changing the ScrollView to android:alignBelow="#id/header". This just made the Scrollview about 40px tall, seemingly making the problem worse.
4.Oodles of other things that I can't recall this second.
I've found a workaround of setting android:marginTop="500dp" (or a similarly large value) in the ScrollView will push the Views back down into their approximate respective positions. Unfortunately it is difficult to get it to fit exactly, and it worries me for device compatibliity. Any suggestions?

The empty space at the bottom of the ScrollView must be because of it's child (LinearLayout) attribute android:layout_gravity="center". Try to use like this:
<LinearLayout
android:id="#+id/paidLayoutLinearParent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
OBS 1: The android:layout_marginTop="00dp" attribute is unnecessary.
OBS 2: fill_parent is deprecated starting from API Level 8 and is replaced by match_parent. So, use match_parent. More on: http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html
OBS 3: Here is a tip about debugging layouts: change the background color of the views to see what are the bounds of each view.

Android - How to show a vertical line on the background of a ListView (and according to row height)?

How to show a vertical line on the background, such as the one highlighted in blue on the image below?
In this example, I have a ListView with ImageView elements (and TextView, but it is not related to the line), and I want a vertical line on the background of these items to feel like they are "connected" to each one.
And also, note that the vertical line does not fill all the background.
The vertical line is on the left, and it is not equal for the all cases. Sometimes it fills all the row height (in most of ListView rows) and sometimes it just fills the half of row height (in the last item of the ListView and outside of the ListView, on the top, where we can see the big ImageView with the star icon).
Updated
I tried the suggestion proposed by Hellboy, and it almost work perfectly. I modified the proposed code for my case:
<RelativeLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="15dp">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#3399CC"
android:gravity="center"
android:layout_centerHorizontal="true"/>
<ImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:gravity="center"
android:background="#android:color/holo_blue_light" >
</ImageView>
</RelativeLayout>
the RelativeLayout with the width="40dp" (the same as the original ImageView I was working with), height="match_parent (the same as he said), gravity="center" (to let them in the center of the row height) and layout_marginLeft="15dp" (to let a space to the left margin). In the ImageView, I added marginTop="10dp" and marginBottom="10dp", and with it, the blue vertical line appears. But I have other elements in the same row, so I have a parent layout (a linear layout). My parent layout is:
<?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="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:id="#+id/linearlayoutservicerow">
So, this parent layout above, has the described RelativeLayout and other LinearLayout with the other row elements. But the code results in flattened images. Why does this happen?! It seems like the RelativeLayout consider its height as the ImageView height (40dp) and does consider its marginTop and marginBottom, and with this the image is flattened.
Waiting more answers to this problem. I'll try another alternatives.

You can replace your ImageView with something like this:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:layout_width="4dp"
android:layout_height="match_parent"
android:background="#color/navy_blue"
android:layout_centerHorizontal="true"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="#drawable/image"/>
</RelativeLayout>
and of course in your first and last element you need to manipulate the height of the View and align it to Top or Bottom

I got it.
I've persisted in trying to fix the problem of the Updated section of my question (based on the solution initially proposed by #Hellboy) and I got results! So, how I achieved an answer to my own question, I decided to put as an answer.
The first step was to configure the XML file such as the code below.
Part of the final XML corresponding to the row layout:
<?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="match_parent"
android:orientation="horizontal"
android:gravity="center"
android:id="#+id/linearlayoutservicerow">
<RelativeLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:gravity="center"
android:layout_marginLeft="15dp">
<View
android:layout_width="4dp"
android:id="#+id/verticallineview"
android:layout_height="match_parent"
android:background="#3399CC"
android:gravity="center"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:layout_width="40dp"
android:layout_height="match_parent"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp">
<ImageView
android:id="#+id/user_image"
android:layout_width="40dp"
android:layout_height="40dp"
android:gravity="center"
android:background="#android:color/holo_blue_light" >
</ImageView>
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layoutotherrowelements">
</LinearLayout>
</LinearLayout>
Explaining the XML:
Here we have the parent layout (linearlayoutservicerow) and inside it: a RelativeLayout (proposed by #HellBoym, with the structured discussed in the final of my question) and the LinearLayout to other elements of the row (layoutotherrowelements). Summarizing... What I modified?
The initial code resulted in flattened images because the RelativeLayout (parent) did not consider the ImageView marginTop and marginBottom, so the image was flattened vertically. (And if we let without margin, the RelativeLayout would mantain the same size and the vertical line would not appear on the top and on the bottom of image.) We must have a space between the ImageView and the RelativeLayout initially proposed, in order to show the line, but if it does not recognize the margin, how to create this space?
I just "encapsulated" the ImageView in another RelativeLayout (inside that parent RelativeLayout), and changed the margin parameters of the ImageView to padding parameters of this capsule RelativeLayout.
The problem of the last row
It results in the layout with a line background, but we still have the problem of the last row. In fact, this row is different, and in this case, it must have its height modified to not have the same parent's height. I decided to put at least, the ImageView's height and it worked! Remember to convert the value in dp to pixel, because the function getLayoutParams has all parameters expressed in pixels.
So, in the Adapter, we put the following code:
if(position==(getCount()-1)){
View my_line = (View)
row.findViewById(R.id.verticallineview);
//40dp, this is the ImageView height
int dpsize = 40;
//convert the height in dp unit to pixel (because the parameter is in px)
int px = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpsize, context.getResources().getDisplayMetrics());
my_line.getLayoutParams().height = px;
}
And that is it!!!
It is worth mentioning that #dinesh sharma proposed other interesting alternative using 9-patch, that I will try later.
I did not want to use image as background (that is why I started asking about drawable), because my final goal was to improve this solution to make all dynamic (including the vertical line color), and I believe with image I could not achieve it. But in my original question I did not mention that, so if I have success with this other approach, I will accept it as correct answer.
Thanks for all your help! In my current solution I used the #Hellboy's clue of using a RelativeLayout and a View, and the #dinesh sharma's clue to verify if it is the last row of the ListView. I hope this answer and the others helps more people with similar problems.

You can use transparent 9-patch image as a background for you list view.
For creating nine-patch image please follow this:
http://developer.android.com/tools/help/draw9patch.html

Now verified answer
your image in item layout:
<RelativeLayout
android:id="#+id/rl"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#drawable/m"
android:paddingBottom="10dp"
android:paddingTop="10dp" >
<ImageView
android:id="#+id/grid_item_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
three bg nine patch images for drawable
Handling in Adapter:
if(position==0)
holder.rl.setBackgroundResource(R.drawable.b);
if(position==(getCount()-1))
holder.rl.setBackgroundResource(R.drawable.t);
Finaly got output:

ImageView won't fill parent

I have a ScrollView on one of my screens. I want the right edge to have a shadow. I decided the easiest way to do this was to make the child of the ScrollView a RelativeLayout, and have two children of the RelativeLayout -- one being a LinearLayout that will house the layout of the screen, and the second View being the shadow.
Like so...
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/shadow"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
</ScrollView>
Unfortunately, this doesn't quite work. The ImageView is forcing its dimensions to be the size of the image file. It will not stretch vertically to be the height of the RelativeLayout. I've also tried "match_parent" to no avail. The image is a 9-patch.
Ideas?

Applying drawable content as the source of an ImageView somewhat carries with it an inherent requirement that you want the view to do what it can to accomodate the content without modifying the content itself very much. Typically, this is the behavior you would want out of an ImageView.
What you really want is the behavior you get by setting drawable content as the background of a view, for which you don't really need ImageView at all. A background is designed to simply stretch, fill, etc. to whatever size the view is. Also, since you are using RelativeLayout you can tell the view to match the bound of the view you are shadowing by adding an id and some extra layout_alignparameters.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/content_layout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<View
android:layout_width="11dp"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignTop="#id/content_layout"
android:layout_alignBottom="#id/content_layout"
android:background="#drawable/shadow"
/>
</RelativeLayout>

try this
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY"
android:layout_alignParentRight="true"
/>
here is what I get
and code id
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true"
android:scrollbars="none" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<!-- stuff -->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:background="#drawable/ic_launcher"
android:scaleType="fitXY" />
</RelativeLayout>
</ScrollView>

Your problem has nothing to do with the ImageView or 9-patch itself, but rather with the fact that you're wrapping everything in a ScrollView. A ScrollView will automatically force its children direct child to wrap its content, no matter whether you tell it to FILL_PARENT or MATCH_PARENT - both do exactly the same thing by the way; the only difference is the name, which reflects better the actual behaviour of the flag.
Fortunately ScrollView provides a way to force it to fill the viewport with a flag, which will make the behaviour pretty similar to setting FILL_PARENT to a regular view. Either add the attribute android:fillViewport or use setFillViewport() from code.
Edit: Just to be clear, you need to set that flag on the ScrollView. Also, if it's the ScrollView that should have the shadow, can you not send your 9-patch as background to it? I suppose it does depend on what your actual image looks like. Regarding you comment: yes, the RelativeLayout is flexible in terms of positioning and sizing children, but any child will still be bound to the size of its parent.
I do have the feeling that some of us may be working towards something different than what you have in mind. It would definitely help to clarify things with a simple drawing.

You wanted a Shadow towards the right of your image, Then use single layout with Horizontal Orientation, It's good that you have decide to use Relative Layout. Use
android:orientation="vertical"
inside this layout, add those two images. If you still have a doubt, give me those two images or sample images, i will give you the code

Positioning ListViews inside FrameLayout

So I'm trying to create a screen which has a ListView and over that I need to be able to float another custom horizontal ListView, right at the bottom edge of the screen. When the user scrolls on the vertical listview, the horizontal one would go invisible and reappear when the scrolling stops. I figured FrameLayout would be my best bet for overlapping views. But I can't seem to make this work. The Horizontal listview seems to occupy the whole screen space. Any ideas? Is this even the right approach? I wish to have something similar to a fixed div in HTML.
Here's my XML:
UPDATE-1: Used RelativeLayout as suggested, but still a no-go. The HorizontalListView still seems to be occupying the whole screen. I'm using the HorizintalListView from here
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:id="#+id/messages"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_marginTop="5dip" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" >
<test.ui.app.HorizontalListView
android:id="#+id/folders"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF" />
</RelativeLayout>
</RelativeLayout>

I got it to work by setting the height of the inner Relative Layout myself instead of using 'wrap_content'.
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<ListView
android:id="#+id/messages"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="80dip"
android:layout_alignParentBottom="true" >
<test.ui.app.HorizontalListView
android:id="#+id/folders"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF" />
</RelativeLayout>
</RelativeLayout>

You cannot adjust the views inaide FrameLayout.So it will be better for you to go for RelativeLayout.
Or you can put your listviews inside RelativeLayout or linearlayout and then you can adjust.
Hope this will help you. :)

Like the other answerer said, you could use a RelativeLayout:
set android:layout_alignParentLeft|Right|Top|Bottom="true" for the vertical list view
set android:layout_alignParentLeft|Right|Bottom="true" for the horizontal list view (and height to "wrap_content" or fixed size)
Or if you reeeeaaaally want to stick with FrameLayout (maybe for performance reasons...), you could somply add a huge android:layout_marginTop to the horizontal list view. But this solution is uglier, since you need to set exact values. For example if the whole screen is 320dp height, and you want the horizontal list view to be 80dp height, you need to set the top margin to 240dp. However if you run this on a screen with different aspect ratio, the horizontal list view will be ugly.