Can't get rid of the ugly border around ImageButton - java

I'm working on an Android App which has a few (Next, Back, ... etc) Buttons which are all round and transparent and I use ImageButton for those Buttons, however the problem is there is always a white border around the Button (I use black background so it is very ugly) and the button never appears to be round is appears as some sort of a square-ish shape.
Here is what I tried so far :
Setting the background of the ImageButton in the activity_mypage.xml file to
android:background="#android:color/transparent"
and to
android:background="?android:selectableItemBackground"
and to
android:background="?android:selectableItemBackgroundBorderless"
even to
android:background="#null"
but nothing seems to work on the .xml side.
and I tried the following on the MyPage.java file :
myBtn.setBackgroundResource(0);
and also
myBtn.setBackground(null);
Nothing seems to work anything I do keeps resulting the same (although it removes a gray border from around the Button but none of them makes the Button completely transparent)
This is a screenshot of the button before applying any of above :
And this is a screenshot of the same Button after applying any of those attributes (doesn't really matter if I applied it only to the xml or only to the java file or to both because all results are the same):
This is my xml code for one of my Buttons in xml :
<ImageButton
android:id="#+id/my_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="26dp"
android:layout_marginEnd="37dp"
android:layout_marginRight="37dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="#mipmap/my_btn"
tools:layout_constraintBottom_creator="1"
tools:layout_constraintRight_creator="1"
android:background="#android:color/transparent"
/>
And here is the code for it in the .java file :
ImageButton myBtn= (ImageButton) findViewById(R.id.my_btn);
myBtn.setBackground(null);
myBtn.setBackgroundResource(0);
I'm really lost at this every result I found for this query has suggested one of the above methods but none of these seems to work for me..

Just change
android:background="#android:color/transparent"
to
android:background="#null"

Try with this
android:src="#mipmap/yourimage"
instead of
app:srcCompat="#mipmap/my_btn"

add this to your button
android:background="#drawable/template"
and create a file name it template in your drawable folder
and add this code to it
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true" android:drawable="#drawable/btn2imagePressed"></item>
<item android:drawable="#drawable/btn1imageNotPressed"></item> </selector>

You can use ImageView instead of ImageButton, so background issue will not occur
<ImageView
android:id="#+id/my_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="26dp"
android:layout_marginEnd="37dp"
android:layout_marginRight="37dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:src="#mipmap/my_btn"
/>

So after reading some of the posted answers and playing around with the suggestions in my code I noticed that the icon was incorrectly loaded into my mipmap directory instead of drawables and that is because when I imported the icons I selected New -> Image Asset instead of Vector Asset which caused my 'icon' to lose its transparency ...
Thanks to everyone for their replies and answers.

Related

Strange TextInputLayout behavior

I am trying to display an end drawable in my textinputlayout. However, the drawable covers the background of the textinputlayout in an unwanted manner (see image Drawable obstructs the background).
The same behaviour occurs when using an outlined style.
Another problem occurs where the suffix behaves the same way (see image Suffix problem).
Furthermore, the error icon is hidden until there is text in the edittext of the textinputlayout (see images No error icon,Error icon).
The error icon also displays the same strange visual behavior.
This is what my textinputlayout looks like:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/locationTVLayout"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hapticFeedbackEnabled="true"
android:hint="Where?"
app:endIconContentDescription="Find my location."
app:endIconDrawable="#drawable/ic_baseline_location_searching_24"
app:endIconMode="custom"
app:endIconTint="#color/colorAccent"
app:errorEnabled="true"
app:startIconDrawable="#drawable/ic_baseline_location_on_24">
<AutoCompleteTextView
android:id="#+id/locationTV"
style="#style/Widget.MaterialComponents.AutoCompleteTextView.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:completionThreshold="1"
android:layout_below="#id/tempInputTV"
android:nextFocusForward="#+id/tempInputTV"
android:selectAllOnFocus="true"
android:singleLine="true"
/>
</com.google.android.material.textfield.TextInputLayout>
My Material gradle reference is :
api 'com.google.android.material:material:1.3.0-alpha02'
Use app:startIconDrawable and app:endIconDrawable instead of android:drawableStart and android:drawableEnd.
Both of these go into your TextInputLayout and not in TextInputEditText.
For more reference, check this out: https://material.io/develop/android/components/text-fields

How add multiple TextView inside an ImageButton?

Is it possible to add multiple TextView inside one ImageButton with colour background ?
The core need is to have a button with the action text on it, and a subtext nearby explaining the action or giving other information related to the action. This subtext can vary from time to time.
Considering this requirement, one solution is to have a normal button and a subtext below, not clickable. But I find it messy. A better approach which I like is, on iOS for instance, to have a clickable UIView containing the action as bold text and the explanation as light text. See the image bellow containing 4 buttons :
How to achieve the same on Android with Java ? The closest I can have is to have an ImageButton bellow a TextView, and it does not sound right.
Is possible to nest TextViews inside an ImageButton ? If not, what is the best alternative ?
I hope this may be useful it explains how to position a textView within and in front of a imageView in the XML.
TextView inside of ImageButton/ImageView XML - Android Dev
Obviously make sure each view has a unique id/name which you can assign as shown here on this link
Sorry I cannot explain specifically myself but it has been a while since developing in Java for Android.
I dont know why you want this behaviour but you can make a container for your views and add a click listener to the whole view. you can also use it anywhere.
an example of this would be.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:layout_width="match_parent"
android:background="#drawable/container_background"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="0.33"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="0.33"
/>
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_weight="0.33"
/>
add a selector background
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:color="#color/text_pressed" />
<item android:color="#color/normal" />
</selector>
and the listener
findViewById(R.id.container).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
}
});

