Develop Reference

How to implement the round border and ?selectableItemBackground in textview android?

I am trying to have two text views inside a Linear Layout with a horizontal orientation. Now I want to have the following things for each text view:
An icon at left - implemented using android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
A round border around the text view - implemented using android:background="#drawable/round_border"
Also, need that ripple effect on touching a touch item
The 3rd point is implemented in other text views using the att.
android:background="?selectableItemBackground"
android:clickable="true"
But there is already a background att. for the round border. Now my question is how to achieve that ripple effect? Is using following att. only way:
android:foreground="?selectableItemBackground"
Android shows this att. is not supported in lower api versions so worried.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/vision_mission"
android:gravity="center"
android:layout_margin="8dp"
android:padding="8dp"
android:textSize="16sp"
android:onClick="openVisionMission"
android:drawableLeft="#drawable/ic_lightbulb_outline_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"/>
<TextView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="#string/team"
android:textSize="16sp"
android:drawableLeft="#drawable/ic_people_blue_24dp"
android:background="#drawable/round_border"
android:clickable="true"
android:focusable="true"
android:padding="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:gravity="center"/>
</LinearLayout>

You can achieve ripple effect and text view rounded background at the same time using the following code.
Custom ripple drawable, it require API level 21+
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/grey">
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
<item>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<stroke
android:width="1dp"
android:color="#android:color/holo_blue_dark" />
</shape>
</item>
</ripple>
After that set background of your text view
android:background="#drawable/custom_ripple"
For pre lollypop ie. below API level 21
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorDarkGray"/>
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreen"/>
</shape>
</item>
<item android:state_pressed="true">
<shape android:shape="rectangle">
<solid android:color="#color/colorButtonGreenFocused"/>
</shape>
</item>
</selector>

It is not exactly what you are looking for.
You can achieve easily something similar with a MaterialButton with a OutlinedButton style.
Something like:
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
android:text="...."
.../>
You can customize the padding between the icon and the text, the textColor, the strokeWidth, the strokeColor and also the color selector used for the app:rippleColor
<com.google.android.material.button.MaterialButton
style="#style/Widget.MaterialComponents.Button.OutlinedButton.Icon"
app:icon="#drawable/ic_add_24px"
app:strokeColor="#color/primaryDarkColor"
app:strokeWidth="2dp"
app:iconPadding="16dp"
.../>

you can change your background drawable with selector tag
<?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:state_hovered="true"
android:drawable="#drawable/button_focused" /> <!-- hovered -->
<item android:drawable="#drawable/button_normal" /> <!-- default -->
</selector>

Custom Button style is appearing in preview but not on device

I made a custom style for my buttons. It is perfectly appearing in Layout Preview (through Android Studio XML Preview) but when I'm running the app, the button has not the wanted borders.
Any idea of the reason(s) that may cause this ?
activity_main.xml
<style name="Button.Pink" parent="Button">
<item name="android:background">#drawable/rounded_corners_button</item>
<item name="android:backgroundTint">#color/pink</item>
<item name="android:textColor">#color/white</item>
</style>
styles.xml
<Button
style="#style/Button.Pink"
android:id="#+id/btn_sale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|start"
android:enabled="false"
android:foreground="?attr/selectableItemBackground"
android:text="#string/sale"
android:layout_marginTop="4dp"
android:layout_marginStart="4dp"
android:visibility="gone"
tools:visibility="visible" />
rounded_corners_button.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<corners android:radius="65dp" />
</shape>
</item>
</selector>
EDIT :
Adding some pictures of renderers
What the XML Preview Layout Design shows :
What the app shows :

Try change this line
<style name="Button.Pink" parent="Button">
To
<style name="Button.Pink" parent="Widget.AppCompat.Button"> //AppCompat style to support backports.
UPDATED
If you are targeting min api 21 then try latest material button introduced in support library 28..
<android.support.design.button.MaterialButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sale"
app:backgroundTint="#color/colorAccent"
app:cornerRadius="50dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp" />

Maybe you just forgot to remove android:visibility="gone"? :)))
Also why are you using android:backgroundTint and android:foreground?
Maybe you can do something more simple, like this
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/"
<corners android:radius="65dp" />
</shape>
And also create shapes for other states and than create one selector

Use below code I hope it will help you
Button
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:textColor="#ffffff"
android:background="#drawable/rounded_corners_button"
android:text="Buttons" />
rounded_corners_button in draweble
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item >
<shape android:shape="rectangle" >
<corners android:radius="5dip" />
<stroke android:width="1dip" android:color="#00FFFF" />
<gradient android:angle="-90" android:startColor="#8dbab3" android:endColor="#58857e" />
</shape>
</item>
</selector>

When i alter radio button style xml - changes dont reflect

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

Is there any attribute for the button to make it look stylish?

I am using the following. I want to add stylish properties like color and style.
Please help
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="OK" />

paste the following code into new xml file in drawable folder and name the file draw and
and in button give background of this xml file name
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#1F2120" />
<corners
android:bottomLeftRadius="6dp"
android:bottomRightRadius="6dp"
android:textColor="#android:color/white"
android:topLeftRadius="6dp"
android:topRightRadius="6dp" />
</shape>
this is how you can use this
<Button
android:id="#+id/force"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="15dp"
android:layout_weight="1"
android:background="#drawable/draw"
android:text="some txt"
android:textColor="#android:color/white"
android:textSize="20dp" />

<!-- Custom Style for bottom displaying confirm and cancel -->
<style name="Widget.GsMenuButton" parent="#style/Widget.Button">
<item name="android:layout_height">36px</item>
<item name="android:layout_width">82px</item>
<item name="android:singleLine">true</item>
<item name="android:ellipsize">end</item>
<item name="background">#drawable/gs_menu_btn</item>
<item name="android:textColor">#fff</item>
</style>
This is what i have done to make my button. It change the button background color with background attribute and change the text color with android:textColor. I think you can just add these to your button attribute.

you can add images to this button by using :
android:background="#drawable/image_name"
if you want to simply add some color to this button's background, you can do it like this:
android:background="#ff0000" // color code for red color
besides, you can specify text color like this :
android:textColor="#0000ff" // color code for blue color
if you want to change your button's background on different events like while the button is foccused, pressed etc. you need to create an xml file say mybutton_style.xml indrawable folder.
// code for mybutton_style.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="#drawable/btn_image_pressed" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#drawable/btn_image_focussed" /> <!--focused -->
<item android:drawable="#drawable/btn_image_default" /> <!-- default -->
</selector>
after that you just need to specify it as your button's background:
android:background="#drawable/mybutton_style"

copy following bg.xml file in to your drawable folder.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"><shape android:shape="rectangle">
<corners android:radius="10dp" />
<gradient
android:endColor="#fffffa"
android:startColor="#ffffff"
android:angle="270" />
<solid android:color="#00aa00" />
<padding android:bottom="10.0dip" android:left="10.0dip" android:right="10.0dip" android:top="10.0dip" />
</shape></item>
<item android:state_pressed="false"><shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#ffffff" />
<gradient
android:endColor="#fffffa"
android:startColor="#ffffff"
android:angle="270" />
<padding android:bottom="10.0dip" android:left="10.0dip" android:right="10.0dip" android:top="10.0dip" />
</shape></item>
</selector>
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView2"
android:background="#drawable/bg"
android:layout_centerHorizontal="true"
android:layout_marginTop="43dp"
android:text="OK" />

if you want to make your button stylish but in simple way then you can try the following:
android:background="#null"
android:typeface="serif"
if you don't want simple stuff then you can customize it as you want.

Selecting ImageButton and TextView simultaneously

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