What if you want to develop the screen for city nearby detail activity ? here is the screen for you. On this screen basically I am using a horizontal scroll view and card view you can be used recycler view.
Step 01 :
Create a new project in Android Studio from the File ⇒ New Project. As it prompts you to select the default activity, select Empty Activity and proceed.
Name your project as per your convenience and click finish.
Download this res.zip and add them to your project res folder. This file contains a few drawable images and font folder required for this app.
Now that we are done with the images, moving on to changing the text font. For this, we would need to add a custom font in our directory and asset folder as well. find custom fonts folder and asset folder and paste it under the java. Here is a reference image for custom fonts folder
Watch this video tutorial for step 1 here.
Step 02 :
Go to the build Gradle and do the needful changes as follows.
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'androidx.test:runner:1.2.0'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'com.android.support:design:29.0.2'
}
Open colors.xml located under res ⇒ values and add the below color values.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#1976D2</color>
<color name="colorPrimaryDark">#1565C0</color>
<color name="colorAccent">#FDD835</color>
<color name="white">#ffffff</color>
<color name="overlay_dark_30">#4D000000</color>
<color name="overlay_dark_40">#66000000</color>
</resources>
Open strings.xml located under res ⇒ values and add the below values.
<resources>
<string name="app_name">CityTwoApp</string>
<string name="petronas_towers">Petronas Towers</string>
<string name="bukit_bintang">Bukit Bintang</string>
</resources>
Open styles.xml located under res ⇒ values and add the below values.
<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="windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
</style>
</resources>
Step 03 :
Now is the time for making the XML file. For this, Open activity_main.xml and paste the following code.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@drawable/bitmap"
android:orientation="vertical"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:rotation="180"
android:scaleType="centerCrop"
android:src="@drawable/bg_gradient" />
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_marginTop="30dp"
android:layout_height="48dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:tint="@color/white"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:src="@drawable/ic_close_black_24dp"
android:layout_marginStart="20dp" />
<customfonts.TextView_Lato_Regular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17.3sp"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:textColor="#ffffff"
android:lineSpacingExtra="3.7sp"
android:text="Kuala Lumpur"
android:layout_marginStart="20dp" />
</LinearLayout>
<customfonts.TextView_Lato_Regular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#ffffff"
android:layout_marginLeft="15.4dp"
android:layout_marginTop="98.6dp"
android:layout_marginRight="15.4dp"
android:lineSpacingExtra="6.6sp"
android:text="Kuala Lumpur (Malaysian pronunciation: [ˈkualə, -a ˈlumpo(r), -ʊ(r)]), officially the Federal Territory of Kuala Lumpur (Malay: Wilayah Persekutuan Kuala Lumpur) and commonly known as KL, is the national capital and largest city in Malaysia."
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15.4dp"
android:layout_marginTop="224.7dp"
android:layout_marginRight="15.4dp"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#fefeff"
android:letterSpacing="0.03"
android:layout_gravity="center"
android:lineSpacingExtra="2.6sp"
android:text="Thursday, 18 July, 13:50 "
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="end"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="12dp"
android:src="@drawable/icon_sun"
android:layout_marginEnd="12dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="30.7sp"
android:textColor="#fefeff"
android:letterSpacing="0.02"
android:lineSpacingExtra="6.3sp"
android:gravity="end"
android:text="27° "
/>
</LinearLayout>
</LinearLayout>
</FrameLayout>
<customfonts.TextView_Lato_Regular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#fefeff"
android:layout_above="@+id/cardview"
android:layout_marginRight="15.4dp"
android:layout_marginLeft="15.4dp"
android:letterSpacing="0.03"
android:layout_marginBottom="20dp"
android:lineSpacingExtra="2.6sp"
android:text="Popular places"
/>
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cardview"
android:layout_alignParentBottom="true"
android:scrollbars="none">
<LinearLayout
android:layout_width="wrap_content"
android:layout_gravity="bottom"
android:gravity="bottom"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="180dp"
android:layout_height="245.9dp"
android:layout_marginRight="10dp"
android:layout_marginLeft="15.4dp"
android:layout_marginBottom="60dp"
app:cardElevation="0dp"
android:elevation="0dp"
app:cardCornerRadius="9dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="15.4dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16.2sp"
android:textColor="#131314"
android:layout_marginLeft="15.4dp"
android:layout_marginTop="15.4dp"
android:lineSpacingExtra="2.8sp"
android:text="@string/petronas_towers"
android:layout_marginStart="15.4dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#8f8f8f"
android:layout_gravity="center"
android:layout_marginLeft="15.4dp"
android:layout_marginRight="15.4dp"
android:layout_marginTop="15.4dp"
android:lineSpacingExtra="2.6sp"
android:text="Identical Towers, Identical Wonders. Enjoy and capture the spires…"
/>
<RatingBar
android:layout_marginLeft="15.4dp"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="4"
android:layout_marginStart="15.4dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15.4dp"
android:scaleType="centerCrop"
android:src="@drawable/travelcity_imgone"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="180dp"
android:layout_height="245.9dp"
android:layout_marginRight="16.8dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="60dp"
app:cardElevation="0dp"
android:elevation="0dp"
app:cardCornerRadius="9dp"
android:layout_marginEnd="16.8dp"
android:layout_marginStart="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16.2sp"
android:textColor="#131314"
android:layout_marginLeft="15.4dp"
android:layout_marginTop="15.4dp"
android:lineSpacingExtra="2.8sp"
android:text="@string/bukit_bintang"
android:layout_marginStart="15.4dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#8f8f8f"
android:layout_gravity="center"
android:layout_marginLeft="15.4dp"
android:layout_marginRight="15.4dp"
android:layout_marginTop="15.4dp"
android:lineSpacingExtra="2.6sp"
android:text="Identical Towers, Identical Wonders. Enjoy and capture the spires…"
/>
<RatingBar
android:layout_marginLeft="15.4dp"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="4"
android:layout_marginStart="15.4dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15.4dp"
android:scaleType="centerCrop"
android:src="@drawable/travelcity_imgtwo"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="180dp"
android:layout_height="245.9dp"
android:layout_marginRight="16.8dp"
android:layout_marginLeft="10dp"
android:layout_marginBottom="60dp"
app:cardElevation="0dp"
android:elevation="0dp"
app:cardCornerRadius="9dp"
android:layout_marginEnd="16.8dp"
android:layout_marginStart="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16.2sp"
android:textColor="#131314"
android:layout_marginLeft="15.4dp"
android:layout_marginTop="15.4dp"
android:lineSpacingExtra="2.8sp"
android:text="Bukit Bintang"
android:layout_marginStart="15.4dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#8f8f8f"
android:layout_gravity="center"
android:layout_marginLeft="15.4dp"
android:layout_marginRight="15.4dp"
android:layout_marginTop="15.4dp"
android:lineSpacingExtra="2.6sp"
android:text="Identical Towers, Identical Wonders. Enjoy and capture the spires…"
/>
<RatingBar
android:layout_marginLeft="15.4dp"
style="?android:attr/ratingBarStyleSmall"
android:layout_width="wrap_content"
android:layout_marginTop="10dp"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="4"
android:layout_marginStart="15.4dp" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15.4dp"
android:scaleType="centerCrop"
android:src="@drawable/travelcity_imgtwo"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</HorizontalScrollView>
</RelativeLayout>Now run the app and see the output, you will see the nice Screen for city search information Android Application with Android Source code for your next android project.
So that’s all for this Android UI screen XML layout Using Horizontalscrollview and card view with source code Tutorial. If you are having any confusion or queries please do comment. Thank You.
Happy Coding.
