DEV Community: Akshay-Rana-Gujjar

EventBus for better Communication Between Components in Android

Akshay-Rana-Gujjar — Fri, 11 Sep 2020 19:22:42 +0000

EventBus is the number 1 event library for android and java. EventBus uses the publisher and subscriber pattern for loose coupling which means the possibility of errors will be less. EventBus simplifies the communication between different components for example communications between different levels of activities or even services. You need very less or no setup to use EventBus in your existing project.

EventBus provides a convenient annotation-based API which makes it fast and the performance is increased. EventBus is used by many popular apps, apps which has 1 billion-plus download which shows how EventBus popular.

In this tutorial, we will see how we can get started using EventBus in an android project. Before jumping in the code let's see what we will be going to make. To better understanding EventBus we will make an app that allows us to add items to the cart and show the total count of the items. See below how our app will work.

Let's get started.

Add EventBus Dependency in Android Studio
First, we need to add EventBus Dependency in the project. Open your build.gradle and add the dependency.

implementation 'org.greenrobot:eventbus:3.2.0'

Hit the sync button and move to the next step.

Make a POJO class for EventBus

The next step is to make a Java object class to pass in the EevntBus Subscribe method and to be used later.

For our example app, we will make a class with the name of CartEvent.java with a string field for cart items.

See the below code for better understanding.

public class CartEvent {
    public String cartItem;

    public CartEvent(String cartItem) {
        this.cartItem = cartItem;
    }
}

Move to the next step.

Make UI for the App

In the first activity, we have a textview to show the total count of the cart item.

And a button to open second activity to add items in the cart.

See the below code to understand.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Cart Item: 0"
        android:id="@+id/cartTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="50sp"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Add Items"
        android:id="@+id/button"
        android:onClick="open"
        app:layout_constraintTop_toBottomOf="@id/cartTextView"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

Now make the second activity to show the items list and add a method for the button click.

We made simple cart items. We add 3 items but in the real world application, you should use recyclerview or any other view to make a list of items.

Here is the second activity XML code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:padding="15sp"
    tools:context=".MainActivity2">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/item1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Item 1"
        android:layout_marginTop="25sp"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/addItem1"
        android:text="Add to cart"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/item1"
        app:layout_constraintBottom_toBottomOf="@id/item1"
        android:onClick="addItemToCart"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/item2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/item1"
        android:text="Item 2"
        android:layout_marginTop="25sp"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/addItem2"
        android:text="Add to cart"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/item2"
        app:layout_constraintBottom_toBottomOf="@id/item2"
        android:onClick="addItemToCart"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/item3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/item2"
        android:text="Item 3"
        android:layout_marginTop="25sp"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/addItem3"
        android:text="Add to cart"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/item3"
        app:layout_constraintBottom_toBottomOf="@id/item3"
        android:onClick="addItemToCart"
        />

</androidx.constraintlayout.widget.ConstraintLayout>

In the above code, we have added the onClick attribute and pass the addItemToCart method name.

And made the appropriate method in the second activity java.

public void addItemToCart(View view) {
}

Now implement EventBus in the project.

Let's make the subscriber and in the subscriber method, we will add items to the list.

See below to understand.

Make Subscribe Method of EventBus to update Cart

We will show cart count in the first activity so we need to update cart count in the subscriber method. Open your java file and create a method onCartItemAdd and in the parameter, we will get our CartEvent object.

to read further please go here: EventBus Library for Android

Thank you for reading have a nice day.

Firebase Cloud FireStore Database in Android

Akshay-Rana-Gujjar — Wed, 09 Sep 2020 08:19:48 +0000

Hello World, today we are going to see how we can make a todo app using a firebase cloud firestore database. The Firestore database is a very flexible and scalable NoSQL database to make our development very fast.

Firestore is very easy to use in android. FireStore can work smoothly even if your device is offline it can fetch data from the cache in the device so that your app can work offline and update the data when it connects to the internet again.

This functionally makes your app for interactive for the users.

Firestore database has one more feature is to watch realtime changes in the database and you can show updates in the app.

Firestore database can execute queries so that you can filter your data as per your requirement, this feature makes the firestore database more likely to choose for your project.

Firestore database stores the data in the documents and these documents are saved in the collection. Think it like the collection is a file folder that has multiple documents and these documents have some data written on it.

Let's check our app which will be going to build using Firebase Cloud FireStore Database.

