I want this kind of look. They don't seem like tabs so I believe they are buttons.
I am able to acheive the similar type with toggle button by keeping a selector in drawable.
<ToggleButton
android:id="#+id/toggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/custom_selector"
android:textOn=" Button1 Button2"
android:textOff=" Button1 Button2" />
But they have only two values and by clicking on the selected tab gets the other selected and the present one unselected. But I want exactly like tab. So can someone please help me achieve it? Thanks in advance.
You have to create selector for all button and use RadioGroup with selector background and null button..
Follow #Andru answer for create Selector..
Below is RadioGroup code.
<RadioGroup
android:id="#+id/rdogrp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:gravity="center"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn1Selector"
android:button="#null"
android:checked="true"
android:gravity="center" />
<RadioButton
android:id="#+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn2Selector"
android:button="#null"
android:gravity="center" />
<RadioButton
android:id="#+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn3Selector"
android:button="#null"
android:gravity="center" />
<RadioButton
android:id="#+id/btn4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#drawable/btn4Selector"
android:button="#null"
android:gravity="center" />
</RadioGroup>
here is sample code for btn1Selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn1_selected" android:state_checked="true" />
<item android:drawable="#drawable/btn1_normal" android:state_checked="false"/>
</selector>
you can do something like this, instead of toggle button use normal buttons.
if "Data" button clicked do like this
data(View v)
{
databtn.setBackgroundResource(R.drawable.image1);
w_chartbtn.setBackgroundResource(R.drawable.image2);
H_chartbtn.setBackgroundResource(R.drawable.image2);
}
if "H-chart" button clicked
H_chart(View v)
{
databtn.setBackgroundResource(R.drawable.image2);
w_chartbtn.setBackgroundResource(R.drawable.image2);
H_chartbtn.setBackgroundResource(R.drawable.image1);
}
Use simple button instead of toogle button. And set background like this:
I am giving example for 1 button:
android:background="#drawable/data_button_select_state"
And add a xml file in your 'drawable' folder named data_button_select_state:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/data_image_selected_state"
android:state_selected="true" />
<item android:drawable="#drawable/data_image_selected_state"
android:state_pressed="true" />
<item android:drawable="#drawable/data_image_without_selected" />
</selector>
Now add code in java file like this:
when data button clicked:
data_button.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
data_button.setActivated(true);
H_chart_button.setActivated(false);
w_chart_button.setActivated(false);
hc_chart_button.setActivated(false);
}
});
change other button like this as well. This will might help you...
Related
I'm trying to my custom RadioButton that I trying to make to look like this:
So I did custom drawables that respond to the RadioButton status and used it as background. This is alright.
The problem is that I'm not been able to center the images that I set through the android:button atribute.
Here is how I'm trying to use it in my layout.
<RadioGroup
android:id="#+id/presenter_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="4dp"
android:gravity="center"
>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/cluster_centered"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_left"
/>
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_right"
android:button="#drawable/fire"
/>
</RadioGroup>
With this I'm getting this as result:
I've already tried to define a drawable that sets the gravity to center, but nothing changed. Here is the custom drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<bitmap android:src="#drawable/cluster" android:gravity="center"/>
</item>
</selector>
So, how could I center the button images?
PS: I can't set each kind of button as background because it'll be dynamic in the future, so the only thing that could be in background is the blue shape.
My solution was to set android:button=#null, then set the image that I want into the android:drawableLeft attribute. So my RadioButton code is like this:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="8dp"
android:background="#drawable/presenter_radiobutton_left"
android:button="#null"
android:drawableLeft="#drawable/fire"
/>
"on center" solution is
...
<RadioButton>
...
android:button="#null"
android:foreground="#drawable/your_selector_for_center_drawable"
android:background="#drawable/your_selector_for_background_drawable"
android:foregroundGravity="center"
I am using RadioButton in my layout. Where i have provided background to the RadioButton. Below is the code
<RadioGroup
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:background="#drawable/rb_spain"
android:id="#+id/am_rb_spain" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:background="#drawable/rb_germany"
android:layout_marginLeft="#dimen/margin_15"
android:layout_marginRight="#dimen/margin_15"
android:id="#+id/am_rb_german" />
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#null"
android:background="#drawable/rb_english"
android:id="#+id/am_rb_english" />
</RadioGroup>
RadioButton background drawable
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="#drawable/ic_spain" />
<item android:state_checked="true" android:drawable="#drawable/ic_spain_pressed" /> //pressed image is Large in size
<item android:drawable="#drawable/ic_spain" /> <!-- default -->
</selector>
I have saved the selection in TinyDB so that app will remember my selection whenever i open my app. But whenever i open my app the default selected RadioButton background Appears Large.
I have taken all the images of same size in drawable's with same padding.
First flag is Default selected here. But it appear to be slightly large in size
Now i have pressed 2nd flag. But first flag is not coming to its normal state.
You should change your android:button="#null" to android:button="#drawable/rb_germany" and remove background from each RadioButton. It will run fine.
Your updated RadioButton should be like:
<RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="#drawable/rb_spain"
android:id="#+id/am_rb_spain" />
Selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_call_active_big" android:state_pressed="true"/>
<!-- pressed -->
<item android:drawable="#drawable/btn_call_normal_big"/>
</selector>
And on button background
<ImageButton
android:id="#+id/btnPhone"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#drawable/button_background"
android:src="#drawable/btn_call_normal_big" />
Please advice on above . where i am doing wrong
you have to use the selector in place of the png file. Change
android:src="#drawable/btn_call_normal_big"
with
android:src="#drawable/nome_of_selector"
boolean isPressed=false
button.setOnClickListener(buttonListener);
OnClickListener buttonListener= new OnClickListener() {
#Override
public void onClick(View v) {
if(isPressed){
button.setBackgroundResource(R.drawable.icon1);
}else{
button.setBackgroundResource(R.drawable.icon2);
}
isPressed=!isPressed;
}
};
Hope it will help you.
Also check below link
http://www.mkyong.com/android/android-imagebutton-selector-example/
this also might help you
Use this:
<ImageButton
android:id="#+id/btnPhone"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:src="#drawable/selector" />
Remove src attribute and change the background attribute value to your selector file name.
<ImageButton
android:id="#+id/btnPhone"
android:layout_width="0dp"
android:layout_height="40dp"
android:layout_weight="1"
android:background="#drawable/Selector"
/>
I have a RadioGroup having 3 Radio Buttons. By default , when I click the radio button, it turns Blue. I need to change the color, say , when I click the first one, it should turn to Yellow, the 2nd one Blue and the 3rd one to Green.
I have seen some tutorials to customize by styling the radio buttons, like Is it possible to change the radio button icon in an android radio button group but it hides all the buttons.
Here is my XML .
<RadioGroup
android:id="#+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/studentImage"
android:layout_alignParentRight="true"
android:layout_alignRight="#+id/studentImage"
android:layout_alignTop="#+id/studentImage"
android:orientation="horizontal" >
<RadioButton
android:id="#+id/rb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" />
<RadioButton
android:id="#+id/rb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" />
<RadioButton
android:id="#+id/rb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="visible" />
</RadioGroup>
You can use a statelist drawable like I wrote below:
<?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/color_pressed" /> <!-- pressed -->
<item android:drawable="#drawable/default_button" /> <!-- default -->
</selector>
color_pressed and deafult_button would be your drawables for each button's state, you could have multiple selectors for each radio button
I'm using Eclipse ADT and I need to know how to change the default color of a form widgets button from the default gray to other color, of course using the xml.
Or you can use 9 patch images.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/patch_pressed" android:state_pressed="true"/>
<item android:drawable="#drawable/patch_normal" android:state_enabled="true"/>
<item android:drawable="#drawable/patchdisable" android:state_enabled="false"/>
And in Xml
<Button
android:id="#+id/button_register"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/patch"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="REGISTER"
android:textColor="#ffffff"
android:textStyle="bold" />
In your xml, you can set the background color by using android:background="#FF0000"
<Button
android:id="#+id/loadimage"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Load Image"
android:background="#FFFF00"/>
you can set any background color of your choice...:)
Using code in you activity class:
Button btn = (Button)findViewById(R.id.button);
btn.setBackgroundColor(Color.BLUE);
btn.setBackgroundColor(Color.rgb(0, 0, 255));
btn.setBackgroundColor(Color.parseColor("blue"));
Doing it straight from your XML:
Add this property to your Button in your XML file:
android:background="#800080"
#800080 is purple.
Here is answer my friend
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/grey"/>