Android MySQL Retrofit Full Course – INSERT SELECT UPDATE DELETE SEARCH PAGINATION → Creating a Beautiful Details Page – Camposha

Android MySQL Retrofit Full Course – INSERT SELECT UPDATE DELETE SEARCH PAGINATION

Creating a Beautiful Details Page

Introduction

In this lesson we will learn how to design and create a detail activity. We will also learn how to receive data and set them on this detail activity. This is part of the android live courses series season 1. In season 1 we are creating a full scientists app based on mysql crud. In the app we can register scientists and view their details in a beautiful app.

Video Lesson(Recommended)

(a). activity_detail.xml and detal_content.xml

Here’s the full detail activity layout:

(I). activity_detail.xml

(II). detail_content

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="16dp">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Personal Details"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="@color/niceGreenish"
android:textStyle="italic" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="NAME"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/nameTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="ALBERT EINSTEIN" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="DESCRIPTION"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/descriptionTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="This is the description." />
</LinearLayout>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Residency"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="@color/niceGreenish"
android:textStyle="italic" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="GALAXY"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/galaxyTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Galaxy" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="STAR"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/starTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Star" />
</LinearLayout>
</android.support.v7.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="Period"
android:textAlignment="center"
android:textAppearance="@style/TextAppearance.AppCompat.Large"
android:textColor="@color/niceGreenish"
android:textStyle="italic" />
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Date Of Birth"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/dobTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Galaxy" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Date Of Death"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/diedTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="Date of Death" />
</LinearLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="CONTRIBUTIONS"
android:textAppearance="@style/TextAppearance.AppCompat.Title"
android:textColor="@color/colorAccent" />
<TextView
android:id="@+id/contributionTV"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="@dimen/text_padding"
android:text="This Scientist is included in this list because of the huge contributions he made to Science." />
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
</ScrollView>
</android.support.v7.widget.CardView>

(b). DetailActivity.java

Here’s the full code for the detial activity:

package info.camposha.retrofitmysqlcrud.Views;
import android.content.Context;
import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.design.widget.FloatingActionButton;
import android.support.v4.app.NavUtils;
import android.support.v7.app.AppCompatActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import info.camposha.retrofitmysqlcrud.Helpers.Utils;
import info.camposha.retrofitmysqlcrud.R;
import info.camposha.retrofitmysqlcrud.Retrofit.Scientist;
import io.github.inflationx.viewpump.ViewPumpContextWrapper;
public class DetailActivity extends AppCompatActivity implements View.OnClickListener {
//Let's define our instance fields
private TextView nameTV,descriptionTV,galaxyTV,starTV,dobTV,diedTV;
private FloatingActionButton editFAB;
private Scientist receivedScientist;
private CollapsingToolbarLayout mCollapsingToolbarLayout;
/**
* Let's initialize our widgets
*/
private void initializeWidgets(){
nameTV= findViewById(R.id.nameTV);
descriptionTV= findViewById(R.id.descriptionTV);
galaxyTV= findViewById(R.id.galaxyTV);
starTV= findViewById(R.id.starTV);
dobTV= findViewById(R.id.dobTV);
diedTV= findViewById(R.id.diedTV);
editFAB=findViewById(R.id.editFAB);
editFAB.setOnClickListener(this);
mCollapsingToolbarLayout=findViewById(R.id.mCollapsingToolbarLayout);
}
/**
* We will now receive and show our data to their appropriate views.
*/
private void receiveAndShowData(){
receivedScientist= Utils.receiveScientist(getIntent(),DetailActivity.this);
if(receivedScientist != null){
nameTV.setText(receivedScientist.getName());
descriptionTV.setText(receivedScientist.getDescription());
galaxyTV.setText(receivedScientist.getGalaxy());
starTV.setText(receivedScientist.getStar());
dobTV.setText(receivedScientist.getDob());
diedTV.setText(receivedScientist.getDied());
mCollapsingToolbarLayout.setTitle(receivedScientist.getName());
mCollapsingToolbarLayout.setExpandedTitleColor(getResources().
getColor(R.color.white));
}
}
/**
* Let's inflate our menu for the detail page
*/
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.detail_page_menu, menu);
return true;
}
/**
* When a menu item is selected we want to navigate to the appropriate page
*/
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_edit:
Utils.sendScientistToActivity(this,receivedScientist,CRUDActivity.class);
finish();
return true;
case android.R.id.home:
NavUtils.navigateUpFromSameTask(this);
finish();
return true;
}
return super.onOptionsItemSelected(item);
}
/**
* When FAB button is clicked we want to go to the editing page
*/
@Override
public void onClick(View v) {
int id =v.getId();
if(id == R.id.editFAB){
Utils.sendScientistToActivity(this,receivedScientist,CRUDActivity.class);
finish();
}
}
/**
* Let's once again override the attachBaseContext. We do this for our
* Calligraphy library
*/
@Override
protected void attachBaseContext(Context newBase) {
super.attachBaseContext(ViewPumpContextWrapper.wrap(newBase));
}
/**
* Let's finish the current activity when back button is pressed
*/
@Override
public void onBackPressed() {
super.onBackPressed();
this.finish();
}
/**
* Our onCreate method
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_detail);
initializeWidgets();
receiveAndShowData();
}
}
//end

Let’s move to the next lesson.

Demo

 

(1) Comment

  • IOSTREAM17 September 16, 2019 @ 12:42 pm

    Good job.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

(2) Comments

  • IOSTREAM17 July 5, 2019 @ 6:55 am

    good job well done

    • Admin bar avatar
      Oclemy July 5, 2019 @ 7:08 am

      Thank you very much.

Comments are closed.

X