Overlapping row in listview - android

How to create this below view.
1)using listview or
2)inflating custom view in scrollview.
This is not only problem.
If list view then how to overlap the rows.
Each row have different color and that will come from api webservice.
In listview, at each row i have problem with red part which i have marked in second image.
even each row background is different and that same color will appear in below row.
How to do texture effect in listview?

The issue breaks to many things:
How to draw overlapping views?
I would try setting negative values for vertical paddings, but it's a wild guess. Also, you can just divide the graphics and draw views as rectangles containing view N and some parts of the N+1th view.
What about non-rectangular hit area?
You can manually detect clicks using color picking, shapes, or just simplify the view's clickable area to a rectangle.
What about visibility detection?
ListView shows only views, which are visible. I'm not sure, but most likely it won't work with negative paddings or similar hacks.
Personally I would write a custom view with ListView-like adapter and dynamic row loading.

I have try a many ways, and the best and fastest is simple set negative divider to listview like so:
android:dividerHeight="-100dp"

Related

Enlarge (pop) element in grid, not pushing the other Views

I would like to know if there is an easy way of having a grid of elements, where when one of the elements is pressed,
This state:
Changes, to reveal the touched element (center element here)
For a start, I thought manually re-adding the element as over all others, then programmatically setting the position to keep it appear to be centered.
Is there an easier way, or do I have to break a bit of sweat for it?
As far as I know, Android animations don't affect views boundaries. Therefore, you could simply use setScale method of view to scale them up and down. Also, you could considering animations for better UX.
In Android there are two general way for displaying a grid of views:
Grid View
Grid Layout
In both approaches, this trick can be used.
For each cell (individual views) add a touch listener in which whenever the touch is of type down, scale it up and otherwise scale it to normal.
In Grid Views, you should do this in its adapter while for a grid layout you could iterate over its children and apply this.

Background repeat with limit

I have ListView. I would like to fill each row of ListView with a background from left to x% ...
So what I want is:
Item - 50% of background is colored
Item - 20% of background is colored
Item - 90% of background is colored
Is it possible to this?
Thanks for the answer!
As far as I know this is not possible out of the box. But I think you can archive is with a little trick.
You have to define a custom view for you rows. This view has a RelativeLayout as root element on which you can set the background color you want to have.
You then add another view element to the root element which covers a part of the root element. The background color of this element should be set to black and should be aligned to the right. The RelativeLayout provides many attributed you can use to arrange the elements.
Furthermore you have to write a custom adapter which handles the creation of the single list items views. When you override the getView() method where the view elements for each single row are created and inflated to the ListView, you calculate and set the width of the "cover"-element in such a ways that it covers a part of the root element.
The difficult part will be to calculate the width of the cover-element so that the rest of the root element which is not covered and still visible correspond to the percentage you want it to have.
Here you find a short tutorial about how to implement a custom Adapter with a custom view for the list items.
It is possible by the concept of custom layouts. This is a good article for to learn more. Also, I think you need to go through the NotePad tutorial in Android official site.

grouping texts plus images + round edges in android

i was requested to make in android a view that groups several items like checkboxes or text views in vertical rows, separated by transparent dividers while the background is with a certain alpha level and the edges are round.
I thought of two solutions and i hope for some feedback on good\bad or other solutions if you got'em.
just use regualr linear layout but have a single style A that uses a 9 patch as background, includes padding,margins and whatever i need to make it look like what i want. i then create another style A.up and A.down that represents the upper most and lower most items that will use a different 9-path with round corners.
inherit from linear layout, in the onMeasure and layoutChildren add to all the children some kind of space between them, i can create new attribute for it that can be customized in a style. i can override the dispatchDraw to paint the background for each view before it draws so i can paint my round borders, my only demand will be that each View added to this layout will have to be with transparent background.
So what do you think ?
Eventually i decided to use a List with customized divider.
It looks good, however a list got a very nasty bug when it comes down to items with states like buttons and clickable textViews,
you get no focus for the item and don't see the ornage bar
you don't seem to get the evnets flowing to the children of the View in the list.
I'm notsure how to resolve that one, i've seen numerous mails about it in the developres mailing list and here, most saying don't put statefull objects in a list.
So it mist not be the solution for me.
Nest thing i'll try is extending the normal layouts to have a bar in their bottom and use regualr linear layout with round corners drawable.

Handling an embedded view inside a ListView?

I have a quite problematic UI layout to implement, and I'm not sure if it's even possible using standard UI widgets. It looks something like this:
Picture 1
The green, lined thing is supposed to be a ListView, and the red rectangle is another View. This red View should be scrolled with the ListView, as if it's part of it. Some list-elements should also be narrower, because that embedded View gets in their way. Could you please recommend any ideas? Can this be done somehow with the Android UI framework? I was thinking about some kind of a floating View above the ListView, which reacts to the List's scrolling events too, but it doesn't seem like an elegant solution.
Thanks
I don't think you can accomplish that easily with a ListView. You could do the overlay using a FrameLayout, but it would be very awkward to get it to stay probably aligned as the user scrolls.
How many elements are you talking about?
I would probably use a LinearLayout within a ScrollPane to simulate the ListView.
Or, a TableLayout where the overlayed view is contained within a single, complex row.
I would set the green rows that the red block overlap and the red block as one big view in the listview. So the items in your listview would be (for the example pic) two green rows, then the view of three green rows and the overlapping red block, and then the remainder of the green rows.
Trying to have the red block on an overlay that scrolls with the listview sounds like more trouble than it's worth.

Android: Draw custom border around listview?

I've got a ListActivity with a ListView in it. I need to draw a repeating image around the border ("on top of it (I guess after the listview is renderered))
How can I hook in my own drawing code for this?
You can use a FrameLayout to cause the ListView to overlap with a view that fills the entire screen. In this background view you could tile an image, or write your own custom View with your own drawing method.
There is no border property in ListView, as far as I know.
Instead you can put ListView into a FrameLayout and set the Background color of the FrameLayout.
Finally, set some padding to FrameLayout in order to create a border effect.
Hi
There is one way I have used, but that can be done in XML only.
android:background="#ffffff"
android:divider="#ffcccccc"
android:dividerHeight="1dip"/>
What I am doing is, putting listview in a LinearLayout. Background color of the list is different than that of layout. There is a margin set for layout. Hence the distance between list and layout will appear like a border for the listview.
Hope this helps.

Categories

Resources