How to make a checkbox look better in android - android

This is my XML for my check box:
<CheckBox
android:id="#+id/atm_checkbox"
android:layout_width="20dp"
android:layout_height="20dp"
android:background="#color/input_color" />
And it looks like this:
http://imageshack.us/photo/my-images/528/47342915.png/
This is what i found on internet:
<CheckBox
android:id="#+id/chkAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/chk_android"
android:checked="true" />
which looks like this
how to change my checkbox to look like the one i found on internet.
As my rep is <10 i cant upload image of my checkbox, or can anyone help me how to style checkbox to make it look better
I think both the xmls have similar code, but why are they looking so different?

If you want custom the look of checkbox see this tutorial and find everything.
By the way, the checkbox from your link is for Android3.0 and above.

CheckBox derive from Button class, so you can set a background image like button. See this link, may be it is what you are looking for.

If you want a clean design without codes, use:
<CheckBox
android:id="#+id/checkBox1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawableLeft="#android:color/transparent"
android:drawablePadding="10dp"
android:text="CheckBox"/>
The trick is to set colour to transparent for android:drawableLeft and assign a value for android:drawablePadding. Also, transparency allows you to use this technique on any background colour without the side effect - like colour mismatch.

Related

DrawableStart is messing with me

I want to add an image to the left of the text in the button. So I used the below piece of code
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:drawableLeft="#drawable/ic_login"
/>
After doing this, the Layout Editor shows me this
But since there's no android:drawableStart Android Studio complains to me about this and when I add it. The final code looks like this:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Login"
android:drawableLeft="#drawable/ic_login"
android:drawableStart="#drawable/ic_login"/>
and now the button looks like this -_-
I know, one solution could be to just ignore the warning but I don't think that's what's recommended.
P.S. If I just do drawableStart then also no image is shown.
What should I do, am I missing something crucial?
You can just get rid of the warning in this case by doing (Windows) alt+enter and then ignore it for that specific view
That will add a attribute so you'll still know it's ignored on purpose when looking at the view.
I think it just need to set layout direction :
android:layoutDirection="ltr"
it will be automaticlly replace

Styling the custom switch in android

I am trying to create a listview with switches. It is working; but not as how i expected it to be. The text ON/OFF is written inside the circle(slider) and not behind it which looks awkward. I cannot find a way on how to put the text behind the slider and i tried searching but it seems that no one is experiencing this problem aside from me.
Also, is there a way where i can edit the custom switch or am i obliged to use android:background like what others are doing base on my research. (I am avoiding to use background because i am not good at Photoshop).
Thank you in advance!
You can have 9 patch images for switch
<Switch
android:id="#+id/switch_bg2"
android:layout_width="92dp"
android:layout_height="24dp"
android:checked="true"
android:focusable="false"
android:textOff="O"
android:textOn="I"
android:thumb="#drawable/switch_thumb"
android:track="#drawable/switch_bg"
android:typeface="sans" />

Styling an Android edit text so as to look like a drop down / spinner picker

I have two EditText views on a layout containing a date and a time. On being clicked these open up my custom DatePickerFragment and a TimePickerFragments. I would like to style the EditTexts with a picker drop corner as the following image shows.
however I have not been able to do this, my text fields look like this:
The pickers all work and are hooked up and return values to the EditTexts, I just want to do the styling correctly. I am happy to change the class of the containers from EditText if they should be something else to get the desired behaviour. I think this should be possible as the first image comes from Google's own design documentation. Looking through the EditText and TextView class documentation and xml attibute documentation. Is there a way to do this?
I am using Xamarin to compile this down but that should make no difference to the answer.
set the Style attribute to the following:
<EditText
style="?android:attr/spinnerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
use following image as background of your edittext
make it 9 patch with whatever colour you want.
find an original image and Create a nine patch image like below..
Note : Black Lines are patches
And then add image to background of EditText like below..
<EditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/box_edittext"
android:padding="10dp" />
OR
You can use this simple way...
Define style="?android:attr/spinnerStyle" to EditText..
<EditText
style="?android:attr/spinnerStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

What is the small graphic displayed under an EditText called and how can I remove it?

After some pretty thorough googling I still cannot figure out what the the little graphic that's displayed under the text in and EditText View is called. I would also like to remove it either using XML or programmatically. The little graphic is the thing under the cursor in this image: http://1.bp.blogspot.com/-UAuOq0h4Vok/T8reinvaWPI/AAAAAAAABPc/N4yibXd3kZg/s1600/android%2Bedittext%2Btext%2Bchange%2Blistener%2Bexample.jpg . Sorry if this is a dumb question, but without the name of this little graphic feature I can't seem to find out anything about it.
It is the background drawable associated with the edittext. You can change it by manually setting the background to something yourself, such as
<EditText
android:background="#android:color/transparent"
...
/>
Try this..
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="#string/hello"
android:background="#00000000"
/>
if you want transparancy just put 80 before the actual hash code.
#80000000
This will change any colour you want to transparent one.. :)
you probably have in your layout
android:minLines="2"
try to remove it

implement android:button="#drawable/checkbox" programmatically

I am trying to create custom Check Box button image. After some research, I came across this code sample:
<CheckBox android:id="#+id/chkFav" android:layout_width="wrap_content"
android:layout_marginRight="0dp" android:button="#drawable/checkbox"
android:layout_height="wrap_content" android:clickable="true"/>
My query is how to actually implement android:button in code.
setButtonDrawable(Drawable d) is the way to go for. Make sure it is state-list drawable to respond to user interaction.
Step By step instruction
Have at least 2 images. (one for checked state and another for normal state)
Create xml drawable. http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
Use setButtonDrawable(R.drawable.your_xml_drawable).
**Notes-- there are many ways to achieve. This is just one simple way to do it.

Categories

Resources