Android: Horizontal Image Gridview/Scroll? - java

Have any of you tried out any Horizontal Scrolls/Gridviews to display Images similar to the Facebook mobile image viewer that allows the user to scroll images horizontal one after the other. The android gallery is another example.
I tried to implement this using THIS tutorial but I didn't get the desired output. Any other codes and layouts you guys have tried?
EDITED:
What I basically want is to implement a horizontal scrolling of images as seen on THIS image. As you can see the gridview displays image one after the other. That tutorial caused some errors therefore I didn't continue with it.
I tried the following layout
XML Layout:
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="1">
</android.support.v4.view.ViewPager>

You can do something like that with Viewpager:
Multiple pages at the same time on a ViewPager
As for horizontal scroll in GridView here're some links:
https://github.com/jess-anders/two-way-gridview
https://stackoverflow.com/a/5537327
https://stackoverflow.com/a/15919257

Related

Creating Android Studio Layout with complete screen as background

I have already created complete screens for my App in the development process using spark. These images are the complete screens including buttons etc. I have set them as android: background and put buttons with android:background="#null" in the places where the buttons are in the images. My Intention was to avoid designing all the screens in android studio and instead just setting the whole screen as a background and laying invisible buttons in the correct spots for functionality. Now I have run into the Problem that my Buttons are in different places depending on the device. I am using relative layouts for this. Thank you so much for your help!
my Buttons are in different places depending on the device. I am using relative layouts for this.
I would recommend that you use constraintlayout if you want things to scale. Then use vertical & horizontal bias to position your buttons where they need to be.
If you are struggling with your parent layout changing between devices, use the constraintDimensionRatio, like this:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="0dp"
android:layout_height="0dp"
android:id="#+id/layoutMap"
app:layout_constraintDimensionRatio="H, 2 : 1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.constraintlayout.widget.ConstraintLayout>
You may need to create separate layouts for portrait and landscape if need be.

Zoomable FrameLayout got absolute width and height but Views in it do not match these dimensions

Okey, so hello everyone.
I am pretty new to app developing.
Introduction:
In my app I have activity with RelativeLayout. In this layout I have zoomable FrameLayout. In this layout I have to have only one layout. In my case It is another RelativeLayout. Finally in this layout I have number of ImageViews. Purpose of this activity is show layers of map (drawables) via switches.
Code here:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorDarkBlueGrey"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<com.example.cotwcompanion.ZoomableView
android:id="#+id/zoomView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/mapBCG"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:contentDescription="#string/map_name"/>
<!-- Here I generate other ImageViews with 'same' attributes -->
</RelativeLayout>
</com.example.cotwcompanion.ZoomableView>
<!-- Here are other layouts -->
</RelativeLayout>
Problem:
My problem is more or less visual. I would like to show these layers (1:1 ratio) as big as display allows (vertically). Therefor I need to overlap display's width.
What I need It to look like:
IMAGE
What I have tried:
I thought FrameLayout would do it. So I tried to set its width
and height programmatically, so It fits screen height and has
the same width, because of 1:1 ratio mentioned before. If I try to log these dimensions, it seems like all is set. Because
of match_parent attribute in ImageViews and their parent RelativeLayout, It should therefor do everything else and stretch these Views to fill FrameLayout. But everything just
only fits screen width.
Image of result here:
IMAGE
Code here:
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(height, height);
FrameLayout frame = findViewById(R.id.zoomView);
frame.setLayoutParams(lp);
I tried the same method with normal FrameLayout but got same
result.
I also tried to exchange FrameLayout with
HorizontalScrollView and custom zoomable ImageView. This worked more or less well, but problem was when I zoomed the map.
Horizontal scroll disrupt every movement with zoomed map. Therefor I
tried to create custom HorizontalScrollView with methods to
disable scroll. Even when I catched zoomed state from ImageView
and set scroll to notEnabled, It still did not work.
And there you go. Like I said zooming methods and everything other works. I just need to somehow have bigger View than display allows.
EDIT [21.11.2020]:
So as Daxi suggested I tried to change RelativeLayout in ZoomableLayout to ConstraintLayout. I also changed ZoomableLayout to extend from ConstraintLayout. That almost solved my problem. However I could not scroll to left and right. I could only zoom. So I took one of my last tried solution and wrapped ZoomableView with HorizontalScrollView. Everything seemed okey. However I now just cannot scroll to the very 'start' or 'end' of the ImageView. It seems like I can only scroll within the base width of HorizontalScrollView and not width of ImageView. So I now need to solve this problem.
Code here:
<RelativeLayout>
<HorizontalScrollView>
<ZoomableView extends ConstraintLayout>
<ConstraintLayout>
<ImageView/>
.
.
</ConstraintLayout>
</ZoomableView>
</HorizontalScrollView>
.
.
</RelativeLayout>
I am so sorry if this is somehow a duplicate of other problem already described on stackoverflow, but I searched for solution over two days now and still did not find any. Maybe I am bad finder. If this will be the case, feel free to tell me. I will delete it if needed.
If there will be some pretty fine answer and solution I would really appreciate It. Thank you.
Would you consider using ConstraintLayouts? If yes, you could use it like this
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/mapLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/mapBCG"
android:layout_width="0dp"
android:layout_height="match_parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:contentDescription="#string/map_name"/>
<!-- Here I generate other ImageViews with 'same' attributes -->
</androidx.constraintlayout.widget.ConstraintLayout>
However, I am not sure how exactly this will interact with your ZoomableView

