I'm trying to develop a little android app, that will use image recognition for dog breeds. After recognizing a dog, it will save in another activity the name of the breed, with a picture. Those are saved in a MaterialCardView, which has inside a Linearlayout, with an ImageView for the picture, a TextView and an ImageButton for delete. In the preview window, everything looks fine:
Preview Window
,but when I'm testing on my phone the Image is verry blurred, or very zoomed in, I don't even know how to describe it:
Actual app.
I tried with many pictures, also tried most of the solutions that I saw online, but nothing worked. I'm also a begginer with android, so it might be something very simple that I just can't see.
Here is the xml code for the layout:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="15dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:elevation="15dp"
android:orientation="horizontal"
>
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/affenpinscher"
android:id="#+id/img_content"
/>
<TextView
android:id="#+id/txv_content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_weight="100"
android:gravity="center"
android:padding="4dp"
android:textSize="14sp"
/>
<ImageButton
android:id="#+id/ibt_delete"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:textStyle="bold"
android:background="#android:color/transparent"
android:src="#android:drawable/ic_delete"
/>
</LinearLayout>
</com.google.android.material.card.MaterialCardView>
Also tried with android:scaleType="centerCrop" or just "center", it's the same.
The Image is 220x330
The image is blurry because has a bigger resolution than supported for the imageView with its current size.
So you got to resize the image.
Go to the IDE settings -> Plugins -> Search “ Android Drawable Importer and install it -> restart the IDE
Once installed right click the drawable folder and: New-> Batch Drawable Import -> select your image and resize it.
Related
I have a button that I've implemented in one of my activities in my Android project - the button is supposed to contain both a logo (a drawable) and some text following it, but I have a very peculiar problem. In the preview-view of my activity xml-file, the button looks perfectly fine but when I run my app on my phone it gets absurdly large.
I import the drawable from an .xml drawable that I've myself have made. I tried imported a .png straight into my activity but it was too large - so I make a new xml where I resize it and that xml is what I import as my drawable. Code:
Activity.xml
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/title_activity_facebookInvite"
android:id="#+id/btnInviteFacebook"
android:layout_alignParentBottom="false"
android:layout_centerHorizontal="true"
android:layout_below="#+id/mainActivityInviteText"
android:background="#drawable/bh_red_button"
android:layout_marginTop="#dimen/bh_input_element_margin"
android:textSize="#dimen/bh_button_font_size"
android:drawableLeft="#drawable/fb_resize"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:minHeight="0dp" />
fb_resize.xml (My drawable)
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/fb_resizeBtn"
android:drawable="#mipmap/fb_logo"
android:width="15dp"
android:height="15dp"
/>
</layer-list>
fb_logo is my PNG that I've made. Another very strange thing is that when I emulate it on a virtual device in Android Studio it looks perfectly fine, but not on my phone (Have tried a different phone aswell).
Looks like this is your problem :
android:layout_width="fill_parent"
Try replacing fill_parent with wrap_content
You could also try to add this in your item :
android:scaleType="fitCenter"
android:adjustViewBounds="true"
Okay here is a workaround, try replacing your button with this:
<FrameLayout
android:id="#+id/NavigateRightButtonLayout"
android:layout_below="#+id/mainActivityInviteText"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="45dp"
android:layout_marginRight="45dp"
android:gravity="center">
<Button
android:textSize="#dimen/bh_button_font_size"
android:textColor="#FFFFFF"
android:textAlignment="gravity"
android:text="#string/title_activity_facebookInvite"
android:gravity="center"
android:background="#drawable/bh_red_button"
android:layout_marginTop="#dimen/bh_input_element_margin"
android:textSize="#dimen/bh_button_font_size"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="15dp"
android:layout_height="15dp"
android:layout_gravity="left"
android:id="#+id/fb_resizeBtn"
android:background="#mipmap/fb_logo" />
</FrameLayout>
Solved it! Instead of a .png I used a vector-picture (.svg file) and that resized just fine for some reason.
When I run my android application in Android version >=4 I got this out put(I didn't tested in android version 3):
When run the same application in android version 2.3 I got a bit different output:
You can see in second screenshot the image for about button is not visible. But when I try run the same application several times on 2.3 some times I got about image visible.Here is my 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="match_parent"
android:orientation="vertical" >
<include layout="#layout/actionbar_with_right_button" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:scrollbars="none" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:drawablePadding="#dimen/settings_text_view_drawable_padding"
android:drawableTop="#drawable/snooze_button"
android:gravity="center"
android:onClick="showRemainderSnoozeSettings"
android:padding="#dimen/settings_text_view_padding"
android:text="#string/snooze" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:drawablePadding="#dimen/settings_text_view_drawable_padding"
android:drawableTop="#drawable/help_button"
android:gravity="center"
android:onClick="showFaq"
android:padding="#dimen/settings_text_view_padding"
android:text="#string/help" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:drawablePadding="#dimen/settings_text_view_drawable_padding"
android:drawableTop="#drawable/about_button"
android:gravity="center"
android:onClick="showAbout"
android:padding="#dimen/settings_text_view_padding"
android:text="#string/about" />
</LinearLayout>
</ScrollView>
I didn't understand why this is happening.
Can anyone help me to solve this issue.
Edit :
One more important thing I forgot to mention when I changed android:drawableTop="#drawable/about_button" to android:drawableTop="#drawable/help_button" of about TextView. It worked perfectly. So it can be an issue of my about_button image. So I recreated the about image again and put in all drawable folder. Even after that also I didn't get any +ve result. This issue only in 2.3 or less.
Thanks
May this help you:
Seems like this is a bug with android, where sometimes the first image in the drawable folder doesn't get displayed.....
I had a similar bug - a particular drawable was not being displayed, no matter in what ImageView. So I Added a dummy image called aaaa.png to the drawable folder and problem was solved....
I'm novice in android development and still can't understand fully how sizing works with different layouts. I want to place a preview of the book into this template:
I've tried to implement it using FrameLayout. The idea is that the center of preview image will be exactly where the center of the png background is. Here is the code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
</FrameLayout>
The result in layout builder look exactly like I want it to be:
On real phone it is different:
I think on other resolutions it will also differ from both variants. So my question is how to synchronize these images so after any resizing and distortions the preview will fit the cover correctly?
Possible solution would be to remove border from image and place it on previewImage instead. But there are several similar usecases in application where the border can't be removed, so I'd like to find out a universal solution for all of them.
You have your answer in your question.
What happening in your case image size matter for different screen resolution.
Hard-coded things always gives weird result in your case
android:layout_width="83dp"
android:layout_height="83dp" this piece of code.
Check this link this will guide you to manage drawables for different screens.
and here is another link
So the suitable solution for me was to separate border of inner image into its own ImageView, insert it into layout over the photo and add 1dp padding to the photo.
The layout become like this:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".5" >
<ImageView
android:id="#+id/bookFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/book_frame" />
<ImageView
android:id="#+id/previewImage"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:padding="1dp"
android:scaleType="centerCrop"
android:src="#drawable/abs__ab_bottom_solid_dark_holo" />
<ImageView
android:id="#+id/previewBorder"
android:layout_width="83dp"
android:layout_height="83dp"
android:layout_gravity="center_vertical|center_horizontal"
android:src="#drawable/preview_border" />
</FrameLayout>
While developing an Android application I have stumbled upon a baffling problem. The UI element I am creating is a header bar that has a custom search field. Everything looks wonderful on the Android UI editor but the second I use the emulator or a device it bugs out and compresses the magnifying glass image and clips the edit text. I have tried a number of things including changing the background image of the search area to the custom search field that is currently in the parent LinearLayout. This however results in the search field size growing out of control.
Any suggestions are welcome.
My questions are:
1) How would one fix this problem while maintaining the look of the search area?
2) Why is this problem occurring?
Confirmed on the following devices:
Samsung Galaxy Nexus 4.0.2
Motorola Zoom 4.0.3
Nexus S 2.3.7
This is a screenshot of the UI editor:
This is a screenshot of what it looks like on all devices tested:
The XML used to generate these UI elements:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/header"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/title_bar_matte"
android:gravity="center_vertical"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_margin="10dp"
android:layout_weight="1.0"
android:background="#drawable/search_field"
android:gravity="center_vertical"
android:orientation="horizontal" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_marginLeft="15dp"
android:src="#drawable/magnifying_glass" />
<EditText
android:id="#+id/campus_map_acitivity_search"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dp"
android:layout_weight="1.0"
android:background="#0FFF"
android:hint="Search"
android:imeOptions="actionSearch"
android:singleLine="true" />
</LinearLayout>
<Button
android:id="#+id/campus_map_activity_goto_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:background="#drawable/button_list" />
<Button
android:id="#+id/campus_map_activity_my_location"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:background="#drawable/button_location" />
</LinearLayout>
Just figured out the problem. The search background image had the top and left sides set to 9-patch scale. This is all good and well but we had forgotten to set the bottom and right fill areas so that the content would have room to exist.
http://radleymarx.com/blog/simple-guide-to-9-patch/
Remember to set the fill areas!
It turns out the Android UI editor does not handle 9-patch images like the devices. That seems to be a bug to me.
I Have scoured the site and several others and I am having a problem finding a way to make a clarity nice icon styled image button. The image buttons I keep using fill the content and look just distorted, I want very nice looking icons styled image buttons, and instead its smudged stamps with little clarity. I want them spaced enough you can see the background behind them, Do i need to somehow make the src the image and the background clear?
heres some of my code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/debface"
>
<TableLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="4"
android:gravity="bottom"
>
<!-- Images coming out Blurry, I need to compress like a hires icon file -->
<TableRow>
<ImageButton
android:id="#+id/button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/debraidcard"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
<ImageButton
android:id="#+id/button03"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/debraidcard"
android:layout_weight="1"
android:padding="25px"
android:paddingLeft="25px"
android:paddingRight="25px"
/>
</TableRow>
I have used several different sizes on my images, i have switched between .jpg and .png. I follwed several tutorials, didn't like the outcomes. Any help pointing me in the right direction is greatly appreciated
Instead of setting your image to the background set it to src:
android:src="#drawable/cool_drawable"
that will give you your bitmap in the center of what looks like the default button.
If you don't like the button in the back set the background to #00000000 (transparent) and you will end up with only your Drawable as the button.