Android adding image to button

I am trying to add an image to a button(image button or normal button) but not in a specific res/drawable folder.
I want this image as a ImageView object or drawable object etc, but I couldn't.
You can set an icon for Button by adding following attribute in XML for Button like this:
android:drawableLeft="#drawable/button_icon"
If you want to know how to do it programmatically, follow this article:
How to programmatically set drawableLeft on Android button?
Or just add 'background':
<Button
android:id="#+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/qrcode"/>
But i think it's better if you use ImageButton, see this example:
<ImageButton
android:id="#+id/searchImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/your_image_drawable" />
Use ImageButton and add src in your background:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#android:drawable/yourImageNameHere"

Android Studio 0.8.9 How to change buttons shape?

I've seen most of post # stackoverflow and i've done as told.
Create new xml (tried a few different samples)
But i can't change the background in activity xml, it does not want to find "#drawable/shape"
I have the new xml in right folder and I'm struggling with it since this morning. I'd be more than glad to see some help ;)
Sorry, I've got it like that:
'
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/chest"
android:id="#+id/button"
android:textColor="#android:color/black"
android:layout_gravity="center"
android:textSize="23sp"
android:layout_toStartOf="#+id/maxWagi"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_toLeftOf="#+id/maxWagi"
android:background="#drawable:button_shape"'
// <----- if I change it to some #color it's working just fine.
and my xml button_shape is in app\src\main\res\xml\ (android studio put it over there by itself) I even added manually drawable folder like in most tutorials but it does not change anything
You have syntax mistake. Your background should be #drawable/button_shape instead of #drawable:button_shape. Also put in a drawable folder in res.

how can i have a list of icons in my android app;

can any one suggest how can i have a list of icons like browser icon,email icon and contacts icon upon clicking on those it should lead to android browser,email and contacts apps respectively...right now i have done it, upon clicking buttons. Now i want icons(with image and text) instead of buttons...
Check this out:
http://developer.android.com/resources/tutorials/views/hello-formstuff.html#CustomButton
This will show you had to put the images you want in res/drawable/ and then load them up as buttons in your app.
There is no widget icon.
You can do it yourself using a LinearLayout an ImageView and a TextView.
The xml should be something like this:
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/your_image"/>
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/your_icon_text"/>
</LinearLayout>
You can use Android Image Button and set its property "Clickable=true" and do the required work on its click event listener
I thought you want to have ImageButton , clicking on that you want to open particular application/browser/contact list.
ImageButton - Displays a button with an image (instead of text) that can be pressed or clicked by the user
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon/>
If you wants ImageButton with Background button then set android:background attribute, as below:
<ImageButton
android:id="#+id/ImageButton01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/icon"
android:background="#drawable/background_image"/>
If you want an image and text in your button, the way I do it is create a 9 patch, so I can define where the text will go using the padding and stretchable areas. Then follow the same instructions as for the Custom Button already mentioned, but use a standard button, not an Image Button.

Categories

Resources