Change drawable color on button on click - android

I have some buttons with a text and a drawable set in the xml with android:drawableLeft=...
I want to know how to change, on click, the color of both the text and the drawable. And it has to be general, because i have a lot of button with each time, a different drawable.
My XML :
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_articles"
style="#style/Main_button"
android:layout_marginLeft="5dp"
android:background="#color/green3"
android:onClick="myClickHandler"
android:text="Articles"
android:drawableLeft="#drawable/ic_article"
android:textColor="#drawable/btn_default" />
<Button
android:id="#+id/btn_encaiss"
style="#style/Main_button"
android:layout_marginLeft="5dp"
android:background="#color/green4"
android:onClick="myClickHandler"
android:text="Encaissement"
android:drawableLeft="#drawable/ic_encaiss"
android:textColor="#drawable/btn_default" />
<Button
android:id="#+id/btn_stats"
style="#style/Main_button"
android:layout_marginLeft="5dp"
android:background="#color/green1"
android:onClick="myClickHandler"
android:text="Statistiques"
android:drawableLeft="#drawable/ic_stats"
android:textColor="#drawable/btn_default" />
<Button
android:id="#+id/btn_clients"
style="#style/Main_button"
android:layout_marginLeft="5dp"
android:background="#color/green2"
android:onClick="myClickHandler"
android:text="Clients"
android:drawableLeft="#drawable/ic_clients"
android:textColor="#drawable/btn_default" />
</LinearLayout>
For now i just change text color on click. I want to change both drawable and text color without knowing the left drawble name.

Drawable img = getContext().getResources().getDrawable( R.drawable.smiley );
img.setBounds( 0, 0, 60, 60 );
txtVw.setCompoundDrawables( img, null, null, null );
With this code, you can change a left drawable programatically.
For the text color, please see Android documentation

Related

How to dynamically set drawableTop for Button (android)

I have a Button:
<Button
android:id="#+id/btnCap2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/btn_s9cap2"
android:background="#null"
android:layout_gravity="center_horizontal"
android:drawablePadding="10dp"
android:padding="20dp"
android:text="#string/menu_btn_s9cap2"
android:textColor="#color/black"
android:textStyle="bold" />
I need to adjust drawableTop dynamically . How can I do this ?
I know how to adjust background but this does not solve my problem.
btnCap2 = (Button) findViewById(R.id.btnCap2);
drawable = getResources().getDrawable(R.drawable.btn_s9cap2);
btnCap2.setBackground(drawable);
btnCap2.setOnClickListener(this);
Use
btnCap2.setCompoundDrawablesWithIntrinsicBounds(null, drawable, null, null);

How to change icon size in button android

