Implement horizontal scroll view like Slide Image Gallery? - android

i want to implement Image Gallery that load from url and put it into horizontal scroll view . i want to set my image view into match_parent but it doesn't work .. how to get a view like this ??
And this is my xml and view .
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_margin="12dp"
android:id="#+id/slideshow">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<com.android.volley.toolbox.NetworkImageView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/slide1"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher"/>
<com.android.volley.toolbox.NetworkImageView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/slide2"
android:scaleType="centerInside"
android:src="#drawable/ic_launcher"/>
<com.android.volley.toolbox.NetworkImageView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="#+id/slide3"
android:scaleType="centerCrop"
android:src="#drawable/ic_launcher"/>
</LinearLayout>
</HorizontalScrollView>

Use RelativeLayout instead of LinearLayout and align the elements using rightOf

After some investigation I made to solve similar problem for myself, I came up to using ViewPager. I think, that is what you wanted to do.

Related

Align image within imageView to bottom center

I have a simple imageView and I want an image to be displayed in the center of the bottom. At the moment it is displayed in the bottom right corner.
<ImageView
app:srcCompat="#android:drawable/simple_picture"
android:id="#+id/picture"
android:layout_centerHorizontal="true"
android:layout_height="300dp"
android:layout_width="330dp"
android:scaleType="fitEnd"/>
is there any way to use scaleType for bottom and center?
Thank you!
Add parent layout as Relative
<ImageView
android:id="#+id/picture"
android:layout_width="250dp"
android:layout_height="350dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_gravity="bottom"
app:srcCompat="#drawable/oldman1" />
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="300dp"
android:layout_height="300dp"
android:gravity="bottom|center">
<ImageView
android:id="#+id/picture"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="centerInside"
app:srcCompat="#drawable/ic_chat" />
</LinearLayout>
Add another view as parent
You can take RelativeLayout as a parent layout and set in ImageView
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
try this ...
Look at answer for similar question. I think, using android:scaleType="matrix" can resolve problem.
If parent is linear layout then try :
android:layout_gravity="center"
If parent is relative layout then use :
android:layout_centerHorizontal="true"
I know from this question 5 years ago
But I wanted to help others
You do [[ NOT NEED TO USE scaleType ]] my friend
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom|center">
<ImageView
android:id="#+id/myimageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:src="#drawable/MyImage" />
</RelativeLayout>

Scale image in RecycleView

I want to scale down the images I show in a RecyclerView via Picasso, this is how the layout looks like:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<FrameLayout
android:id="#+id/header_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#a90180"
android:orientation="vertical"
android:layout_marginTop="20dp"
android:layout_marginBottom="5dp">
<TextView
android:id="#+id/header_tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="22sp"
android:gravity="center_horizontal" />
</FrameLayout>
<ImageView
android:id="#+id/model_image_iv"
android:layout_width="300dp"
android:layout_height="300dp"
android:scaleType="centerCrop"
android:layout_marginTop="5dp"/>
</RelativeLayout>
and this is how I load the image in the adapter:
Picasso.with(parentActivity)
.load(BaseApplication.getImageBaseUrl()+image)
.into(holder.imageView);
The image is shown but it doesn't keep the aspect ratio.
I've tried removing scaleType="centerCrop" and using adjustViewBounds="true" instead, with the same result.
Then I used Picasso's .fit().centerCrop() and .resize(x,y).centerCrop() as suggested in this and this SO posts with no luck either.
Does anyone have a hint on this?
Try using this instead of ImageView in your layout.it might work.

How to animate Image View Behind Other Image View In Android

I have two images(plus and multiply ones) show below.When 'plus' image clicked, 'multiply' image is starting translate animation from the same position of the 'plus' image and going to the end of screen shown in attached last image.My problem is that 'multiply' image is animating in front of the 'plus' image shown in the attached second image.I want to animate it behind the 'plus' image not in front.
My xml for the image layouts :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="100dp"
android:clipChildren="false"
android:clipToPadding="false">
<ImageView
android:id="#+id/plus"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:clickable="true"
android:clipChildren="true"
android:clipToPadding="true"
android:scaleType="centerInside"
android:src="#drawable/plus" />
<ImageView
android:id="#+id/multiply"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:scaleType="centerInside" />
</LinearLayout>
</LinearLayout>
just use Relative layout and change a little bit ... like this
<RelativeLayout
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginTop="100dp"
android:clipChildren="false"
android:clipToPadding="false">
<ImageView
android:id="#+id/multiply"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:clickable="true"
android:src="#android:drawable/btn_star_big_on"
android:scaleType="centerInside" />
<ImageView
android:id="#+id/plus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:clipChildren="true"
android:clipToPadding="true"
android:scaleType="centerInside"
android:src="#android:drawable/btn_star_big_off" />
</RelativeLayout>
Change the xml layout sequence:
For RelativeLayout, the first view you wrote in xml will be drawn firstly.
So you need to write multiply imageview first then plus imageview.
If you want to change the z-order dynamically, you can use view.bringToFront() API.
See:
https://developer.android.com/reference/android/view/View.html#bringToFront()
or view.setZ(float) from Android 5.0 (API 21)
https://developer.android.com/reference/android/view/View.html#setZ(float)

Display a scrollable image from a url in android studio

I'm trying to create an activity that display an image that is obtained from an url. I want the width of the image to adapt the screen but the height of the image can be longer than the screen so that the image becomes scrollable (vertically).
First of all, I displayed the image from a drawable folder and it worked with the following code :
<ScrollView
android:layout_width="fill_parent"
android:id="#+id/scrollView1"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal">
<ImageView
android:src="#drawable/programme"
android:layout_height="wrap_content"
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:scaleType="fitStart"></ImageView>
</LinearLayout>
</ScrollView>
I obtained what I wanted :
http://i.stack.imgur.com/imPkZ.png
But now I wanted the image to charge from an URL so I used the ion library :
Ion.with(imageView)
.load("http://...");
The image load but it is no longer scrollable and doesn't display as wanted.
http://i.gyazo.com/704324724364235bbe417d5447265c42.png
Do you have any solution?
Thanks
I found the solution by setting android:layout_width="match_parent" in ScrollView, ImageView and LinearLayout and setting android:adjustViewBounds="true" for ImageView like this :
<ScrollView
android:layout_width="match_parent"
android:id="#+id/scrollView1"
android:layout_height="wrap_content"
android:scrollbarAlwaysDrawVerticalTrack="true">
<LinearLayout
android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"/>
</LinearLayout>
</ScrollView>

android XML scrollview and linear layout problem

I have the following code:
<ScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<LinearLayout android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView android:src="#drawable/ducks_r2_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<ImageView android:src="#drawable/ducks_r3_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r4_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r5_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
<ImageView android:src="#drawable/ducks_r6_c1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" android:clickable="true"/>
</LinearLayout>
</ScrollView>
I have used layout_width="fill_parent" everywhere. But this is the screenshot of how it shows up on the emulator.
I dont want the space on either side of the images.
Why is it showing up like this? How can I rectify it?Thank you
I guess this is happening because the image is not streching.
You may try to ask the image to strech itself:
android:scaleType="fitXY"
or use it as background.
please check this thread:
android: stretch image in imageview to fit screen
A ScrollView will only inflate to as many items are in it.
You should be able to solve this by using a LinearLayout (or another more predictable layout) as the parent for your ScrollView with android:layout_height="match_parent" and setting the ScrollView to android:layout_height="wrap_content" and the same for layout_width on both.

Categories

Resources