Let's make our app.

Make a new project in Firebase Console

The first thing we need to make a new project in the firebase console. Let's head to https://console.firebase.google.com/ and make a new project by clicking on the new project. Follow all the instructions.

After creating the project lets add our android project. Click on the android icon.

and then fill your package name then app name.

Download the google-services.json file and paste this file in the app folder of your app.

After that follow the instructions of the firebase. Add required dependencies and hit the sync button.

Your dependencies will look like below.

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'androidx.recyclerview:recyclerview:1.1.0' // recyclerview dependency
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'

    implementation 'com.google.firebase:firebase-analytics:17.4.4' // firebase required dependency
    implementation 'com.google.firebase:firebase-firestore:21.5.0' // firebase firestore dependency

}

We have added dependencies for firestore and recyclerview.

Now let's move to make layout our app.

Make Layout of the Application

To make the layout we will add this code in our activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    android:padding="10sp"
    >
    <EditText
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/editTextTask"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/addTaskBtn"
        android:layout_marginTop="20sp"
        android:hint="Add New Task"
        android:layout_marginLeft="2sp"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/addTaskBtn"
        android:text="add"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/editTextTask"
        app:layout_constraintBottom_toBottomOf="@id/editTextTask"
        />
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:id="@+id/taskRecyclerView"
        app:layout_constraintTop_toBottomOf="@id/editTextTask"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginTop="15sp"

        />
</androidx.constraintlayout.widget.ConstraintLayout>

In the above code, we have added an edit text, a button, and a recyclerview.

add below dependency in your app level build.gradle file to use recyclerview in the project.

implementation 'androidx.recyclerview:recyclerview:1.1.0'

If you want to know more about recyclerview you can check it here.

Now we need to make the item layout of the recyclerview.

Make a new layout file and add this code to it.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/checkBoxTask"
        android:text="Task 1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:checked="true"
        />
    <ImageView
        android:layout_width="35sp"
        android:layout_height="35sp"
        android:id="@+id/deleteTaskBtn"
        android:src="@drawable/ic_delete"
        app:layout_constraintTop_toTopOf="@id/checkBoxTask"
        app:layout_constraintRight_toRightOf="parent"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

In the above code, we have a checkbox and an imageview to act as a delete button and set their respective ids.

If you want to add a delete icon in your project you can easily add this by right-clicking on drawable folded then select new and then click on the vector assets and in the next window choose your icon and icon name then save the icon and now you can use this icon in imageview.

After all this, we will add the functionality of our app.

Before making the functionality we need to create a database in the firebase console. Go to your firebase project and click on develop and choose the database and then click on create database.

Note that there will be 2 options. One for Cloud FireStore and in the below on that second option is for the realtime database. But we need to create a database for Cloud FireStore.

Now we need to make a model class (POJO object class) which will be using in the firebase and in the recyclerview.

Make Model Class for Firebase and RecyclerView

We need to make a model class that will hold the data. The model class will help to set the data and get the data using getter and setter functions. We have to specify the data type and number of field that we want to use. See the below code to make a model for the to-do app.

import com.google.firebase.firestore.DocumentId;

public class TaskModel {

    @DocumentId
    private String taskId;
    private String task;
    private boolean isTaskDone;

    public String getTaskId() {
        return taskId;
    }

    public void setTaskId(String taskId) {
        this.taskId = taskId;
    }

    public String getTask() {
        return task;
    }

    public void setTask(String task) {
        this.task = task;
    }

    public boolean isTaskDone() {
        return isTaskDone;
    }

    public void setTaskDone(boolean taskDone) {
        isTaskDone = taskDone;
    }
}

In the above model class if you noticed we are using an annotation @DocumentId above the taskId. This annotation is telling that taskId field will be using as document id of the firebase document and when we add data to the firestore database this property will ignore to create in the firestore database. If you are not understanding what I am saying then keep reading you will understand.

Then we make a task string field for holding the task value as a string and the lat field is for either task is done or not. After that, we made the getters and setters method to set the values and get the values.

After making the model we will move to MainActivity.java and make adding data to database functionality.

Add data to Firebase Firestore Using Model Class

