EditText in Android

Hi, I am going to explain the use of EditText in android. EditText is basically a small android UI element which can get the input from the user, So it is used to get the input from the user to the application. For example: If I want to login to the application then I need EditText to provide username and Password etc.

             Fig: showing EditText used in UI   .

Edit Text is most Important UI element and used frequently in almost every application. So every developer should know the use of EditText in android.

Declare EditText in XML:

 

1. id => used to get the reference in Java class.
2. width: how wide your EditText will be.
3  Height: how much will be the height of your edittext.
4. Hint: this will show that what to write in this edittext.


Use EditText in Java Class:

Properties of EditText:

   1. Id:  This is the key of EditText with the help of which we can access EditText in our Java class.
           
                    use     =>    android:id="@+id/editText1"

   2. Width: This property will declare that what will be the width of Edit text in UI. We can set width                     in three ways
                     * wrap_content   -     Width will be according to the amount of text written.
                     * match_parent   -     width will be equal to the width of parent layout.
                     * fixed                -      width will be fixed ex: 20 dp, 30 dp etc.
   
                 use   =>      android:layout_width="wrap_content"
                                                             OR
                                    android:layout_width="match_parent"
                                                              OR
                                    android:layout_width="50dp"

  3. Height: This property will declare that what will be the height of Edit text in UI. The height can                        be declared same as width.

                use   =>      android:layout_height="wrap_content"
                                                             OR
                                    android:layout_height="match_parent"
                                                              OR
                                    android:layout_height="50dp"

 4. Hint: This light colored text is basically an indication of what to type in this EditText. This text ill                erased while start typing.

               use   =>      android:hint="username"

 5. Style: This property is used to set the text style of EditText. This can be bold or italic

                                 android:textStyle="bold"
                                                    OR
                                 android:textStyle="italic"

6. Text color:  This property is used to change the color of Text typed in EditText.

                                android:textColor="#ffffff"
                                            OR
                                android:textColor="@android:color/white"

7. Background: This property is used to change the background of EditText. you can apply color for                             background or an Image or custom drawable. 

                              android:background="#b4b4b4"
                                                    OR           
                              android:background="@drawable/ic_launcher"



This is all about the basics of EditText. For more information you can use this link.

Thanks!!!!!!!!!!!!!!!!

TextView in android

Hi..

   The topic I am going to explain here is TextView. Text view is a small view that is used to show a simple text in an Android Application. TextView can be modified according to the need of the application. For example: If someone want to change the color, size and font etc. of the text.


Here are some properties of TextView.

Properties	Code
Set Width of TextView ·         Wrap_content : width equals to the text in the textview. ·         Match_parent:  Width equals to the width of parent layout of textview.	android:layout_width="match_parent"                 or android:layout_width="wrap_content"
Set height of TextView	android:layout_height="match_parent"                 or android:layout_height="wrap_content"
Set Text Color  ·         #ffffff : color code for white color ·         @color/white: if defined in color.xml ·         @android:color:  use OS defined color.	android:textColor="#ffffff"             or android:textColor="@color/white"             or android:textColor="@android:color/WHITE"
Set TextSize:	android:textSize="15sp"
Set Text style	android:textStyle="bold"  or italic etc.

    

Apply External Font in Text:

      

Typeface type = Typeface.createFromAsset(getAssets(),"fonts/Helvetica.ttf");
TextView tv = (TextView) findViewById(R.id.text);
tv.setTypeface(type);

                                                                   
Define TextView in XML

Use TextView in Java class file.


                                TextView text=(TextView)findViewById(R.id.textView1);

                 text.setText("This is the sample text...");
     
    Above is the way to use Textview in android.
 
      # Create the object of TextView Class:
             
                 TextView text;
 
      # Get id of Textview defined in the xml file.

            text=(TextView)findViewById(R.id.textView1);

     # Set the text that you want to show in TextView:

            text.setText("This is the sample text...");

This way you can use the TextView in your.
     

This is all about TextView

Thanks!!!!!!!

Creating Custom ListView in android

