Published using Google Docs
107-Programmr: Android Basic Form Elements
Updated automatically every 5 minutes

107-Programmr: Android Basic Form Activity

This tutorial demonstrates the use of Android basic form elements ie EditText and Button.

The user enters the values and the apps returns the values through Toast message.

Usually, the layout design in this tutorial is used for Profile Page for most of the apps in the market.

0) Starting Up

Continue from the previous tutorial, http://android-steps.blogspot.my/2015/01/106-programmr-enhanced-textview.html or download startup project here.

1) The Main Activity

1.1) res/layout/main.xml

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

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

    android:orientation="vertical"      

    android:layout_width="match_parent"    

    android:layout_height="match_parent"

    android:gravity="center_horizontal"

    android:background="@drawable/bgcloud"

    >    

<ImageView

    android:layout_width="wrap_content"    

    android:layout_height="wrap_content"  

    android:src="@drawable/smiley"

    />

<TextView    

    android:layout_width="wrap_content"    

    android:layout_height="wrap_content"  

    android:text="MyAndroid"    

    />

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

    android:orientation="vertical"      

    android:layout_width="match_parent"    

    android:layout_height="match_parent"

    android:layout_marginLeft="20dp"

    android:layout_marginRight="20dp"    

    >    

<Button    

    android:layout_width="match_parent"    

    android:layout_height="wrap_content"  

    android:text="About"    

    android:onClick="showAbout"

    />        

<Button    

    android:layout_width="match_parent"    

    android:layout_height="wrap_content"  

    android:text="Settings"    

    android:onClick="showSettings"

    />            

</LinearLayout>        

</LinearLayout>  

1.2) MyAndroid.Java

package com.example.MyAndroid;      

       

import android.app.Activity;      

import android.os.Bundle;      

import android.view.View;

import android.widget.Toast;

import android.content.Intent;

       

public class MyAndroid extends Activity      

{      

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

    @Override      

    public void onCreate(Bundle savedInstanceState)      

    {      

        super.onCreate(savedInstanceState);      

        setContentView(R.layout.main);

    }      

    public void showAbout(View v){

        startActivity(new Intent(this, About.class));

    }

    public void showSettings(View v){

        startActivity(new Intent(this, Settings.class));

    }        

}        

2) Settings Activity

2.1) res/layout/activity_settings.xml

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

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

    android:orientation="vertical"    

    android:layout_width="match_parent"    

    android:layout_height="match_parent"

    android:padding="16dp"

    >    

    <ImageView

        android:id="@+id/ivw_user"

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_marginTop="15dp"

        android:src="@drawable/smiley"

        android:layout_gravity="center_horizontal"/>

    <EditText

        android:id="@+id/etx_user"

        android:layout_width="match_parent"    

        android:layout_height="wrap_content"

        android:hint="Name"

    />    

    <EditText

        android:id="@+id/etx_email"

        android:layout_width="match_parent"    

        android:layout_height="wrap_content"

        android:hint="Email"

    />        

    <Button

        android:id="@+id/btn_save"

        android:layout_width="match_parent"    

        android:layout_height="wrap_content"

        android:text="Save"

        android:onClick="saveSettings"

    />        

</LinearLayout>    

2.2) Settings.java

package com.example.MyAndroid;      

       

import android.app.Activity;      

import android.os.Bundle;      

import android.view.View;

import android.widget.Toast;

public class Settings extends Activity      

{      

   

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

    @Override      

    public void onCreate(Bundle savedInstanceState)      

    {      

        super.onCreate(savedInstanceState);      

        setContentView(R.layout.activity_settings);

    }      

    public void saveSettings(View v){

        Toast.makeText(getApplicationContext(), "Saving...", Toast.LENGTH_LONG).show();

    }        

}  

ADVANCED

In the above example, we are using a smiley image which is already in a rounded shape.

Suppose you want to replace smiley by bgcloud but you want bgcloud to appear in rounded shape as well, you need to write a custom class that draws bgcloud in that shape.

The following codes will help you to achieve that.

Credit: http://www.androidhub4you.com/2014/10/android-custom-shape-imageview-rounded.html 

Settings.java

package com.example.MyAndroid;      

       

import android.app.Activity;      

import android.os.Bundle;      

import android.view.View;

import android.widget.Toast;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

public class Settings extends Activity      

{      

    private RoundedImageView imageViewRound;

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

    @Override      

    public void onCreate(Bundle savedInstanceState)      

    {      

        super.onCreate(savedInstanceState);      

        setContentView(R.layout.activity_settings);

        imageViewRound=(RoundedImageView)findViewById(R.id.imageView_round);

    Bitmap icon = BitmapFactory.decodeResource(getResources(),R.drawable.bgcloud);        

    imageViewRound.setImageBitmap(icon);

    }      

    public void saveSettings(View v){

        Toast.makeText(getApplicationContext(), "Saving...", Toast.LENGTH_LONG).show();

    }        

}  

RoundedImageView.java

package com.example.MyAndroid;    

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.Bitmap.Config;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.PorterDuff.Mode;

import android.graphics.PorterDuffXfermode;

import android.graphics.Rect;

import android.graphics.drawable.BitmapDrawable;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.widget.ImageView;

public class RoundedImageView extends ImageView {

       public RoundedImageView(Context ctx, AttributeSet attrs) {

              super(ctx, attrs);

       }

       @Override

       protected void onDraw(Canvas canvas) {

              Drawable drawable = getDrawable();

              if (drawable == null) {

                     return;

              }

              if (getWidth() == 0 || getHeight() == 0) {

                     return;

              }

              Bitmap b = ((BitmapDrawable) drawable).getBitmap();

              Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

              int w = getWidth(), h = getHeight();

              Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, w);

              canvas.drawBitmap(roundBitmap, 0, 0, null);

       }

       public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {

              Bitmap finalBitmap;

              if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)

                     finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,

                                  false);

              else

                     finalBitmap = bitmap;

              Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),

                           finalBitmap.getHeight(), Config.ARGB_8888);

              Canvas canvas = new Canvas(output);

              final Paint paint = new Paint();

              final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),

                           finalBitmap.getHeight());

              paint.setAntiAlias(true);

              paint.setFilterBitmap(true);

              paint.setDither(true);

              canvas.drawARGB(0, 0, 0, 0);

              paint.setColor(Color.parseColor("#BAB399"));

              canvas.drawCircle(finalBitmap.getWidth() / 2 + 0.7f,

                           finalBitmap.getHeight() / 2 + 0.7f,

                           finalBitmap.getWidth() / 2 + 0.1f, paint);

              paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));

              canvas.drawBitmap(finalBitmap, rect, rect, paint);

              return output;

       }

}

res/layout/activity_settings.xml

...

    <com.example.MyAndroid.RoundedImageView

        android:id="@+id/imageView_round"

        android:layout_width="100dp"

        android:layout_height="100dp"

        android:layout_marginTop="15dp"

        android:layout_gravity="center_horizontal"/>

...

OUTCOME.

DOWNLOAD:

1) smiley version

2) bgcloud version