To add the task data in the firestore we need to get task value from edit text and on the click of the button, we will check the value if it is not empty and then we will use firebase functions to add the data, let's see how.

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final EditText editTextTask = findViewById(R.id.editTextTask);
        Button addTaskBtn = findViewById(R.id.addTaskBtn);

        addTaskBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                String newTask = editTextTask.getText().toString();

                if(newTask.isEmpty()){
                    Toast.makeText(MainActivity.this, "Please add task first.", Toast.LENGTH_SHORT).show();
                    return;
                }

                final TaskModel taskModel = new TaskModel();
                taskModel.setTaskDone(false);
                taskModel.setTask(newTask);

                db.collection("todoCollection")
                        .add(taskModel)
                        .addOnSuccessListener(new OnSuccessListener<DocumentReference>() {
                            @Override
                            public void onSuccess(DocumentReference documentReference) {
                                editTextTask.setText(null);
                            }
                        });
            }
        });



}

In the above code, first, we create a database instance of firestore, and then we are getting our EditText and Button from the activity xml layout in the onCreate method.

Then we implement click listener on the button and this will add data in the firestore database. In the click method first, we are getting a string from the edit text and then check if the string is not empty. If the string is empty then we show a toast and then return from the method.

Then we create our task model object and set values using setter methods. We set taskDone to false and set task string. Notice that we are not setting the taskId as it will handle by the Firebase library.

Now, this the point where we will add the data to the database.

First, we get the reference of the collection by using the db.collection method and then call the add method and pass our model which we just created above and then we add the success listener.

In the success listener, we remove the string from the EditText.

Now if you run your app then enter a task in the EditText and click on the add button. Check your database in the Firebase console there will be the newly created document in your collection.

Note that collection is created automatically if it does not exist.

This is how we add the data in the Firestore Database.

Now see how we can get the data from the database and show in the recyclerview.

Fetch Data from FireStore Database & show in RecyclerView

For showing the data in the recyclerview we need to make an adapter class for the recyclerview as we do while implement recyclerview. So let's make a new java file and extend it to a recyclerview adapter.

Then we need to pass our viewholder class to do that we create an inner class in our adapter class and pass this class as generic in the adapter and implement the all required methods.

After creating all the classes we need to make a constructor with parameters. These parameters are Context, List of a task model, and db reference.

See the below code for better understanding.

public class TaskAdapter extends RecyclerView.Adapter<TaskAdapter.TaskViewHolder> {

    Context context;
    List<TaskModel> taskModelList;
    FirebaseFirestore db;

    public TaskAdapter(Context context, List<TaskModel> taskModelList, FirebaseFirestore db) {
        this.context = context;
        this.taskModelList = taskModelList;
        this.db = db;
    }

    @NonNull
    @Override
    public TaskViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(context).inflate(R.layout.task_item, parent, false);
        return new TaskViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull TaskViewHolder holder, int position) {

        CheckBox task = holder.task;

        TaskModel taskModel = taskModelList.get(position);
        String taskFromDB = taskModel.getTask();
        boolean isTaskDone = taskModel.isTaskDone();

        task.setText(taskFromDB);
        task.setChecked(isTaskDone);

    }

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

    class TaskViewHolder extends RecyclerView.ViewHolder{

        CheckBox task;
        ImageView deleteBtn;

        public TaskViewHolder(@NonNull View itemView) {
            super(itemView);
            task = itemView.findViewById(R.id.checkBoxTask);
            deleteBtn = itemView.findViewById(R.id.deleteTaskBtn);

            task.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    final int currentPosition =  getAdapterPosition();
                    TaskModel taskModel = taskModelList.get(currentPosition);

                    String taskId = taskModel.getTaskId();

                    db.collection("todoCollection")
                            .document(taskId)
                            .update("taskDone",isChecked);
                }
            });

            deleteBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    final int currentPosition =  getAdapterPosition();
                    TaskModel taskModel = taskModelList.get(currentPosition);

                    String taskId = taskModel.getTaskId();

                    db.collection("todoCollection")
                            .document(taskId).delete()
                            .addOnSuccessListener(new OnSuccessListener<Void>() {
                                @Override
                                public void onSuccess(Void aVoid) {
                                    taskModelList.remove(currentPosition);
                                    notifyDataSetChanged();
                                }
                            })
                    .addOnFailureListener(new OnFailureListener() {
                        @Override
                        public void onFailure(@NonNull Exception e) {
                            Toast.makeText(context, "Failed to delete the task.", Toast.LENGTH_SHORT).show();
                        }
                    })
                    ;
                }
            });
        }
    }
}

