I am implementing a GridView which contains images.
I want to expand an image to occupy the whole row when it's clicked as shown in the images below.
I also want to show a button when the image is expanded so the user can take an action similar to how the ESPN app does that.
How can I achieve this?
---->
Surround your layout with a relative layout. Create a layout and a button inside it outside grid layout/inside relative layout. Set it's initial visibility to gone and match it's height, width to row you want it to encompass. Then in the onclick of the image set the layouts view to visible and it's button. Perhaps not perfect but it has the added benefit of allowing scrolling of your gridview while showing the big image you want.
Related
I currently have an activity with a horizontal scrollview, and inside it I have an add button (ImageView) to let the user add some images to the same horizontal scrollview after clicking it. How can I display a group of images from app resources (such as drawable) as a sort of "pop up" to let the user pick one, without changing the current activity?
You need to create recyclerView with horizontal layout. The adapter of the recyclerView will have the functionality to implement a button click. The onClick of the button will add items to the adapter. These items may contain your required images.On every button click you need to call notifyDataSetChanged.
This can be solved by inflating a custom xml layout (containing a GridView) on an AlertDialog. To display the images on the GridView you need to create and set a custom adapter to it. The adapter shall have a function getView(), which will return each of the Views to be shown on Grid cells. You can also use Picasso Library to load the images.
Here is a brief tutorial
http://www.101apps.co.za/articles/gridview-tutorial-using-the-picasso-library.html
Hint: Remember to define the number of columns of the grid, and calculate the size of each image based on the screen size. This way you can fit the amount you like on each row. You can do this for both portrait and landscape orientations by overriding the function onConfigurationChanged.
Hint 2: Remember a GridView already has the scroll property, which needs to be activated (android:scrollbars="horizontal"). Using a ScrollView as parent of a GridView will cause it to wrap the image, even with MATCH_PARENT property activated, causing layout problems.
I want to create a scroll animation with image on top of listview.
I want that when user scroll listview, image on top scaledown until 50dp of height. Than listview scroll without other anim. When user scroll up until the first item, image scaleup to fit the original size.
This behavior is present in wunderlist profile view and in this link is similar.pinterest demo
Can you help me to create this?
I'm using a scrollview with linearlayout, when user scroll in the scrollview image scaledown, but i'm not able to enable listview scroll.
you should check Android-OberservableScrollView to achieve what you need:
https://github.com/ksoichiro/Android-ObservableScrollView
I'm implementing the UI like the picture below. I'm using gridview to this layout. When user tap the item in gird. It show a circle overlap to the other item. I don't how to do it. at first I define a layout with the circle is gone and add onclicklistener. If user tap on that, I visible the circle, but the size of gridview also extend. Can you help me provide solution?
You can add this views in gridview parent layout preferable relative layout. You must add them after your grid view initsialisaton is done and onitemclick listener on grid item to make them visible. Exactly the one you've tryed but not in grid view but in the activity rootlayour.
I build a Listview, each item of this Listview in a layout composed of a Gallery.
On click of an item of the Gallery, I want to translate it to the top of my screen.
Even with setZAdjustment(Animation.ZORDER_TOP); my gallery cell doesn't move outside the gallery.
I assume it's because it can't go outside it's parent view.
Is there a way to do this ?
Thanks
I assume it's because it can't go outside it's parent view.
you are right.
There is no way that you can move that exact view. What you can do is make yourself a new ImageView and add it to your top level layout right over the top of the selected cell. Set its image by calling .getDrawingCache() on the gallery cell. Then you can animate your new ImageView to where ever you want.
Depending on what you want to do with it once it has been moved this might work out for you. But fair warning it is a somewhat convoluted process to achieve the effect you're after
I am trying to create an UI just like the attached image!
How do we create these types of UI? Is it a ListView? And how do we get the arrow button on the right hand side? How should I start with such kind of layouts?
You can achieve that with a LinearLayout too.
Have that LinearLayouts orientation be vertical. Create such list items (it isn't related to ListView) using RelativeLayout.
Have the icon be an ImageView aligned to its parent left and vertically centered, the text would be a normal TextView which is to the right of that icon and vertically centered as well and finally another ImageView but this time aligned to its parents right and vertically centered.
These is the receipt.
It's a ListView, you should learn how to write your own ArrayAdapter and returns in the getView method the View you want to be each row of the ListView.
AnDroidDraw lets you create the layout online and then later download it on your device. http://www.droiddraw.org/
Create appropriate custom ArrayAdapter for this layout.