All Categories Design in Android Studio – City Guide App – Part 6

by | Jun 2, 2020 | Android, City Guide App | 0 comments

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

  1. Create an empty activity.
  2. 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.

Our Projects Make Us Proud

My Latest Work

  • Crystal Life Coaching – Website
  • Jeans Company – Website
  • Wix Portfolio – Sample

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design
Are you looking for a Laptop? Checkout the Best Laptops for Programming.
This is default text for notification bar