Return the list size in the getItemCount method. Now come to the viewholder class and write the below code.

class TaskViewHolder extends RecyclerView.ViewHolder{

        CheckBox task;
        ImageView deleteBtn;

        public TaskViewHolder(@NonNull View itemView) {
            super(itemView);
            task = itemView.findViewById(R.id.checkBoxTask);
            deleteBtn = itemView.findViewById(R.id.deleteTaskBtn);

            task.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    final int currentPosition =  getAdapterPosition();
                    TaskModel taskModel = taskModelList.get(currentPosition);

                    String taskId = taskModel.getTaskId();

                    db.collection("todoCollection")
                            .document(taskId)
                            .update("taskDone",isChecked);
                }
            });

            deleteBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    final int currentPosition =  getAdapterPosition();
                    TaskModel taskModel = taskModelList.get(currentPosition);

                    String taskId = taskModel.getTaskId();

                    db.collection("todoCollection")
                            .document(taskId).delete()
                            .addOnSuccessListener(new OnSuccessListener<Void>() {
                                @Override
                                public void onSuccess(Void aVoid) {
                                    taskModelList.remove(currentPosition);
                                    notifyDataSetChanged();
                                }
                            })
                    .addOnFailureListener(new OnFailureListener() {
                        @Override
                        public void onFailure(@NonNull Exception e) {
                            Toast.makeText(context, "Failed to delete the task.", Toast.LENGTH_SHORT).show();
                        }
                    })
                    ;
                }
            });
        }
    }

If you remember we have created task_item.xml with a checkbox and an imageview for the delete button. We will use these elements in the viewholder and create their references to work with them.

And in the onBindViewHolder method in the adapter. We are setting the checkbox text and its check state.

Now the main thing is to update the existing task value in the database. We want to update the task done value in the database when user check or uncheck the checkbox. We have to add a listener to this in the viewholder.

Inflate our task_item.xml view in onCreateViewHolder.

Update Value in FiresStore Database

task.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    final int currentPosition =  getAdapterPosition();
                    TaskModel taskModel = taskModelList.get(currentPosition);

                    String taskId = taskModel.getTaskId();

                    db.collection("todoCollection")
                            .document(taskId)
                            .update("taskDone",isChecked);
                }
            });

First, we get the current item position and then the item's task id to update the document in the database.

Again we get the reference to the collection then get the document reference by passing the task id in the document method this id is the document id. If you open you collection in the firebase console then the random string are shown are the document ids.

We are using these ids as taskId.

After getting the reference to the document then we are calling the update function and in the first parameter, we pass the field name which we are going to update and the value to be set in the database.

If you run your app and click on the checkbox then the value in the firestore database will update.

Now if the user wants to delete the task so let's make the delete functionality.

Delete Document from FireStore Database

To delete the document from the database. As we did above to update the value we call update method but for deleting the document, we will call the delete method on document reference and add a success listener to remove the task model from the list of task models and update the recyclerview.

deleteBtn.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    final int currentPosition =  getAdapterPosition();
                    TaskModel taskModel = taskModelList.get(currentPosition);

                    String taskId = taskModel.getTaskId();

                    db.collection("todoCollection")
                            .document(taskId).delete()
                            .addOnSuccessListener(new OnSuccessListener<Void>() {
                                @Override
                                public void onSuccess(Void aVoid) {
                                    taskModelList.remove(currentPosition);
                                    notifyDataSetChanged();
                                }
                            })
                    .addOnFailureListener(new OnFailureListener() {
                        @Override
                        public void onFailure(@NonNull Exception e) {
                            Toast.makeText(context, "Failed to delete the task.", Toast.LENGTH_SHORT).show();
                        }
                    })
                    ;
                }
            });

After removing the task we need to notify the adapter to update the recyclerview. So we called to notifyDataSetChanged method.

now at this point, we have completed the adapter code now attach the adapter to the recyclerview. Go to your activity java file and make an adapter construct with required parameters and set layout manager to the recyclerview and set the adapter to the recyclerview.

Then we fetch all the tasks and convert them to the task model add them to the list of the task model and notify the adapter for change in the list.

