Android: Creating custom dialog

In android sometimes we want to display some data but we do not want to start a new activity.As starting a new activity is not feasible in some cases.So what should we do?

First take a case

We have news showing in List-View now if some one click on on particular news then it should show detail about this this news.so instead of starting new activity we can just pop a custom dialog (with same view as activity) then we will use a custom dialog for this. Because of its benefit we call this custom dialog as Dialog activity

Step 1)      Create a new project in android

Step 2) Change your main.xml as follows

  <?xml version="1.0" encoding="utf-8" ?>

       <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">

        <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/start" android:id="@+id/show_dialog" />

  </LinearLayout>

Step 3) Create a new xml to showing our custom dialog

<?xml version="1.0" encoding="utf-8"?>

   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="#FFFF00"

    android:orientation="vertical" >

      <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_margin="10dp"

        android:text="@string/msg"

        android:textColor="#000" >

    </TextView>

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center_horizontal"

        android:clickable="true" android:id="@+id/dismis_dialog"

        android:text="@string/dismis" />

  </LinearLayout>

Step 4) Change your main activity code to as following

package com.ahmad.com;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.view.View.OnClickListener;

public class CustomDialogActivity extends Activity implements OnClickListener {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        findViewById(R.id.show_dialog).setOnClickListener(this);

    }

@Override

public void onClick(View v) {

CustomDialogClass cdd=new CustomDialogClass(this);

cdd.show();

}

}

Step 5)  Create a new class for showing dialog

package com.ahmad.com;

import android.app.Dialog;

import android.content.Context;

import android.os.Bundle;

import android.view.View;

import android.widget.Button;

public class CustomDialogClass extends Dialog implements android.view.View.OnClickListener{

public CustomDialogClass(Context context) {

super(context);

}

Button btn;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.dialog);

setTitle("This Sameer Custom Dialog");

btn=(Button) findViewById(R.id.dismis_dialog);

btn.setOnClickListener(this);

}

@Override

public void onClick(View v) {

dismiss();

}

}

Enjoy this will show a custom dialog as below images

If you click on button show dialog it will show a dialog.your can dismis this dialog by clicking on dismiss button

    

If you like this please leave a comment.If you have any doubt then also mention your problem by leaving comment

Read more »

Custom Color picker in android

Here i wrote a code with help of AndroidDeveloper'sBestGuide.It is just concept of implement canvas with a dialogbox.
We create different color by using Canvas.and then we select different color with the help of canvas.
With the help of this example ,you will also read how to create a custom diaolog




For more information about canvas you can write in comment.I will explain when ever i will be free.Or refer to Go to this link
1)Create One XML file in res/layout/main.xml

     <?xml version="1.0" encoding="UTF-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="20dip" android:id="@+id/main"
    android:orientation="vertical">
    <Button android:layout_width="wrap_content"         android:layout_height="wrap_content"
        android:layout_gravity="center" android:text="Change Background"
        android:id="@+id/change_color"/>
</LinearLayout>

2)create One activity and register in manifest file

 package com.android.gesture.builder.ahmad;

import com.android.Dialog.ColorPickerDialog;
import com.android.Dialog.ColorPickerDialog.OnColorChangedListener;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

public class ColorPicker extends Activity{

    private LinearLayout ll;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        Button btn=(Button) findViewById(R.id.change_color);
        ll=(LinearLayout) findViewById(R.id.main);
        btn.setOnClickListener(new OnClickListener() {
          
            @Override
            public void onClick(View v) {
                ColorPickerDialog cpd=new ColorPickerDialog(ColorPicker.this, listener, 0);
                cpd.show();
            }
        });
     }
     @Override
    protected void onResume() {
        super.onResume();
        ll.setBackgroundColor(ColorAh);
      
    }
   
    OnColorChangedListener listener=new OnColorChangedListener() {
            @Override
            public void colorChanged(int color) {
                Toast.makeText(ColorPicker.this, ""+color, Toast.LENGTH_LONG).show();
                ColorAh=color;
                ll.setBackgroundColor(ColorAh);
            }
        };
      
    private int ColorAh=Color.BLACK;
}

3)Now create a custom dialog
package com.android.Dialog;


import android.os.Bundle;
import android.app.Dialog;
import android.content.Context;
import android.graphics.*;
import android.view.MotionEvent;
import android.view.View;

public class ColorPickerDialog extends Dialog {

    public interface OnColorChangedListener {
        void colorChanged(int color);
    }

    private OnColorChangedListener mListener;
    private int mInitialColor;

    private static class ColorPickerView extends View {
        private Paint mPaint;
        private Paint mCenterPaint;
        private final int[] mColors;
        private OnColorChangedListener mListener;

        ColorPickerView(Context c, OnColorChangedListener l, int color) {
            super(c);
            mListener = l;
            mColors = new int[] {
                0xFFFF0000, 0xFFFF00FF, 0xFF0000FF, 0xFF00FFFF, 0xFF00FF00,
                0xFFFFFF00, 0xFFFF0000
            };
            Shader s = new SweepGradient(0, 0, mColors, null);

            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setShader(s);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(32);

            mCenterPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mCenterPaint.setColor(color);
            mCenterPaint.setStrokeWidth(5);
        }

