Develop Reference

Drawing ripple over view group content

I'm trying to apply a ripple effect (#drawable/pill) to a layout. The ripple draws under the layout children, while I'd like the effect to be applied over the content.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:background="#drawable/pill"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/my_icon"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text"/>
</FrameLayout>
</FrameLayout>
And pill.xml (where #drawable/pill_bg is a custom shape):
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:attr/colorControlHighlight">
<item android:id="#android:id/mask" android:drawable="#drawable/pill_bg"/>
<item android:drawable="#drawable/pill_bg"/>
</ripple>
Following other posts, I tried applying android:background="#null" and android:drawSelectorOnTop="true" to the ImageView with no luck.
Does it even make sense to have the ripple defined as the background of a layout? I'm wondering if the right approach is to separate the ripple from the background drawable, and apply the ripple to a dummy view that overlaps the content.

You are right. What you have defined in the xml, works like as shown in the first diagram. To have the ripple drawable above the ImageView and TextView, you need to define it above them. One approach to achieve that would be to have an ImageView on top of your LinearLayout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/ll_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:padding="8dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/my_icon" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Sample text" />
</LinearLayout>
<ImageView
android:id="#+id/iv_ripple"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/ll_container"
android:layout_alignLeft="#id/ll_container"
android:layout_alignRight="#id/ll_container"
android:layout_alignTop="#id/ll_container"
android:src="#drawable/pill" />
</RelativeLayout>

How to change the shape of a switch in android

I created a layout file using a switch. Now I want to change shape of its selector.Also I want to remove text on this switch.
Currently it has a rectangular shape . I want to change it to a circular shape.
This is my layout file ,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/activity_remind_me"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.example.pvt.RemindMeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/remind_me_head_txt"
android:layout_marginTop="5dp"
android:textSize="20sp"
android:text="Example one"
android:textStyle="bold"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="120dp"
android:layout_weight="1">
<Switch
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:showText="false"
android:id="#+id/remind_me_switch"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_weight="1">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:id="#+id/remind_me_list_img"
android:src="#drawable/list_menu" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/remind_me_title_txt"
android:text="Sample Head"
android:textSize="12sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/remind_me_content_txt"
android:text="Content"
android:textSize="12sp"/>
</LinearLayout>
</LinearLayout>
Currently I have no idea about how to achieve this.
Can we change the shape of a switch ? Is it possible ?

These shape changes according to devices, for instance it will appear rectangular in Redmi Note and circular in Moto .
Although, In order to achieve this you can have a toggle implementation such as below :
Having three styles :
offToggle ( Style Off )
onToggle ( Style On )
custom_toggle ( Style Custom Toggle )
Style Off
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#android:color/holo_blue_dark" />
</shape>
Style On
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:visible="true">
<solid android:color="#android:color/black" />
</shape>
Now the collective style which we will use in our layout Style Custom Toggle
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/offToggle" android:state_enabled="false"/>
<item android:drawable="#drawable/onToggle" android:state_pressed="true"/>
<item android:drawable="#drawable/onToggle" android:state_checked="true"/>
<item android:drawable="#drawable/onToggle" android:state_focused="true"/>
<item android:drawable="#drawable/offToggle"/>
</selector>
Now just use this style in your layout, for instance :
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn=""
android:textOff=""
android:background="#drawable/custom_toggle" />
Tip : To remove text from switch/Toggle use android:textOn="" android:textOff="" .

Use any shapes and styles u like for switch in android
This library will help u a lot
SwitchButton

Listview adapter's button can not be clicked

I am using listview's adapter, my code,
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:padding="10dp"
android:background="#android:color/darker_gray"
android:orientation="vertical" >
<TextView
android:id="#+id/tv_position"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:text="position1"
android:textSize="20sp"
/>
<Button
android:id="#+id/btn_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
/>
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#drawable/selector_translate_blue"
android:clickable="true" //Add this is to allow this to get focus, but the button can not be clicked.
>
</RelativeLayout>
</FrameLayout>
When i remove android:clickable="true", the button can be clicked, but the RelativeLayout can not focused.
How to achieve a similar effect as Google Plus?
UPDATE
Now only RelativeLayout can be clicked.
I mean how to make the Button also can be clicked?
NOT click them two at the same time.

Try to set android:focusable and android:focusableInTouchMode to false to your button:
<Button
android:id="#+id/btn_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
android:focusable="false"
android:focusableInTouchMode="false"
/>
UPDATE
You need to set your Button android:focusable as false and also the RelativeLayout. Plus, you need to have a selector for your both Button and RelativeLayout
Here:
<Button
android:id="#+id/btn_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:background="#drawable/selector"/>
And Here:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:background="#drawable/selector_translate_blue"
android:background="#drawable/selector_ll"
android:focusable="false" >
And here is the important thing, in those selectors, at the android:state_pressed, you need to add more the android:state_focused, this way, when the item click, the Button and RelativeLayout can NOT get focusable, so it will NOT trigger this state:
selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#android:color/darker_gray" android:state_pressed="true" android:state_focused="true"></item>
</selector>
selector_ll.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:state_focused="true"
android:drawable="#android:color/darker_gray"/> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#android:color/darker_gray"/> <!-- focused -->
<item android:drawable="#android:color/white"/> <!-- default -->
</selector>
Hope this helps.

Have you tried adding android:focusable="true" or android:focusableInTouchMode="true" to your relativelayout?

Make button background transparent using selector

Here we go. I have a button that has a non-pressed state background as transparent. As soon as the button is pressed, the background is no longer transparent (see the pics). I use nine patch for all my images.
This is my selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/starfighterstartbtndown" android:state_pressed="true"/>
<item android:drawable="#drawable/starfighterstartbtn"/>
</selector>
And here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/mainMenuImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/starfighter" >
</ImageView>
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:background="#android:color/transparent"
android:clickable="true"
android:hapticFeedbackEnabled="true"
android:src="#drawable/startselector" >
</ImageButton>
<ImageButton
android:id="#+id/btnExit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:clickable="true"
android:src="#drawable/exitselector"
android:background="#android:color/transparent"
android:hapticFeedbackEnabled="true" >
</ImageButton>
</RelativeLayout>
Not Clicked:
Clicked:
I have also tried the following methods with no luck
button.getBackground().setAlpha(0);
button.setBackgroundColor(Color.TRANSPARENT);
Also tried the following inside the onClickListener()
view.getBackground().setAlpha(0);
view.setBackgroundColor(Color.TRANSPARENT);
button.getBackground().setAlpha(0);
button.setBackgroundColor(Color.TRANSPARENT);
Still no luck. Good luck :)

