I was wondering how I put an image to a button.
I have tried to use "android:icon="#drawable/search.png"
and I add this image to the drawable-hdpi folder but the image doesn't show up. I am developing an application for the nexus 4 so I don't know what size the image should be. The image I am trying to add is a normal search icon used in the contact manager of the nexus 4.
The code I have written so far.
<?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="fill_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/lbl_group_coworkers"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Coworkers"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp" />
<TextView
android:id="#+id/lbl_group_family"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Family"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp"/>
<TextView
android:id="#+id/lbl_group_friends"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Friends"
android:layout_marginTop="5dp"
android:layout_marginBottom="5dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="0dip"
android:layout_weight="1"
android:orientation="vertical" >
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/Button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.70"
android:icon="#drawable/search.png" />
<Button
android:id="#+id/Button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="addGroup"
android:icon="#drawable/addgroup.png"/>
<Button
android:id="#+id/Button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="0.11"
android:text="#string/Button3" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/Button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:onClick="addGroup"
android:text="TEXT"
android:background="#drawable/addgroup"/>
To add background and image and text at the same time.
Just replace
android:background="#drawable/addgroup"
with
android:background="#android:color/transparent"
android:drawableTop="#drawable/addgroup"
android:text="TEXT"
You can also use attributes in your Button Layout with properties defining image source to placed inside the button
android:drawableLeft
android:drawableRight
android:drawableBottom
android:drawableTop
use the attribute
android:background="#drawable/...."
You can set the background of the Button using :
android:background="#drawable/..."
Please make drawable folder in res and create buttonanimation.xml in drawable folder
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/add_incident_resetfocus" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/add_incident_resetfocus" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="#drawable/add_incident_resetfocus" android:state_focused="true"/>
<item android:drawable="#drawable/add_incident_reset" android:state_focused="false" android:state_pressed="false"/>
</selector>
And use this buttonanimation in layout button background.
<Button
android:id="#+id/reset_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/buttonanimation"
/>
Related
I have the following layout for my custom log in dialog
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="#dimen/padding_large">
<ImageButton android:src="#drawable/ic_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/dialog.login.settings"
android:padding="#dimen/margin_medium" />
<TextView android:text="#string/dialog.login.text.user_name"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.user_name"
android:layout_width="match_parent"
android:gravity="center"
android:ems="20"
android:layout_height="wrap_content"
android:inputType="text"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView android:text="#string/dialog.login.text.password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText android:id="#+id/dialog.login.password"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:textAppearance="?android:attr/textAppearanceMedium" />
<CheckBox android:id="#+id/dialog.login.show_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/dialog.login.check.show_password"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_margin="#dimen/margin_medium"
android:checked="false" />
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button android:id="#+id/dialog.login.cancel"
android:drawableStart="#drawable/ic_exit_black"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/margin_medium"
android:text="#string/dialog.login.button.cancel" />
<Button android:id="#+id/dialog.login.connect"
android:text="#string/dialog.login.button.connect"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_marginStart="#dimen/margin_medium"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
when I create the dialog and setcontentview the width of the dialog becomes equal to that of the image button on the first row
if I remove that , it becomes the size of the EditText (dialog.login.user_name) whose ems is 20
when I make the dialog's constructor call the base dialog constructor with a theme of R.style.Theme.Material.Dialog it does get the correct (about 3/4 of the screen) but the problem is that it ignores my primary and accent colours (which is normal)
Is there a way to have the dialog have the Theme.Material.Dialog size but still keep my own primary/accent colours?
thanks in advance for any help you can provide
After a lot of searching it seems that the solution is to actually replace the dialogTheme attribute of my main theme, so the solution was:
<style name="app.theme"
parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
<item name="android:dialogTheme">#style/app.dialog</item>
......
</style>
<style name="app.dialog"
parent="android:Theme.Material.Light.Dialog">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary.dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
I need to use custom radio buttons with background image, and space them evenly horizontally, I can achieve the spacing but cannot position the background image in the center of each button. My layout is as below.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="58dp">
<RadioGroup
android:id="#+id/group_bottom_bar"
android:layout_width="match_parent"
android:layout_height="52dp"
android:orientation="horizontal">
<RadioButton
android:id="#+id/v4_btn_trip"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_trip" />
<RadioButton
android:id="#+id/v4_btn_agenda"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_agenda" />
<RadioButton
android:id="#+id/v4_btn_favorite"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_favorite" />
<RadioButton
android:id="#+id/v4_btn_settings"
style="#style/BottomTabBarButtonStyle"
android:button="#drawable/v4_tabbar_radio_settings" />
</RadioGroup>
</RelativeLayout>
The style is per below:
<style name="BottomTabBarButtonStyle">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:gravity">center_horizontal</item>
<item name="android:layout_weight">1</item>
I already set the gravity to center_horizontal.
I tried to replace android:button with android:background but that just stretched the image.
One of the selector files (v4_tabbar_radio_trip)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/ic_bottom_tab_trip_active" android:state_checked="true" android:state_pressed="true" />
<item android:drawable="#drawable/ic_bottom_tab_trip_active" android:state_pressed="true" />
<item android:drawable="#drawable/ic_bottom_tab_trip_active" android:state_checked="true" />
<item android:drawable="#drawable/ic_bottom_tab_trip" />
</selector>
This is its current state.
Update: The expected output is that the background image (the two dots) is in the middle of the greyed area (which is the radio button), not aligned to the left. Similarly for other icons
You can try this layout xml.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="58dp" >
<RadioGroup
android:id="#+id/group_bottom_bar"
android:layout_width="match_parent"
android:layout_height="52dp"
android:orientation="horizontal" >
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_trip"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_trip" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_agenda"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_agenda" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_favorite"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_favorite" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioButton
android:id="#+id/v4_btn_settings"
android:layout_gravity="center"
android:button="#drawable/v4_tabbar_radio_settings" />
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</RadioGroup>
</LinearLayout>
I know this is not good way of handling the things but it can do a trick for you and it is feasible for all screens.
Try it. Hope this helps you.
try to write
style="#style/BottomTabBarButtonStyle"
after the
android:button="#drawable/v4_tabbar_radio_settings"
in layout xml file.
Try out this!!
<LinearLayout
android:id="#+id/ll_radio_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:layout_marginBottom="5dp"
android:weightSum="2" >
<RadioGroup
android:id="#+id/radioGrouprecharge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/radioPreapaid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#android:color/transparent"
android:button="#android:drawable/btn_radio" />
<RadioButton
android:id="#+id/radIoPostpaid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center_horizontal" />
</RadioGroup>
</LinearLayout>
You are centering your button, but the drawable is always left-aligned.
The solution appears to be create a new radio group. Here is an example.
I was using the standard Android checkbox, but when I installed my app on other peoples phones for testing, the checkbox was different on each phone.
On one of the phones, the checkbox was so light you could hardly see the box when it was checked.
So I tried to make a custom checkbox checked image.
This worked ok, but I can still see the original deafult checkbox image in the background?
Any ideas why?
Here is my checkable linear layout, to be honest I'm not even sure if I need this?
<?xml version="1.0" encoding="utf-8"?>
<com.myapp.myappname.CheckableLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="CheckBox"
android:background="#drawable/customcheckbox"/>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</com.myapp.myappname.CheckableLinearLayout>
Then I have a custom list row which is my custom ListView:
<?xml version="1.0" encoding="utf-8"?>
<com.myapp.myappname.CheckableLinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dip" >
<!-- Thumbnail image -->
<LinearLayout android:id="#+id/thumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="3dip"
android:layout_alignParentLeft="true"
android:layout_marginRight="5dip">
<ImageView
android:id="#+id/list_image"
android:layout_width="60dip"
android:layout_height="60dip"
android:focusable="false"
/>
</LinearLayout>
<!-- File Name -->
<TextView
android:id="#+id/filename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/title"
android:textColor="#343434"
android:textSize="12dip"
android:layout_marginTop="10dip"
android:layout_toRightOf="#+id/thumbnail"
android:focusable="false"
android:text="Some Text." />
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentRight="true"
android:background="#drawable/customcheckbox"
android:enabled="false" />
</RelativeLayout>
</com.myapp.myappname.CheckableLinearLayout>
Any ideas how to suppress the original?
Custom checkbox:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--<item android:state_checked="false" android:drawable="#drawable/unchecked" />-->
<item android:state_checked="true" android:drawable="#drawable/checked" />
<!--<item android:drawable="#drawable/unchecked" /> <!– default –>-->
</selector>
The attribute you want to change is button, not background.
First, design your custom graphics for different button states. Use a state list drawable (docs) to associate the various images. For example:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/checked" />
<item android:state_checked="false" android:drawable="#drawable/unchecked" />
</selector>
Save this into your drawable resources folder, something like my_checkbox.xml.
Now, use the button attribute on your checkbox layout definition:
<CheckBox
android:id="#+id/checkBox1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:layout_alignParentRight="true"
android:button="#drawable/my_checkbox"
android:enabled="false" />
Here is my file. I want to change the background color of my image button when it is clicked so the user can see it is clicked because when I clicked it does not seem I clicked it but it is working. I can see on other questions that you need a drawable to be able to do it but i do not know what will I put in the xml file in the drawable folder. Can you please help me? Thank you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:id="#+id/webViewHeaderArea"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/white">
<ImageButton
android:id="#+id/btnCloseWebView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerHorizontal="false"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/close"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnReload"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#+id/btnCloseWebView"
android:src="#drawable/reload"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="15dp"
android:src="#drawable/back"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnStop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="17dp"
android:layout_toRightOf="#+id/btnBack"
android:src="#drawable/stop"
android:background="#null"
android:contentDescription="#string/button" />
<ImageButton
android:id="#+id/btnForward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_toRightOf="#+id/btnStop"
android:src="#drawable/forward"
android:background="#null"
android:contentDescription="#string/button" />
</RelativeLayout>
<WebView android:id="#+id/web_engine"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />
you need to create one xml file in drawable folder named contact_bg.xml.
Then, in that you have to write like below.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/contact_hover" android:state_pressed="true"/>
<item android:drawable="#drawable/contact"/>
</selector>
set this as a image source in your image button.
and put two file in drawable-hdpi named contact.png and contact_hover.png
Hope, this will help
You can use selector for this. Either use drawable images or you can define your own shapes for each of the state. You can do some thing like this.
<item android:state_pressed="true" >
<shape>
<gradient
<!-- set values here -->
/>
<stroke
<!-- set values here -->
/>
<corners
<!-- set values here -->
/>
<padding
<!-- set values here -->
/>
</shape>
</item>
Also check out this link
I'm trying to set the background of the right arrow, that when I press it, only the background around the arrow will shown(till the separator).
I tried to do it with Image Button but when I do it like this, the list item can't be clickable.
this is my XML item list layout:
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dip"
android:paddingLeft="2dip"
android:paddingRight="2dip"
android:paddingTop="5dip" >
<ImageView
android:id="#+id/itemlist_checkedd"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:src="#drawable/ic_checkitem" />
<ImageView
android:id="#+id/skinpreview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toRightOf="#id/itemlist_checkedd"
android:scaleType="fitXY" />
<ImageButton
android:id="#+id/skinEdit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:paddingLeft="10dip"
android:background="#null"
android:src="#drawable/ic_go_edit" />
<ImageView
android:id="#+id/separator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toLeftOf="#id/skinEdit"
android:layout_marginRight="5dip"
android:src="#drawable/separator"/>
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginLeft="2dip"
android:layout_marginRight="15dip"
android:layout_toRightOf="#id/skinpreview"
android:layout_toLeftOf="#id/separator"
android:textAppearance="?android:attr/textAppearanceLarge" />
This is how it looks:
Any suggestions???
Thanks.
Create selector xml file in res/drawable
<?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/arrow_pressed" />
<item
android:state_pressed="false"
android:drawable="#drawable/arrow" />
</selector>
You will need to create another picture of the arrow with the highlighted background you need.
of course then assign your ImageView src to the xml file (arrow_selector.xml) for example
Just set the background color or an image to the parent view in this xml