How to Create Square shape programmatically in android? - android

I am making Buttons in LinearLayout programmatically. Please see below code :
My LinearLayout in my .xml file :
<LinearLayout
android:id="#+id/outerRelativeLayout_relativeLayout2_making_dynamically"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
Programmatically i am making buttons like :
LinearLayout outerRelativeLayout = (LinearLayout) findViewById(R.id.outerRelativeLayout_relativeLayout2_making_dynamically);
Button imgBtn = new Button(MyActivity.this);
imgBtn.setId(Integer.parseInt(c.getString(0)));
LinearLayout.LayoutParams imageViewParams = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
imageViewParams.setMargins(0, 10, 10, 10);
outerRelativeLayout.addView(imgBtn, imageViewParams);
Here c.getString(0); means values comes from local database like 1,2,3...
This lyout looking like attached image :
On above image orange colored is LinearLayout and rounds are buttons which are programmaticaly created.
Now i want to do : when any round button clicked then a white colored square on that button should be created like to be mention which button is selected., i know about View but i cant understand how to use it to achieve what i want. Can anybody please tell me how to do it ? Hope i explain well my issue....
For Example : When Third Button(in image green round a)clicked... it should be look like this image mean to show that right now green round button is selected:

One Solution is:
Instead of doing it programatically you can have two images on the button, normal and Onclick.
So when the button is clicked the image changes.
For example:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button" android:state_focused="true" android:state_pressed="false"/>
<item android:drawable="#drawable/buttonclick" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/buttonclick" android:state_focused="false" android:state_pressed="true"/>
<item android:drawable="#drawable/button"/>
</selector>
Or Else:
You just have to change the coordinates programatically to make it a square.
But i prefer using the first Solution.

Related

Why does a Button loses its original behaviour after changing its color?

I am writing an Android app and now I am styling it. I am using a custom theme which is a child of Theme.Holo.Light. I really like Theme.Holo.Light because its buttons have a special effect when you click and hold it. Like the lower button in the picture below:
Not click:
click:
The upper button has been changed color. Now when I click on that button, it doesn't have that effect. I really don't understand why. Can anyone tell me why this happens and how can I get the same effect with a colored button?
And also, the colored button seems fatter.
This is because the button uses a selector to display different colors/effects/drawables based on the state of the click. You can check out the link on Color State List Resource.
To create your own you have to create a slecetor cml file and put it in your drawables folder.
For example.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_btn_default_normal_gray" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#drawable/shape_btn_default_pressed_gray" android:state_pressed="true"/>
<item android:drawable="#drawable/shape_btn_default_disabled_gray"/>
</selector>
or with colors
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/dark_green" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#color/light_green" android:state_pressed="true"/>
<item android:drawable="#color/gray"/>
</selector>
To apply this you have to set the background drawable in your layout xml like this.
<Button
android:id="#+id/my_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Some text"
android:background="#drawable/selector_btn_default_gray"/>
That is the "ripple effect" of material design.You have define you own style for that effect.Link below may help you or you may search for many other answers on StackOverflow. Material effect on button with background color
It does not loses its behavior you can see after click (in your second image) the button show same scale as the above have...so by default the background is set as to show that it is button (like with padding or so) and can changes to show oncklick effect...
So when you set your desire background to button...It takes complete change on what is on presently on it and then you have to manually set onclick effect..

Android: how can I change the color of a textview when a button is pressed with selector XML

I have an imageButton. I created selector XML to change its background when it's pressed ... like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/default_blue" />
</selector>
and I used this in java with :
tempIBtn.setBackgroundResource(R.drawable.buttons_drawable_resource);
I have a textview and a pic on the image button (in addition to image of this imageButton.)
I want to change the color of this textview and pic when the imageButton is pressed but in selector tag I just can change attributes of imageButton not other textviews and... How can I do that?
You mentioned you wish to change the color of textview but never mentioned color of text in textview. this can be done very easily using the same selector file. Implement this way for proper implementation, so you can just get things done inside onclicklistener no need to handle button states. Modify your selector file as
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#color/default_blue" android:color="#color/default_blue"/>
<item android:state_pressed="false" android:drawable="#color/default_color" android:color="#color/default_color"/>
</selector>
in your layout xml for textview set
android:textColor = "#drawable/buttons_drawable_resource"
Note: Do not skip to add android:state_pressed="false" in selector as i gave above with default selections for button as well as textview text color else it will crash with NPE.