db.collection("todoCollection")
                .get()
                .addOnCompleteListener(new OnCompleteListener<QuerySnapshot>() {
                    @Override
                    public void onComplete(@NonNull Task<QuerySnapshot> task) {

                        if(task.isSuccessful()){

                            for (QueryDocumentSnapshot document : task.getResult()) {
                                TaskModel taskModel = document.toObject(TaskModel.class);
                                taskModelList.add(taskModel);
                            }

                            adapter.notifyDataSetChanged();

                        }else{
                            Toast.makeText(MainActivity.this, "Error Getting task list.", Toast.LENGTH_SHORT).show();

                        }

                    }
                });

To convert the document to our model object we will call the document.toObject method and pass the class. This will return object of task and add this object to the list.

After the loop ends, we notify the adapter to change the data.

If you run your app at this point and add a new task then your recyclerview will not show the new task as haven't written that code in on add button click we only added for the database. To add the new task in the recyclerview we need to write the below code in the onClick method.

You can read the further article here: How to use firestore in android studio

Make Dark Mode in Android

Akshay-Rana-Gujjar — Sat, 01 Aug 2020 19:40:01 +0000

How to make Dark (Night) Mode Theme in Android

Hello World, today we are going to see how we can implement a dark theme or night mode in our android application. This tutorial is going to be very simple and easy to understand. The dark theme is attractive to users and it is comfortable for low light conditions. Recently many apps adapt dark mode in their app and the output of the night mode is amazing as many users love dark mode for their app. An example of a dark theme is Whatsapp dark mode in android see the below image.

Let's look at how our app will look like, see the below gif for our end result app.

Let's see how we can implement dark theme in our app.

Make layout for dark theme

First, we need to make our layout so that we can apply our dark theme to it.

If you see the above gif we used cardview to make our layout.

See the below code for layout.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    android:padding="10sp"
    >

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:cardCornerRadius="10sp"
        android:id="@+id/post"
        >
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10sp"
            >
            <androidx.cardview.widget.CardView
                android:layout_width="70sp"
                android:layout_height="70sp"
                android:id="@+id/profilePicContainer"
                app:cardCornerRadius="100sp"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                >
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"

                    android:src="@drawable/user1"
                    />
            </androidx.cardview.widget.CardView>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/username"
                android:text="John Doe"
                android:textAppearance="@style/TextAppearance.AppCompat.Large"
                app:layout_constraintLeft_toRightOf="@id/profilePicContainer"
                android:layout_marginStart="10sp"
                app:layout_constraintTop_toTopOf="@id/profilePicContainer"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/time"
                android:text="Just now"
                android:textAppearance="@style/TextAppearance.AppCompat.Caption"
                app:layout_constraintLeft_toRightOf="@id/profilePicContainer"
                android:layout_marginStart="10sp"
                app:layout_constraintTop_toBottomOf="@id/username"
                />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="35sp"
                android:id="@+id/caption"
                android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
                app:layout_constraintTop_toBottomOf="@id/profilePicContainer"
                android:textAppearance="@style/TextAppearance.AppCompat.Body2"
                android:layout_marginTop="10sp"
                />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="250sp"
                android:id="@+id/photoPost"
                android:scaleType="centerCrop"
                app:layout_constraintTop_toBottomOf="@id/caption"
                android:src="@drawable/post"
                android:layout_marginTop="10sp"
                />

            <ImageView
                android:layout_width="30sp"
                android:layout_height="30sp"
                android:id="@+id/likeBtn"
                android:src="@drawable/ic_like"
                app:layout_constraintLeft_toLeftOf="@id/photoPost"
                app:layout_constraintTop_toBottomOf="@id/photoPost"
                android:layout_marginTop="15sp"
                />

            <ImageView
                android:layout_width="30sp"
                android:layout_height="30sp"
                android:id="@+id/shareBtn"
                android:src="@drawable/ic_share"
                app:layout_constraintLeft_toRightOf="@id/likeBtn"
                app:layout_constraintTop_toBottomOf="@id/photoPost"
                app:layout_constraintTop_toTopOf="@id/likeBtn"
                android:layout_marginLeft="15sp"
                />


        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/changeThemeBtn"
        android:text="Change Theme"
        app:layout_constraintTop_toBottomOf="@id/post"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="20sp"
        android:paddingHorizontal="10sp"

        />

</androidx.constraintlayout.widget.ConstraintLayout>

Now we need to set theme colors in the layout, for example, we need to set the background color of activity and cardview and also we need to set textview color and icon colors. But setting all the colors we need some way to set colors dynamically.

