Sunday, August 19, 2012

Android - TextView Example

In Android, There are UI components which are used to develop more interactive interface. To develop user friendly interface we need to explore each component.

Below is example for Textview, it can be used to display static text in the application. It is having more features and through which we can develop interface like text editor.

I used Eclipse as development tool and tested the sample in Emulator for Android 4.0.3.

There are lot of resources are used to develop android app. but for this example, we are using three basis components like code base file, layout file and string file.

Below is code of Layout file.


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

    <TextView
android:id="@+id/tvtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/tvtitle"
        tools:context=".TextViewExample" />

    <Button
        android:id="@+id/btnok"
        android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/btnok"
/>
</LinearLayout>

Code of Strings.xml file:


<resources>

    <string name="app_name">TextViewExample</string>
    <string name="tvtitle"></string>
    <string name="menu_settings">Settings</string>
    <string name="title_activity_text_view_example">Text View Example</string>
    <string name="btnok">Click Me</string>

</resources>


Code of Java file (Source):


package com.example.textviewexample;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class TextViewExample extends Activity {

Button btnOk;
TextView tvTitle;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_text_view_example);
        
        btnOk = (Button) findViewById(R.id.btnok);
        tvTitle = (TextView) findViewById(R.id.tvtitle);
        
        onButtonClickListener();
        
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_text_view_example, menu);
        return true;
    }
    
    public void onButtonClickListener(){
    btnOk.setOnClickListener(new OnClickListener() {

public void onClick(View arg0) {
// TODO Auto-generated method stub
tvTitle.setText("Hi Friends!!!");
}
});
    }
}



Note: click on button and it will show you "Hi Friends!!!" text in textview.





Saturday, August 4, 2012

HTML5 - Canvas - Tutorial 4 (Gradient)

Tutorial 4 - Canvas Element





Tutorial will teach you to give gradient effect to object.

Click here to download the source code and document which will explain the usage of each methods and their parameters.

Friday, August 3, 2012

HTML5 - Canvas Tutorial - 3


Tutorial will teach you to play with shadow of drawing object in HTML5.

Click here to download source code of tutorials.

Thursday, August 2, 2012

HTML5 - Canvas - Tutorial - 1


Tutorial for moveTo, lineTo, stroke, fillStyle, beginPath, endPath, fill and arc methods of Canvas element. Click here to download source code.


HTML5 - Canvas Tutorial - 2



Using canvas element, i have developed small application which will offer the color. user can set Red, Green and Blue colors using slider elements and based on that, new color will be formed. I have introduced Opacity attribute that will add transparency to selected color.

Click on source code, to get source of the sample. Here, you can learn about  getContext, clearRect, fillStyle, fillRect and fillText methods of Canvas elements.

Sunday, July 29, 2012

HTML5, Javascript, CSS3, Form Elements, range, number, datetime, date, datetime-local, URL, email, color datalist, file upload

HTML5 Form Elements

New elements have been introduced in HTML5. I have explored and prepared the small exercise, it is self explanatory.

As you know, all browsers are not supporting all newly introduced HTML5 form elements. I would like to advise, you can see the HTML page in Chrome or Safari.




HTML5, CSS3, Javascript Video Tag

Complete tutorial of HTML5 Video tag.

HTML5 is providing video tag and we do not require to depend on any plugin.



I have explored it, by using it, i have created own video player with all features of video like Play, Pause, fast forward, volume, track, duration of video, current frame etc.

you can download the HTML and video file using the link

HTML file contains Javascript code, CSS and HTML. you can easily understand the code if you have any question you can email me on ashishmchauhan@gmail.com