i have image button and i wont to change the image when i click on it

I have two images, image 1 and image 2, and I have image_button which has image 1 as a button background. Now what I want to do is, if I press on this image_button, I want the image background to change to image 2, and if I take my finger off the image_button, I want the image 1 to be back again like it used to be.
How can I make this?
You can achieve this programatically when a click occurs :
ImageView imageIcon = (ImageView) findViewById(R.id.icon);
imageIcon.setImageResource(R.drawable.other_icon);
You want something called a selector. In your drawable folder, create a xml file with these contents:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- pressed -->
<item android:drawable="#drawable/image1" android:state_pressed="true"/>
<!-- default -->
<item android:drawable="#drawable/image2"/>
</selector>
Selectors are really useful for this kind of stuff, you should read the documentation
Basically, give this thing a name, like yourSelector.xml
You can use this the same as any other drawable, like #drawable/yourSelector or R.id.yourSelector (make sure not to write '.xml' though)

How to have two different backgrounds for a linear layout

I have a linear layout and there is an onClickListener implemented on it.
Now I want that when it is clicked its background color to white is changed and remains that way until something else is clicked. When something else is clicked I want it to have transparent background
How to achieve this?
Thanks in advance
Create two drawable images in your drawable folder. And when it is clicked, you can change the background of the layout.
Following code changes the background:
LinearLayout layout=(LinearLayout) findViewById(R.id.linearlayout);
layout.setBackgroundResource(getResources().getDrawable(R.drawable.drawable_name));
I think you could also just use a selector as background. You can probably take advantage of the 'selected' or 'focused' states to toggle the background between transparent and white. It'll look something like:
<LinearLayout
...
android:background="#drawable/bg_list_selector"
...
</LinearLayout>
And then bg_list_selector.xml in your drawable folder:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#android:color/transparent" />
<!-- or -->
<item android:state_selected="true" android:drawable="#android:color/transparent" />
<item android:drawable="#android:color/white" />
</selector>
Have a play with the StateListDrawable's different options, I'd say.

How can I make a RadioButton with overlapping text?

I'm adding programmatically multiple answers to a questions as RadioButtons in a RadioGroup (see code and image below).
I almost achieved it but instead of having a radio button with a text on its side (see image below), I would like to have only the text and the background.
Can I get rid of the radio button?
Or can I set my current background as the radio button (with checked/unchecked states), and add a text overlapping it?
RadioGroup answer_container = (RadioGroup) findViewById(R.id.answer_container);
while (c.isAfterLast() == false) {
RadioButton answer = new RadioButton(PCItem.this);
answer.setText(c.getString(c.getColumnIndex(DBAdapter.KEY_ANS_TEXT)));
answer.setBackgroundResource(R.drawable.btn_ans);
answer.setPadding((int)(30 * density), 0, 0, 0);
answer.setGravity(Gravity.CENTER_VERTICAL);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams((int)(775 * density), (int)(81 * density));
params.setMargins(0, (int)(20*density), 0, 0);
answer.setLayoutParams(params);
answer_container.addView(answer);
c.moveToNext();
}
You can use radioButton.setButtonDrawable(). You can also specify different drawables for each button state (including checked/unchecked) using a StateListDrawable.
To completely remove the button you can simply set it as null:
<RadioButton
android:button="#null"
...
/>
Be aware that by code radioButton.setButtonDrawable(null); doesn't work! The correct way is to set an empty StateListDrawable:
radioButton.setButtonDrawable(new StateListDrawable());
If you have more items, you can create a custom style to override the default properties of RadioButton:
<style name="CustomRadioButton" parent="#android:style/Widget.CompoundButton.RadioButton">
<item name="android:button">#null</item>
<item name="android:paddingLeft">0dp</item>
</style>
Ok, I made it using
answer.setButtonDrawable(android.R.color.transparent);
to remove the button, and using a selector as btn_ans:
<?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/btn_choix_unsel" />
<item android:state_checked="true" android:drawable="#drawable/btn_choix_sel" />
</selector>

Categories

Resources