I have a button which have both text and image. The image size it is taking as actual size of image. How can i change the size of image in button?
<Button
android:id="#+id/button3"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:drawableTop="#drawable/home_icon"
android:text="Settings"
/>
Set
android:scaleType="fitXY"
Also wrap_content is the preferred Parameter for width and height so that the OS will automatically adjust depending upon the screen size.
Please refer to
Android - Image Button Scale
and
Adjusting the size of an ImageButton in Android
You should use a ImageButton and specify the image in android:src, and set android:scaletype to fitXY
Set Drawable in your code
Drawable drawable = getResources().getDrawable(R.drawable.icon);
drawable.setBounds(0, 0, (int)(drawable.getIntrinsicWidth()*0.10),
(int)(drawable.getIntrinsicHeight()*0.10));
ScaleDrawable sd = new ScaleDrawable(drawable, 0, sWidth,sHeight);
Button btn = findViewbyId(R.id.btnId);
btn.setCompoundDrawables(sd.getDrawable(), null, null, null); //set drawableLeft/Right for example
Control the size deterministically with specific measurements. For example:
<Button
android:id="#+id/button3"
android:layout_weight="1"
android:layout_height="50dp"
android:layout_width="50dp"
android:background="#drawable/home_icon"
android:text="Settings"
/>
For even more control over the button's design use a container such as a RelativeLayout to hold the image and the text. Then assign an onClickListener to the container to turn it into a clickable button. Here's an example:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/snazzy_button_with_image_above_text"
android:layout_width="wrap_content"
android:layout_height="64dp"
android:layout_gravity="center"
android:layout_marginLeft="1dp"
android:background="#color/SkyBlue"
android:paddingBottom="2dp"
android:paddingLeft="1dp"
android:paddingRight="1dp"
android:paddingTop="1dp" >
<ImageView
android:id="#+id/your_image"
android:layout_width="50dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#color/white"
android:contentDescription="image inside button"
android:scaleType="centerCrop" />
<TextView
android:id="#+id/your_text"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/your_image"
android:layout_alignParentLeft="true"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:layout_marginTop="0dp"
android:background="#color/translucent_black"
android:gravity="bottom|center_horizontal"
android:paddingTop="0dp"
android:text="Your Button Text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="#color/white"
android:textSize="10sp" />
</RelativeLayout>
In the code assign the onClickListener as such:
yourButton = (RelativeLayout) findViewById(R.id.snazzy_button_with_image_above_text);
yourButton.setOnClickListener(new View.OnClickListener() {
public void onClick(View clickedButton) {
//button click action here
}
Set android:background="#drawable/image_name"
and give width and height like
android:layout_height="10dp"
android:layout_height="10dp"
or you can try using ImageButton instead of Button because ImageButton has more image rendering options than Button
You can refer here
Simple way: add next line to dimens.xml
This parameter change size all icons on buttons in AlertDialog
<resources>
<dimen name="abc_alert_dialog_button_dimen">24dp</dimen>
</resources>

Button opacity/transparency

main.xml:
<?xml version="1.0" encoding="utf-8"?>
<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/background"
android:gravity="center"
android:color="#66FF0000"
>
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/noua"
android:textStyle="bold"
android:textColor="#808080"
/>
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/zece"
android:textStyle="bold"
android:textColor="#808080" />
<Button
android:id="#+id/button3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/unspe"
android:textStyle="bold"
android:textColor="#808080" />
<Button
android:id="#+id/button4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/doispe"
android:textStyle="bold"
android:textColor="#808080"
/>
</LinearLayout>
This is my main.xml, I am trying to make the buttons the most transparent, but I want still to see them and I don't know what to add and where to add, please correct my xml with the low opacity on bottons. Premeditated thank you:D
check How to Set Opacity (Alpha) for View in Android
You can set transparency on background of objects, use #XX808080, where XX is the alpha/transparency value.
android:background="#80FF0000"
this will be a half-transparent red background.
You can set transparency on the button text using the textColor property in the same manner:
android:textColor="#80FF0000"
You can also achieve through code in an animation
AlphaAnimation alphaAnim = new AlphaAnimation(1.0f, 0.5f);
alphaAnim.setDuration (400);
myButton.getBackground().startAnimation(alphaAnim); // set alpha on background
or directly:
myButton.getBackground().setAlpha(0.5f); // added in API 11, sets alpha on background
both methods set the alpha to 50%
Lastly, you can try adding android:alpha for your XML:
<Button
android:id="#+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/zece"
android:textStyle="bold"
android:textColor="#808080"
android:alpha="0.5"
/>
You probably cant change its opacity with code, because they are 9patches. You need to create your own 9patch and set it to buttons as background. If you want a solid color, of course you can also use something like:
android:background="#80363636"
Here #AARRGGBB, how low you keep first two digits you get that opacity
in code, you can get an instance of the button and set the background drawable's alpha manually.
Button btn = (Button) findViewById(..);
btn.getBackground().setAlpha( a ); // where a : 0..255 : 0=transparent, 255=fully opaque

Android - How to display 4 text views with Icons?

I want to display 4 texts with images exactly like showed in this screenshot:
Notice the 4 texts at the buttom of the image, with the icons next to them.
My question is how do I do it, I mean, how do I attach an icon to each text field and display it symmetrically at the bottom of the page.
I want to position my texts with the icons exactly like this example.
Thanks for your help, it's a really great exercise for a newbie :)
Dvir
Use drawableLeft for this
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#drawable/icon_1"
android:gravity="center_vertical"
android:textStyle="bold"
android:textSize="24dip"
android:maxLines="1"
/>
OR
In java code
TextView textView = (TextView) findViewById(R.id.yourTV);
textView.setCompoundDrawablesWithIntrinsicBounds(R.drawable.icon_1, 0, 0, 0);
You can just use a TextView, and add for example android:drawableLeft="#drawable/your_icon"
Use left/right depending of where you want your icon.
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_weight="1"
android:drawableLeft="#drawable/icon"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_weight="1"
android:drawableLeft="#drawable/icon"
android:gravity="center_horizontal"/>
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_weight="1"
android:drawableLeft="#drawable/icon"
android:gravity="center_horizontal"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Text"
android:layout_weight="1"
android:drawableLeft="#drawable/icon"
android:gravity="center_horizontal"/>
</LinearLayout>
</LinearLayout>
Ideal approach to implement this would be:
textView.setCompoundDrawables(getDrawable(R.drawable.image), 15), null, null, null);
add below function to your code as well:
public Drawable getDrawable(int drawable, float form_factor) {
Drawable top = getApplicationContext().getResources().getDrawable(drawable);
top.setBounds(0, 0, (int)form_factor, (int)form_factor);
return top;
}
This way your can set/choose/resize your text-icons appropriately(by adjusting the value of form-factor) which is not possible when done through xml.
NOTE: I've written above function for square-drawables, for rectangular images we will have to do setBounds accordingly.

spacing for checkmark image of the check box in android

Hi i am trying to create a check box list which should looks like in the below image which will have space before and after checkmark image.
but when i am trying to create check box its is showing like the below image.
there is no space surrounds to check-mark image like i am showing the first image. If i use padding to check box component its like "android:padding=50dp" its giving space between check-mark image and text. But not giving space in the starting .i.e before Check-Mark image.
below is my xml layout for check box
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:padding="15dp">
<CheckBox android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:button="#drawable/btn_check_square"
android:background="#drawable/filter_item_background"
android:textColor="#android:color/black"
android:padding="5dp"
android:text="check box text"/>
</LinearLayout>
Any help to solve this issue is appreciated.
this is resolved with below code.
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/filter_item_background"
android:button="#android:color/transparent" //Make button null
android:drawableLeft="#drawable/btn_check_square" //Create button in drawable
android:drawablePadding="20dp" //Set space between Text & CB
android:padding="5dp"
android:text="check box text"
android:textColor="#android:color/black" />
Try this (without custom graphics):
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="#android:color/transparent"
android:drawablePadding="8dp"
android:text="CheckBox" />
It uses a little trick: As Checkbox is derived from Button, we can add a drawable and can now set a padding between label and drawable. As we do not acutally need a real icon, we use the transparent color instead.
<CheckBox
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/filter_item_background"
android:button="#null" //Make button null
android:drawableLeft="#drawable/btn_check_square" //Create button in drawable
android:drawablePadding="20dp" //Set space between Text & CB
android:padding="5dp"
android:text="check box text"
android:textColor="#android:color/black" />
Use the below code
final float scale = this.getResources().getDisplayMetrics().density;
checkbox.setPadding(checkbox.getPaddingLeft()
+ (int) (10.0f * scale + 0.5f),
checkbox.getPaddingTop(),
checkbox.getPaddingRight(),
checkbox.getPaddingBottom());
Add this to your checkbox:
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"

Categories

Resources