We want to change the background color of activity to dark black color when we apply our dark theme in the application.

To make the dynamic values we will need to make attrs.xml file in the values folder.

Make custom attribute values for layout.

Create a new xml file in the values folder. Right-click on values folder and click on new then click values resource file and type attrs in the file name field.

Your values folder should look like below:

In the attrs.xml we will declare our custom attribute values like below.

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <attr name="appWindowBackground" format="color" />
        <attr name="cardBackground" format="color" />
        <attr name="textColor" format="color"/>
        <attr name="textColorSecondary" format="color"/>
        <attr name="iconColor" format="color"/>
        <attr name="buttonBackground" format="color"/>
        <attr name="buttonTextColor" format="color"/>
</resources>

In the above code, we have defined 7 values and their type which is color. Each of the values, we will use in our layout file.

But before using these values we need to assign or set these values in our currently applied theme and also we will make our dark theme and update these attribute values.

Make Dark theme in styles.xml and set attributes value.

First, we will set attribute values for our default or light theme then we will update those attribute values in the Dark theme. Let's do this.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="appWindowBackground">#CDDDDD</item>
        <item name="cardBackground">#FFFFFF</item>
        <item name="textColor">#000000</item>
        <item name="textColorSecondary">#717171</item>
        <item name="iconColor">#6A6A6A</item>
        <item name="buttonBackground">#CDCDCD</item>
        <item name="buttonTextColor">#000000</item>
    </style>

    <style name="DarkAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <item name="appWindowBackground">#393e46</item>
        <item name="cardBackground">#222831</item>
        <item name="textColor">#ffffff</item>
        <item name="textColorSecondary">#DAA8A8A8</item>
        <item name="iconColor">#00fff5</item>
        <item name="buttonBackground">@color/colorPrimary</item>
        <item name="buttonTextColor">#000000</item>
    </style>

</resources>

Read further article here: Dark mode for android app

How to make Custom Switch in Android?

Akshay-Rana-Gujjar — Mon, 20 Jul 2020 18:03:21 +0000

Hello World, Today we are going to make a custom switch. Why? Because the default one looks so boring and ugly. Why we use a switch? As the name suggests, the switch is used to trigger the value either it is on, or it is off. Let's see, how our custom switch will look at the end of the tutorial.

In the above gif, there are 3 switches. The First one is the default one and the second and third are our custom switches. To make these custom switches we need to follow certain steps are as follows:

Step 1. Add Switch to Activity Layout

First. we need to add the switch to our layout XML file. We will add SwitchCompat to the layout.

Look at the below code for better understanding.



<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity"
    >
    <androidx.appcompat.widget.SwitchCompat
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/customSwitch"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"

        app:track="@drawable/track"
        android:thumb="@drawable/thumb"

        android:text="Custom switch  "

        />
</androidx.constraintlayout.widget.ConstraintLayout>

In the above code, things to be noticed are app:track and android:thumb attributes.

The track is the horizontal container where our thumb or round shape view is placed and the thumb is, as I told you before, is the round shape where we will add an image on top of it.

Step 2. Make Custom Track for Switch

To make our custom track we need to make a drawable file and set the root element as a selector. So click on the drawable folder and make a new file and name it as track.

In our track.xml we write this code for making the custom track.



<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
            <corners android:radius="100sp"/>
            <stroke android:color="#8e8e8e"
                android:width="1dp"/>
        </shape>
    </item>

    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent"/>
            <corners android:radius="100sp"/>
        </shape>
    </item>

</selector>

In the above code, we made two items in the selector where the first item represents the state when the switch is off or not checked and the second item represents the state when the switch is on or checked.

In the first item, we made a shape of a rectangle and fill white color with having corner radius with a grey color stroke or outline and in the second item the only difference is filled color will be our accent color and stroke will be removed but the corner radius will be the same.

Now let's make our thumb part where we will add images on the thumb.

Step 3. Make Custom Thumb with Image.

To make custom thumb for the switch, create a drawable file in a drawable folder and name it as the thumb.

In our thumb.xml file, we will write the below code.



<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="false"
        android:drawable="@drawable/switch_thumb_false"/>

    <item android:state_checked="true"
        android:drawable="@drawable/switch_thumb_true"/>

</selector>

