Mobile phones are nowadays quite powerful and an important part of our day to day lives. Be it in keeping our todo lists, sending some emails or taking selfies, we pretty much find it difficult to leave our phones behind. One common usage of phones of course is taking selfies via the camera.
These images get stored in the external storage of our devices. What about if we want to use these images in our app? What about enabling dear users select images in an easy way? Yes, that’s the purpose of this session, to allow users easily select images from the external storage of their devices to a listview. We make use of a FilePicker library by droidninja.
Users will be able to select images and show them alongside the images name ina ListView with cardviews.
Lets have a look at the source code.
1. Build.Gradle
- This is our app level build.gradle. It’s located inside the app directory.
- We sepcify any dependencies required by the project here.
- Our dependencies can either be SDK-based e.g appcompat and design support libraries or be fetched from third party repository via internet.
- In this case we fetch Picasso(com.squareup.picasso:picasso) and FilePicker(com.droidninja:filepicker) from external repository.
apply plugin: 'com.android.application' android { compileSdkVersion 24 buildToolsVersion "24.0.1" defaultConfig { applicationId "com.tutorials.hp.listviewimagessdcard" minSdkVersion 15 targetSdkVersion 24 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.1.1' compile 'com.android.support:design:24.1.1' compile 'com.android.support:cardview-v7:24.1.1' compile 'com.squareup.picasso:picasso:2.5.2' }
2. ActivityMain.xml
- This is the container layout of our mainactivity.
- It specifies the appbar layout, toolbar and floating action button.
- It also includes the contentmain.xml layout where we actually add our widgets.
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout android_layout_width="match_parent" android_layout_height="match_parent" android_fitsSystemWindows="true" tools_context="com.tutorials.hp.listviewimagessdcard.MainActivity"> <android.support.design.widget.AppBarLayout android_layout_width="match_parent" android_layout_height="wrap_content" android_theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android_id="@+id/toolbar" android_layout_width="match_parent" android_layout_height="?attr/actionBarSize" android_background="?attr/colorPrimary" app_popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <include layout="@layout/content_main" /> <android.support.design.widget.FloatingActionButton android_id="@+id/fab" android_layout_width="wrap_content" android_layout_height="wrap_content" android_layout_gravity="bottom|end" android_layout_margin="@dimen/fab_margin" android_src="@android:drawable/ic_dialog_email" /> </android.support.design.widget.CoordinatorLayout>
3. ContentMain.xml
- This is where we add our widgets and views for our mainactivity.
- In this case we have a lsitview.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android_layout_width="match_parent" android_layout_height="match_parent" android_paddingBottom="@dimen/activity_vertical_margin" android_paddingLeft="@dimen/activity_horizontal_margin" android_paddingRight="@dimen/activity_horizontal_margin" android_paddingTop="@dimen/activity_vertical_margin" app_layout_behavior="@string/appbar_scrolling_view_behavior" tools_context="com.tutorials.hp.listviewimagessdcard.MainActivity" tools_showIn="@layout/activity_main"> <ListView android_id="@+id/lv" android_layout_width="match_parent" android_layout_height="wrap_content" /> </RelativeLayout>
4. Model.xml
- This layout gets inflated to a single viewitem in our listview.
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView android_orientation="horizontal" android_layout_width="match_parent" android_layout_margin="10dp" card_view_cardCornerRadius="5dp" card_view_cardElevation="5dp" android_layout_height="200dp"> <LinearLayout android_orientation="horizontal" android_layout_width="match_parent" android_layout_height="match_parent"> <ImageView android_id="@+id/spacecraftImg" android_src="@drawable/placeholder" android_layout_width="150dp" android_layout_height="wrap_content" /> <LinearLayout android_orientation="vertical" android_layout_width="wrap_content" android_layout_height="wrap_content"> <TextView android_layout_width="wrap_content" android_layout_height="wrap_content" android_textAppearance="?android:attr/textAppearanceLarge" android_text="Name" android_id="@+id/nameTxt" android_padding="10dp" android_textColor="@color/colorAccent" android_textStyle="bold" android_layout_alignParentLeft="true" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView>
5. Spacecraft.java
- This is the definition of a spaceraft object.
- It specifies it’s properties like name and filesystem image uri.
package com.tutorials.hp.listviewimagessdcard; import android.net.Uri; public class Spacecraft { private String name; private Uri uri; public String getName() { return name; } public void setName(String name) { this.name = name; } public Uri getUri() { return uri; } public void setUri(Uri uri) { this.uri = uri; } }
6. CustomAdapter.java
- This is our adapter class. It adapts our data to our views.
- It inherits from BaseAdapter.
package com.tutorials.hp.listviewimagessdcard; import android.content.Context; import android.view.LayoutInflater; import android.view.View; 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; import java.util.ArrayList; public class CustomAdapter extends BaseAdapter { Context c; ArrayList<Spacecraft> spacecrafts; public CustomAdapter(Context c, ArrayList<Spacecraft> spacecrafts) { this.c = c; this.spacecrafts = spacecrafts; } @Override public int getCount() { return spacecrafts.size(); } @Override public Object getItem(int i) { return spacecrafts.get(i); } @Override public long getItemId(int i) { return i; } @Override public View getView(int i, View view, ViewGroup viewGroup) { if(view==null) { //INFLATE CUSTOM LAYOUT view= LayoutInflater.from(c).inflate(R.layout.model,viewGroup,false); } final Spacecraft s= (Spacecraft) this.getItem(i); TextView nameTxt= (TextView) view.findViewById(R.id.nameTxt); ImageView img= (ImageView) view.findViewById(R.id.spacecraftImg); //BIND DATA nameTxt.setText(s.getName()); Picasso.with(c).load(s.getUri()).placeholder(R.drawable.placeholder).into(img); //VIEW ITEM CLICK view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Toast.makeText(c, s.getName(), Toast.LENGTH_SHORT).show(); } }); return view; } }
7. MainActivity.java
Our MainActivity.
package com.tutorials.hp.listviewimagessdcard; import android.net.Uri; import android.os.Bundle; import android.os.Environment; import android.support.design.widget.FloatingActionButton; import android.support.design.widget.Snackbar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.View; import android.view.Menu; import android.view.MenuItem; import android.widget.ListView; import java.io.File; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); final ListView lv= (ListView) findViewById(R.id.lv); FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { lv.setAdapter(new CustomAdapter(MainActivity.this,getData())); } }); } private ArrayList<Spacecraft> getData() { ArrayList<Spacecraft> spacecrafts=new ArrayList<>(); //TARGET FOLDER File downloadsFolder= Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DOWNLOADS); Spacecraft s; if(downloadsFolder.exists()) { //GET ALL FILES IN DOWNLOAD FOLDER File[] files=downloadsFolder.listFiles(); //LOOP THRU THOSE FILES GETTING NAME AND URI for (int i=0;i<files.length;i++) { File file=files[i]; s=new Spacecraft(); s.setName(file.getName()); s.setUri(Uri.fromFile(file)); spacecrafts.add(s); } } return spacecrafts; } }
How To Run
- Download the project above.
- You’ll get a zipped file,extract it.
- Open the Android Studio.
- Now close, already open project.
- From the Menu bar click on File >New> Import Project.
- Now Choose a Destination Folder, from where you want to import project.
- Choose an Android Project.
- Now Click on “OK“.
- Done, your done importing the project,now edit it.
More Resources
Resource | Link |
---|---|
GitHub Browse | Browse |
GitHub Download Link | Download |