to make your button's background transparent in non pressed state , your selector should be like this :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/starfighterstartbtndown" android:state_pressed="true"/>
<item android:drawable="#android:color/transparent"/>
</selector>
And in your imageButton's declaration in xml should use the selector as a background and dont make anything as a source of your imageButton:
<ImageButton
android:id="#+id/btnStart"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="#drawable/startselector"
android:background="#android:color/transparent"
android:clickable="true"
android:hapticFeedbackEnabled="true" />

You could use Color.argb(). It takes four int parameters, each ranging from 0 to 255.
Let's say you want a blue button with 50% alpha:
button.setBackgroundColor(Color.argb(125, 0, 0, 255));

You can also try this
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"/>

Button with custom XML layout

Is it possible to create a button with a custom xml layout?
I have this layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="1dp"
android:background="#7e7e7e">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:background="#f9f9f9">
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="ButtText"
android:textColor="#000000">
</TextView>
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/arrow"
android:layout_alignParentRight="true">
</ImageView>
</RelativeLayout>
</LinearLayout>
Now I want to use this on a button. Anyone know how I can do this?
I was thinking if I had Button.java file that extended Button. And then setView(R.layout.mylayout.xml); ... but that was to easy, and it clearly not working
Regards Martin

I've been dealing with this recently because I wanted to put two textviews in a button. You have to choose:
Extend Button class and use it in your layout
Use a Layout insted of a button and drag inside everithing you need and make it clickable by adding this parametter to it:
android:clickable="true"
After that you can modify te apperance of your layout by defining the
android:background="#drawable/my_background"
to give to it a "button-like" face and behavior
/res/drawable/mi_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/black"/>
<item android:state_pressed="true" android:state_enabled="false" android:drawable="#color/black" />
<item android:drawable="#color/white"/>
</selector>

You cannot literally use that layout on the face of a Button. You can achieve a similar look using the android:drawableRight property on a Button, though.

You can use a RelativeLayout to simply overlay your custom button view on top of a real Button like this:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Your custom button layout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7e7e7e"
android:padding="1dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f9f9f9"
android:padding="10dp">
<TextView
android:id="#+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:text="ButtText"
android:textColor="#000000" />
<ImageView
android:id="#+id/ImageView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/jobs_menu" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>