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.
|
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:
.
No comments:
Post a Comment