Setting a button background and color - java

I want to set a background and color to a same button.
Im using setbackgroundResource and setBackgroundColor to do so....however it only changes either the background or the color not both of them.
Is there any way to change button background and background color differently?

If you want to change the color of background image i.e. you set using setBackgroundResource then use
setBackgroundTintList(ColorStateList.valueOf(ContextCompat.getColor(context, R.color.black)));

Supposing you want to set a drawable as foreground and the color as background, you would need an ImageView. You can set it directly from the xml :
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/black"
android:src="#drawable/my_awesome_drawable" />
or programmatically like this :
imageView.background = resources.getDrawable(R.color.black)
imageView.setImageResource(R.drawable.my_awesome_drawable)

Related

Placing an image in button but it does not show image

I created a button and I used android:background="#drawable/background" to change the image however it only displays the default design of a button (purple). How do I set it to the image I have saved in my drawable folder?
I know there is Image Button but I wanted to write a text on the button, but there is no feature where I can write a text on top if I used Image Button
As you have mentioned, you can't put a text if you have used ImageButton.
As far as I understood, you want to have view which has a text on above of image and image on bottom of the text.
If you use android:background feature on Button, button's background will be your drawable image and it won't be as you have expected.
If you are going to use Button for sure, you can use android:drawableBottom feature to show your drawable image on below of your text. And you can basically add button text by using android:text feature.
My advice to you, you should use TextView instead of Button for that case. Because if you do it with the Button as I have mentioned above, your button will have background and you can make transparent background for your button by using below code.
<Button
android:id="#+id/buttonMoreTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:drawableBottom="#drawable/ic_baseline_home_24"
android:text="#string/app_name"
android:textColor="#color/black" />
This code will make your Button has a transparent background.
android:background="#android:color/transparent"
But this is a little bit hacky solution. If it won't have background and if you do not have to use Button in your case for sure, you can use TextView for that and basically to show text and drawable on bottom, you can code your TextView basically as below.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/app_name"
app:drawableBottomCompat="#drawable/ic_baseline_home_24" />
Note: These are very simple xml examples to solve your main problem about showing image on bottom of your text, in same view. If you need anything more, let me know and I would be glad to help.

How do I change the color of the drawable in a button?

I have a button in the list of items rendered with recycler view with a drawable icon. Here is my code.
<Button
android:id="#+id/button_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/ic_thumb_up_black_24dp"
android:text="#string/label_like"
android:textSize="11dp"
style="?android:attr/borderlessButtonStyle"/>
Now I want to change the color of the icon ic_thumb_up_black_24dp which is anydpi xml icon from Android material design icons.
I tried android:drawableTint="#android:color/secondary_text_dark" but it does not work.
android:textColor="#android:color/secondary_text_dark" works only on the text color but not on the icon. Can someone help me with this?

How to disable stretching of image in ImageView?

