Android Kotlin Project – Tourist Guide App
FREE Online Courses: Click for Success, Learn for Free - Start Now!
Hey there, Android Kotlin enthusiasts, greetings from DataFlair. Today we are going to see and learn to implement an Android Kotlin Project, which is a Tourist guide app in Android Kotlin studio. We’ll understand the complete project development in this article.
About Android Kotlin Tourist Guide App
This is a simple project for those just learning the fundamentals of developing Android applications with the help of Jetpack Compose in android studio. A tourist visiting a city for the first time may be interested in the information in the tourist guide app regarding attractions, accommodation options, and well-known restaurants. The tourist will have access to all the information in one place with the help of the tourist guide app.
- The user interface contains a column aligned horizontally containing three cards such as attractions, accommodations and restaurants.
- The user interface, when clicked on any of the cards, will contain a list of items, including an image, title, along with some description about the place.
Prerequisites for Tourist Guide App using Android Kotlin
To develop this android Kotlin application, the requirements and prerequisites are as follows:
1. Kotlin: An understanding of Kotlin programming is initially required. That is necessary since we will create the app’s code in the Kotlin programming language. Also, we’ll be using Jetpack Compose with the assistance of Kotlin-only UI development in place of XML.
2. Android Studio: The core of our application is Android Studio because that is how we will develop it. Also included with Android Studio is an Android virtual device that can be used to test the functionality of applications.
Download Android Kotlin Tourist Guide App Project
Please download the source code of Android Kotlin Tourist Guide App Project: Android Kotlin Tourist Guide App Project Code
Steps to Create a Tourist Guide App Using Android Kotlin
Following are the steps for developing the Android Kotlin Tourist Guide App Project:
We’ll now start working on developing the application. Before putting the code into practice, we will learn about its purpose and function throughout this article. So let’s look at the files and functions needed to run the code:
You must complete a set of steps in order to create this Android tourist guide app. We are here to walk you through every stage of developing an app.
- Extract all the files from the downloaded zip file to the location of your choice.
- Open Android Studio.
- Click on File, then Open.
- Find and select the folder you extracted earlier and click on OK.
You have successfully opened the reminder app’s source code in android studio.
Let’s go through each file in this project one at a time as we comprehend how the application works.
1. The “App.screens.kt” is a file where all the screens included in the application are mentioned inside a sealed class as objects.
sealed class AppScreens(val route:String){
object FirstScreen: AppScreens("first_screen")
object SecondScreen: AppScreens("second_screen")
object ThirdScreen: AppScreens("third_screen")
object FourthScreen: AppScreens("fourth_screen")
}
2. The ‘AppNavigation.kt’ is a file which is responsible for navigation from one screen to another.
@Composable
fun AppNavigation(){
val navController = rememberNavController()
NavHost(navController = navController, startDestination = AppScreens.FirstScreen.route){
composable(route = AppScreens.FirstScreen.route){
FirstScreen(navController)
}
composable(route = AppScreens.SecondScreen.route){
SecondScreen(navController)
}
composable(route = AppScreens.ThirdScreen.route){
ThirdScreen(navController)
}
composable(route = AppScreens.FourthScreen.route){
FourthScreen(navController)
}
}
}
3. The ‘ firstScreen.kt ’ is a Kotlin file responsible for the user interface and working of the home screen.
@Composable
fun FirstScreen(navController: NavController){
Image(painter = painterResource(id = R.drawable.m1),
contentDescription = "Image First Screen",
contentScale = ContentScale.Crop,
modifier = Modifier
.clip(RoundedCornerShape(16.dp))
.border(BorderStroke(width = 3.dp, color = Color.White))
)
MyTitle()
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Spacer(modifier = Modifier.height(450.dp))
SelectionTG(navController)
}
}
@Composable
fun Subtitle(text: String){
Text(text = text,
fontFamily = FontFamily.SansSerif,
fontSize = 24.sp,
color = Color.Black)
}
@Composable
fun MyTitle(){
Column(modifier = Modifier.padding(start = 30.dp, top = 70.dp)) {
Text(text = "Mumbai", color = Color.Black,
fontFamily = FontFamily.SansSerif,
fontSize = 60.sp)
Subtitle(" A city which never sleeps.")
Subtitle(" Tourist Guide App - ProjectGurukul")
}
}
@Composable
fun SelectionTG(navController: NavController){
val scrollState = rememberScrollState()
Row(modifier = Modifier.horizontalScroll(scrollState)) {
Spacer(modifier = Modifier.padding(8.dp))
Attractions(navController)
Spacer(modifier = Modifier.padding(5.dp))
Accommodation(navController)
Spacer(modifier = Modifier.padding(5.dp))
Restaurants(navController)
Spacer(modifier = Modifier.padding(8.dp))
}
}
@Composable
fun Attractions(navController: NavController){
Column(
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.clip(RoundedCornerShape(5.dp))
.background(color = Color.White))
{
Image(
painter = painterResource(id = R.drawable.attractions),
contentDescription = "attractions icon",
contentScale = ContentScale.Crop,
modifier = Modifier
.size(200.dp)
.padding(start = 8.dp, end = 8.dp, top = 8.dp)
.clip(RoundedCornerShape(5.dp))
)
Button(onClick = { navController.navigate(route = AppScreens.SecondScreen.route)},
colors = ButtonDefaults.buttonColors(backgroundColor = Color.White))
{
MyText(text = "Attractions")}
}
}
@Composable
fun Accommodation(navController: NavController){
Column(
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.clip(RoundedCornerShape(5.dp))
.background(color = Color.White))
{
Image(
painter = painterResource(id = R.drawable.acc),
contentDescription = "attractions icon", contentScale = ContentScale.Crop,
modifier = Modifier
.size(200.dp)
.padding(start = 8.dp, end = 8.dp, top = 8.dp)
.clip(RoundedCornerShape(5.dp))
)
Button(onClick = {navController.navigate(route = AppScreens.ThirdScreen.route)},
colors = ButtonDefaults.buttonColors(backgroundColor = Color.White))
{
MyText(text = "Accommodation")}
}
}
@Composable
fun Restaurants(navController: NavController){
Column(
verticalArrangement = Arrangement.Top,
horizontalAlignment = Alignment.CenterHorizontally,
modifier = Modifier
.clip(RoundedCornerShape(5.dp))
.background(color = Color.White)) {
Image(
painter = painterResource(id = R.drawable.restaurant),
contentDescription = "attractions icon", contentScale = ContentScale.Crop,
modifier = Modifier
.size(200.dp)
.padding(start = 8.dp, end = 8.dp, top = 8.dp)
.clip(RoundedCornerShape(5.dp))
)
Button(onClick = {navController.navigate(route = AppScreens.FourthScreen.route)},
colors = ButtonDefaults.buttonColors(backgroundColor = Color.White))
{
MyText(text = "Restaurants")}
}
}
@Composable
fun MyText(text:String){
Text(text, color = Color.Black,
style = TextStyle(
fontSize = 24.sp), modifier = Modifier.padding(bottom = 8.dp))
}
4. ‘ secondScreen.kt ’ is a Kotlin responsible for the user interface and working of the screen containing list of attractions.
private val messages:List<MyMessage1> = listOf(
MyMessage1(R.drawable.goi,"Gateway of India", "The Gateway of India is an arch-shaped structure that was erected in Mumbai (formerly known as Bombay), India, in the early 20th century. It was built to honour King-Emperor George V's arrival at Strand Road next to Wellington Fountain in December 1911, the first British king to visit India."),
MyMessage1(R.drawable.temple,"Shree Siddhivinayak Temple", "Dedicated to Lord Shri Ganesh, the Shree Siddhivinayak Ganapati Temple is a Hindu temple. It is situated in Mumbai, Maharashtra, India's Prabhadevi district. Laxman Vithu and Deubai Patil first constructed it on November 19, 1801. It is one of India's wealthiest temples."),
MyMessage1(R.drawable.sanjaypark,"Sanjay Gandhi National Park", "In Mumbai, Maharashtra, there is an 87 km2 protected area called Sanjay Gandhi National Park, or SGNP. It was founded in 1969, and Borivali is where its corporate offices are. Inside the park are the 2400-year-old Kanheri caves, which were carved out of the rugged basaltic rocks by monks."),
MyMessage1(R.drawable.pagoda,"Global Vipassana Pagoda", "In Gorai, northwest of Mumbai, Maharashtra, India, the World Vipassana Pagoda is a meditation dome hall with space for about 8,000 Vipassana meditators. Pratibha Patil, the then-President of India, dedicated the pagoda on February 8, 2009."),
MyMessage1(R.drawable.kanheri,"Kanheri Caves", "The Sanjay Gandhi National Park's woodlands, on the old island of Salsette, on the western fringes of Mumbai, India, are home to the Kanheri Caves, a collection of caves and rock-cut monuments.. "),
MyMessage1(R.drawable.haji,"Haji Ali Dargah", "On an islet off the coast of Worli in southern Bombay, the Haji Ali Dargah is a mosque and dargah, or the memorial of Pir Haji Ali Shah Bukhari. The dargah, a stunning example of Indo-Islamic architecture, houses the tomb of Haji Ali Shah Bukhari and is known for its tales of tragic lovers."),
MyMessage1(R.drawable.jehangir,"Jehangir Art Gallery", "Mumbai's Jehangir Art Gallery is a gallery of fine art. Sir Cowasji Jehangir founded it at the urging of Homi Bhabha and K. K. Hebbar. Built in 1952, it. The whole cost of this home, which is overseen by the Committee of Management, was donated by Cowasji Jehangir."),
)
private val titles:List<MyTitle2> = listOf(
MyTitle2(R.drawable.mumbai, "Mumbai-Restaurants")
)
data class MyMessage1(val photo:Int = 0, val title: String, val body: String)
data class MyTitle2(val photo: Int = 0, val title: String)
@Composable
fun SecondScreen(navController: NavController){
MyMessages1(messages = messages)
// MyTitle2(titles = titles)
}
@Composable
fun MyMessages1(messages:List<MyMessage1>){
LazyColumn {
items(messages) {message ->
MyComponent1(message) }
}
}
@Composable
fun MyTitle2(titles:List<MyTitle2>){
LazyColumn{
items(titles){
title -> MyComponent2(title = title)
}
}
}
@Composable
fun MyComponent1(message: MyMessage1){
Row(modifier = Modifier
.background(MaterialTheme.colors.background)
.padding(8.dp)) {
MyImage1(message)
MyTexts1(message)
}
}
@Composable
fun MyComponent2(title: MyTitle2){
Row(modifier = Modifier
.background(MaterialTheme.colors.background)
.padding(8.dp)) {
MyTitleImage(title)
MyTitleName(title)
}
}
@Composable
fun MyTitleName(title: MyTitle2) {
var expanded by remember { mutableStateOf(false) }
Column(modifier = Modifier
.padding(start = 8.dp)
.clickable { expanded = !expanded }) {
MyText1(title.title,
MaterialTheme.colors.primary,
MaterialTheme.typography.subtitle1)
Spacer(modifier = Modifier.height(16.dp))
}
}
@Composable
fun MyTitleImage(title: MyTitle2) {
Image(painter = painterResource(title.photo),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(100.dp)
.clip(RoundedCornerShape(16.dp)))
}
@Composable
fun MyTexts1(message: MyMessage1){
var expanded by remember { mutableStateOf(false) }
Column(modifier = Modifier
.padding(start = 8.dp)
.clickable { expanded = !expanded }) {
MyText1(message.title,
MaterialTheme.colors.primary,
MaterialTheme.typography.subtitle1)
Spacer(modifier = Modifier.height(16.dp))
MyText1(message.body,
MaterialTheme.colors.onBackground,
MaterialTheme.typography.subtitle2,
if (expanded) Int.MAX_VALUE else 4)
}
}
@Composable
fun MyImage1(message: MyMessage1){
Image(painter = painterResource(message.photo),
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.size(100.dp)
.clip(RoundedCornerShape(16.dp)))
}
@Composable
fun MyText1(text:String, color: Color, style: TextStyle, lines:Int = Int.MAX_VALUE){
Text(text, color = color, style = style, maxLines = lines)
}
5. ‘ thirdScreen.kt ’ is a kotlin which is responsible for the user interface and working of the screen containing list of accommodations.
private val messages2:List<MyMessage1> = listOf(
MyMessage1(R.drawable.hoteltaj,"Taj Mahal Palace Hotel", "The Taj Mahal Palace is a historic, five-star, opulent hotel located near to the Gateway of India in Mumbai, Maharashtra, India. It was created in the Saracenic Revival style and opened as the Taj Mahal Hotel in 1903. Since then, it has frequently been referred to as simply The Taj. The Taj Mahal, which is in the city of Agra and is about 1,050 kilometres (650 miles) from Mumbai, inspired the hotel's name."),
MyMessage1(R.drawable.jw,"JW Marriott Mumbai Sahar", "The JW Marriott Hotel Mumbai Juhu is the flagship hotel of the Marriott Group in Mumbai, India.Founded by JW Marriott Jr. and co-owned by Raheja Hospitality The J W Marriott Hotel is located in the Juhu area of Mumbai, overseeing the Juhu Beach."),
MyMessage1(R.drawable.lalit,"The Lalit Mumbai", "This posh hotel with a 7-storey atrium is an 8-minute walk from a metro station and 2.5 km from Chhatrapati Shivaji International Airport."),
MyMessage1(R.drawable.leela,"The Leela Mumbai", "The Leela Group, which bears the name of the wife of its creator, C. P. Krishnan Nair, was created before The Leela Hotels. In 1986, Nair purchased 11 acres of property close to his home in Sahar Village, Mumbai, on which to erect The Leela Mumbai, his first hotel. The first five-star hotel close to the modern Chhatrapati Shivaji International Airport was this one."),
MyMessage1(R.drawable.sahara,"Sahara Star", "Fronted by Chhatrapati Shivaji International Airport, this high-end airport hotel is 5 km from both Juhu Beach and the 1st-century Jogeshwari Caves. Refined rooms offer Wi-Fi, flat-screen TVs and marble bathrooms. Sleek suites add separate living areas. Some have balconies, glass ceilings, kitchenettes and/or private elevators."),
MyMessage1(R.drawable.hyatt,"Grand Hyatt", "This high-end hotel on 12 acres of grounds is 4 km from both the Bandra Kurla Complex business district and Chhatrapati Shivaji International Airport."),
MyMessage1(R.drawable.hilton,"Hilton Mumbai", "Set 1 km from Chhatrapati Shivaji International Airport, this high-end hotel with opulent, 19th century-inspired marble interiors is 19 km from exhibits at Nehru Science Centre."),
)
@Composable
fun ThirdScreen(navController: NavController){
MyMessages2(messages2 = messages2)
}
@Composable
fun MyMessages2(messages2:List<MyMessage1>){
LazyColumn {
items(messages2) {message ->
MyComponent1(message) }
}
}
6. ‘ fourthScreen.kt ’ is a Kotlin which is responsible for the user interface and working of the screen containing the list of restaurants.
private val messages3:List<MyMessage1> = listOf(
MyMessage1(R.drawable.bombaycanteen,"The Bombay Canteen", "A lively restaurant that offers modern Indian cuisine with a twist. The decor is funky and colorful, and the ambiance is energetic. Known for its modern Indian cuisine, innovative cocktails, and lively ambiance."),
MyMessage1(R.drawable.wasabi,"Wasabi", "A luxurious Japanese restaurant located in the Taj Mahal Palace Hotel, known for its sushi and sashimi. An upscale Japanese restaurant located inside the Taj Mahal Palace Hotel, Wasabi is known for its elegant decor, top-notch sushi, and exquisite presentation."),
MyMessage1(R.drawable.masala,"Masala Library", "A fine-dining restaurant that serves innovative, molecular gastronomy-style Indian cuisine. The decor is modern and sleek, and the presentation of the dishes is stunning. A fine-dining restaurant that specializes in molecular gastronomy and offers a unique dining experience."),
MyMessage1(R.drawable.indigo,"Indigo", "A European-style restaurant located in a colonial-era bungalow. The ambiance is cozy and intimate, and the cuisine is a mix of European, Asian, and Indian."),
MyMessage1(R.drawable.peshawari,"Peshawari", "A North Indian restaurant located inside the ITC Grand Central Hotel. The decor is rustic, and the food is cooked in a tandoor oven. The ambiance is warm and inviting. A North Indian restaurant located in the ITC Grand Central Hotel, known for its tandoori dishes and Indian bread."),
MyMessage1(R.drawable.pedro,"O Pedro", "A restaurant that serves Goan and Portuguese-inspired cuisine. The decor is colorful and funky, and the ambiance is lively and energetic. A Goan and Portuguese-inspired restaurant that offers a range of seafood, meat, and vegetarian dishes."),
MyMessage1(R.drawable.table,"The Table", "The Table offers a variety of international dishes, including American, Japanese, Italian, French, Chinese, and Thai. The menu at The Table varies practically daily. The Table's most popular dishes are the Signature Boneless Chicken Wings, The Table Burger and Zucchini Spaghetti. The 20-foot-long Burma teak communal eating table that is situated next to the bar is what gives The Table its trademark. The Table was co-designed by the owners and architect Tarik Currimbhoy.")
)
@Composable
fun FourthScreen(navController: NavController){
MyMessages3(messages3 = messages3)
}
@Composable
fun MyMessages3(messages3:List<MyMessage1>){
LazyColumn {
items(messages3) {message ->
MyComponent1(message) }
}
}
7. “MainActivity” is a kotlin file which is responsible to initialize our application.
This file contains various functions that are responsible for the working and functioning of our tourist guide application.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
TouristGuideProjectGurukulTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
AppNavigation()
}
}
}
}
}
@Composable
fun PreviewScreen(){
TouristGuideProjectGurukulTheme {
AppNavigation()
}
}
Android Kotlin Tourist Guide App Output
1. Home Screen
2. Attractions
3. Accommodation
4. Restaurants
Summary
So in this Android Kotlin Tourist Guide App Project, we have learned how to create and develop a tourist guide app in android studio. This project is highly beneficial for beginners since it familiarizes users with utilizing the jetpack compose UI toolkit to create user interfaces, navigating between screens by clicking a button. We sincerely hope you enjoyed it, and we are sure you will enjoy implementing it into reality.