as track.xml here we also have the root element as a selector and have the same item tags but this time we set drawable in the attribute. These drawable are our drawable file where we will add images. Let's add our vector icons to use in thumb drawable.

Add images for thumb

Right-click on drawable then click on new then select vector assets and then choose your icon from clip art. for demo purpose we are selecting notification on and off icon.

After adding the icons, we need to make drawable files for custom thumb off and one for the thumb on which will be add in thumb.xml as drawable.

Let's make the first file in the drawable for thumb off and set an image to the thumb. Check the below code.



<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
            <size android:height="48dp"
                android:width="48dp"/>

        </shape>
    </item>

    <item android:drawable="@drawable/ic_notifications_off"
        android:bottom="12dp"
        android:top="12dp"
        android:left="12dp"
        android:right="12dp"
        />

</layer-list>

If you noticed, we are using the layer-list as the root element and in the child, we have 2 items.

The first item is our oval (round) shape of the thumb with the size and background color and the second item is our image drawable with 12dp padding from the top, bottom, left, and right.

So this was for when the switch is off our custom thumb will look like this now its turn for thumb true when the switch is on.

Create a new file with the name switch_thumb_true and the code will be like below.




<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item >
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent"/>
            <size android:height="48dp"
                android:width="48dp"/>
            <stroke android:width="1sp"
                android:color="#8e8e8e"
                />

        </shape>
    </item>


    <item android:drawable="@drawable/ic_notification_on"
        android:bottom="12dp"
        android:top="12dp"
        android:left="12dp"
        android:right="12dp"
        />


</layer-list>

Like thumb false, this code is similar to it but the differences are we added the stroke to the round shape and of course change the image drawable.

Now we have made the all necessary files now its time to run our app and your custom switch is ready. Tada!!!!

This switch is our middle one if you want to make track height small then you need to do some extra work. Keep reading...

How to make track height smaller than the thumb.

To read further article check here: Custom Switch in Android

Android Custom Toast With Example

Akshay-Rana-Gujjar — Tue, 14 Jul 2020 18:58:30 +0000

Hello World, today we will be going to see how we can make custom toast and in this tutorial, we will see custom toast with an example. See below as an example.

Before starting let’s see.

What is Toast? When to use it?

Toast is a view that contains text which notifies the user with some information.

We can use toast when we want to notify the user.

Making Custom Toast with Example

To make custom toast we need to follow certain steps as follows.

Step 1. Create a Custom Layout for Toast

the first step is to make a layout file for our toast.

To make a layout file, right-click on layout folder under res and select new -> layout resource file.

we will name this file as custom_toast.xml and in this file, we will make our layout which will b shown in the toast. Check the below code for the layout file.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/customToastContainer"
    android:background="#E39D9D"
    android:padding="10sp"
    >

    <ImageView
        android:layout_width="50sp"
        android:layout_height="50sp"
        android:src="@drawable/ic_android"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:id="@+id/toastImage"
        android:tint="@color/colorPrimaryDark"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/toastText"
        android:text="Custom Toast"
        android:textSize="30sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@id/toastImage"
        app:layout_constraintBottom_toBottomOf="@id/toastImage"

        />

</androidx.constraintlayout.widget.ConstraintLayout>

In the above code, we set the id to the parent view and we added an imageview and a textview.

We are keeping things simple so that you can understand better.

our layout looks like this below.

Step 2. Set layout file to the Toast

To trigger the toast we made a button in the activity layout and calling the makeToast function on click.

Let’s see the code in the makeToast function.

Hey if you want to read full article read here: Android Custom Toast With Example

How to make Bottom Navigation bar in Android

Akshay-Rana-Gujjar — Mon, 13 Jul 2020 21:56:57 +0000

Hello World, Today we are going to learn how we can make a nice bottom navigation bar in android. We will see how we can implement bottom navigation and how to work with fragments and many other things and trust me you will enjoy this tutorial. Before making our bottom navigation bar lets look at our final result. See the below gif.

This is a clean and material design based bottom navigation bar. So let’s see how to code this.

Add Bottom Navigation Bar Dependency

To make the bottom nav bar, first, we need to add the dependency for the bottom navigation bar.
Open your build.gradle file and add this dependency.

implementation 'com.google.android.material:material:1.1.0'

After adding the dependency hit the sync button and after syncing the project, we can use BottomNaigationView in our layout file.

Add BottomNavigationView in Layout

