List of images that wraps - android

I have a LinearLayout with fixed view. I dynamically inject images in it (ImageViews) but I dunno in advance how many of them will be inserted. I'd like to have a layout where images wrap and go to a new line authomatically when they exceed the available width of the father (LinearLayout)
how do you recommend I should move?
thanks a lot

Define a Listview within the Linear Layout like below. Wrap your Linear Layout tags around it.
<ListView
android:id="#android:id/list"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:drawSelectorOnTop="false"
android:scrollbarAlwaysDrawVerticalTrack="true"
/>
Update this list view dynamically as you add images. This will solve your issues.

As I answered on a question asked a couple of hours before yours:
There is no layout manager in Android today that behaves like Swing's FlowLayout, where it wraps widgets onto multiple lines. It is theoretically possible for you to write one yourself, by looking at the open source code for LinearLayout, etc. and following the patterns they establish.
Sorry!

Related

TableLayout with RecyclerView

There is only two layout manager for RecyclerView: LinearLayoutManager and GridLayoutManager. Is there a way to use TableLayout as layout manager with RecyclerView? Any suggestion?
EDIT: I wonder if there is any solution without writing a layout manager from zero. TableLayout behaviour is enough for me, just want to add recycle feature for performance issues on handling large amount fo data.
And creating a table looking listview is not solve my problem I think, because my table is very dynamic, I don't know even column names, customer deciding all details of the table. So cells would be custom, column widths needs to be auto resizing depend on content length. I don't think listview can handle that.
Thanks in advance for helps.
There are many open source libraries and codes available to find out how it can be developed.
https://github.com/evrencoskun/TableView
https://github.com/HYY-yu/TableRecyclerView
https://github.com/Cleveroad/AdaptiveTableLayout
https://github.com/celerysoft/TableFixHeaders
Have a look at this library. Seems it's exactly what you need. It has a recycling system as well.
I tried this for making a table like structure, and it worked.
For your RecyclerView's adapter implementation,
create a Horizontalscrollview layout, and place all your elements inside it, in your adapter layout xml for each row.
In the main layout xml where you are adding the recycler view, add a HorizontalScrollView as its parent.
Now, add a TableLayout to the HorizontalScrollView
I am adding below code for adapter layout xml:
<HorizontalScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/horizontalScroll"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--Any custom layout here as per your need-->
</HorizontalScrollView>
I am adding below code for main layout xml:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<HorizontalScrollView>
<android.support.v7.widget.RecyclerView
android:id="#+id/empView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="select"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</HorizontalScrollView>
</TableLayout>
This will ensure that you are able to have a table like structure to scroll both horizontally and vertically using recyclerview.
The HorizontalscrollView enables you to horizontally scroll the entire list inside the TableLayout. The RecyclerView enables you to vertically scroll the list.
Hope this works for you.
Create a custom row with linearlayout and than attach that row to recyclerView Adapter this is only the solution for making a table like Structure in RecyclerView.

Adding Views Between Items in GridView