Hi all,

   Today I am going to explain the topic Custom ListView. This is the most frequent  used topic in the Android Applications. I am explaining here each and every section to make a complete Custom List in android.

Steps to make custom listview:

* Design UI for List item (you can see above image for list item design).
* Make an Item class which can hold the values of all UI component you are using in list item.

     for example:  public class Item {

public String name;

public String rollno;

public String classname;

public String phone;

public String pic;

public Item(String name, String rno, String cname, String pno, String pic) {

// TODO Auto-generated constructor stub

this.name=name;

this.rollno=rno;

this.classname=cname;

this.phone=pno;

this.pic=pic;

}

* Make an Adapter which can inflate the List item UI into your listview.
     
           inflater = (LayoutInflater) con.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView=inflater.inflate(R.layout.list_item, parent,false);


* Add data to the array of object that will to fill adapter.

            list.add(newItem("George","12","12th","345567445","http://thespiritscience.net/wpcontent/uploads/2015/02/Sacred-G-Eye.jpg"));
list.add(new Item("John", "15", "10th", "4566676", "http://p1.pichost.me/i/42/1657715.jpg"));
list.add(new Item("Keron", "152", "10th", "9908875", "http://www.hdwallpapersinn.com/wp-  content/uploads/2015/02/Free-Wallpaper-Nature-Scenes-660x330.jpg"));

* Now set adapter to the listview.

     lview=(ListView)findViewById(R.id.listView1);

adapter = new CustomAdapter(MainActivity.this, list);

lview.setAdapter(adapter);




# Complete sample code:


1. MainActivity.java

package com.example.customlistadapter;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MainActivity extends Activity{

ArrayList<Item> list= new ArrayList<Item>();
ListView lview;
CustomAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

list.add(new Item("George", "12", "12th", "345567445", "http://thespiritscience.net/wp-content/uploads/2015/02/Sacred-G-Eye.jpg"));
list.add(new Item("John", "15", "10th", "4566676", "http://p1.pichost.me/i/42/1657715.jpg"));
list.add(new Item("Keron", "152", "10th", "9908875", "http://www.hdwallpapersinn.com/wp-content/uploads/2015/02/Free-Wallpaper-Nature-Scenes-660x330.jpg"));
list.add(new Item("James", "127", "11th", "22435666", "http://www.bestinspired.com/wp-content/uploads/2015/04/nature-wallpaper-latest-190-825x510.jpg"));
list.add(new Item("Julie", "121", "9th", "96663457", "http://www.hdwallpapersinn.com/wp-content/uploads/2014/11/new_wallpaper_nature_hd_2015-1-660x330.jpg"));
list.add(new Item("Kattie", "18", "7th", "1211343", "http://www.nature-pictures.info/wp-content/uploads/2013/05/the-15-craziest-things-in-nature-you-wont-believe-actually-exist-2.jpg"));

lview=(ListView)findViewById(R.id.listView1);

adapter = new CustomAdapter(MainActivity.this, list);

lview.setAdapter(adapter);

}

}


2. activity_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="match_parent"

    android:orientation="vertical" >

    <ListView

        android:id="@+id/listView1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" >

    </ListView>

</LinearLayout>

3. CustomAdapter.java

package com.example.customlistadapter;

import java.util.ArrayList;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

import android.widget.Toast;

import com.squareup.picasso.Picasso;