        private boolean mTrackingCenter;
        private boolean mHighlightCenter;

        @Override
        protected void onDraw(Canvas canvas) {
            float r = CENTER_X - mPaint.getStrokeWidth()*0.5f;

            canvas.translate(CENTER_X, CENTER_X);

            canvas.drawOval(new RectF(-r, -r, r, r), mPaint);
            canvas.drawCircle(0, 0, CENTER_RADIUS, mCenterPaint);

            if (mTrackingCenter) {
                int c = mCenterPaint.getColor();
                mCenterPaint.setStyle(Paint.Style.STROKE);

                if (mHighlightCenter) {
                    mCenterPaint.setAlpha(0xFF);
                } else {
                    mCenterPaint.setAlpha(0x80);
                }
                canvas.drawCircle(0, 0,
                                  CENTER_RADIUS + mCenterPaint.getStrokeWidth(),
                                  mCenterPaint);

                mCenterPaint.setStyle(Paint.Style.FILL);
                mCenterPaint.setColor(c);
            }
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            setMeasuredDimension(CENTER_X*2, CENTER_Y*2);
        }

        private static final int CENTER_X = 100;
        private static final int CENTER_Y = 100;
        private static final int CENTER_RADIUS = 32;

        private int floatToByte(float x) {
            int n = java.lang.Math.round(x);
            return n;
        }
        private int pinToByte(int n) {
            if (n < 0) {
                n = 0;
            } else if (n > 255) {
                n = 255;
            }
            return n;
        }

        private int ave(int s, int d, float p) {
            return s + java.lang.Math.round(p * (d - s));
        }

        private int interpColor(int colors[], float unit) {
            if (unit <= 0) {
                return colors[0];
            }
            if (unit >= 1) {
                return colors[colors.length - 1];
            }

            float p = unit * (colors.length - 1);
            int i = (int)p;
            p -= i;

            // now p is just the fractional part [0...1) and i is the index
            int c0 = colors[i];
            int c1 = colors[i+1];
            int a = ave(Color.alpha(c0), Color.alpha(c1), p);
            int r = ave(Color.red(c0), Color.red(c1), p);
            int g = ave(Color.green(c0), Color.green(c1), p);
            int b = ave(Color.blue(c0), Color.blue(c1), p);

            return Color.argb(a, r, g, b);
        }

        private int rotateColor(int color, float rad) {
            float deg = rad * 180 / 3.1415927f;
            int r = Color.red(color);
            int g = Color.green(color);
            int b = Color.blue(color);

            ColorMatrix cm = new ColorMatrix();
            ColorMatrix tmp = new ColorMatrix();

            cm.setRGB2YUV();
            tmp.setRotate(0, deg);
            cm.postConcat(tmp);
            tmp.setYUV2RGB();
            cm.postConcat(tmp);

            final float[] a = cm.getArray();

            int ir = floatToByte(a[0] * r +  a[1] * g +  a[2] * b);
            int ig = floatToByte(a[5] * r +  a[6] * g +  a[7] * b);
            int ib = floatToByte(a[10] * r + a[11] * g + a[12] * b);

            return Color.argb(Color.alpha(color), pinToByte(ir),
                              pinToByte(ig), pinToByte(ib));
        }

        private static final float PI = 3.1415926f;

        @Override
        public boolean onTouchEvent(MotionEvent event) {
            float x = event.getX() - CENTER_X;
            float y = event.getY() - CENTER_Y;
            boolean inCenter = java.lang.Math.sqrt(x*x + y*y) <= CENTER_RADIUS;

            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    mTrackingCenter = inCenter;
                    if (inCenter) {
                        mHighlightCenter = true;
                        invalidate();
                        break;
                    }
                case MotionEvent.ACTION_MOVE:
                    if (mTrackingCenter) {
                        if (mHighlightCenter != inCenter) {
                            mHighlightCenter = inCenter;
                            invalidate();
                        }
                    } else {
                        float angle = (float)java.lang.Math.atan2(y, x);
                        // need to turn angle [-PI ... PI] into unit [0....1]
                        float unit = angle/(2*PI);
                        if (unit < 0) {
                            unit += 1;
                        }
                        mCenterPaint.setColor(interpColor(mColors, unit));
                        invalidate();
                    }
                    break;
                case MotionEvent.ACTION_UP:
                    if (mTrackingCenter) {
                        if (inCenter) {
                            mListener.colorChanged(mCenterPaint.getColor());
                        }
                        mTrackingCenter = false;    // so we draw w/o halo
                        invalidate();
                    }
                    break;
            }
            return true;
        }
    }

    public ColorPickerDialog(Context context,
                             OnColorChangedListener listener,
                             int initialColor) {
        super(context);

        mListener = listener;
        mInitialColor = initialColor;
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        OnColorChangedListener l = new OnColorChangedListener() {
            public void colorChanged(int color) {
                mListener.colorChanged(color);
                dismiss();
            }
        };

        setContentView(new ColorPickerView(getContext(), l, mInitialColor));
        setTitle("Pick a Color");
    }
}

                                Screen Shot how it will work                                               
                                             

                         Now change Change color using color picker

Now Select color

Read more »