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"/>
Related
How to define a Button with custom background and the attribute
"?attr/selectableItemBackground" ?
With this code the "?attr/selectableItemBackground" attribute is ignored, it doesn't show the touch feedback.
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
android:foreground="?attr/selectableItemBackground"/>
With this other code the selectable works but I lose the background color:
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"/>
Alright you have an option of parent
Create parent and give background to white color and use selectableItemBackground as child's background.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<Button
android:id="#+id/button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/selectableItemBackground"/>
</LinearLayout>
Try set
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
Example main layout activity:
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.petercarlim.myapplication.MainActivity">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="#android:color/darker_gray"
android:foreground="?android:attr/selectableItemBackground"/>
</LinearLayout>
Or set in parent(other layout that call this layout) of you layout:
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
You should write a special drawable for it
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<selector>
<item android:drawable="#drawable/your_drawable_rounded_enabled" android:state_enabled="true"/>
<item android:drawable="#drawable/your_drawable_rounded_disabled" android:state_enabled="false"/>
</selector>
</item>
<item android:drawable="?attr/selectableItemBackground"/>
</layer-list>
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
Please see the layout below. I want to show a selection highlight on the entire LinearLayout if the user touches the ImageView or preferably entire layout. This is like a onclick effect. Although I have a selector its not working. How can I make this work?
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
<ImageView
android:id="#+id/btnFromEasy"
android:layout_width="#dimen/normal_button_size"
android:layout_height="#dimen/normal_button_size"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:src="#drawable/animals" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:text="#string/easy"
android:textColor="#color/subtitle_text_color"
android:textSize="#dimen/text_size_small"
android:textStyle="bold" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<color android:color="Blue" />
</item>
<item>
<color android:color="White" />
</item>
</selector>
Try this simple code.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#drawable/background_image_pressed" /> // image
<item
android:drawable="#drawable/background_image_default" /> // image
</selector>
and inside LinearLayout add android:clickable="true"
<LinearLayout
...
android:clickable="true"
...>
Hope this help.
Add android:clickable="true" to properties of LinearLayout and it work
Your code:
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical">
-> add
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:background="#drawable/layout_selector"
android:orientation="vertical"
android:clickable="true">
Line android:layout_width="0dp" makes the layout can't be visible so I change it to "wrap_content"
I am inflating a layout multiple time as per records.so i want when the user select any particular row.It gets highlighted and after that it comes in normal state as it was before.How can we do this.
Layout that i am inflating multiple times
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainResultLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/request_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="25 Sep 2013" />
<TextView
android:id="#+id/trip_date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="25 Sep 2013" />
<TextView
android:id="#+id/trip_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:singleLine="true"
android:text="XXXXXXXXXX" />
<ImageView
android:id="#+id/approval_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:layout_marginRight="5dp"
android:src="#drawable/pending"/>
</LinearLayout>
</LinearLayout>
Please help me how we can do this .Will be thankful to u ..
To highlight a Layout use Selector. Selector can be used to layout,widgets like TextView,Button etc.
artists_list_backgroundcolor.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_selected="false"
android:state_pressed="false"
android:drawable="#color/grey" />
<item android:state_pressed="true"
android:drawable="#color/itemselected" />
<item android:state_selected="true"
android:state_pressed="false"
android:drawable="#color/itemselected" />
</selector>
colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="grey">#ffffff</color>
<color name="itemselected">#EDEDED</color>
</resources>
Use selector like this.
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/artists_list_backgroundcolor">
xml selector for layouts whats you need.
try this maybe help you.
See my answer here: how can i get android list view selector items to remember their state off screen?
It's basically using a Checkable RelativeLayout but you can do the same for LinearLayout.
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>