Create an app that display images in thumbnail and high quality. A screen shot o

ID: 3700750 • Letter: C

Question

Create an app that display images in thumbnail and high quality.

A screen shot of the two-pane app is shown below. On the left pane, a list of options is offered. Each row in the list consists of a thumbnail and a title. Once the user clicks on a row, the right pane shows a caption and a high quality version of the selected image.

Requirements:

1. This app is running in landscape mode.

2. Use fragments for programming. 1 fragment for each pane. You can use static binding or dynamic binding

How to generate the left pane?

1. Each row contains a thumbnail and a text.

2. The screen shot is provided as below.

Android studio is the plateform of the application.

5:51 FragmentDemo3 Picture-03 Picture-01 Picture-02 Picture-03 Picture-04 Picture-05 Picture-06 Picture-07 Picture-08 Picture-09

Explanation / Answer

Android Master-Detail is relatively easy. Please follow below instructions and create the same project in Android Studio.

1. Create a new Project with default settings and add below dependencies in your build.gradle file.

compile 'com.android.support:design:23.3.0'
compile 'com.android.support:cardview-v7:23.3.0'

2. Add resources(~10 images). For my example i have used names like apollo, challanger, pioneer etc. Add these images in res->drawable.

3. Create a class for our objects. Ex., SpaceCraft.java

public class SpaceCraft {

String name;
int image;

public SpaceCraft() {
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public int getImage() {
return image;
}

public void setImage(int image) {
this.image = image;
}
}

4. Create a class for our collection of these objects. Ex., SpaceCraftsCollection.java

public class SpaceCraftsCollection {

public static ArrayList<SpaceCraft> getSpaceCrafts()
{
ArrayList<SpaceCraft> spaceCrafts=new ArrayList<>();
SpaceCraft spaceCraft=null;

//ADD DATA TO COLLECTION
spaceCraft=new SpaceCraft();
spaceCraft.setName("Pioneer");
spaceCraft.setImage(R.drawable.pioneer);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Enterprise");
spaceCraft.setImage(R.drawable.enterprise);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Hubble");
spaceCraft.setImage(R.drawable.hubble);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Voyager");
spaceCraft.setImage(R.drawable.voyager);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Spitzer");
spaceCraft.setImage(R.drawable.spitzer);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Opportunity");
spaceCraft.setImage(R.drawable.opportunity);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Apollo");
spaceCraft.setImage(R.drawable.apollo);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Kepler");
spaceCraft.setImage(R.drawable.kepler);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Columbia");
spaceCraft.setImage(R.drawable.columbia);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Challenger");
spaceCraft.setImage(R.drawable.challenger);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("Rosetta");
spaceCraft.setImage(R.drawable.rosetta);
spaceCrafts.add(spaceCraft);

spaceCraft=new SpaceCraft();
spaceCraft.setName("WMAP");
spaceCraft.setImage(R.drawable.wmap);
spaceCrafts.add(spaceCraft);

//RETURN COLLECTION
return spaceCrafts;
}

}

Note: the names from drawable are images added by me, you can have different names with diff images.

5. Now create MyAdapter.java for our recycler view.

public class MyAdapter extends RecyclerView.Adapter<MyHolder> {

Context c;
ArrayList<SpaceCraft> spaceCrafts;

public MyAdapter(Context c, ArrayList<SpaceCraft> spaceCrafts) {
this.c = c;
this.spaceCrafts = spaceCrafts;
}

@Override
public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v= LayoutInflater.from(parent.getContext()).inflate(R.layout.model,parent,false);
return new MyHolder(v);
}

@Override
public void onBindViewHolder(MyHolder holder, int position) {
final String name=spaceCrafts.get(position).getName();
final int image=spaceCrafts.get(position).getImage();

//BIND DATA
holder.nameTxt.setText(name);
holder.img.setImageResource(image);

holder.setItemClickListener(new ItemClickListener() {
@Override
public void onItemClick(int pos) {
openDetailActivity(name,image);
Toast.makeText(c,name,Toast.LENGTH_SHORT).show();
}
});

}

@Override
public int getItemCount() {
return spaceCrafts.size();
}

private void openDetailActivity(String name,int image)
{
Intent i=new Intent(c, DetailActivity.class);

//PACK DATA TO SEND
i.putExtra("NAME_KEY",name);
i.putExtra("IMAGE_KEY",image);

//open activity
c.startActivity(i);

}
}

6. Create MyHolder.java for RecyclerView Holder.

public class MyHolder extends RecyclerView.ViewHolder implements View.OnClickListener {

TextView nameTxt;
ImageView img;
ItemClickListener itemClickListener;

public MyHolder(View itemView) {
super(itemView);

nameTxt= (TextView) itemView.findViewById(R.id.nameTxt);
img= (ImageView) itemView.findViewById(R.id.spacecraftImage);

itemView.setOnClickListener(this);
}

public void setItemClickListener(ItemClickListener itemClickListener)
{
this.itemClickListener=itemClickListener;
}

@Override
public void onClick(View v) {
this.itemClickListener.onItemClick(this.getLayoutPosition());
}
}

7. Create ItemClickListener.java

public interface ItemClickListener {

void onItemClick(int pos);

}

8. Add below code in MainActivity.java

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);

RecyclerView rv= (RecyclerView) findViewById(R.id.rv);
rv.setLayoutManager(new LinearLayoutManager(this));

MyAdapter adapter=new MyAdapter(this, SpaceCraftsCollection.getSpaceCrafts());
rv.setAdapter(adapter);
}

}

9. Create a DetailActivity.java

public class DetailActivity extends AppCompatActivity {

TextView nameTxt;
ImageView img;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});

//INITIALIZE VIEWS
nameTxt= (TextView) findViewById(R.id.nameTxtDetail);
img= (ImageView) findViewById(R.id.spacecraftImageDetail);

//RECEIVE DATA
Intent i=this.getIntent();
String name=i.getExtras().getString("NAME_KEY");
int image=i.getExtras().getInt("IMAGE_KEY");

//BIND DATA
nameTxt.setText(name);
img.setImageResource(image);
}

}

10. Create/Update activity_main.xml & Update your package name in the context

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.tutorials.hp.masterdetailrecyclerview.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>

<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>

11. Create/Update activity_detail.xml & Update your package name in the context

<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

</android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

12. Create/Update content_detail.xml & Update your package name in the context

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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.recyclercontextmenumasterdetail.Detail.DetailActivity"
tools:showIn="@layout/activity_detail">

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_margin="5dp"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="5dp"

android:layout_height="match_parent">

</LinearLayout>
</android.support.v7.widget.CardView>

</RelativeLayout>

13. Create/Update content_main.xml & Update your package name in the context

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
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.masterdetailrecyclerview.MainActivity"
tools:showIn="@layout/activity_main">

<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</RelativeLayout>

14. Create model.xml & Update your package name in the context

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_margin="10dp"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="10dp"

android:layout_height="wrap_content">

</RelativeLayout>
</android.support.v7.widget.CardView>

15. Update strings.xml as below

<resources>
<string name="app_name">Master Detail Project</string>
<string name="action_settings">Settings</string>
<string name="title_activity_detail">Detai lActivity</string>
</resources>

If you still have any other issues. Please go to this URL to resolve or to get the source code: https://www.camposha.info/source/android-custom-cardview-listview-source/

Navigate

Create an app that calculates payroll. Allow user to enter the number of hours w

Create an app to calculate the cost of a night of bowling including snacks. Chec

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Create an app that display images in thumbnail and high quality. A screen shot o

Question

Explanation / Answer

Related Questions

Navigate