I knew this question is a duplicate but i couldnt figure out the solution for creating custom shaped buttons say circular,oval etc.
Doubt1: My objective is to perform an action only when the area inside the shape is clicked, nothing should be performed just outside the shape( say only circular area has to be atttached with a listener)
Doubt 2: Can i use png pictures of the shapes as backgrounds or should I use only shapes to draw them.
Pls give me a simple solution...
Thanks in advance..
try this link it will help you to create custom button.
http://angrytools.com/android/button/
all you have to do is save the button.xml file in your drawable folder and then set your button background as
android:background="#drawable/button.xml"
You should use ShapeDrawable for the job. If you made a circle button for example, nothing will happen if you clicked outside the circle area.
For example inside your drawable folder, make xml file circle_button:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#9F2200"/>
<stroke android:width="2sp" android:color="#fff" />
</shape>
and in your button, set background="#drawable/circle_button"
As #MSaudi said ShapeDrawable will give you shaped buttons.
If you wanted to use PNG's that is more difficult.
I would approach it by extending the Button class and overriding the onTouchEvent method to only register a click when inside the shape required (possibly by checking if the view is transparent at the click location).
You can use ImageButtons and set oval or circular shaped images as background. I hope it helps
Related
The situation is that when I modify a Card view background from a program then the corner radius of the Card view reset. But why?
(I don't think I need to provide any other information (code, picture of the result, etc.), because I think it's clear enough to understand. If you need more information then you should write down in a comment.)
If you try to use CardView with corner radius you will face this problem when you set background color dynamically. Please use yourCardView.setCardBackgroundColor() methord instead of yourCardView.setBackgroundColor() :)
I found a solution to the question.
I needed to retrieve the background of the view and set its color, then I assigned the new background to the view.
Drawable backgroundOff = v.getBackground(); //v is a view
backgroundOff.setTint(defaultColor); //defaultColor is an int
v.setBackground(backgroundOff);
(This answer helped: https://stackoverflow.com/a/18394982/9377499)
Same problem and fix the problem this way
At first, create the shape named in Drawable "shape_background_cardview" and this add below code
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/gray500" />
<corners android:radius="5dp" />
</shape>
step second, set the shape to the background CardView yourself
yourCardView.setBackgroundResource(R.drawable.shape_background_cardview);
GoodLuck
I would like to define a button in Android, through XML, which, below the standard Button graphics (change color when clicked, slightly rounded edges,...), shows an image of my choice. I would like the final product to be somewhat like this:
I have tried change the src and background of an ImageButton, but it does not provide the intended effect. Could you please point me some way of achieving this?
Maybe that's not exactly what you mean by standard, but when you set a background, you end up having to recreate the behavior when the button is clicked. The best way to do it in Android is by using a selector as your button's background. Create a XML drawable with the selector in it.
Example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_bg_pressed" />
<item android:drawable="#drawable/button_bg_default" />
</selector>
That way, when your button is clicked, it will change the background to other image that does what you want.
EDIT:
There are other modifiers such as focused, if you need.
If you want Lollipop's ripple effects, I think you can create a Layout and put your button inside it. Change the Layout background and set the button background to transparent. If that doesn't work, try adding android:background="?android:attr/selectableItemBackground" to your button.
As Paulo said, you can achieve the click effect with a selector.
See this answer (https://stackoverflow.com/a/30192562) it gives the code for a very nice and customizable ripple effect.
Unfortunately I unable to understand the below design that's why asked like semi-oval footer.
Actually this is the footer design of a layout with two side buttons comes from one of the ios app. First I thought it like a bottom tab, but after some research i got to know that ,it is a footer with a FramaLayout, two buttons and one text to show the count, but still not sure what is this and how to do..
I added one footer in my layout and give it transparent-black background, but still unable to do this particular semi-oval style. suggestions and helps will be mostly appreciable.
Please suggest.
Thanks
I imagine your footer being a container: a LinearLayout (so that you can use weights) or a RelativeLayout.
Then it has a couple of clickable elements disposed horizontally (not giving details on this, assuming you can manage it by yourself)
Now, these two "clickables" (I'd use TextViews, so I can put the images and even text inside) have a semitransparent (50% black) background like these:
(rect_left)
and
(rect_rite)
To let the container background image see through.
I'm not so great at graphics, you will be able to make better pictures than mine. ;)
These ones just illustrate the concept.
You should create a new Drawable and use it as a background on a Relative/Linear Layout or View
Check this SO question and answer: Can I draw rectangle in XML?
As the question answer pair above gives an example of a rectangle you can modify it to be ovular:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#666666"/>
<size
android:width="120dp"
android:height="120dp"/>
</shape>
I currently have icons in a GridView on my app. When they are clicked, an orange square appears around them briefly as a highlight. The only problem is that I think this looks amateurish and would like to change the shape so that it clips the icon in the GridView instead of a large square. If you are unsure as to what I mean, it is carried out successfully in the Catch Notes app, on their dashboard/home screen. I was just wondering whether anybody knew a way to tackle this or if it is simply a small layout attribute.
https://play.google.com/store/apps/details?id=com.threebanana.notes&hl=en
Thanks in advance, all help would be appreciated!
It looks effectively like this EditText in the image below. The way that it borders the EditText in orange is exactly how it borders the icons in the home screen when clicked.
First, in your layout file, specify a drawable background:
android:background="#drawable/bg_your_view"
Then edit the bg_your_view file which is in drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg_your_view_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/bg_your_view_normal" android:state_focused="false"></item>
</selector>
At last, create corresponding drawable files for pressed and normal states:
bg_your_view_pressed.xml contains the shape, the color you want for highlight.
bg_your_view_normal.xml is similar, just without highlight effect.
I've decided that the easiest way to solve this problem is to simply reference another image when the image on the GridView has been clicked. This means that the second image can just be edited in Photoshop in order to have a glow around it.
I am using a shape defined as a drawable as background for a TextView. This allows me to add rounded corners and other other effects.
The shape is defined like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:topLeftRadius="8dp" />
</shape>
and I am using it like this:
<TextView
android:id="#+id/project"
style="#style/textView"
android:background="#drawable/project_textview_background"
/>
Now, I need to change the color of that TextView programmatically depending on some conditions. I have not been able to do that.
I tried to do setBackgroundColor but that seems to overwrite the background I previously defined so it doesn't show the rounded corners anymore.
I looked at a bunch of other API methods but got nowhere
Any help would be very much appreciated. Thank you
Any ideas?
the solution was actually to set the shape and color in code instead of using a drawable resource.
I used PaintDrawable(int color) which allows me to define whatever background color I want. Then I used the setCornerRadoii(float[]) to define the rounded corners and finally I assigned the PaintDrawable object to my textView background. Worked like a charme.
You could make other shapes that still has that corner attribute you already defined.
The way to fill the cell with bgcolor is written in next web page.(solid)
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
And if the conditions you mentioned depend on focus or press, you'd better to make selector instead of shape. Search with keyword "ColorStateList" in android reference. I want to leave the address, but I can't due to my reputation;;;