Custom View Android Basic Example

// single line
/*
multi line
*/

create div with class with name e.g. circle


create in styleSheet.css class circle

 <div class="circle" id="">3</div>

.circle {
 border-radius: 50%;
    width: 50px;
    height: 50px;
    background: yellow;
    position: absolute;
    display: block;
    border: 6px solid blue;
    font-size: 50px;
    text-align: center;
}

/*
 * Copyright (C) 2012 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      //www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.example.android.fragments;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ArticleFragment extends Fragment {
    final static String ARG_POSITION = "position";
    int mCurrentPosition = -1;
    TextView articleText;
    @Override
//    public View onCreateView(LayoutInflater inflater, ViewGroup container,
//        Bundle savedInstanceState) {
//
//        // If activity recreated (such as from screen rotate), restore
//        // the previous article selection set by onSaveInstanceState().
//        // This is primarily necessary when in the two-pane layout.
//        if (savedInstanceState != null) {
//            mCurrentPosition = savedInstanceState.getInt(ARG_POSITION);
//        }
//
//        // Inflate the layout for this fragment
//        return inflater.inflate(R.layout.article_view, container, false);
//    }
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        // If activity recreated (such as from screen rotate), restore
        // the previous article selection set by onSaveInstanceState().
        // This is primarily necessary when in the two-pane layout.
        if (savedInstanceState != null) {
            mCurrentPosition = savedInstanceState.getInt(ARG_POSITION);
        }

        // Inflate the layout for this fragment
        View rootView = inflater.inflate(R.layout.article_view, container, false);
        articleText = (TextView) rootView.findViewById(R.id.article);
        return rootView;
    }
    @Override
    public void onStart() {
        super.onStart();

        // During startup, check if there are arguments passed to the fragment.
        // onStart is a good place to do this because the layout has already been
        // applied to the fragment at this point so we can safely call the method
        // below that sets the article text.
        Bundle args = getArguments();
        if (args != null) {
            // Set article based on argument passed in
            updateArticleView(args.getInt(ARG_POSITION));
        } else if (mCurrentPosition != -1) {
            // Set article based on saved instance state defined during onCreateView
            updateArticleView(mCurrentPosition);
        }
    }

    public void updateArticleView(int position) {
        //TextView article = (TextView) getActivity().findViewById(R.id.article); //Error: article=null.
        if (articleText != null)
            articleText.setText(Ipsum.Articles[position]);
        mCurrentPosition = position;
    }
/* ERROR   public void updateArticleView(int position) {
        TextView article = (TextView) getActivity().findViewById(R.id.article);
        article.setText(Ipsum.Articles[position]);
        mCurrentPosition = position;
    }*/

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);

        // Save the current article selection in case we need to recreate the fragment
        outState.putInt(ARG_POSITION, mCurrentPosition);
    }
}

public class ApokusActivity extends Activity {
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(new SampleView(this));
	}

	private static class SampleView extends View {

		// CONSTRUCTOR
		public SampleView(Context context) {
			super(context);
			setFocusable(true);

		}
		@Override
		protected void onDraw(Canvas canvas) {
			Paint paint = new Paint();
			
			canvas.drawColor(Color.GREEN);
            
            Bitmap b = Bitmap.createBitmap(200, 200, Bitmap.Config.ALPHA_8);
             paint.setColor(Color.BLUE);
            
            Shader mShader = new LinearGradient(0, 0, 100, 70, new int[] {
                    Color.RED, Color.GREEN, Color.BLUE },
                    null, Shader.TileMode.MIRROR);  // CLAMP MIRROR REPEAT
            Canvas c = new Canvas(b);
            paint.setShader(mShader);
            //c.drawCircle(60, 60, 30, paint);
            c.drawRect(0, 0, 200, 200, paint);
            canvas.drawBitmap(b, 10,10, paint);
		}

	}
}