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.
Related
I created a scrollable custom ViewGroup which has several >200 EditTexts in it (not all of them are shown at the same time - I am using a recycler). The problem I am having is that the scrolling is very slow.
Interestingly, I don't have the problem if I do one of the following
1) disable the editText [editText.setEnabled(false)]
or
2) If I change the view from EditText to TextView
Any ideas on what the issue could be?
EditText is huge. Take a look especially at all those methods it inherits.
Why don't you try using just one EditText with 199 custom TextViews or a large grid of rectangles drawn within a Canvas? You could always customize your TextViews (or your drawn grid of rectangles) to make them look like edit boxes, but only use one EditText for the cell that has the focus itself.
That's even how Excel works for some of the functionality it has. It can edit a cell directly (yes), but it also has a static cell on the upper left of the Excel spreadsheet to show you the content of a formula (that may already be rendered as a view within the focused cell itself). You could do something similar yourself. You could extend an EditText to do all the hard stuff, like auto-complete, etc, but you could just draw the text inside the rectangle that has focus (or insert it inside the particular TextView that has focus).
Take a look at this example:
https://github.com/dennis-sheil/android-spreadsheet
He seems to be using mostly TextViews (although TextViews are heavy too, I'm starting to think that the Canvas may be better for something like this, and that everything could be simulated with the drawing method, by everything I mean the blinking cursor, the highlighting of the cell, the character by character typing, etc). With the Canvas at least, you can easily tell it what part needs to be drawn, and what part is off the screen and doesn't need to be drawn, so you're less likely to get into memory problems.
It can be issue with focusing the EditText during the scroll or you create too much objects and it is slow. Use ListView with EditText. Recycle views using viewHolder pattern. It will be smooth but I'm not sure if it is what you are looking for.
There is compound drawable option in TextView to avoid using a parent ViewGroup and an ImageView next to TextView. Which is neat and faster in performance as said by lint. I'm trying to do something similar. A TextView with 2 texts inside, one aligned to left, one aligned to write. Sounds strange but it will only allowed for single line TextView.
And to do that, I can extend TextView and set its gravity to right side. And inside onDraw let the super class draw on right side, and then draw text on left side.
Problem is, I'm not really sure about all this. My question is, will there be a big performance difference ? I dont have any slower device to test. I will be using this TextView inside an item layout of GridView, Item layout already have many views, it would be nice if I could merge some views to one. But again, will there be a performance difference, like noticeable by user ? And if there will be, the approach I will be using by extending the TextView, is there any problem or I should try some other way ?
Thank you
From what I have read I would imagine that you are using a custom adapter for your GridView?
If so, cant you just use TableRow and insert 2 TextViews inside that with each layout weight set to 1. Then you will have 2 columns in one row?
Just an idea.
I am trying to make a ListView for showing lyrics. I have very little experience with making custom compound views. So I would like to know what my approach should be to make this view. The ListView must have these features
auto-scrolling based on the song (the timing information will be stored in the list adapter)
highlighting the current line which is being played on the audio
indentation on some lines to make it look more like a nicely formatted poem
users should not be able to scroll the list when the song is playing (i.e. the list is being auto-scrolled) but it should be scrollable when the song is paused
I don't know if the view should extend list view or not. If not then what should it extend and what should be my approach?
Frankly, I really don't have enough information to answer this completely, but this is what I would do:
If it were up to me, since you don't want a scroll capability at all (you want to make it appear as if it is scrolling, not to actually allow the user to scroll), I would not use any of the complex views like ListView or ScrollView, I would just write a custom view, simply extending View. I would override it's onDraw() method and use Canvas.drawText(...) to draw the words, having two different Paints, one for the current word and another for all other words. As for the "scrolling" effect, you can keep a number that represents the current top line that you can see, and add one to this number when you want to scroll to the next line. However to make it smooth you can manipulate where exactly you start drawing the texts and move it slowly upwards, so that it would appear that everything is scrolling down.
** Maybe it would be better to use SurfaceView here instead of just View, especially if you want a background image and smooth blending and better a look, since SurfaceView is much better for complex drawings **
If that is too complicated for you and you want to use existing views entirely without doing any of the drawing yourself, I would recommend a vertical ScrollView, you fill the ScrollView with horizontal LinearLayouts for each line, and each of those is filled with TextViews for every specific word. You can programatically build the TextViews and the LinearLayouts. Use ScrollView's scrollTo(...) or SmoothScrollTo(...) to scroll to the right location. You can prevent the user from scrolling by capturing all the motion events before they are used to scroll.
Both approaches will of course require you to maintain some form of data structure to hold the times each word is selected.
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"
I'm experimenting to see if the layout scheme I want to use is possible. I want to have an XML layout that's scrollable. Within that scrollable layout, I want to have a single line going horizontally across the screen (I used just a View with a fixed height and different color). When that horizontal line reaches the top of the screen, and as I scroll down through the layout, I want it to stop and remain at the top of the screen while being able to scroll through everything below it.
I've been messing around in XML trying to get it to work, basically putting a bunch of junk before it and after it.
Any ideas as to how that might work? Would I have to do something fancy with the java code to fix the red line at the top when the scroll position reaches a certain point? Your help would be greatly appreciated.
I am assuming you want something like Gmail app where when you scroll a mail the header sticks on top... To do this, you need 2 views. You have your regular scroller below and overlay a fixed view on top (you can use a relative layout to do this). When your cell goes past a certain spot, you want to populate and set the visibility of the fixed view to VISIBLE. This would give the impression that the view you want to 'stick' to the top really just got stuck rather than scrolled out of view. You'll have to work out the opposite scrolling scenario too based on the location and height of the scrolled cell/view.
HTH