Custom xml layouts in android .

i’ll walk through you how to use the styles and implementing the custom layouts in android.
You can learn the following concepts:

  1. Styles: Styles are used to simplifies our code in xml layout and complexity.
  2. Attributes: Here we can learn the usage of custom attributes.In my example i am creating rating bar.I am introducing in this example, level-list which is used to show the ratings icons.
  3. Level-list: A Drawable that manages a number of alternate Drawables, each assigned a maximum numerical value. Setting the level value of the drawable with setLevel() loads the drawable resource in the level list that has a android:maxLevel value greater than or equal to the value passed to the method.
  4. How to decalare custom layouts in Xml.
  5. How to accept the custom attributes and its values for custom layout in Xml.
Code Explanation:
—————–
  • When we are creating custom layouts we need to define constructor with 2 or 3 parameters.
  • In init() , reading the values which are defined in xml layout and which are defined with custom attributes .Custom attributes are available with attributesParentname_yourAttibutesName (in my example: R.styleable.customratingbar_rating).
  • In switch case first argument is R.styleable.customratingbar_rating, is used to get the current rating.
  • Second argument R.styleable.customratingbar_src, is used to read level-list Xml.
  • Last argument is R.styleable.customratingbar_max, is used to set the maximum rating.
  • ImageView#setImageLevel() is used to load the drawable resource in the level list.

res/values/attr.xml:


<?xml version="1.0" encoding="utf-8"?>
<resources >
 <declare-styleable name="customratingbar">
 <attr name="rating" format="integer"/>
 <attr name="max" format="integer"/>
 <attr name="src" format="reference"/>
 </declare-styleable>

</resources>

res/layout/main.xml:


<!--xmlns:pref="http://schemas.android.com/apk/res/"com.ramesh.customratingbar.demo" is application packag name and pref is your prefix to identify the attributes and assinging the values.-->
 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:pref="http://schemas.android.com/apk/res/com.ramesh.customratingbar.demo"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical" >

<com.ramesh.customratingbar.demo.CustomRatingBar
 android:id="@+id/customRatingBar1"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 pref:max="5"
 pref:rating="1"
 pref:src="@drawable/layer_list_demo" />

</LinearLayout>

CustomRatingBar.java:

public class CustomRatingBar extends ImageView {

private int currentRating = 0;
 private int maxRating = 0;
 private int ratingResId;
 private LevelListDrawable drawable;
 private OnRatingBarChangeListener listener;

public CustomRatingBar(Context context, AttributeSet attrs, int defStyle) {
 super(context, attrs, defStyle);
 init(context, attrs);
 }

public CustomRatingBar(Context context, AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs);
 }

public void init(Context context, AttributeSet attrs) {
 setOnTouchListener(onTouch);
 TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.customratingbar);
 final int n = a.getIndexCount();
 for (int i = 0; i < n; ++i) {
 int attr = a.getIndex(i);
 switch (attr) {
 case R.styleable.customratingbar_rating:
 currentRating = a.getInt(attr, 0);
 setRating(currentRating);
 break;
 case R.styleable.customratingbar_src:
 ratingResId = a.getResourceId(attr, 0);
 try {
 drawable = (LevelListDrawable) LevelListDrawable
 .createFromXml(getResources(), getResources()
 .getXml(ratingResId));
 } catch (NotFoundException e) {
 e.printStackTrace();
 } catch (XmlPullParserException e) {
 e.printStackTrace();
 } catch (IOException e) {
 e.printStackTrace();
 }

setRatingDrawable(drawable);
 break;
 case R.styleable.customratingbar_max:
 maxRating = a.getInt(attr, 0);
 setMax(maxRating);
 break;

}
 }
 a.recycle();
 }

@Override
 public void setImageLevel(int level) {
 super.setImageLevel(level);
 currentRating = level;
 }

public void setRating(int rating) {
 setImageLevel(rating);
 }

public void setRatingDrawable(Drawable drawable) {
 setImageDrawable(drawable);
 }

public void setRatingDrawable(int ratingResId) {

this.ratingResId = ratingResId;
 setImageResource(ratingResId);
 }

public void setMax(int max) {
 maxRating = max;
 }

public void setOnRatingListener(OnRatingBarChangeListener listener) {
 this.listener = listener;
 }

interface OnRatingBarChangeListener {
 public void setOnRatingChageListener(CustomRatingBar ratingbar,
 int rating);
 }

public OnTouchListener onTouch = new OnTouchListener() {

@Override
 public boolean onTouch(View v, MotionEvent event) {
 float rawX = event.getX();
 if (event.getAction() == MotionEvent.ACTION_MOVE) {
 float width = CustomRatingBar.this.getWidth();
 if (width > 0)
 {
 float tem1 = (rawX / width) * 100 * maxRating;
 int perc = (int) tem1 / 100;
 if (perc <= maxRating && perc >= 0) {
 currentRating = perc + 1;
 currentRating = currentRating > maxRating ? maxRating
 : currentRating;
 setImageLevel(currentRating);
 }
 }
 }
 if (event.getAction() == MotionEvent.ACTION_UP) {
 float width = CustomRatingBar.this.getWidth();
 if (width > 0) {
 float temp = (rawX / width) * maxRating;
 int perc = (int) temp;
 if (perc <= maxRating && perc >= 0) {
 currentRating = perc + 1;
 currentRating = currentRating > maxRating ? maxRating
 : currentRating;
 setImageLevel(currentRating);
 listener.setOnRatingChageListener(CustomRatingBar.this,
 currentRating);
 }
 }
 }

return true;
 }
 };
}

Referred Links:

http://kevindion.com/2011/01/custom-xml-attributes-for-android-widgets/

https://staticallytyped.wordpress.com/tag/layer-list-level-list-android-custom-views-resources/

http://iserveandroid.blogspot.in/2010/10/progress-bar-implementation-using-level.html

you can download the source code here.

Screenshot here:

custom xml layout

custom xml layout

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s