Open your layout file and in the layout XML, we need to add 2 things. The first thing is FrameLayout, which will contain our fragments and the second thing is BottomNavigationView.

See the below code.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:id="@+id/frameLayout"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottomNav"

        />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/bottomNav"
        app:layout_constraintTop_toBottomOf="@id/frameLayout"
        app:layout_constraintBottom_toBottomOf="parent"
        android:background="@color/colorPrimary"
        app:menu="@menu/bottom_nav_menu"
        app:itemIconTint="@color/bottom_nav_item_selector"
        app:itemTextColor="@color/bottom_nav_item_selector"
        app:labelVisibilityMode="labeled"

        />

</androidx.constraintlayout.widget.ConstraintLayout>

Explanation:
First, we have ConstraintLayout as parent layout and then in children we have, FrameLayout and BottomNavigationView.
Nothing is fancy here except BottomNavigationView. Have you noticed the app:menu=”@menu/bottom_nav_menu”. In this line, we have created a menu for our bottom nav which we will see later. Let’s move further.

Next, we have app:itemIconTint and ;app:itemTextColor which has the same value @color/bottom_nav_item_selector. So what this property means and what is the value. These properties or attributes help us to change the nav icon color.
If you noticed the bottom nav icon color they are white in color and the active screen has solid white color and rest are having off white color. How you can customize these bottom navigation bar icons? I will tell you later in this tutorial.

Next is app:labelVisibilityMode and the value is “labeled”. This property is responsible for weather showing text below of the icons in Bottom Navigation Bar. There are other values are as follows:

Selected
Unlabeled
Auto

Selected: Text will be shown only selected navigation item.

Unlabeled: Text will be hidden in navigation.

Auto: Icon text will be shown if there are 3 or less items in navigation and text will be shown only at the selected item when there are 4 or more items in navigation.

Now let’s see how to add items or menu in the bottom navigation.

How to make menu for BottomNavigationView?How to make menu for BottomNavigationView?

To make menu for the bottom navigation bar, first, we need to make a menu folder under the res folder.

To make a folder under res, right-click on res folder in android studio and then click new then click on Android Resource Directory.

Then a popup window comes and click on resource type and select menu and hit OK.

Now your menu folder is created. Now we need to make our menu resource file. To do that we need to right-click on the menu folder and click on new -> Menu Resource File.

Now we name our menu file same as in BottomNavigationView in activity layout file which is bottom_nav_menu.

In this file, we will add out menu item as shown below code.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="Home"
        />

    <item android:id="@+id/trend"
        android:icon="@drawable/ic_trend"
        android:title="Trend"
        />

    <item android:id="@+id/account"
        android:icon="@drawable/ic_person"
        android:title="Account"
        />
    <item android:id="@+id/setting"
        android:icon="@drawable/ic_settings"
        android:title="Setting"
        />


</menu>

In the above code, we made 4 items for our bottom navigation. Each item has an id, an icon, and title. Simple.

Now see how we can customize the icon color of items.

How to Change Icon Color of BottomNavigationView?

To change icon color when an item is selected in the bottom navigation bar like below.

You will need to make your own color selector XML file. Follow the tutorial.

First, make color directory under the res folder. Right click on res folder and select new -> Android Resource Directory.

Hey read the full article here: Bottom Navigation Bar in Android

Thank you for reading and have a nice day.

Skeleton content loading animation in android | Facebook Shimmer

Akshay-Rana-Gujjar — Mon, 29 Jun 2020 19:52:07 +0000

What is Facebook Shimmer?

Today we are going to see what is Facebook shimmer and how to use it?
See below example to understand Facebook shimmer.

content loading animation

The Facebook shimmer is used to show or indicate the user that the content is loading from somewhere which takes sometimes so that users need to wait. While content is loading, it is necessary to show the user an indication that content is loading and it is bad practice to leave screen blank which confuses user what is happening in the app or maybe the user thinks the app is hanging.

How to use Facebook Shimmer

So enough talking, let do some code on how to make content loading animation using facebook shimmer library. See below facebook shimmer android example

To use facebook shimmer first we need to add the dependency to your project. See below to add facebook shimmer dependency.

dependencies {
...
implementation 'com.facebook.shimmer:shimmer:0.5.0'

}

After adding dependency, let's create our layout. For demo purposes, we are creating our layout some like below.

Read the full article here: Facebook Shimmer

Thanks and good luck.