In this tutorial, we will learn how to create categories in android studio. We are going to create a categories page of our city guide application. In previous tutorials, we have already created a Splash screen, Dashboard design, and Navigation Drawer using cardview in android studio.
If you want to learn how to create a Splash screen, Design of dashboard of our city guide app, and the navigation drawer then you just click on it and get the code.
If you want to see the videos of how we can do that then you can simply go to our youtube channel.
But in this tutorial, we will be creating categories in android studio of our city guide app.
let’s get started without wasting time.
Steps to create a Categories in android studio
- Create an empty activity.
- Design the activity.
Step# 1: Create a new activity.
Above all, we are going to create a new activity for categories in android studio.
Hence, to create that, go to the left of the android studio and make sure that “Android” is selected in the project tab.
Then, go to app->java->right click on the first directory then go to “new” and make a new directory named “Users”.
If you are following our tutorials then you have already created that directory.
Next, right-click on that Users directory and go to new->Activity->Empty Activity and name it as AllCategories. Then click finish.
How to remove the error of R in the android studio?
To remove the error of R. Click on it and press ALT+ENTER and the select import class.
Step# 2: Design the activity.
1- Create a new activity
After the creation of the activity, we have to design the activity.
So, for that, open app->res->layout->activity_all_categories.xml.
Here we have to move to the split section where we will write the code of our categories page.
There in the split section change the default layout to ScrollView with the width and height of match_parent and the background color light white.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".User.AllCategories"
android:background="@color/lightWhite">
</ScrollView>Here we got the error of color. So to remove that error go to the colors and add the code in the resources tab.
<color name="lightWhite">#f2f5f8</color>
<color name="white">#fff</color>
<color name="black">#000</color>2- Create an action bar of categories in android studio
At first, we have to use a tag of linear layout between the scroll view we have created earlier in which all the other tags are available because the scroll view handles only one tag.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="vertical">
</LinearLayout>In short, we will create all the designs in this linear layout, So if I do not tell to put the tag in a linear layout then you have to put in it.
Next, we have to add two icons for back activity and search.
Therefore, we have to use a relative layout with a width of match parent and a height of “?actionBarSize“
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="?actionBarSize">
</RelativeLayout>In this relative Layout add two image views tags to add the search icon and back icon.
<ImageView
android:id="@+id/back_pressed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:padding="15dp"
android:src="@drawable/general_back_icon" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:padding="15dp"
android:src="@drawable/general_search_icon" />Later on, add the Textview for “Categories” text after the relative layout of the search and back icon.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Categories"
android:textSize="30sp"
android:fontFamily="@font/brandon_grotesque_black"
android:textAllCaps="true"
android:padding="10dp"/>3- Create the cardview for categories in android studio
a- Design of card using relative layout
Later on, we are going to create two designs of cards. one is by using layouts and the second one is by using a card view widget.
Therefore, to design the card we have to use a Relative layout having a width of match parent and a height of 190dp after the text view of Categories.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="190dp">
</RelativeLayout>Our card is created. Now we have to add elements like images and text in the card.
So then we have to use a relative layout in between the layout that we have created above for card.
This layout have a background image and having width of match parent and height of 150 dp with a margin of 20 dp.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@drawable/categories_car_background"
android:layout_margin="20dp">
</RelativeLayout>Here we have to add Heading, Button for category details, and image of the category in this relative layout.
TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/car_rent"
android:textSize="30sp"
android:fontFamily="@font/baloo"
android:textColor="@color/black"
android:padding="25dp"/><Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/expand_all"
android:background="#00000000"
android:padding="20dp"
android:textColor="@color/black"
android:layout_alignParentBottom="true"/>Now the code for relative layout having background image is ended. Thus we have to add the image of the category in the relative layout of the card.
After the end of the relative layout having a background image of categories_car_background, add the image view.
<ImageView
android:layout_width="150dp"
android:layout_height="150dp"
android:src="@drawable/categories_rent_car_icon"
android:layout_marginTop="-40dp"
android:layout_alignParentRight="true"/>Our First card is ready for categories in the android studio.
Next, we have to create other designs of cards using card view.
b- Design of card using material design cardview
Above all, we have to create a dependency go to the left side of the android studio there Gradle Scripts->build.gradle(Module:app) and add the dependency of material designs and cardview in it.
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'com.google.android.material:material:1.1.0'Again go to the design of categories in the android studio.
Here we have to use material design cardview.
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#00000000"
android:layout_margin="20dp"
app:cardElevation="8dp">
</androidx.cardview.widget.CardView>Subsequently, we have to use the relative layout in this card view having a width of match parent and height of 150dp with the background image.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="@drawable/categories_restaurant_background">
</RelativeLayout>Later, we have to add the image view, text view, and button in this relative layout.
<ImageView
android:layout_width="120dp"
android:layout_height="match_parent"
android:src="@drawable/categories_restaurant_icon"
android:layout_marginLeft="20dp"/><TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/restaurants"
android:textSize="30sp"
android:fontFamily="@font/baloo"
android:textColor="@color/white"
android:layout_alignParentRight="true"
android:padding="25dp"/><Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/expand_all"
android:layout_alignParentRight="true"
android:textColor="@color/white"
android:background="#00000000"
android:padding="20dp"
android:layout_alignParentBottom="true"/>Finally, we have created two card views.
Now copy and paste these cardviews according to your number of categories in android studio.
Also, change the images according to your requirements.
If you want to use our resources then click on the button.
Related Articles that you might want to check out.
- How to create a Splash Screen with Animations
- Create a new project in android studio for beginners?
- How to create an Account on Fiverr and start earning?
- Create a Gig ob Fiverr and start selling specific services.
- How To Start Blogging and Make Money?
Our Projects Make Us Proud
- Building and Construction Company
- Chakwal.CO | Group Of Companies
- Online Buying and Selling Of Properties
My Latest Work
- Crystal Life Coaching – Website
- Jeans Company – Website
- Wix Portfolio – Sample
