Posts Tagged Style

How to make Android CheckBox and RadioButton custom style

Hi,

Anybody know that real cool Android application must have not only excelent business logic. The one of the most important things what application must have is a nice UI.

If you want to create realy interesting application you need to create good UI. And …. hire a designer :)

Below i want to tell you how to create your own CheckBoxes and RadioButtons for your Android Applications. Sorry for this sample UI design. I didn’t hire a designer :) .

First look at screenshot:

Custom Android CheckBox style and RadioButton style. Device screenshot

Here you can see simple app with only one activity. Also below you can download the source code of Android project.

To make your own style for CheckBox or RadioButton you need to do next:

  • Create Image Drawables for their two stater (checked/unchecked)
  • Create selector for this two drawables. The sample content must be seem like this:
<?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/star_down" />
	<item android:state_checked="false" android:drawable="@drawable/star" />
</selector>
  • Add this selector as android:button attribute for CheckBox or RadioButton
<CheckBox 
		android:text="Custom CheckBox" 
		android:button="@drawable/checkbox_selector"
		android:layout_width="wrap_content" 
		android:layout_height="wrap_content"/>

That’s all. To make custom style for CheckBox and RadioButton you must do same steps.
Download the source code . Here you can download the Android project with the sample.

Tags: , , , ,

How to make custom indeterminate ProgressBar in Android or how to change ProgressBar style or color

Hi,

Here i want to show you how easily make your own Android ProgressBar style or how to change ProgressBar color.

It is very easy! Also below you can download source code of Android project.

Below you can see the screenShot with ProgressBar

Indeterminate ProgressBar style

To do this you need:

  • Create the image for this ProgressBar in any graphical editor.
  • Create animation drawable with content:
<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/image_for_rotation"
android:pivotX="50%"
android:pivotY="50%" />
Where @drawable/image_for_rotation is resource of your progressBar image.
  • Select android:indeterminateDrawable for ProgressBar witget.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center">
<ProgressBar
android:indeterminateDrawable="@drawable/my_progress_indeterminate"
android:layout_height="100dp" android:layout_width="100dp"/>
</LinearLayout>

Enjoy! :)
Download source code. Here you can download Sample project with custom Android ProgressBar.

Tags: , , ,

Hire me!