I would like to know if there is a way to select(highlight on clicking) an ImageButton and TextView simultaneously. I have an ImageButton and TextView. I have put them in a RelativeLayout and set the background to a drawable selector xml. But they are not highlighting together. If I press the ImageButton button it highlights alone and if I press the layout it highlights without highlighting the ImageButton. Could you please help me in this aspect?
Thank you.
i have the solution for you
wrap the ImageButton and 'TextView' in a 'LinearLayout'
Disable the clickable, focusable events of Imagebutton and textview
Apply a custom selector for your LinearLayout
here goes the updated custom_component.xml layout file
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toast_layout_root"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#f0f0f0"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp" >
<LinearLayout
android:id="#+id/myCustomComponent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#drawable/layout_bgimage_selector"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:gravity="center"
android:orientation="vertical" >
<ImageButton
android:id="#+id/testImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:src="#drawable/icon" />
<TextView
android:id="#+id/testText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:text="Test Text"
android:textColor="#FFF" />
</LinearLayout>
</RelativeLayout>
this layout file uses custom selector xml file layout_bgimage_selector.xml, which needs to be placed in res/drawable folder
<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/background" android:state_enabled="false"/>
<item android:drawable="#drawable/background" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/background_over" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#drawable/background_over" android:state_enabled="true" android:state_focused="true"/>
<item android:drawable="#drawable/background" android:state_enabled="true"/>
</selector>
the 9-patch images i used for layout selector are :
background.9.png -
background_over.9.png -
place them in res/drawable-hdpi folder. (or any image resource folder that matches your device configs)
use a custom background for the parent layout of the TextView and ImageView
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
android:state_focused="true"
android:state_pressed="false"
android:drawable="#drawable/listview_background_focused" />
<item
android:state_focused="true"
android:state_pressed="true"
android:drawable="#drawable/listview_background_focused" />
<item
android:state_focused="false"
android:state_pressed="true"
android:drawable="#drawable/listview_background_focused" />
<item
android:drawable="#drawable/listview_background_unfocused" />
</selector>
and write the respective code in the onclickListener of the parent layout instead of child views.
I would recommend to declare a single button that includes text and image like this.
<Button
android:id="#+id/dash_bt_list"
android:drawableTop="#drawable/your_image"
android:background="#drawable/selector"
android:onClick="onClickFeature"
android:text="#string/your_text"
android:layout_width="wrap_content" />
And in your selector :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:state_pressed="true">
<shape>
<solid android:color="#FFFFFF" />
<stroke android:width="3dp" android:color="#000000" />
<padding android:bottom="1dp" android:left="1dp" android:right="1dp"
android:top="1dp" />
</shape>
...
</selector>
That helped me
Related
I am trying to give the selector to the RadioButton of android:button but not able to showing that button in the preview as well as the real device, My goal is to make the android:button would be the custom.
I have to RadioGroup with two RadioButton.
I have tried this solution also https://stackoverflow.com/a/12432722/6869491
But still not able to get the desired solution.
<RadioGroup
android:id="#+id/radio_group"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/padding_25"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="#id/sub_const"
app:layout_constraintEnd_toEndOf="#id/sub_const"
app:layout_constraintStart_toStartOf="#id/sub_const"
app:layout_constraintTop_toBottomOf="#id/pay_amt_et">
<RadioButton
style="#style/MyRadioButtonStyle"
android:id="#+id/manual_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/manual"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
/>
<RadioButton
style="#style/MyRadioButtonStyle"
android:id="#+id/recurring_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Recuring"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
/>
</RadioGroup>
And here is the radio button selector, that is radio_btn_selector.
<item android:state_checked="true" android:state_window_focused="false"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_window_focused="false"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:state_pressed="true"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_pressed="true"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:state_focused="true"
android:drawable="#drawable/radio_btn_active" />
<item android:state_checked="false" android:state_focused="true"
android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="false" android:drawable="#drawable/radio_btn_un_selected" />
<item android:state_checked="true" android:drawable="#drawable/radio_btn_active" />
And here is the radio_btn_active.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="#color/colorWhite" />
<stroke
android:width="#dimen/padding_2"
android:color="#color/grey_darker" />
</shape>
</item>
<item
android:bottom="#dimen/padding_30"
android:end="#dimen/padding_30"
android:start="#dimen/padding_30"
android:top="#dimen/padding_30">
<shape android:shape="oval">
<solid android:color="#color/primary_edtext_light" />
</shape>
</item>
</layer-list>
And this is radio_btn_un_selected.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#color/colorWhite" />
<stroke
android:width="#dimen/padding_2"
android:color="#color/grey_darker" />
</shape>
And Given the style as well.
<style name="MyRadioButtonStyle"
parent="#android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">#drawable/radio_btn_selector</item>
</style>
Whats I am making wrong please guide me.
I think you missed to set RadioButton's android:background="#drawable/radio_btn_selector" property.
<RadioButton
android:id="#+id/manual_rb"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:checked="true"
android:text="#string/manual"
android:textColor="#color/textcolor"
android:textSize="#dimen/fontsize_16"
android:button="#android:color/transparent"
android:background="#drawable/radio_btn_selector"
/>
I created the following design for a button
by using
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:right="245dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#000" />
</shape>
</item>
<item android:left="0dp">
<shape android:shape="rectangle" >
<corners android:radius="3dp" />
<solid android:color="#80000000" />
</shape>
</item>
</layer-list>`
What I want to achieve is:
The + sign is supposed to change in a 'tick' signed once the fragment that will be opened is completed(an address). How can I make the opacity of the black rectangle lower ? I still haven't figured out how to make the + sign, so any ideas are welcomed.
And the main question is: How can I set those styling values by using code in android ? I want to change the size of the first item(245dp) to 5% of the width of the button.
layout of my button:
<Button
android:id="#+id/button8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_marginTopPercent="7%"
app:layout_marginBottomPercent="6%"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
app:layout_widthPercent="50%"
android:layout_below="#id/button7"
android:background="#drawable/btnstyle"
android:text="Create"
android:textColor="#fff" />
and btnstyle is defined above.
Assuming the background is background.xml placed in drawables folder.
You can use this-
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:background="#drawable/background"
android:orientation="horizontal">
<ToggleButton
style="?android:attr/borderlessButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="20dp"
android:layout_marginStart="20dp"
android:layout_marginTop="10dp"
android:checked="false"
android:drawablePadding="80dp"
android:drawableRight="#drawable/button_image"
android:textColor="#android:color/white"
android:textOff="Button1"
android:textOn="Button1"/>
</LinearLayout>
For the drawable button_image.xml, here is the code-
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:state_focused="true" android:drawable="#drawable/plus_img"/>
<item android:state_checked="false" android:state_focused="false" android:drawable="#drawable/plus_img"/>
<item android:state_checked="true" android:state_focused="true" android:drawable="#drawable/tick_img"/>
<item android:state_checked="true" android:state_focused="false" android:drawable="#drawable/tick_img"/>
</selector>
On the clickListener of your toggleButton, you can open up the fragment and setChecked of your togglebutton to !toggleButton.isChecked(). Basically like this- toggleButton.setChecked(!toggleButton.isChecked());
Regarding opacity
In your xml that you have written, the color of first item in rectangle is in the format #RGB. It can also be #ARGB where 'A' is for alpha. So if you set A = 0, the view will be transparent and with A = f, the view will be opaque.
How can i change TextView text color by using custom xml file.
When i press the button button text should change into white color, When i release the button the text should be changed into black color. Because i have used this background.xml for all textviews. so if i change in single place it will be affect all the place. but Text Color is not changing.
TextView Code i used :
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/btn_add"
android:background="#drawable/background"
android:gravity="left"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/student_name"
android:textColor="#color/black"
android:textSize="18dp" />
background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/bg1"
android:color="#color/White"
android:state_pressed="false"/>
<item
android:drawable="#drawable/bg2"
android:color="#color/black"
android:state_pressed="true"/>
</selector>
Try this:
TextView
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/btn_add"
android:background="#drawable/background"
android:gravity="left"
android:paddingBottom="10dp"
android:state_selected="true"
android:paddingLeft="10dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/student_name"
android:textColor="#drawable/my_text_color"
android:textSize="18dp" />
drawable/my_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed -->
<item android:state_pressed="true" android:color="#color/White"/>
<!-- focused -->
<item android:state_focused="true" android:color="#color/White"/>
<!-- activated -->
<item android:state_activated="true" android:color="#color/White"/>
<!-- checked -->
<item android:state_checked="true" android:color="#color/White"/>
<!-- default -->
<item android:color="#color/black"/>
</selector>
In your class file add the following code,
textView.setselected(true);
Sagar Zala
The Code you have given is working. I used like this.
TextView Code :
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_toLeftOf="#+id/btn_add"
android:background="#drawable/background"
android:gravity="left"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="5dp"
android:paddingTop="10dp"
android:text="#string/blood_pressure"
android:textColor="#drawable/my_text_color"
android:textSize="18dp" />
background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/bg1"
android:state_pressed="false"/>
<item
android:drawable="#drawable/bg2"
android:state_pressed="true"/>
</selector>
my_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed -->
<item android:state_pressed="true" android:color="#color/White"/>
<!-- focused -->
<item android:state_focused="true" android:color="#color/White"/>
<!-- activated -->
<item android:state_activated="true" android:color="#color/White"/>
<!-- checked -->
<item android:state_checked="true" android:color="#color/White"/>
<!-- default -->
<item android:color="#color/black"/>
</selector>
Im trying to make custom Radio buttons. Found an article which looked great (Article) but when i try doing what is said here, it doesnt update at all. Would a base theme prevent me from making custom radio buttons? My code below:
Layout xml
<RadioGroup
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/radioGroup"
android:background="#drawable/country_select_radio_button">
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/SouthAfrica"
android:layout_alignStart="#+id/SouthAfrica"
android:layout_alignTop="#+id/SouthAfrica"
android:layout_marginTop="35dp"
android:background="#drawable/country_select_radio_button"
android:text="Kenya"
android:layout_gravity="center_horizontal"
android:checked="false" />
<RadioButton
android:id="#+id/za_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btn_za"
android:layout_centerHorizontal="true"
android:layout_marginBottom="125dp"
android:text="South Africa"
android:checked="true"
android:layout_gravity="center_horizontal" />
</RadioGroup>
button style xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/b"
android:state_checked="true"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_pressed="true" />
<item
android:drawable="#drawable/a"
android:state_checked="true" />
<item
android:drawable="#drawable/b" />
a.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#fff" />
<stroke
android:width="2dp"
android:color="#FF0000" />
b.xml
<selector
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="5dp" />
<solid
android:color="#FF0000" />
<stroke
android:width="2dp"
android:color="#555555" />
no matter what i change, the style of the button stays the default?
what am i doing wrong?
u need to set the android button property in your xml
<RadioButton
android:id="#+id/ke_radio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/radio_button_selector"
android:padding="#dimen/text_padding"
android:paddingLeft="10dp"
/>
wher radio_button selector is your custom xml file for radio button
please use below selector xml file
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/radiobutton1" android:state_checked="false"/>
<item android:drawable="#drawable/radiobutton2" android:state_checked="true"/>
<item android:drawable="#drawable/radiobutton1"/>
</selector>
put 2 images for testing as radiobutton1 and radiobutton2 and test
I have an ImageButton and a LinearLayout wrapping that button, like this:
<LinearLayout
android:id="#+id/homeButtonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/p_buttons_background"
android:orientation="vertical" >
<ImageButton
android:id="#+id/homeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:background="#drawable/home_icon"
android:onClick="goBackToCameraScreen" />
</LinearLayout>
I put a background around the ImageButton in the LinearLayout, as you can see above.
I want to be able to change that background (that is, the background of the LinearLayout, not the background of the ImageButton) when the user clicks on the ImageButton. I could do that programmatically, but I want to do that via XML. I could easily change the background of the ImageButton by writing a selector, like this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/button_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/button_focused" /> <!-- focused -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>
That's EXACTLY what I want, except that I want to change the LinearLayout background, and not the ImageButton background. How can I create a XML selector just like the one above, but that actually changes the background of the LinearLayout instead of the ImageButton background??
Thank you in advance!! =)
Set the selector to your LinearLayout and add android:descendantFocusability="blocksDescendants" to it.
In selector, replace all button backgrounds with layout backgrounds.
<LinearLayout
android:id="#+id/homeButtonLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/layout_bg_selector"
android:orientation="vertical"
android:descendantFocusability="blocksDescendants">
<ImageButton
android:id="#+id/homeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10px"
android:background="#drawable/home_icon"
android:onClick="goBackToCameraScreen" />
</LinearLayout>
selector layout_bg_selector.xml :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#F0F0F0" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#00F000" /> <!-- focused -->
<item android:drawable="#0000F0" /> <!-- default -->
</selector>
I think the questioner is dead by now :XD
but this is the solution
add this two lines of code to your layout:
android:clickable = "true"
and
android:focusable = "true"
the main sample is
we have this constraint layout like :
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/layoutSample"
android:layout_width="150dp"
android:layout_height="120dp"
android:background="#drawable/layout_selector"
android:clickable="true"
android:focusable="true">
</androidx.constraintlayout.widget.ConstraintLayout>
and the ( layout_selector.xml ) like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/bg_pressed" android:state_pressed="true" /> <!-- pressed -->
<item android:drawable="#drawable/bg_focused" android:state_focused="true" /> <!-- focused -->
<item android:drawable="#drawable/bg_default" /> <!-- default -->
</selector>
and for ( bg_pressed.xml ) and ( bg_focused.xml ) and ( bg_default.xml ) as we used in selector before we need to declare them in drawable folder like :
bg_pressed.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#00ff00" />
</shape>
bg_focused.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
<stroke
android:width="2dp"
android:color="#ff0000" />
</shape>
bg_default.xml :
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="8dp" />
<solid android:color="#ffffff" />
</shape>
now put your image view or something else inside the layout and try
some clicks :) (read the question!)
hope this will help you ...