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. |
Continue from the previous tutorial, http://android-steps.blogspot.my/2015/01/106-programmr-enhanced-textview.html or download startup project here.
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.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(); } } |
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.