1

I am working on a UI design. I would like to make a UI like the image below:

enter image description here

But I have no idea on how to place images like that. I want it to be resizable when running on different device. Any key words to search in Google?

Thank you!

Adi Inbar
  • 12,097
  • 13
  • 56
  • 69
Kennett
  • 467
  • 2
  • 7
  • 17

3 Answers3

1

The android apps for google play market is similar to this design. You can check the design creation of this app.

here is a nice answer describing how you can create similar design

Community
  • 1
  • 1
stinepike
  • 54,068
  • 14
  • 92
  • 112
1

If you want to create a GridView with uneven rows similar to the design of the app that you posted in this picture there is a custom view on Github: maurycyw/StaggeredGridView

This will help in creating rows where the heights aren't the same. Here is an image that I pulled from http://www.androidviews.net showing this type of design and the view in action.

enter image description here

Hope this helps.

Brosa
  • 1,169
  • 9
  • 19
0

Use the relative layout. That's the best way to arrange views in that position. Afterwards you can give the corresponding background to each view and maybe a click event!

Here you can read more about relative layouts: http://developer.android.com/guide/topics/ui/layout/relative.html

Julian Mancera
  • 194
  • 1
  • 12
  • i can now arrange the position of imageviews,but there is a problem: i dont know how to set the size of each imageviews base of % of screen – Kennett Jul 05 '13 at 03:41
  • If you want to work with the width then give the value 0dp and give the corresponding weight that you want. For example, if you want one view to be 60% of the width and the other one 40% set to both the width property 0dp and to the first one give weight as 0.6 and to the other one 0.4. – Julian Mancera Jul 05 '13 at 04:06
  • http://stackoverflow.com/questions/3025048/set-imageviews-max-width-as-a-percent-of-its-parents-width,i am going to try this, but i dont know obj is what object – Kennett Jul 05 '13 at 04:14
  • In that example obj is the view that you want to modify. You can also check this [here](http://developer.android.com/reference/android/view/ViewGroup.LayoutParams.html) and another example is [here](http://stackoverflow.com/questions/2965662/how-do-you-setlayoutparams-for-an-imageview) – Julian Mancera Jul 05 '13 at 04:27