public class CustomAdapter extends BaseAdapter {

Context ctx;

ArrayList<Item> arr = new ArrayList<Item>();

LayoutInflater inflater;

ViewHolder holder;

public CustomAdapter(Context con, ArrayList<Item> list) {

// TODO Auto-generated constructor stub

this.ctx = con;

this.arr = list;

inflater = (LayoutInflater) con

.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

public int getCount() {

// TODO Auto-generated method stub

return arr.size();

}

@Override

public Object getItem(int position) {

// TODO Auto-generated method stub

return arr.get(position);

}

@Override

public long getItemId(int position) {

// TODO Auto-generated method stub

return position;

}

@Override

public View getView(final int position, View convertView, ViewGroup parent) {

// TODO Auto-generated method stub

if (convertView == null) {

convertView=inflater.inflate(R.layout.list_item, parent,false);

holder = new ViewHolder();

holder.name=(TextView)convertView.findViewById(R.id.Name);

holder.cname=(TextView)convertView.findViewById(R.id.cname);

holder.rno=(TextView)convertView.findViewById(R.id.rno);

holder.mno=(TextView)convertView.findViewById(R.id.phone);

holder.pic=(ImageView)convertView.findViewById(R.id.pic);

convertView.setTag(holder);

        } else {

       

        holder = (ViewHolder) convertView.getTag();

           

        }

Picasso.with(ctx).load(arr.get(position).pic).placeholder(R.drawable.ic_launcher).resize(200, 200).into(holder.pic);

holder.name.setText(arr.get(position).name);

holder.cname.setText(arr.get(position).classname);

holder.rno.setText(arr.get(position).rollno);

holder.mno.setText(arr.get(position).phone);

convertView.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

Toast.makeText(ctx,arr.get(position).name, 2345).show();

}

});

return convertView;

}

private class ViewHolder {

public ImageView pic;

public TextView name, cname, rno, mno;

}

}

4. Item.java

package com.example.customlistadapter;

public class Item {

public String name;

public String rollno;

public String classname;

public String phone;

public String pic;

public Item(String name, String rno, String cname, String pno, String pic) {

// TODO Auto-generated constructor stub

this.name=name;

this.rollno=rno;

this.classname=cname;

this.phone=pno;

this.pic=pic;

}

}

5. list_item.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="match_parent"

    android:background="#aad032"

    android:layout_marginBottom="1dip"

    android:orientation="horizontal" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight=".7"

        android:paddingLeft="10dip"

        android:gravity="center" >

        <ImageView

            android:id="@+id/pic"

            android:layout_width="wrap_content"

            android:layout_height="match_parent"

            android:src="@drawable/ic_launcher" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_weight=".3"

        android:gravity="center_vertical"

        android:orientation="vertical"

        android:paddingLeft="10dip" >

        <TextView

            android:id="@+id/Name"

            android:layout_width="wrap_content"

            android:textColor="#ffffff"

            android:textStyle="bold"

            android:layout_height="wrap_content"

            android:text="Name" />

        <TextView

            android:id="@+id/cname"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textColor="#ffffff"

            android:text="cname" />

        <TextView

            android:id="@+id/rno"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textColor="#ffffff"

            android:text="rno" />

        <TextView

            android:id="@+id/phone"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:textColor="#ffffff"

            android:text="phone" />

    </LinearLayout>

</LinearLayout>

6. manifest.xml

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

    package="com.example.customlistadapter"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk

        android:minSdkVersion="8"

        android:targetSdkVersion="21" />

    <uses-permission android:name="android.permission.INTERNET"/>

    <application

        android:allowBackup="true"

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

         <activity

            android:name="com.example.customlistadapter.MainActivity"

            android:label="@string/app_name" >

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

    </application>

</manifest>

Here I am using Picasso library to download images from url.

You can download the code by using lenk below.

Downlod code

Anyone can ask if there is any problem. questions are welcome!

Thanks, 

Star Shape layout designing Android

Hi Friends,

              This post is about to design the Layout like Star Shape. By using this post you can make the look and shape of your layout like star. In which you can add child views. This is the inherited view of Relative Layout, so it will behave like relative layout. The only difference in Relative Layout and StarLayout is the Shape. So follow the instructions below to make it in your project.
Below is the Coordinate implementation of the Layout. See figure.

        

 Method:

private Path Star() {

Path path = new Path();

float midX = getWidth()/2;

float midY = getHeight()/2;

path.moveTo(midX, midY);

path.lineTo(midX+190, midY+300);

path.lineTo(midX, midY+210);

path.lineTo(midX-190, midY+300);

path.lineTo(midX-160, midY+90);

path.lineTo(midX-300, midY-70);

path.lineTo(midX-100 ,midY-110);

path.lineTo(midX, midY-300);

path.lineTo(midX+100, midY-110);

path.lineTo(midX+300, midY-70);

path.lineTo(midX+160, midY+90);

path.lineTo(midX+190, midY+300);

return path;

}

