In this class, we'll be learning about
(Figure source: http://mobile.tutsplus.com/)
Following is the xml code to get such a layout:
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/ImageView01" android:layout_height="fill_parent" android:layout_width="fill_parent" android:src="@drawable/lake" android:scaleType="matrix"/> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#000" android:textSize="40sp" android:text="This is the sky..." /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="This is a reflection of the sky" android:layout_gravity="bottom" android:gravity="right" android:textColor="#fff" android:textSize="50sp" /> </FrameLayout>
Your data storage options are the following:
Storage Option | Description |
---|---|
Shared Preferences | Store private primitive data in key-value pairs. |
Internal Storage | Store private data on the device memory. |
External Storage | Store public data on the shared external storage. |
SQLite Databases | Store structured data in a private database. |
Network Connection | Store data on the web with your own network server. |
Let's extend ImageViewer App we built in Class-02, which will now allow users to:
So, in this app, we'll add two more screens:
<?xml version="1.0" encoding="utf-8"?> <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" > <PreferenceCategory android:title="ImageViewer Preferences" > <CheckBoxPreference android:key="allow_open_gallery" android:title="Access Gallery App" android:summary="Allow opening Gallery App from this app." android:defaultValue="true" /> </PreferenceCategory> </PreferenceScreen>
package com.example.imageviewer; import android.os.Bundle; import android.preference.PreferenceActivity; public class SettingsActivity extends PreferenceActivity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); addPreferencesFromResource(R.xml.preferences); } }
public void onButtonClick(View v) { switch(v.getId()) { case R.id.button_uwimages: // Create new intent Intent i = new Intent(MainActivity.this, ImageGridActivity.class); startActivity(i); break; case R.id.button_gallery: // Open pre-installed Gallery Application Intent galleryIntent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); startActivityForResult(galleryIntent, 0); break; case R.id.button_settings: // Launch Settings Activity. Intent intent = new Intent(this, SettingsActivity.class); startActivity(intent); break; default: } }
<!-- Settings Activity --> <activity android:name="com.example.imageviewer.SettingsActivity" />
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Check if opening Gallery App is allowed. boolean allowToOpenGallery = PreferenceManager.getDefaultSharedPreferences(this) .getBoolean("allow_open_gallery", true); // If it is not allowed, then hide the 'Open Gallery' button if (!allowToOpenGallery) { Button openGalleryButton = (Button) findViewById(R.id.button_gallery); openGalleryButton.setVisibility(View.GONE); } }
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <!-- The original image will show up here. --> <ImageView android:id="@+id/image_large" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentTop="true" android:layout_above="@+id/image_caption_framelayout"/> <!-- To display TextView and EditText at same place --> <FrameLayout android:id="@id/image_caption_framelayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:paddingLeft="10dp" android:paddingRight="10dp"> <!-- To layout EditText and the Button horizontally --> <LinearLayout android:id="@+id/image_caption_linearlayout" android:layout_width="match_parent" android:layout_height="wrap_content" > <EditText android:id="@+id/image_caption_edittext" android:layout_width="match_parent" android:layout_height="match_parent" android:hint="Add a caption..." android:textSize="16sp" android:layout_weight="1" /> <Button android:id="@+id/image_caption_button" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Add" android:textSize="16sp" android:layout_weight="5" android:onClick="onButtonClick" /> </LinearLayout> <TextView android:id="@+id/image_caption_textview" android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="16sp" android:onClick="onTextViewClick" android:clickable="true" /> </FrameLayout> </RelativeLayout>
Things to note:
@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_imagedetail); }
<!-- ImageDetail Activity --> <activity android:name="com.example.imageviewer.ImageDetailActivity" android:theme="@android:style/Theme.NoTitleBar.Fullscreen" />
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_imagegrid); // Get GridView from xml GridView gridView = (GridView) findViewById(R.id.grid_view); // Set Adapter for GridView gridView.setAdapter(new ImageAdapter(this)); /** * On Click event for Single GridView Item **/ gridView.setOnItemClickListener(new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> parent, View v, int position, long id) { // Create new intent Intent i = new Intent(ImageGridActivity.this, ImageDetailActivity.class); // Send Image ID to ImageActivity i.putExtra("id", position); startActivity(i); } }); }
package com.example.imageviewer; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bundle; import android.view.View; import android.view.WindowManager; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class ImageDetailActivity extends Activity { Integer mCurrentImagePosition = -1; // Currently displayed image @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_imagedetail); // Get intent data Intent i = getIntent(); // Extract Image ID (position) from the passed intent mCurrentImagePosition = i.getExtras().getInt("id"); // First, set the image user want to be displayed. ImageView imageView = (ImageView) findViewById(R.id.image_large); imageView.setImageResource(mPics[mCurrentImagePosition]); } // Actual Full Size Images public Integer[] mPics = { R.drawable.pic0, R.drawable.pic1, R.drawable.pic2, R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6, R.drawable.pic7, R.drawable.pic8, R.drawable.pic9, R.drawable.pic10, R.drawable.pic11, R.drawable.pic12, R.drawable.pic13, R.drawable.pic14, R.drawable.pic15, R.drawable.pic16, R.drawable.pic17, R.drawable.pic18, R.drawable.pic19, R.drawable.pic20, R.drawable.pic21, R.drawable.pic22, R.drawable.pic23, R.drawable.pic24, R.drawable.pic25, R.drawable.pic26, R.drawable.pic27, R.drawable.pic28, R.drawable.pic29, R.drawable.pic30, R.drawable.pic31, R.drawable.pic32, R.drawable.pic33, R.drawable.pic34, R.drawable.pic35, R.drawable.pic36, R.drawable.pic37, R.drawable.pic38, R.drawable.pic39 }; }
package com.example.imageviewer; import android.app.Activity; import android.content.Context; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bundle; import android.view.View; import android.widget.EditText; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.TextView; public class ImageDetailActivity extends Activity { Integer mCurrentImagePosition = -1; // Currently displayed image @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_imagedetail); // Get intent data Intent i = getIntent(); // Extract Image ID (position) from the passed intent mCurrentImagePosition = i.getExtras().getInt("id"); // First, set the image user want to be displayed. ImageView imageView = (ImageView) findViewById(R.id.image_large); imageView.setImageResource(mPics[mCurrentImagePosition]); // Set UI controls setCaptionUIControls(); } /** * Method to set UI related to Image caption. */ public void setCaptionUIControls() { // See if a caption has already been added for this image. LinearLayout captionLinearLayout = (LinearLayout) findViewById(R.id.image_caption_linearlayout); TextView captionTextView = (TextView) findViewById(R.id.image_caption_textview); String caption = getImageCaption(); if(caption!= null && !caption.equals("")) { captionTextView.setVisibility(View.VISIBLE); captionTextView.setText(caption); captionLinearLayout.setVisibility(View.GONE); } else { captionTextView.setVisibility(View.GONE); captionLinearLayout.setVisibility(View.VISIBLE); } } // Actual Full Size Images public Integer[] mPics = { R.drawable.pic0, R.drawable.pic1, R.drawable.pic2, R.drawable.pic3, R.drawable.pic4, R.drawable.pic5, R.drawable.pic6, R.drawable.pic7, R.drawable.pic8, R.drawable.pic9, R.drawable.pic10, R.drawable.pic11, R.drawable.pic12, R.drawable.pic13, R.drawable.pic14, R.drawable.pic15, R.drawable.pic16, R.drawable.pic17, R.drawable.pic18, R.drawable.pic19, R.drawable.pic20, R.drawable.pic21, R.drawable.pic22, R.drawable.pic23, R.drawable.pic24, R.drawable.pic25, R.drawable.pic26, R.drawable.pic27, R.drawable.pic28, R.drawable.pic29, R.drawable.pic30, R.drawable.pic31, R.drawable.pic32, R.drawable.pic33, R.drawable.pic34, R.drawable.pic35, R.drawable.pic36, R.drawable.pic37, R.drawable.pic38, R.drawable.pic39 }; // Preferences Name private static final String PREFS_NAME = "com.example.ImageViewer.caption"; /** * Method to get the Image Caption (if any) from Shared Preferences. * * @return Image caption text */ private String getImageCaption() { // Check if SharedPreferences has a caption associated for the requested image. SharedPreferences prefs = getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE); return prefs.getString(mCurrentImagePosition.toString(), null); } /** * Method to store Image caption in SharePreferences. * * @param caption Caption text */ private void setImageCaption(String caption) { // Get Shared Preferences Editor SharedPreferences prefs = getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE); SharedPreferences.Editor editor = prefs.edit(); // Edit the value for this particular key (Image position) and commit the change. editor.putString(mCurrentImagePosition.toString(), caption); editor.commit(); } /** * Click callback for 'Add' button on ImageDetail Screen. * * @param v View clicked */ public void onButtonClick(View v) { switch(v.getId()) { case R.id.image_caption_button: EditText captionEditText = (EditText) findViewById(R.id.image_caption_edittext); String caption = captionEditText.getText().toString(); if(caption != null && !caption.equals("")) { // Store the caption string in Shared Preferences against this image. setImageCaption(caption); // Refresh UI setCaptionUIControls(); } break; default: } } }
/** * Click callback for 'TextView' on ImageDetail Screen. * * @param v View clicked */ public void onTextViewClick(View v) { switch(v.getId()) { case R.id.image_caption_textview: TextView captionTextView = (TextView) findViewById(R.id.image_caption_textview); LinearLayout captionLinearLayout = (LinearLayout) findViewById(R.id.image_caption_linearlayout); EditText captionEditText = (EditText) findViewById(R.id.image_caption_edittext); // Put the text of TextView in EditText String caption = captionTextView.getText().toString(); captionEditText.setText(caption); if(captionEditText.requestFocus()) getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE); // And, make EditText & Button visible captionTextView.setVisibility(View.GONE); captionLinearLayout.setVisibility(View.VISIBLE); break; default: } }
You can download ImageViewer source code from Github.
You can further extend this app by adding more features. Here are some suggestions: