Can someone please guide me how exactly can i create a circular buttons and textview in android apps, I am still a new into android development. Please help
You cannot create a real circular view (button or textview) in android - all views are rectangular. That said, you can imitate the look of a circular button by giving it a circular background. There are several ways of doing this. One simple way would be to create a PNG image of a circle, save it in your drawable folder and then set it as a background for your button:
<Button android:background="#drawable/circle_bg" .../>
Another way would be to use custom shapes to draw a circle:
<shape android:shape="oval" ...>
<solid android:color="#FFFFFF"/>
</shape>
Save that as an XML file in your drawable as circle.xml and then reference it in your layout:
<Button android:layout_width="40dp" layout_height="40dp"
android:background="#drawable/circle" ... />
This will create a circular button with 20dp radius.
Of course, you may want to combine this with state selectors to get the highlighted states on touch or focus.
There are loads of examples on the internet. Just search.
As some1 mentioned, to make your custom buttons you've to define Styles:
Custom circle button
About TextView: What do you want to do? Change font? Change colour? Change Size?
You've XML attributes for TextViews if you're doing this by XML. Except to change font, that it was implemented in 4.1.
android:text="TextView"
android:textColor="#288BA2"
android:textSize="30sp"
Related
When making a website with html and css you can simply make a box by giving a couple of div tags some attributes like color and such, what is the Android xml equivalent to this? I need to make a layout with simple elements like this example, whether it be just a rectangle or a circle, that can rescale with the screen. Is there a way to do that? Even a link to a tutorial would be greatly appreciated, i could not find anything myself.
what is the Android xml equivalent to this?
To the extent that there is an equivalent, you could use a a ShapeDrawable, used in an ImageView or possibly as a background to something else.
Please understand that not everything that is easy in Web development will be easy in other platforms, and not everything that is difficult in Web development will be difficult in other platforms.
You can use View and give it a background.
If you want a rectangle, you can just assign the color you want:
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" />
If you want to have a circle as background, or something other, you can create a drawable file using shapes:
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="#000000" />
</shape>
and assigning it to the view:
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle" />
where "circle" is the name of the file with the shape
The Fastest way to make custom buttons and any kind of background.
Oval, Rectangle etc.
In your case as i am getting is that you want an rectangle like we do in HTML/CSS.
Here is an video with very much clarity, i found :
https://www.youtube.com/watch?v=WkJTunLf5iE
In this video he described about custom buttons but you can use it same with your required background and set it to you view like this :
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/rectangle" />
That's it !!
Ok, so I'm working on a very simple Android homescreen widget that fetches the latest Image from an imageboard and displays it in a imageview.
I'd like to have the option to Style this widget, to be in keeping with Googles Material design guidelines, however, I hit the following problem whilst developing and testing on my Nexus 5 running Lollipop 5.1 -
I can't seem to use a cardview in a widget. It gives me a class not found exception however I do not get such exceptions previewing the layout and my gradle has the right dependancies so I suspect it is more to do with widget compatibility?
So I did some further reading and on the Google API page about widgets it has a very specific list of views that widgets support, which did not, to my surprise include cardviews. So I've gone back to my plain old Imageview
I guess my question then sits with, how would I get this imageview to look like a material design card? EG, rounded corners, the subtle 3d effect, drop shadow, ETC. I do not wish to give the imageview a border, the edge of the image should extend to the edges and get clipped by the rounded corners.
I have tried by simply setting the style of the Imageview to be that of a cardview, but that seems to have done absolutely nada :)
Anyone has some ideas? Thank you!
you might want to have a look at the source of the google i/o app : https://github.com/google/iosched/blob/master/android/src/main/res/layout/widget.xml
This is from a long time ago, but it's very doable to make a simple card background in XML.
The way to do this is to create an cardview-esque .xml file in your drawables app resources folder.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/white" />
<corners android:radius="4dp" />
</shape>
and set the background view of your Widget's XML layout as
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/widget_card_background"
android:orientation="vertical">
<.../>
</LinearLayout>
You are correct in that CardView is not an available View type for Android Widgets, but this should create the functionality you were looking for 2 years ago
I have got a cool image (fancy with rounded corners). I want to implement that image in my android app. When clicked on it, I want it to darken a bit (like a button when pressed) and launch a new activity.
How can I do that and what should I use (ImageView, ImageButton or just Button) ?
You'll require two version of your cool image call it as active.png (clicked state i.e darken a bit) and inactive.png (normal state).
in the drawable folder create a Selector file for them as follows
Like : /drawable/cool_button_selector.xml
<?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/active"/>
<item android:drawable="#drawable/inactive"/>
</selector>
and then user the ImageButton like this:
<ImageButton
android:id="#+id/coolImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/cool_button_selector"
android:background="#null" />
Added: android:background="#null" to <ImageButton>
Hope this helps :)
You can use any of the above depending on what your requirements are. For button like behavior, you can use an ImageButton, Here's the instructions to change the image onTouch
change button image in android
You can similarly change the image of ImageView.
ImageView img = (ImageView) getViewById(id-here);
img.setImageResource(R.drawable.my_image);
you can use a normal Imageview with an onClickListener, the imageview's drawable will be a state list drawable xml file that comes with its own built in event listeners which can be linked to separate image assets.
Is it possible to add an image(view) on top of a button (which as a background image)?
I'm porting an iOS app to Android and it wasn't a problem on iOS, but I'm wondering if it is the right approach on Android because of layouts.
Edit :
To clarify, check this screen shot :
http://a4.mzstatic.com/us/r1000/062/Purple/v4/7c/4b/cd/7c4bcd53-ba55-94d7-a26c-ce1bfe040003/mza_2736801523527387264.320x480-75.jpg
I need to do the bottom left button "carte" (card in french)
I need :
a button with a background image
an image displayed on top of the button which is loaded from internet (a card , there is a lot of different and news cards are added daily, in the screnshot it s "MIDI PASS" )
a text localised on the button , so I cant use Imagebutton class.
It is not quite clear what you want to achieve, but the following may be helpful for you:
Use an ImageButton
Set the Image as the background of the button either in XML (using android:background) or in code (using setBackgroundResource)
Update:
Looking at your updated requirements, it would be better to use a custom component to achieve what you want.
Your question is somewhat unclear but from what i understood, following may work for you:
<ImageButton android:id="#+id/imgButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/bg_image"
android:src="#drawable/top_image"/>
Hope it will be helpful.
UPDATE:
If Your background is common, then you can set the bitmap using following code:
((ImageButton)findViewById(R.id.imgButton)).setImageBitmap(bmp);
Here, you will need to get the bitmap of the card image in bmp variable.
You can also use an ImageView and implement the onClickListener.
Yes it is possible.
Use an ImageButton then....
set your android:src="#drawable/foreground Image"
set your android:background="#drawable/background Image"
So if you wanted a an apple for the background image and a 3-d word "apple" for your foreground image.
You could try something like this:
First, you create a selector for the button in the res/drawable/ folder (let's call it selector_button.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/image_resource_for_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/image_resource_for_button_pressed"
android:state_focused="true" />
<item android:drawable="#drawable/image_resource_for_button_normal" />
</selector>
Here you can define as and android:drawable not just #drawable's, but #color's or #layout's, too. If you want a more complex layout, you should define one with the background image of the button and another image on top of it using a RelativeLayout for example.
In order to do this, you have to have image_resource_for_button_pressed.png (for pressed and focused state) and image_resource_for_button_normal.png (for normal state) in your res/drawable/ folder.
After that, you create a button, like this:
<Button
android:id="#+id/aButton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/selector_button"
android:text="Hardcoded string" />
This approach helps you maintain code readability, since you just extracted the changing of the image resource into an .xml file.
I have a problem with EditText background like this
<EditText
android:id="#+id/edit"
android:layout_width="fill_parent"
android:layout_height="35sp"
android:singleLine="true"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:layout_marginTop="5px"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext.jpg
After try to set the background, It look worse
<EditText
android:id="#+id/edit"
android:layout_width="fill_parent"
android:layout_height="35sp"
android:singleLine="true"
android:layout_marginLeft="5px"
android:layout_marginRight="5px"
android:layout_marginTop="5px"
android:textAppearance="?android:attr/textAppearanceSmall"
android:background="#ffffff"
/>
alt text http://i765.photobucket.com/albums/xx299/trieutrinhtrinh/edittext2.jpg
What's happen with EditText background? How to make EditText keep default style?
Here is 2 Solution to change background of EditText i have investigate before, hope it can help you:
★Issue:
When set Background to EditText it look so terrible
★Analysys:
EditText used ninepath image for background. Their used a selector to change background image base on current state of EditText (Enable/Focus/Press, Default)
★There are two solution to solver this problem, each solution have both advantage and disadvantaged:
★Solution1:
Create custom yourself EditText (follow this solution we have freely change view of EditText.
▲Advantage:
Your freely render EditText view follow your purpose, No need to create Ninepath image as current implement of Android EditText. (Your must provider IF in your EditText to change background smoothly base on state of EditText (Enable/Focus....)
Reused able and more custom in case you want to change color of Background or add more color
▼Disadvantage:
Take much effort to create and test your custom EditText.
(I choose solution 2 so have no demo implement of solution 1, if any one follow this solution feel free to share with us your demo code)
★Solution2:
Used selector as Android implement
❶Create xml file call edittext_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/edittext_selector">
<!-- Image display in background in select state -->
<item
android:state_pressed="true"
android:drawable="#drawable/your_ninepath_image">
</item>
<!-- Image display in background in select state -->
<item
android:state_enabled="true"
android:state_focused="true"
android:drawable="#drawable/your_ninepath_image">
</item>
<!-- Default state -->
<item android:state_enabled="true"
android:drawable="#drawable/your_ninepath_image">
</item>
</selector>
❷On EditText xml set selector:
<EditText
...
android:background="#layout/**edittext_selector**"
...
</EditText>
★Note:
● In this demo code i was remove some behavior of view state, refer android implement for detail behavior (focus/unfocus, enable/disable, press, selected ...)
● Take care order of item in your selector. Difference order of item in selector xml file will have difference background.
▲Advantage:
Simple, just create selector and set selector to background, in case you want more color, just set more selector then set by code.
▼Disadvantage:
Take effort to create ninepath image for selector, in case you want change color or add more color you must create more image and selector. So it less robust than Solution1
This is my investigate to handler background of image, so it may right or wrong, if you have better solution or explain, feel free to share with us.
I was implement follow solution 2 and it worked.
My solution is a single line of code:
<your-widget-component-that-has-a-background-color>.getBackground().setColorFilter(Color.<your-desired-color>, PorterDuff.Mode.MULTIPLY);).
It breaks down like this:
"getBackground()" fetches the background from the component
"setColorFilter" will call a filtering on the background image itself
"Color.<your-color-here>" determines what color you want to pass onto the filter
"PorterDuff.Mode.<your-desired-filter-mode>" sets the kind of manipulation you would like to do with the given color and the fetched background image.
People with knowledge of image editing software might recognise the mode. Each mode has a certain effect on how the color is applied to the background image. To simply "override" the color of the image, while preserving its gradients, borders and such, use MULTIPLY.
If you set your EditText background to a color you will effectively suppress Android's default background which is probably a Nine Patch but definetely not just a simple color. As result - you will get a simplest form of EditText - a square box. Here's slightly outdated list of built-in drawables to give you some idea
If you wish to edit the color of the Android background on the fly without changing the background image completely, try the following: (it is probably not the best solution but it works):
YourEditText.getBackground().setColorFilter(getResources().getColor(R.color.your_color), PorterDuff.Mode.MULTIPLY);
You don't need to create the image. There is a built in image in the android system that you can use.So edit your EditText in xml as following;-
<EditText
android:id="#+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp"
android:hint="#string/campaign_message"
android:inputType="textMultiLine"
android:background="#android:drawable/editbox_background_normal"
android:minHeight="80dp" >
</EditText>
Note this line : android:background="#android:drawable/editbox_background_normal"
As I think you should change background Color, not the background. Because it's using xml custom shape.
A drawable to use as the background. This can be either a reference to a full drawable resource (such as a PNG image, 9-patch, XML state list description, etc), or a solid color such as #ff000000 (black).
May be a reference to another resource, in the form #[+][package:]type:name or to a theme attribute in the form ?[package:][type:]name.
May be a color value, in the form of #rgb, #argb, #rrggbb, or #aarrggbb.
Check out http://www.androidworks.com/changing-the-android-edittext-ui-widget if you want to style your EditText's.
I had to use SRC_ATOP for it to work for me
mEditText.getBackground().setColorFilter(Color.RED, PorterDuff.Mode.SRC_ATOP);