There are some ImageView and image for this view. ImageView is 100px/100px, but image is 50px/50px. I wouldn't like the image fills full space in ImageView, i.e. I want that the ImageView contains my image in center of ImageView without stretching. How can I do it?
UPDATE:
Sorry, I've made a mistake. My ImageView is 50px/50px, and my image is 100px/100px. What do you think about it?
Add to your ImageView:
android:scaleType="center"
Note that in the Android Studio xml layout preview if you use the android:background="#drawable/my_image" you will still see your image streached (In run time it won't streach).
But if you still want to see your ImageView background (not streached) also in the IDE preview use android:src="#drawable/my_image" instead of background property.
(in any case the scaleType should be center)
You need to set the android:scaleType attribute on your image view. If the image is bigger than your view, either use centerInside or one of the fitXY, fitStart, fitEnd options.
You have all the info you need on the Android developer documentation for the ImageView class.
set the android:scaleType with proper value, you can give centerCrop.
e.g. android:scaleType="centerCrop"
In ImageView we have a property called scaleType that is shown below in the code.
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/button2"
android:layout_alignParentTop="true"
android:layout_marginLeft="16dp"
android:layout_marginTop="94dp"
android:scaleType="center"
android:src="#drawable/ic_launcher" />
It will not scale your image.

Custom Button with picture and text?

I want to add a picture as well as text within a button as shown below.
If I am giving this as a background then it will deteriorate according to the screen size of different phones. So I want to custom draw custom layout where the image of info button will remain in same pixel and the info letters to be drawn as separate. So that I will get the exact outlook without any image distortion.
You can specify the background image, the '!' icon and the text separately like so:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:drawableLeft="#drawable/icon"
android:text="info" />
Use 9 patch for background, Use normal button, use drawable left for image on the left. That is the best way to go for your case.
Check this for 9-patch. That will let you create the background with rounded corners like you need without skewing them.
So finally you will have a normal button with the background that you got from 9-patch and the drawableLeft that you set the icon.
Check this out for defining button states in case you want a better user experience. You will still need to do all these and then define states for the button background and use it as the background.
You can use these three drawable for your backround name a file backround.xml in your res/drawable folder this file will handle your butoon backround on different state pressed,focused and normal:
these are three 9-patch drawable that you can use:
backround.xml is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
     android:state_pressed="true" 
     android:state_enabled="true"
        android:drawable="#drawable/btn_orange" />
    <item 
     android:state_focused="true" 
     android:state_enabled="true"
        android:drawable="#drawable/btn_orange" />
    <item 
     android:state_enabled="true"
        android:drawable="#drawable/btn_black" />
<item 
android:state_enabled="false"
        android:drawable="#drawable/btn_red" />
</selector>
Your xml button will be like this:
<Button
android:id="#+id/my_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/myIcon"
android:drawablePadding="5dp"
android:paddingLeft="10dp"
android:text="info"
android:background="#drawable/background" />
you need to arrange 3 things in your Button widget: background image, info icon and text. For these use these:
android:background="backgroundImage"
android:drawableLeft="info icon"
android:text="text"

Android. How to make dialog buttons appear a bit outside the dialog

I need to have a dialog (it's a game dialog) where buttons are at the lower corners of the dialog. Not inside the dialog but rather on the very corners (i.e. part of the button will reside over the dialog and the part will be outside of it).
First, as far as I know you can't move layout children outside their parent.
I've never tried exactly what you're going for, but I think it can be done. The trick would be to go with an activity with a dialog theme (you can find examples of these on the developer site or the API demos). Make sure your layout's root node has width and height set to wrap_content. Your root layout should be a RelativeLayout and have NO background (android:background="#0000").
Next, add another layout to your root node (FrameLayout would probably work) with a custom drawable for a background (or use the one that the default dialog uses from the framework) and width and height set to fill_parent or match_parent. Set android:padding to some dip value which pulls the background in from the edge of the dialog.
The only thing left to do would be to add your other layout elements to the root node. The FrameLayout will be drawn beneath everything else, and the padding will create the illusion of borders which do not encompass your UI.
Update
Yikes, just tried the above with good and bad results. First, you'll definitely want to look at the "Custom Dialog" example from the API demo, which makes use of:
CustomDialogActivity.java
layout/custom_dialog_activity.xml
xml/styles.xml
drawable/filled_box
Create an activity which uses the above xml layout file, and set the style for the activity to Theme.CustomDialog that you defined in xml/styles.xml. This will get you a red background for your activity. You can then edit the filled_box shape file to just have one background attribute set to invisible ("#0000"). The result should be an dialog-shaped activity with no background.
Next I tried to hack a background using my thoughts from above. The idea should be that there's a phony background drawn behind the other UI elements which does not encompass them, so it could be "shrunk" using layout_margin and not affect them. The problem here is that the phony background needs to have width and height set to relative to the other UI elements, so it sort of HAS to encompass them, so it can properly measure its own width and height relative to them.
So I think the solution could be to do most of what I've said above, except don't try the phony background thing. Just use a 9-patch drawable for your root layout background, and shrink the edges of your background to be drawn farther in than your content. You'd still use the custom theme stuff from above with an invisible window theme.
Here is a sample layout which i tried:
<?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="fill_parent"
>
<FrameLayout
android:orientation="vertical"
android:id="#+id/ll1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:drawable/dialog_frame">
</FrameLayout>
<Button android:layout_width="wrap_content"
android:id="#+id/button1"
android:layout_height="wrap_content"
android:layout_marginTop="35dp"
android:layout_centerHorizontal="true"
android:text="Button"></Button>
</RelativeLayout>
here is the screenshot:
hope u get the hint , goodluck

Categories