The above method will draw a path like STAR on the Canvas. Now you have to clip this path or crop the area inside the path to make it to behave like Layout shape. So to do this call above method in OnDraw() method of the class like this:

    

Path clipPath = new Path();

clipPath.addPath(Star());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

By using this code snippet the area inside Star Path will be cropped and your Start shape Layout is ready now. You will get the output like this:

Below is the complete code of the sample application. you can use it to your project. So follow the steps below.


1. MainActivity.java

package com.example.octagonlayout;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

}

2. activity_main.xml.

<RelativeLayout 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"

  

    tools:context="com.example.octagonlayout.MainActivity" >

    <com.example.octagonlayout.StarLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:background="#b4b4b4"

        

        >

    </com.example.octagonlayout.StarLayout>

</RelativeLayout>

3. StarLayout.java

package com.example.octagonlayout;

import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Path;

import android.util.AttributeSet;

import android.widget.RelativeLayout;

public class StarLayout extends RelativeLayout {

public StarLayout(Context context) {

super(context);

}

public StarLayout(Context context, AttributeSet attrs) {

super(context, attrs);

}

@SuppressLint("NewApi")

public StarLayout(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

Path clipPath = new Path();

clipPath.addPath(Star());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

}

private Path Star() {

Path path = new Path();

float midX = getWidth()/2;

float midY = getHeight()/2;

path.moveTo(midX, midY);

path.lineTo(midX+190, midY+300);

path.lineTo(midX, midY+210);

path.lineTo(midX-190, midY+300);

path.lineTo(midX-160, midY+90);

path.lineTo(midX-300, midY-70);

path.lineTo(midX-100 ,midY-110);

path.lineTo(midX, midY-300);

path.lineTo(midX+100, midY-110);

path.lineTo(midX+300, midY-70);

path.lineTo(midX+160, midY+90);

path.lineTo(midX+190, midY+300);

return path;

}

}

Thanks !!!!!! happy coding !!!

Hexagonal Shape layout designing Android

Hi Friends,

  This post is to design Hexagonal Shape layout which extends the properties of Relative Layout. These types of Layout are very useful in photo editing and photo framing type applications.
The general layout graph is as follows:

* Method to make this layout shape:  following method is making the  hexagonal shape , use it.
           

private Path Hexagon() {

float midx = getWidth() / 2;

float midy = getHeight() / 2;

Path p = new Path();

p.moveTo(midx, midy);

p.lineTo(midx+150, midy + 220);

p.lineTo(midx, midy + 220);

p.lineTo(midx-150, midy + 220);

p.lineTo(midx-300, midy);

p.lineTo(midx-150, midy-220);

p.lineTo(midx+150, midy-220);

p.lineTo(midx+300, midy);

p.lineTo(midx+150, midy + 220);

return p;

}

* Now make a call in OnDraw() method:

     Path clipPath = new Path();

clipPath.addPath(Hexagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

* The output will be like this:

     

                                       Note:  Test on other device is not getting desired output. 


Below is the complete example code : You can simply copy this code to your project and can use or modify according to your needs.


1. MainActivity.java

package com.example.octagonlayout;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

}

2. activity_main.xml

<RelativeLayout 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"

    tools:context="com.example.octagonlayout.MainActivity" >

    <com.example.octagonlayout.HexagonLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#b4b4b4"
     
        >
    </com.example.octagonlayout.HexagonLayout>

</RelativeLayout>

3. HexagonLayout.java

package com.example.octagonlayout;

import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Path;

import android.util.AttributeSet;

import android.widget.RelativeLayout;

