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.
Related
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.
I am trying to place two image buttons and some text on a single line. Here is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
The selector XML for each of the buttons in drawable:
button_delete.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/delete_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/delete_button"
android:state_focused="true" />
<item android:drawable="#drawable/delete_button" />
</selector>
button_add.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_add_normal"
android:state_focused="true" />
<item android:drawable="#drawable/button_add_normal" />
</selector>
In the builder all looks well:
But in the application the gray background is lost and the edges of the image (which are transparent) are shown, but only for the first image:
Strangely, the first image button is not recognizing the transparent background of the image. Additionally I needed to mess with the width and height of the RelativeLayout and the first ImageButton to even get it close to the right size. With the 2nd I did not have to do anything. There is nothing special with the first image.
Here are the images from the directory:
One last issue - How do you make the text wrap before the 2nd image if it is too long for the space? Right now it writes under the 2nd image before wrapping:
Here are all the delete images. Seem to have transparent backgrounds, but I am far from a Gimp expert. Also not sure if StackOverflow keeps the original..
Update
I have verified the images are transparent. The image still has the white background. I have also updated the XML to look like this:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toEndOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
You should use:
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete"
android:background="#android:color/transparent"/>
Use "#null" like background on ImageButton:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/bkash"
android:id="#+id/bid1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#null" />
You haven't included the actual PNG file you are using as an icon for your delete button (screenshot from Windows's Explorer showing this file on your disk isn't quite enough), but I am almost sure that this file lacks an alpha channel. Instead, there is a white color on every pixel you'd like to be set with zero alpha channel value.
Opening your graphic in some image editor and changing these white pixels to transparent will solve your problem, but as for the reason why your layout "looks different" in builder than on your device, it's because there is a default theme applied by the system to every app, you can read more about it here: https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
This default, OS and device specific set of values determines things that aren't determined by app's authors.
In the case of your device, its OS determined app's background color to be gray, which wasn't the case with your builder. Your builder chose the background to be white. Your delete button's graphic never was transparent, but on the white background of your builder it looked like it was.
To make it look like on builder, you need to specifically apply the background by yourself to the root of your view. In this case, it's a LinearLayout which should look like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
1) #DimDim had the right solution, if it didn't work, the delete button may have white background in the image, cross check with a png viewer.
2) To prevent overflow of text, try this
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
And put the sectionAdd Image button above this textview in the XML as this textview needs reference to the sectionAdd.
I facing the problem that, I cant add new image button to my XML file.I added my icons to Drawable, but It cannot show in image button. XML shows an error ImageButton class not found. How can I solve this ?
I got the following error in xml
The following classes could not be found:
- ImageButton (Change to android.widget.ImageButton, Fix Build Path, Edit XML)
Here is my xml
<?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" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="109dp"
android:src="#drawable/facebook" />
</RelativeLayout>
Why dont you try a simple button instead of image button. Here is a code i have on some of my buttons with image.
android:drawableTop="#drawable/three" : this is basically the image
android:background="#drawable/buttonstyles" : this is a style for the button. No need to use it. Or the other layout features i have.
<Button
android:id="#+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button2"
android:layout_alignParentRight="true"
android:layout_marginRight="20dp"
android:background="#drawable/buttonstyles"
android:drawableTop="#drawable/three"
android:onClick="goToSettings"
android:text="Settings" />
I was using the interface builder and for some reason, it added this
tools:src="#drawable/ic_play_arrow_white_100dp"
Change it to this to make it work and display image in image button
android:src="#drawable/ic_play_arrow_white_100dp"
I had the same problem. My images were .ico and I had the same error message in the Graphical Layout tab in eclipse. I proved to transform the .ico images to .png images and then I deleted the .ico and I imported the .png to the project.
It was succesful.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageButton
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="109dp"
android:src="#drawable/a" />
<ImageButton
android:id="#+id/imageButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="164dp"
android:src="#drawable/a" />
</RelativeLayout>
I think this not big issue. Your is right nothing wrong with you posted. In my eclipse it works fine.
First check images properly put in drawable folder with small letter naming convention. or if you only have it in /res/drawable-xhdpi/ please check this also. May use this background instead of src.
if you not not getting R cannot resolve with putting image in xml, then first Refresh project, if is not work then clean whole project, if this is also not work restart eclipse.
if you restart eclipse, then it not work, may be your project library not properly located.
Change extend Activity to extend AppCompatActivity in your Activity Class
You need to define the Button as ImageButton in java classes.
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 have a layout which consists of an ImageView and a TextView. I recently changed android:src for ImageView to a new drawable, but when I am building and running the app on emulator or device its showing the old image instead of the new image that I have specified in XML Layout. I don't understand why the references are not getting updated and android is using the old reference of the image.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/list_selector"
android:orientation="horizontal"
android:padding="3dip" >
<ImageView
android:id="#+id/playImage"
android:layout_width="35dip"
android:layout_height="35dip"
android:src="#drawable/play_icon" />
<TextView
android:id="#+id/playlistName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:textColor="#color/black"
android:maxLines="1"
android:layout_toRightOf="#+id/playImage"
android:paddingLeft="5dp"
android:textStyle="bold"
android:text="Unamed" />
</RelativeLayout>
Please help me.
In such cases, I refresh project folder, clean the project. If these don't work then I will just close and open project. Eclipse acts weird many a times.
I did a silly mistake.I was also Setting the ImageView image in my custom adapter and that was overriding the XML ImageView default image.I removed the code of setting image src from adapter and this fixed the issue