2D scrolling View for Images and Buttons (on smaller screens)

How can you create larger views than the screen real-estate in Android?
I am trying to recreate a view from my iOS project in Android. The view consists of a first column of static images and then a 20x13 grid of buttons (yes that's 260 in total!) which will generate another activity when clicked:
Each button throws out an integer and there is a daily background image change.
The problem for phones is screen real-estate. Fitting everything on one screen makes the buttons too small to touch properly. In the iPhone app I created bigger buttons set offscreen within a ScrollView that the user could then scroll to. To my knowledge Android does not do a 2d version of ScrollView. I have tried to use gridview dynamically, for example:
However, the dynamic buttons generated need to go VERTICALLY, they are too small to press on smaller screens AND it only scrolls in one direction.
I have also been thinking about 14 Vertical Linear/RelativeLayouts but again I am limited to screen dimensions which will make the buttons too small.
I did implement code from this link which works perfectly well. You create a custom scrollView and then insert it within your XML file:
<RelativeLayout
android:id="#+id/scene_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawingCacheQuality="low"
android:orientation="horizontal" >
<com.example.yourappname.TwoDScrollView
android:id="#+id/scene_scroller"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:drawingCacheQuality="low" >
</com.example.yourappname.TwoDScrollView>
</RelativeLayout>
You can then put your items in a layout and be sure to sort the width/height parameters to what you need - match_parent will fix your layout to the screen.

Removing all other areas except selected areas in mapview

Suppose I have made a diagram e.g a circle on android mapView. Now I want to remove/blackout/hide all other maps except that portion. I can zoom in out that portion too
Is this possible?
Best Regards
I have a similar problem of make map view inside certain area.not sure it will help you or not but you can try it.
What you should do is take image of circle(Background is Transparent) and put your image as background in Linear layout. and inside that LinearLayout you can put map view.
your xml will Look like below.
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/Circle_back" >
<com.google.android.maps.MapView
android:id="#+id/whereami_mapview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:apiKey="YOUR API KEY"
android:clickable="true" />
</LinearLayout>
</LinearLayout>
i have to view it inside rectangle box. below is the similar screen shot you will get while running. you d'nt need to hide rest of the part of Map.
hope it will help some how what are you looking for.
Make a trick
Zoom will work in your case. Set zoom level and
Use android:clickable="false" in your layout file.
;)

Android. How to make dialog buttons appear a bit outside the dialog

I need to have a dialog (it's a game dialog) where buttons are at the lower corners of the dialog. Not inside the dialog but rather on the very corners (i.e. part of the button will reside over the dialog and the part will be outside of it).
First, as far as I know you can't move layout children outside their parent.
I've never tried exactly what you're going for, but I think it can be done. The trick would be to go with an activity with a dialog theme (you can find examples of these on the developer site or the API demos). Make sure your layout's root node has width and height set to wrap_content. Your root layout should be a RelativeLayout and have NO background (android:background="#0000").
Next, add another layout to your root node (FrameLayout would probably work) with a custom drawable for a background (or use the one that the default dialog uses from the framework) and width and height set to fill_parent or match_parent. Set android:padding to some dip value which pulls the background in from the edge of the dialog.
The only thing left to do would be to add your other layout elements to the root node. The FrameLayout will be drawn beneath everything else, and the padding will create the illusion of borders which do not encompass your UI.
Update
Yikes, just tried the above with good and bad results. First, you'll definitely want to look at the "Custom Dialog" example from the API demo, which makes use of:
CustomDialogActivity.java
layout/custom_dialog_activity.xml
xml/styles.xml
drawable/filled_box
Create an activity which uses the above xml layout file, and set the style for the activity to Theme.CustomDialog that you defined in xml/styles.xml. This will get you a red background for your activity. You can then edit the filled_box shape file to just have one background attribute set to invisible ("#0000"). The result should be an dialog-shaped activity with no background.
Next I tried to hack a background using my thoughts from above. The idea should be that there's a phony background drawn behind the other UI elements which does not encompass them, so it could be "shrunk" using layout_margin and not affect them. The problem here is that the phony background needs to have width and height set to relative to the other UI elements, so it sort of HAS to encompass them, so it can properly measure its own width and height relative to them.
So I think the solution could be to do most of what I've said above, except don't try the phony background thing. Just use a 9-patch drawable for your root layout background, and shrink the edges of your background to be drawn farther in than your content. You'd still use the custom theme stuff from above with an invisible window theme.
Here is a sample layout which i tried:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<FrameLayout
android:orientation="vertical"
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_frame">
</FrameLayout>
<Button android:layout_width="wrap_content"
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:layout_centerHorizontal="true"
android:text="Button"></Button>
</RelativeLayout>
here is the screenshot:
hope u get the hint , goodluck

Categories