public class HexagonLayout extends RelativeLayout {

public HexagonLayout(Context context) {

super(context);

}

public HexagonLayout(Context context, AttributeSet attrs) {

super(context, attrs);

}

@SuppressLint("NewApi")

public HexagonLayout(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

Path clipPath = new Path();

clipPath.addPath(Hexagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

}

private Path Hexagon() {

float midx = getWidth() / 2;

float midy = getHeight() / 2;

Path p = new Path();

p.moveTo(midx, midy);

p.lineTo(midx+150, midy + 220);

p.lineTo(midx, midy + 220);

p.lineTo(midx-150, midy + 220);

p.lineTo(midx-300, midy);

p.lineTo(midx-150, midy-220);

p.lineTo(midx+150, midy-220);

p.lineTo(midx+300, midy);

p.lineTo(midx+150, midy + 220);

return p;

}

}

Thanks !!!!!! enjoy coding ):

Design Octagon Shape Layout Android

Hi Friends,

        Today I am going to explain some very important topics, which are very helpful in Android application development. In android the default shape of any layout is Rectangular. But if we need the layout in the shape other than rectangle , then for that purpose we have to design our own custom layout. So here I am designing a Layout with Octagonal shape which extends Relative Layout properties.

            First of all to design a layout we should know the shapes drawing on the graph. According to the coordinates of graph, we can design layout.  See fig.

Now we have to make this shape in java class like this:

private Path Octagon(){

Path p = new Path();

float midX = getWidth()/2;     // get center of X

float midY = getHeight()/2;    // get center of Y

p.moveTo(midX, midY);

p.lineTo(midX+300, midY+120);

p.lineTo(midX+120, midY+300);

p.lineTo(midX-120, midY+300);

p.lineTo(midX-300, midY+120);

p.lineTo(midX-300, midY-120);

p.lineTo(midX-120, midY-300);

p.lineTo(midX+120, midY-300);

p.lineTo(midX+300, midY-120);

p.lineTo(midX+300, midY+120);

return p;

}

Then  call this above method in OnDraw() method:

Path clipPath = new Path();

clipPath.addPath(Octagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);


Output:

Below is the Complete code of the sample.


1. MainActivity.java

package com.example.octagonlayout;

import android.app.Activity;

import android.os.Bundle;

public class MainActivity extends Activity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

    }

}

2. activity_main.xml

<RelativeLayout 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"

    tools:context="com.example.octagonlayout.MainActivity" >

    <com.example.octagonlayout.OctagonLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

          android:background="#b4b4b4"

     

      >

        <ImageView

            android:id="@+id/imageView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_centerHorizontal="true"

            android:layout_centerVertical="true"

            android:src="@drawable/ic_launcher" />

    </com.example.octagonlayout.OctagonLayout>

</RelativeLayout>

3. OctagonLayout.java

package com.example.octagonlayout;

import android.annotation.SuppressLint;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Path;

import android.util.AttributeSet;

import android.widget.RelativeLayout;

public class OctagonLayout extends RelativeLayout {

public OctagonLayout(Context context) {

super(context);

}

public OctagonLayout(Context context, AttributeSet attrs) {

super(context, attrs);

}

@SuppressLint("NewApi")

public OctagonLayout(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

}

@Override

protected void onDraw(Canvas canvas) {

Path clipPath = new Path();

clipPath.addPath(Octagon());

canvas.clipPath(clipPath);

canvas.drawColor(Color.MAGENTA);

super.onDraw(canvas);

}

private Path Octagon(){

Path p = new Path();

float midX = getWidth()/2;

float midY = getHeight()/2;

p.moveTo(midX, midY);

p.lineTo(midX+300, midY+120);

p.lineTo(midX+120, midY+300);

p.lineTo(midX-120, midY+300);

p.lineTo(midX-300, midY+120);

p.lineTo(midX-300, midY-120);

p.lineTo(midX-120, midY-300);

p.lineTo(midX+120, midY-300);

p.lineTo(midX+300, midY-120);

p.lineTo(midX+300, midY+120);

return p;

}

}



Note: Text sample with different device resolution if not getting desired result or modify coordinates according to your needs.

May this code help you. Thanks!!!!!!