I have a scrollable GridView where the items have a decent amount of empty space between them. for some of the objects in the grid, I'd like to add arrow images leading from one to the other
For reference to what I mean, think of the World of Warcraft talent trees (http://calculators.iradei.eu/talents/mage). You'll see some of the talents have arrows leading from one item to the next.
The layout I'm dealing with just contains a gridview in a framelayout, nothing else
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="4"
android:scrollbars="none"
android:id="#+id/talent_tree_grid_view">
</GridView>
</FrameLayout>
I'm trying to add these ImageViews in code, as I don't think there is any way I could add this logic into the adapter for the GridView.
I've tried adding them as children of the parent FrameLayout, based on the x and y coords of the GridView items, and this works, but when scrolling the GridView, the arrows do not also scroll
I've also tried adding them directly as children of the GridView, but it does not support this behavior (it throws java.lang.UnsupportedOperationException)
Are there any ideas as to how I could add these imageviews between the gridview items?
This sounds very similar to Romain Guy's "Shelves" app where a custom GridView is used and the background image of a bookshelf scrolls. Take a look at the project here. Source for the custom GridView can be found in the file ShelvesView.java in the source code. A quick intro from Guy Romain is here;
For the arrows, you may want to consider a 9-patch drawable.
I have investigated the above approach a little more and have a sample app based upon
Google's Hello GridView example.
Taking this example app, I have built a custom GridView (DogsGridView.java) and connected the photos across empty cells similar to your example of World of Warcraft talent trees. I just use simple lines, but the class can be modified to connect cells with arrows or another graphic.
Here is a quick video with connecting lines. Here is another with 9-patch arrows.
The project source can be found here.

How to set no height for a widget in Android Studio?

I am learning Android development and I'm trying to make a simple calculator. I am having some problems with layout of the calculator. In my opinion, it would be too clunky to post the whole xml code, so I'm just going to post the snippets that matter in my opinion.
I made a vertical LinearLayout as the top-most parent, which then has 2 children, a horizontal LinearLayout, (which consists of a textView which shows your input and a button that tells to calculate) and a GridLayout, which would be 0-9 buttons and operators.
The problem is, the grid layout would be a 4x4 grid with buttons and when I want to set the First row of buttons, each button needs to get layout_height, which can't be left empty and if I set it's value to match_parent, then that button alone would fill up the whole screen.
So how can I solve this problem with layout_height, is there some workaround or would it be better to make multiple LinearLayouts for the grid? If you have any additional questions, feel free to ask so I can explain.
Here is the children LinearLayout and GridLayout xml code:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_weight="1"
android:background="#color/colorLight"
android:orientation="horizontal">
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8"
android:background="#color/colorLight"
android:>
Sorry, I misunderstand your question.
If you use API 21 or newer, you can use columnCount to get it.
Please refer to that answer or that answer
The best way to sort this out for various screen sizes is to use the weight attribute. For GridLayout, there is none, according to the documentation.
Check out this answer for ideas, such as subbing nested LinearLayouts.
GridLayout (not GridView) how to stretch all children evenly

How to set an imageView to not be fixed at a position

the xml file:
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/singleProp"
android:scrollbarAlwaysDrawVerticalTrack="true"
android:visibility="gone">
<ImageView
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/propertyImg"/>
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/propertyData"
android:layout_below="#id/propertyImg">
</ListView>
</RelativeLayout>
With the above codes, the image will be fixed at top-center position. With CSS terms in html, the style of that image view is style="position:fixed" but what I want is style="position:relative".
For example,
I hope the picture can illustrate the idea.
May I know how I should modify my codes?
Let me elaborate a bit more on mark.zhai`s answer, since it's the only one that I find to be the proper approach.
First of all I wanna point out that you should think about implementing your list with a RecyclerView instead of ListView (right now it's generally favoured to use a RecyclerView; ListView is getting kinda deprecated)...
If you want to be sure that your ImageView works nicely (scroll-wise) with your list (without too much "side-work" on scroll integration), you should implement it as a first item of your list. If you stick with your ListView you can use the header function of it and add your ImageView with ListView's method addHeaderView. If you decide to move to a RecyclerView (which I think you should), you can accomplish that in a bit more difficult manner (more on that for example here).
why don't u make the imageview an item of the listview
For this you need to create a custom listview which having the first item as a image view and later having all your list items. Probably you can control this in your adapter getview method by the use of position(int)
For example if Position is equal to '0' show only image view and if position is not equal to '0' show your rest elements by using Visibility
Note: here their might be a chance of performance issues as it is loading the unnecessary views every time
To achieve this, you need to scrolling the complete layout. In general case, when you fling on a list view, only the item within the list view moves.
Check this link.
I'm not entirely sure what you're asking, as I don't know a lot about CSS, but you can check out this link which describes aligning elements within a Relative Layout.
You might want to try adding alignParentLeft or alignParentRight.
Remember margins are external to the object and padding is internal. For example to move the image 20dp from the left you would:
<ImageView
android:layout_alignParentLeft="true"
android:layout_marginLeft="20dp"
android:layout_width="200dp"
android:layout_height="200dp"
android:id="#+id/propertyImg"/>
Here are some useful links about mastering Relative Layouts:
Relative Layout Params
Moving Elements Around in a Relative Layout Tutorial
Another RelativeLayout Example
Margins and Padding
Why don't you use layout_below to take your layout below whatever you want, and use layout_gravity to set it's gravity. You can check these Link to get you better understand, it will help you in these problem.

How to use multiple ListView/GridView in same UI?

I want to use multiple ListView/GridView within same User Interface; I don't want them to be expanded to their full length and placed under ScrollView.
If you want to learn about ListView, here is a nice tutorial. About your question, here is the similar one! Your question might even be duplicate of this.
I don't think that putting multiple ListView/GridView objects inside ScrollView is a good idea.
The biggest advantage of ListView/GridView is that they reuse View's. When you scroll a ListView what the system really does is to use fixed number of views, and swaps the view settings (text, image source etc.). This is done by requesting the getView(int,View,ViewGroup) method from the list Adapter.
What you are trying to do is to force the ListView/GridView to render all it's raws, which pretty much beats the whole purpose of using ListView/GridView in the first place.
Use LinearLayout inside the ScrollView instead, and then add Views dynamically from your Activity/Fragment
Just specify dimensions to your ListView/GridView that are not all match_parent.
Also, if you want to proportionally allocate say 50% and 50% of available height to your list and grid, put them in a LinearLayout and use the layout_weight mechanism:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ListView
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
... />
<GridView
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1"
... />
</LinearLayout>
you can set the layout to include how many listViews and gridViews as you wish. just choose a layout and set their sizes yourself. if you put them in a linearLayout, you can set a weight for each of them, to make their width/height proportional to the layout width/height.
However, do note that the more you put, the more cluttered the UI is.
Also note that Google suggests to never put listViews and gridViews inside ScrollViews (this was being talked about on the "the world of listView" lecture) .

Categories

Resources