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.
Related
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 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 a LinearLayout with an another Linearlayout inside. In the second LinearLayout I've got 3 ImageViews but they are all stretched as you can see in the picture.
Here is my xml code:
<?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="fill_parent"
android:layout_margin="10dp"
android:orientation="vertical" >
<TextView
android:id="#+id/contact_data"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/bubble"
android:gravity="center"
android:padding="10sp"
android:text="#string/contact_data"
android:textColor="#000000" />
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="10dp"
android:background="#android:color/darker_gray" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<ImageView
android:id="#+id/phonenumber"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/phone"
android:clickable="true"
android:onClick="onClick" />
<ImageView
android:id="#+id/emailaddress"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/email"
android:clickable="true"
android:onClick="onClick" />
<ImageView
android:id="#+id/internetaddress"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/internet"
android:clickable="true"
android:onClick="onClick" />
</LinearLayout>
</LinearLayout>
What's the problem?
PS: I have 3 sizes of each picture: 32x32 in drawable-ldpi, 48x48 in drawable-mdpi and 64x64 in drawable-hdpi.
You're currently setting each ImageView's dimensions to android:layout_width="match_parent" and android:layout_height="fill_parent".
Are you sure that you don't want to be using wrap_content?
Also, note that fill_parent means the same things as match_parent, and has been deprecated since API level 8.
On further inspection, you're also setting the background of the ImageView's instead of the src, the latter of which will do a much better maintaining aspect ratios.
I have a vertical LinearLayout containing an ImageView and a few other layouts and views.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/main_search"
android:gravity="center"
android:textStyle="bold" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_city_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_city_prompt"
android:entries="#array/search_city_array" />
<Spinner
android:id="#+id/search_area_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_area_prompt"
android:entries="#array/search_area_array" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:id="#+id/search_rooms_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_rooms_prompt"
android:entries="#array/search_rooms_array" />
<Spinner
android:id="#+id/search_min_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_min_prompt"
android:entries="#array/search_min_array" />
<Spinner
android:id="#+id/search_max_spinner"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_weight="1"
android:prompt="#string/search_max_prompt"
android:entries="#array/search_max_array" />
</LinearLayout>
<Button
android:id="#+id/saearch_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/search_button"
android:onClick="searchButton" />
</LinearLayout>
My problem is that when the activity is displayed, the ImageView has a padding at the top & bottom. I've confirmed it is the ImageView (by setting a background colour on the ImageView).
The image is 450x450px. Setting the height manually to 450px produces the desired effect (no padding), and setting it to 450dp produces the same effect as using wrap_content.
It seems that android is taking the height of the image (450px) and setting the height of the ImageView to the same value, but in dp.
Any ideas as to what I can do to fix this? I don't want to use absolute values as I'll be providing different images for different screen densities.
I had a simular issue and resolved it using android:adjustViewBounds="true" on the ImageView.
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/banner_alt"
android:src="#drawable/banner_portrait" />