Building My First Android App
It’s been 5 weeks since the 6th semester begin. In this semester I had to take PPL course which is really intimidating because everyone says this couse is gonna drain you out. At first, I do really scared of what this course gonna like, because the lecturer says we have to create Android Apps this time and I never build android app before, so yeah it does scares me.
But I always like adventurous thing like learning how to build this android apps and I found it pretty hardteresting (hard but interesting). The interesting part is when I finally succeed to run in my phone and it’s quite addictive (LOL). Ok now I want to tell you about my discoveries:
- I have a zero acknowledgement about android apps
So I took online course from Udacity. This course contains many information such as vocabulary glossary for building apps, layouting and modifiying layout using xml, also there’s also quizzes that help me to understand faster.
2. Reading articles about mobile apps development
I never build an android apps before and I want to know what frameworks I could use for mobile development so I read articles about best framework for mobile development.
3. Begin to code
For the first sprint, I am responsible to create display schedule details in MeetU apps.
The first thing I had to do is discover which is the textview, imageview and button from this mockup and then I try to create cards to show the schedule details containing the views.
After installing android studio, I begin to write the code using Java and MVP (Model View Presenter) design. To display list of schedules I need UI widgets called RecyclerView and CardView. RecyclerView used to show list of something in our apps using ViewHolder pattern. This pattern consists of a simple class that holds the references to the UI components for each row in the ListView. This pattern avoids looking up the UI components all the time the system shows a row in the list.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
tools:context=".ScheduleActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/cardList"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</RelativeLayout>The RecyclerView is available in the Android support library, so we have to modify build.gradle to include this dependency:
dependencies {
implement ‘com.android.support:recyclerview-v7:21.0.0-rc1’
}After that, I create CardView which is the component that shows information inside cards. I can customise its corners, the elevation and so on. I want to use this component to show schedule information. These cards will be the rows of RecyclerView.
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="4dp"
android:layout_margin="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:background="@android:color/white"
android:gravity="center_vertical"
android:text="@string/schedule_activity"
android:textColor="@android:color/black"
android:textSize="20sp" />
<TextView
android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:text="@string/activity_date"
android:textSize="18sp" />
<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:layout_marginStart="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="5dp"
android:layout_marginBottom="10dp"
android:gravity="center_vertical"
android:text="@string/activity_time"
android:textSize="18sp" />
</LinearLayout>
</android.support.v7.widget.CardView>This component is available in another android support library so I had to add this dependency too:
dependencies {...
implementation 'com.android.support:cardview-v7:21.0.0-rc1'
implementation 'com.android.support:recyclerview-v7:21.0.0-rc1'
}
And then I want to display the UI so I need RecyclerView.Adapter to combine the RecyclerView and CardView. The layout I defined before will be the row layout of the schedule list in the RecyclerView. Before doing it, I need to define the data model (i.e. what information to show). For this purpose, I define a simple class:
public class ScheduleInfo {
protected String title;
protected String date;
protected String time;
}And finally I create the adapter class using ViewHolder pattern:
public static class ScheduleViewHolder extends RecyclerView.ViewHolder {
protected TextView vTitle;
protected TextView vDate;
protected TextView vTime;
public ScheduleViewHolder(View v) {
super(v);
vTitle = (TextView) v.findViewById(R.id.title);
vDate = (TextView) v.findViewById(R.id.date);
vTime = (TextView) v.findViewById(R.id.time);
}
}In the class adapter we should create onBindViewHolder and onCreateViewHolder. Because onBindViewHolder is useful to bind the data to the views, also onCreateViewHolder is useful to return ScheduleViewHolder inflating the row layout.
public class ScheduleAdapter extends RecyclerView.Adapter<ScheduleAdapter.ScheduleViewHolder> {
private List<ScheduleInfo> scheduleList;
public ScheduleAdapter(List<ScheduleInfo> scheduleList) {
this.scheduleList = scheduleList;
}
@Override
public int getItemCount() {
return scheduleList.size();
}
@Override
public void onBindViewHolder(ScheduleViewHolder scheduleViewHolder, int i) {
ScheduleInfo ci = scheduleList.get(i);
}
@Override
public ScheduleViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View itemView = LayoutInflater.
from(viewGroup.getContext()).
inflate(R.layout.card_schedule, viewGroup, false);
return new ScheduleViewHolder(itemView);
}...
After that, I ran the app and here’s what I got:
That’s all from me, thankyou for visiting.
