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)
Related
Can someone help me? My ImageView gets huge spacing for no apparent reason. Xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/fragment_container_3"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_marginTop="50dp"
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:layout_marginBottom="6dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
card_view:cardElevation="10dp"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/img"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginBottom="0dp"
android:padding="0dp"
android:src="#drawable/list_cli2"
android:contentDescription="123" />
<TextView
android:id="#+id/totalCli"
android:layout_width="300dp"
android:paddingBottom="10dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:textColor="#fff"
android:layout_marginTop="10dp"
android:text="Total de Clientes: Buscando..."
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<com.github.mikephil.charting.charts.PieChart
android:id="#+id/cliChar"
android:layout_width="300dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="21dp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
...
</RelativeLayout>
</ScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|right"
android:layout_marginRight="18dp"
android:layout_marginBottom="60dp"
android:clickable="true"
app:backgroundTint="#android:color/background_dark"
app:fabSize="normal"
app:srcCompat="#drawable/refresh"/>
</FrameLayout>
Stays like this:
If I set the android: layout_height = "" with a low value, type 200dp, the spacing goes away, but in this case, on smaller devices, the view will be out of date. Already tried:
Placing the image as the background of a LinearLayout but the spacing was both above and below.
Placing the ImageView inside the LinearLayout however has done the same thing as above.
Does anyone know how to solve it?
If I put it outside the ScrollView, ImageView is centered in the middle of the screen
Add this to your imageview:
android:scaleType="centerCrop"
The scale type property will tell how the image should fit within the available space. Center crop will make it fill the whole space, but as a trade off the image will seem zoomed. There are other scale types you can try here.
It looks like your list_cli2 drawable already has the white space. Check it by open it with the image editor and see if the white space is there.
When "btn_report_addImage1" is clicked, the app call camera function to take a picture. then, the button is gone and the inner relativeLayout is appeared to show the picture i took and to show remove button on the top-right side of the picture.
The problem is:
I set the size of the image view with 65dp for width and height.
But when the picture is shown on the imageView, the picture gets bigger than before.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="65dp"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="65dp"
android:layout_height="match_parent">
<Button
android:id="#+id/btn_report_addImage1"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<RelativeLayout
android:id="#+id/layout_report_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone" >
<ImageView
android:id="#+id/image_report_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"/>
<Button
android:id="#+id/btn_report_removeImage1"
android:layout_width="35dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"
android:text="-"
android:textSize="5dp"
/>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="65dp"
android:layout_height="match_parent"
android:layout_marginLeft="5dp">
<Button
android:id="#+id/btn_report_addImage2"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/layout_report_image2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone">
<ImageView
android:id="#+id/image_report_image2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"/>
<Button
android:id="#+id/btn_report_removeImage2"
android:layout_width="35dp"
android:layout_height="25dp"
android:layout_alignParentRight="true"/>
</RelativeLayout>
</RelativeLayout>
You have given the scaleType as fitXY. That's the reason. android:scaleType="fitXY"
Scaling Image to fit the view in both the Axis we call fitXY, in your case you have already defined the l*b of Image, So remove the ScaleType = fitXY:
<ImageView
android:id="#+id/image_report_image1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
// scaleType removed
You can set ImageView scaleType 'centerCrop'.
<ImageView
android:id="#+id/image_report_image1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop" />
try to add image pragmatically in src. so you can get image size proper and display proper.
I have ImageView which needs to be shown in full height available. However at top i have created LinearLayout which contains Text and Image. I want it to display at top but also want to image to fit screen. I have linear layout at bottom and its working fine.
This is my code for LinearLayout which i want to show at top. I have hidden actionbar
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY" />
</FrameLayout>
If i dont set imageView scale type to android:scaleType="fitXY" then it works but image doesnt fit screen.
I want to display image to fit between above bar which contains Text and below it has some icons. But if i make image scaletype ='fitXY' it doesnt display above text. Following is screenshot but i want image to occupy space
If you want the image to be below the actionbar you should not use the FrameLayout as a parent. You either should use vertical LinearLayout with weight or `RelativeLayout". Try following code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:background="#android:color/black"
android:gravity="top"
android:orientation="horizontal"
android:visibility="visible" >
<ImageView
android:id="#+id/backbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:paddingLeft="10dp"
android:src="#drawable/back_button" />
<TextView
android:id="#+id/titleofscreen"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Testing"
android:textColor="#22c064"
android:textSize="18sp" />
</LinearLayout>
<ImageView
android:id="#+id/imageShown"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/actionbar"
android:layout_alignParentBottom="true"
android:scaleType="fitCenter"
/>
</RelativeLayout>
Also I doubt that you use fitXY as android:scaleType, because it doesn't maintain the aspect ratio of the image - so your image will be deformed (stretched). In your case you should rather use fitCenter, but it depends on how exactly you want to scale your image - you can also play with centerInside or centerCrop.
I have the following for 3 Imagebuttons. The way the code stands below, the three buttons look the same.
Problems:
The image doesn't fill the size of the button completely
The resolution of the images are bad. I have the images saved in all res/drawable folders (drawable-hdpi, mdpi, etc). Images were loaded by "Android Icon Set" wizard.
Any ideas? I have been playing with padding and scaleType as I saw them as the solutions on other posts.
<?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"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<ImageButton
android:id="#+id/abutton"
android:src="#drawable/a_button_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="5dp"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/button"
android:src="#drawable/b_button_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:scaleType="fitXY"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_marginTop="10dp">
<ImageButton
android:id="#+id/cbutton"
android:src="#drawable/d_icon"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="20dp"
android:scaleType="fitXY"/>
<ImageButton
android:id="#+id/dbutton"
android:src="#drawable/about_a_button"
android:layout_height="150dp"
android:layout_width="150dp"
android:padding="20dp"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>
Instead of assigning drawable to the android:src attribute assign it to android:background attribute of the ImageButton.
OR
You can try setting android:adjustViewBounds="true", this will make the ImageButton adjust its bounds to preserve the aspect ratio of its drawable
PS: If you set an image to be the background of your ImageButton, then the image will scale to whatever size the ImageButton is. Other than that, src is a foreground image and background is a background image.
Edit:
<?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"
android:orientation="horizontal" >
<!-- The two linear layouts will have equal widths. -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp" >
<!-- The two image button will fill the linear layout along width and have height 150dp -->
<ImageButton
android:id="#+id/abutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
<ImageButton
android:id="#+id/button"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:padding="5dp" >
<ImageButton
android:id="#+id/cbutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
<ImageButton
android:id="#+id/dbutton"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:background="#null"
android:scaleType="fitXY"
android:src="#drawable/engage_down" />
</LinearLayout>
</LinearLayout>
Hope this helps.
Try
by removing padding and set background as 'null'.
In case of resolution, I think it was taking low resolution image.
<ImageButton
android:id="#+id/dbutton"
android:src="#drawable/about_a_button"
android:layout_height="150dp"
android:layout_width="150dp"
android:background="#null"
android:scaleType="fitXY"/>
I faced the same problem. No other worked for me. At last it was a simple issue. By default, padding is existing around ImageButton. so use:
<ImageButton>
...
android:padding="0dp"
...
</ImageButton>
It will fix the issue.
I want to make my layout like this as per below picture. this image i am able to see in iphone devices.
Here i used frame layout to achieve make overlays of top and bottom image bar on imageview but after using frame layout i can only able to see top imagebar overlay not bottom image bar? why its happens?
Forgot about the content of top and bottom iamge bar.. i am focusing to achieve this functionality.
Please make me correct if i am wrong in my code.
xml file code :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
per android documentation
Child views are drawn in a stack, with the most recently added child on top.
so you need to arrange your layout as follows
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<it.sephiroth.android.library.imagezoom.ImageViewTouch
android:id="#+id/image"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:contentDescription="#string/descr_image"
android:scaleType="fitXY" />
<include
android:id="#+id/top_bar"
layout="#layout/item_below_image_bar"
android:gravity="top" />
<include
android:id="#+id/below_bar"
layout="#layout/item_below_image_bar"
android:gravity="bottom" />
</FrameLayout>
in this case the actual location of the view is not determined by the order that the views are declared in the xml. For a linear layout this would be true however not so with the FrameLayout, in a framelayout the location is determined by gravity so your views will still be placed in the correct locations and they will be loaded in order they were declared, so first is the image view, then the first include is placed on top of that, then the second include is placed on top of that (however in this case they dont intersect so it doesn't matter).
edit2: after chatting with sam we were able to figure out the problem here's our solution
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:id="#+id/greenImage"
android:src="#2dff3d"/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp"
>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginLeft="14dp"
android:layout_marginRight="14dp">
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:layout_alignParentRight="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="My Label"
android:id="#+id/textView1"
android:layout_centerVertical="true"/>
</RelativeLayout>
</FrameLayout>
note the usage of layout_gravity as apposed to just gravity.