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>
Related
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>
As per screen shot i have registration form which have two fields like Text view and Edit text.
Normally i tried copy and paste for make view duplicate but when i use those command, All two views are overlapping on previous view with their constraints so it is more time consuming to clear all constraint and drag/paste view below.
so in a simple way, my question is:
How can i use copy and create views duplicate below that?
Can i Make a group of two objects like Textview & Edit text so i can use anywhere?
you can create a layout contain your repeat code like this :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="name" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Id Num" />
<RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="male" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="female" />
</RadioGroup>
and use tag in your main layout like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.paredise.stackquestion.MainActivity">
<include layout="#layout/fragment_list" />
<include layout="#layout/fragment_list"/>
<include layout="#layout/fragment_list"/>
</LinearLayout>
and also you can use listview if you have many time you use it in tandom
also you can using from styles in resourse-->value-->styles and Put your similar attribute in it :
<style name="myEditTextStyle">
<!-- Customize your theme here. -->
<item name="padding">#color/colorPrimary</item>
<item name="background">#color/colorPrimaryDark</item>
<item name="textColor">#color/colorAccent</item>
<item name="layout_width">match_parent</item>
<item name="layout_height">wrap_content</item>
</style>
and using style attribute in your view Just and write separate attribute for each one like EditText:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<EditText
android:id="#+id/edName"
style="myEditTextStyle"
android:text="name" />
<EditText
android:id="#+id/edId"
style="myEditTextStyle"
android:text="Id Num" />
</LinearLayout>
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"/>
I have my custom listselector 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/bg_list_hover"></item>
<item
android:state_focused="true"
android:drawable="#drawable/bg_list"></item>
</selector>
and my listview :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg_dasar" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="StoreCategory"
android:textSize="15sp"
android:paddingLeft="10dip"
android:paddingTop="10dip"
android:paddingRight="10dip"
android:textColor="#color/textcolor"/>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:listSelector="#drawable/listselector">
</ListView>
my problem is, when i do not click on listview, listview item do not use focused state background (#drawable/bg_list) ...
any one can help me please???
For those still need it: The key is to set the listSelector as background for the list item!
<?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="fill_parent"
android:background="#819FF7"
android:orientation="vertical" >
<ListView
android:id="#+id/mainList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:cacheColorHint="#819FF7"
/>
</LinearLayout>
list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lineItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/list_selector">
<ImageView android:id="#+id/imageView"
android:layout_width="96dp"
android:layout_height="64dp"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp" />
<TextView
android:id="#+id/textView"
android:layout_toRightOf="#+id/imageView"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:layout_centerVertical="true"
android:textSize="18sp"
android:textColor="#ff000000"
android:layout_width="wrap_content"
/>
<Button
android:id="#+id/button"
android:gravity="center"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:focusable="false"
android:text="Delete" />
</RelativeLayout>
I have solved my problem, by read some reference..
my listselector should be 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/bg_list_hover" />
<item
android:drawable="#drawable/bg_list" />
</selector>
my listview layout :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#drawable/bg_dasar" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="StoreCategory"
android:textSize="15sp"
android:paddingLeft="10dip"
android:paddingTop="10dip"
android:paddingRight="10dip"
android:textColor="#color/textcolor"/>
<ListView
android:id="#+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dip"
**android:listSelector="#android:color/transparent"**>
</ListView>
</LinearLayout>
and my also adding my list selector into my list item background :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="55dip"
android:orientation="horizontal"
android:padding="15dip"
android:gravity="center_vertical"
**android:background="#drawable/listselector"**>
<ImageView
android:id="#+id/imageViewlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip" />
<TextView
android:id="#+id/textViewcategory"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:textColor="#color/textcolor"
android:textSize="15sp"/>
</LinearLayout>
thankyou for Jay & danwilkie for answer my question..
:))
Have you tried calling "requestFocus()" on the listView in your code after setting android:focusable="true" in the xml? From the View docs:
"Call this to try to give focus to a specific view or to one of its descendants. A view will not actually take focus if it is not focusable (isFocusable() returns false), or if it is focusable and it is not focusable in touch mode (isFocusableInTouchMode()) while the device is in touch mode. See also focusSearch(int), which is what you call to say that you have focus, and you want your parent to look for the next one. This is equivalent to calling requestFocus(int, Rect) with arguments FOCUS_DOWN and null."
It looks like your selector xml at the moment is saying to use bg_list_hover when you click on an item, and bg_list when you focus on an item (using a trackball, for example).
If you want to use a custom drawable in the default case when the item is neither clicked nor focused, you need to add an entry for that:
I would use something 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/bg_list_pressed"></item>
<item
android:state_focused="true"
android:drawable="#drawable/bg_list_focused"></item>
<item
android:drawable="#drawable/bg_list"></item>
</selector>
i included some linearlayouts in a linear layout. But i want the linear layout on top (the included one) to be greyish, and just the background orange. When i try this, everything is orange! Is there some way i can prevent this?
my ll:
<?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="fill_parent"
android:orientation="vertical"
android:background="#color/orange">
<include
android:id="#+id/bt_overview_list_places"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_agenda"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_shopping"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
<include
android:id="#+id/bt_overview_list_food"
layout="#layout/single_overview_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>
the one i include:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lloverview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/custom_button_grey"
>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal"
>
<ImageView
android:id="#+id/ivoverviewimage"
android:layout_width="50dp"
android:layout_height="50dp" android:src="#drawable/ic_launcher" android:scaleType="centerCrop"
android:layout_margin="10dp"
android:layout_weight="1"/>
<LinearLayout
android:layout_width="225dp"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/tvoverviewname"
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_gravity="left|top"
android:layout_marginLeft="10dip"
android:text="naam"
android:textSize="16dip"
android:maxLines="1"
android:ellipsize="marquee"
android:textColor="#color/black"/>
<TextView
android:id="#+id/tvoverviewtext"
android:layout_width="225dp"
android:layout_height="wrap_content"
android:layout_marginLeft="10dip"
android:maxLines="3"
android:text="tip"
android:textSize="12dip"
android:ellipsize="end"
android:textColor="#color/black"/>
</LinearLayout>
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/iconarrowsmall"
android:layout_gravity="center_vertical"
android:layout_margin="2dip"
/>
</LinearLayout>
<ImageView
android:id="#+id/bottom_border"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:src="#drawable/custombuttonlist_bottomborder"
/>
</LinearLayout>
I already tried giving the linear layouts colors programmatically:
lPlaces= (LinearLayout)findViewById(R.id.bt_overview_list_places);
llPlaces.setBackgroundColor(R.color.custom_button_grey);
but everything just stays orange (with some difference in color).
I checked my color, and i think it should be 100% NOT transparent:
<color name="custom_button_grey_text">#585850</color>
even with the FF added in front of it:
<color name="custom_button_grey_text">#FF585850</color>
try like this in xml
android:background="#FF4500"
in place of
android:background="#color/custom_button_grey"
You should override the background parameter for each included layout. You can override any attribute using android:layout_*
Take a look at the official documentation using <include> tag.
Ok i get it:
i created an drawable file:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- focused -->
<item android:state_focused="true" android:drawable="#color/list_even" />
<!-- focused and pressed-->
<item android:state_focused="true" android:state_pressed="true" android:drawable="#color/list_even" />
<!-- pressed -->
<item android:state_pressed="true" android:drawable="#color/list_even" />
<!-- default -->
<item android:drawable="#color/list_odd" />
</selector>
(now i have nice colorchange when i press it too)
and set that as background resource:
llPlaces.setBackgroundResource(R.drawable.overview_background_color_even);