Greetings to my favorite science community online, StemSocial.
It's @skyehi and I'm back to continue my series on Android App Developer Tutorials For Beginners. It's been a long journey and we've come a long way from when we started with this series.
Today's episode was inspired by a moment I had in the morning. I was just sitting on the couch sipping a little bit of coffee going through some YouTube videos when I saw an Ad about a really nice Ebook Reader App.
[Original Image Source](https://www.pexels.com/photo/application-blur-business-code-270408/) by Pixabay from Pexels
We were going to work on an entirely different app that had something to do with cloud database but I figured wouldn't it be awesome to add Ebook Reader Apps to my series.
Well the Ebook Reader App we're going to build would not necessarily be the most complex and most advanced or even the most complete of all Apps but I'm hopeful that it would give my readers enough information about exactly how an Android Ebook Reader app would be developed.
So guys please keep in mind that this is just a simplified example, and you might probably need to enhance and optimize the code based on your specific requirements.
> Let's get started with today's work shall we
### Our Project Setup
I'm just going to assume before we start coding that you already have the necessary softwares needed which would include Android Studio IDE and Java Development kit, JDK.
> If you haven't installed these softwares please do because we'll need them to build our App. If you're having troubles doing that please let me know in the comments.
Alright guys we'll start building our Ebooks reader app by opening Android Studio and clicking on "Create a new Android Studio project".
As usual please choose "Empty activity" as the template of the project to make things easier and simpler.
Click on the next button and you'll be sent to the page to choose the App name and package name of your App. Also guys do not forget to ensure that Java is the selected programming language and not Kotlin.
> This is still the basics and I highly recommend learning how to build Apps with Java before Kotlin.
When you're satisfied with your project setup, click on finish button and wait for Android Studio to create your App Project.
### Designing Our User Interface
> Alright guys time for some User Interface design.
This is the frontend part of our App which the users see and interact with. Mostly Ebook reader Apps use the `RecyclerView` element to display different Ebooks in a scrollable list view.
So guys for our App we'll have to use the `RecyclerView` in our frontend design layout. The layout code will be written inside the `res/layout/activity_main.xml`file.
> Here's how your code should look like guys
```xml
<!-- Define your main activity layout with RecyclerView -->
<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"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"/>
</RelativeLayout>
```
### Creating a `Book` Java Class
Now guys before we get into the main logic code of our App, we would certainly need to create a class file that would represent a few details of each ebook in the `RecyclerView`.
Every Ebook in the list would probably have a book title, an author name and also a description or content. This is why we need to create a class in which we can create string variables to represent them.
So guys let's go ahead and create a simple Java class and name it `Book.java` .
> Here's how your java class code should look like
```java
public class Book {
private String title;
private String author;
private String content;
public Book(String title, String author, String content) {
this.title = title;
this.author = author;
this.content = content;
}
// Getters and setters
}
```
### Implement `BookAdapter`
Alright guys we have created a `RecyclerView` and have created a class that would represent each element. This means that we also need an Adapter class that would be responsible for event handling inside the `RecyclerView`.
Of course guys you would need to create a layout that would represent the design of each ebook in your App. I created a layout and named it `item_book.xml`
So inside the Adapter class which we would name as `BookAdapter.java` we'll inflate the `item_book.xml` layout. It's pretty simple code guys.
> Here's how your Adapter class code should look like
```java
public class BookAdapter extends RecyclerView.Adapter<BookAdapter.ViewHolder> {
private List<Book> books;
public BookAdapter(List<Book> books) {
this.books = books;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_book, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
Book book = books.get(position);
holder.titleTextView.setText(book.getTitle());
holder.authorTextView.setText(book.getAuthor());
}
@Override
public int getItemCount() {
return books.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
TextView titleTextView;
TextView authorTextView;
public ViewHolder(@NonNull View itemView) {
super(itemView);
titleTextView = itemView.findViewById(R.id.titleTextView);
authorTextView = itemView.findViewById(R.id.authorTextView);
// Set click listener to handle book selection
itemView.setOnClickListener(v -> {
// Handle book item click
});
}
}
}
```
### My Design of the Book Item Layout
Now guys I had designed the `res/layout/item_book.xml`file but decided why not share my work with everyone just incase some of the readers are little confused about how to create that layout.
As you can see below, it's a simple layout with a couple of `TextView` elements which would represent the Ebook title and name of author.
Now in more advanced Ebook Apps we'll be developing in the very near future, we'll include a thumbnail feature which would show the cover of the ebook as a thumbnail for the users to see.
I would encourage that you go crazy with your App design and beautification because nicer looking Apps attract more users.
> Here's how the item layout design looks like
```xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="8dp">
<TextView
android:id="@+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:textStyle="bold"/>
<TextView
android:id="@+id/authorTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="14sp"/>
</LinearLayout>
```
### Implementing `EbookViewerActivity`
It's time for the code that would allow each Ebook to open when the user clicks on it. We'll call the activity `EbookViewerActivity.java`.
It's now time to introduce to you another interesting and useful method in Android studio called the `getIntent().getIntExtra`
The `getIntExtra` method allows users to pass instructions from one activity to another. This is very important for situations where you need data moved from one activity page to another.
> Let's create the activity class and add the codes shall we
```java
public class EbookViewerActivity extends AppCompatActivity {
private ViewPager viewPager;
private List<Book> books;
private int selectedBookIndex;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ebook_viewer);
viewPager = findViewById(R.id.viewPager);
// Get selected book index from intent
selectedBookIndex = getIntent().getIntExtra("BOOK_INDEX", 0);
// Initialize books (you can add more books)
books = new ArrayList<>();
books.add(new Book("Book Title 1", "Author 1", "Content 1"));
books.add(new Book("Book Title 2", "Author 2", "Content 2"));
// Set up ViewPager with adapter
BookPagerAdapter adapter = new BookPagerAdapter(getSupportFragmentManager(), books);
viewPager.setAdapter(adapter);
viewPager.setCurrentItem(selectedBookIndex);
}
}
```
### Implementing `BookPagerAdapter`
Now guys it's time to create an adapter to handle opening a single book inside the list of Ebooks. We'll create a Java class and name it `BookPagerAdapter.java`.
We'll have to let the `BookPagerAdapter.java` extend `FragmentPagerAdapter`. This adapter will be more like what handles the Backend code of the main reading page of each Ebook.
This also means that after creating both the `BookPagerAdapter.java` and `FragmentPagerAdapter` we have to create another layout that would hold the reading page. So the user clicks on any book and ends up on that page.
So guys let's start by working on our `BookPagerAdapter.java` class
> Here's how your code should look like
```java
public class BookPagerAdapter extends FragmentPagerAdapter {
private List<Book> books;
public BookPagerAdapter(FragmentManager fm, List<Book> books) {
super(fm);
this.books = books;
}
@NonNull
@Override
public Fragment getItem(int position) {
Book book = books.get(position);
return EbookFragment.newInstance(book);
}
@Override
public int getCount() {
return books.size();
}
}
```
> Then we continue by working on the `EbookFragment` class. Just create a normal Java class and name it `EbookFragment`. That's where backend code of your main reading page will be written.
So just incase you create a button for going to the next page, this is where you'll be be creating the onClick method for that button.
I'll make it a very simple and basic code guys since it's still beginner's class.
> So go ahead and create your EbookFragment java class and let it extend default Fragment class like I have done below
```java
public class EbookFragment extends Fragment {
private Book book;
public EbookFragment() {
// Required empty public constructor
}
public static EbookFragment newInstance(Book book) {
EbookFragment fragment = new EbookFragment();
Bundle args = new Bundle();
args.putParcelable("BOOK", book);
fragment.setArguments(args);
return fragment;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
if (getArguments() != null) {
book = getArguments().getParcelable("BOOK");
}
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_ebook, container, false);
TextView contentTextView = view.findViewById(R.id.contentTextView);
contentTextView.setText(book.getContent());
return view;
}
}
```
### Designing `fragment_ebook.xml`
Alright guys for our final work we need to create the layout for the reading page. It's very simple with a textview element that holds the words or content of each Ebook you'll have inside your App.
We'll create a layout and name it `fragment_ebook.xml`
> Here's how the layout design should look like, very simple and easy to do
```xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:id="@+id/contentTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"/>
</LinearLayout>
```
Thank you so much for taking the time to read today's blog guys. I hope you enjoyed this tutorial. Well this is a really basic tutorial example of how Ebook Readers are developed.
You would actually have to add your own books or create a link between your app and an Ebook store online to see books show up on your App.
In future blogs we'll be adding more features like bookmarking, settings, and a better-designed UI for a production-quality eBook Reader app.
Once again thank you so much for your time. I hope to see you in tomorrow's episode on Android App Development Tutorials for beginners.
> Have a lovely day and catch you next time on StemSocial. Goodbye 👨💻
<center>
You Can Follow Me @skyehi For More Like This And Others
</center>
hiveblocks