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.
Related
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)
I have the following layout,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.linux.camtest.CameraPreview
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/camera_surfaceView"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/image"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:adjustViewBounds="true"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/takePictureButton"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"/>
</RelativeLayout>
after taking the picture I do image.setImageBitmap(bitmap), the problem is that the picture is being displayed in a small area while I already set the image to match_parent, and I tried fill_parent and that didn't work also.
What I need is to have the image view to be set to the same size of the surfaceview, so when I take the picture and load it to the imageview it will cover the surfaceview
remove
android:adjustViewBounds="true"
and add
android:scaleType="fitXY"
to your imageView
I would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:
I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.
EDIT:
Sorry, here is my layout xml code
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
</RelativeLayout>
I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.
<android.support.design.widget.CoordinatorLayout
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="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<TextView
android:id="#+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/white"
android:textSize="17sp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/black"
android:textSize="17sp"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/plus"
app:layout_anchor="#+id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Alternate way Try this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
// this is your first layout to put the big image
// use src or backgroud image as per requirement
<LinearLayout
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
// this is your bottom layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
// This is the imageview which overlay the first LinearLayout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/success"
android:adjustViewBounds="true"
android:layout_gravity="center"/>
</FrameLayout>
its look like this
found one more solution for that (Edit)
if your big image size is fixed height you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/layoutTop"
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="200dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/layoutTop" >
</RelativeLayout>
<ImageView
android:id="#+id/overlapImage"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="#id/layoutBottom"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-20dp"
android:adjustViewBounds="true"
android:src="#drawable/testimage" />
</RelativeLayout>
Refernce :- Android: Placing ImageView on overlap between layouts
Hope this will help.Good Luck
Try out this way:
Just change layout_width and layout_height according to your need.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<View
android:id="#+id/viewOne"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#126989" />
<View
android:id="#+id/viewTwo"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/viewOne"
android:background="#547866" />
<View
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignBottom="#+id/viewTwo"
android:layout_centerHorizontal="true"
android:background="#ff7800"
android:layout_marginBottom="35dp" />
</RelativeLayout>
It will look like this:
I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/parentLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/image_view_product"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/circle"
android:src="#drawable/ic_add_circle_green_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Use layout_marginTop = -20dp ( Half of your image size ). It will go up.
android:layout_marginTop="-20dp"
put both the image in Relative layout
first define the image you want to put behind the green circle
than define the green circle as
android:layout_alignBottom="#+id/Image1"
Than adjust the position by giving margin to the green circle image.
I recommend you to use a framelayout with these two images.
with the refresh imageview at the bottom and the table fan at the top.
Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.
And do the set the gravity of the refresh icon to be bottom|center to make it look this way.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_fan"
android:scaleType="centerCrop"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<ImageView
android:src="#drawable/ic_refresh"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center|bottom"/>
</FrameLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="#+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.
I did not run this code so if you face any issues just let me know i hope this works well for you..
Screenshot:
activity_main.xml:
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="null"
android:scaleType="fitXY"
android:src="#drawable/album9" />
<ImageView
android:id="#+id/imageView_round"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/user_profile" />
</RelativeLayout>
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.