I saw this somewhere and was wondering how to achieve this.
suppose i have a shelf background
and i have cover images of books. how can i put those images exactly on each wodden plates edges dynamically.Number of books are not fixed they might go beyond the capacity of shelf then shelf will also grow. Each level of shelf contains maximum 3 cover images of book.
can i do this on background or do i need to draw a shelf on canvas or something else??
Once I tried this kind of UI , There might be several approach , My approach was ,
I had a list view with background as 3D shelf , not like the one which you have shown which has white color wall and other things. Background(3D shelf) which I used to fit entire screen , and space each row of list item exactly to the row of 3D shelf and in list items have 3 buttons with horizontal orientation.
There is already an app called Shelves , Check UI there , it is open source , code there might help you better
http://www.androidpolice.com/2010/08/19/app-of-the-week-shelvescatalogue-your-possessions/
You can achieve it. But you need to be very precise calculation for the width of shelf.
take FrameLayout. Now In this FrameLayout
take ImageView with this shelf image. Add it to FrameLayout
In FrameLayout, take 4 LinearLayouts with horizontal orientation for 4 shelves and adjust its height and left margin exactly as per shelf
add ImageViews of books in those LinearLayouts
Related
I want to achieve something similar to the attached image
I was thinking of using TableLayout with 2 columns for each row.
There will be padding in order to be apart of each other. Then I will put white background for the cell. Lastly, I'll just add the ImageView and TextView.
The images and text are dynamically generated. I will get the image URL and display them.
So, are there any better or more efficient way for implementing what I want to achieve? TableLayout doesn't seem to be that efficient.
Your diagram looks pretty much like a grid - for which you can use a GridLayout in Android: https://developer.android.com/reference/android/widget/GridLayout.html
A layout that places its children in a rectangular grid.
The grid is composed of a set of infinitely thin lines that separate the viewing area into cells. Throughout the API, grid lines are referenced by grid indices. A grid with N columns has N + 1 grid indices that run from 0 through N inclusive. Regardless of how GridLayout is configured, grid index 0 is fixed to the leading edge of the container and grid index N is fixed to its trailing edge (after padding is taken into account).
Every one of the items in the grid can be a Cardview (https://developer.android.com/training/material/lists-cards.html) - and that way you will also benefit of a consistent look and feel with Android, without much effort.
Take into account that the cards (every item in the grid) will have the same height, tho: How to make a grid layout of CardViews with variable height?.
If the height of the elements will be variable, you should better take a look to the StaggeredGridLayoutManager: https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html
What you have to do is use a RecyclerView with a GridLayoutManager.
For a full working implementation: https://inducesmile.com/android/android-gridlayoutmanager-with-recyclerview-in-material-design/
If I want a bunch of objects that appear let's say middle, middle right and occupy have the ability to occupy any part of the screen, would I use gridlayout or relative layout and dp to customize the location?
I think I explained it badly. If I used an analogy, it would be like whack a mole with the hole screen. I was thinking of making a large amount of rows and columns in gridlayout or just using dp. Any insight or suggestions?
The thing about gridview is that its entire purpose is scrolling. If you have lots of data and want to scroll through it in a grid, that's the right answer. If you have a fixed amount of data you want to display in a grid, you want something else- a TableLayout likely.
I am creating an app that allows a user to build a custom 2D avatar by specifying things like shoes, socks, skin color, etc...
Currently my solution has been to create a .PNG of each item and then to 'stack' them all on top of each other in a RelativeLayout. So for example, I create an ImageView of two shoes and align the ImageView to the center of the relative layout and the bottom of the Relative Layout. Next I 'stack' the bottom edge of the socks to the top edge of the shoe. And on and on.
This method works, but I feel like I don't have much control over where the parts sit and would much rather be able to calculate the x,y coordinates at run time and place the images that way. For instance, this works well if all of the ImageViews are stacked, but if I need to place one ImageView 10 pixels below the top edge of another ImageView I can't do it (or at least I haven't figured out how yet).
I am looking for a solution that will allow me to control the x,y position of ImageViews and allow ImageView to be offset from each other.
If you'd rather place the images by x,y coordinates, then you should consider using a single view and simply drawing the images on top. See this doc on custom drawing. You'll find drawBitmap and some of its overloads useful.
i'm implementing a activity where the user can see images from different sizes and proportions on a GridView. I don't want to modify this images proportions.
Is it possible with GridViews or my best option is to build a TableLayout and just add each image to a TableRow?
Example: If it loads a 3x4 image, i want it to scale to satify some width and height constraint and them merge the necessary GridView's elements to keep the 3x4 proportion rate.
My objective is to reach something like this: https://www.dropbox.com/s/6jmt2x5ly1k2p92/grid.png
It seems you can as a custom gridview, I haven't tested my own, and too low to comment. So on this link you will find an image on the bottom using a gridview notice that the last item is larger that the rest and the middle left item is also off scaled.
i am trying to create the following UI in android app
In the above image all the five are to be image buttons. How to design this UI as like in the screen shot please help me friends....
Inside LinearLayout take RelativeLayout and make it centrally aligned.Then
Take first image Near me and set it's property.
Now take the second image Explore and set it to right of first image.
Place third image My network and place it below first image.
Fourth image Live set this to right of third image and and below second image.
Now center aligned your center image.
You will need to create 5 images, each of which has transparent areas. This layout type lets you position elements relative to the layout group itself, as well as to items within the group.
I'm not very familiar with Android advanced layout design, but the common layout objects give an idea:
There is a SurfaceView which gives you the ability to manipulate z-coördinates. In the SurfaceView you can then place a Grid/Relative/TableLayout for the 4 buttons (which you pre-render as rectangular images with transparency) and a simple Layout which centers and only contains the middle button.
If you then set the Z value of the first layout to less than that of the second you will get the view you want.