If you are planning to develop an android app and you need the comment screen or write review screen this is the perfect UI screen for free with XML ready source code for you.
What you’ll get
- Clean coded and easy to understand for customization.
- Change text, colors, and images as per your need.
- Customize every element as much, or as little as you want.
- Easy to edit.
- high-quality design
- Build Dynamic Android Apps From Scratch
- Learn Android User Interface Design
Are there any requirements or prerequisites?
- Basic android XML layout experience, in general, is helpful but not required. The tutorial covers everything you’ll need to build an Android App Screen
- Be Willing to Work and Learn
Who this tutorial for:
- Beginner Android Developers
- Freelancer or mobile app development company that deals in android development.
- Curious students who Want to Build their own Android Apps
- Project Managers who Want to Learn How Android Apps Screen Built
You can download my code from the download now button and also download the APK to understand the activity or output. If you yet need a step by step tutorial to follow the below step.
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 the code and you will get resources file and custom font. you can refer the video for this step 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'
implementation 'de.hdodenhof:circleimageview:3.0.1'
}
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_10">#1A000000</color>
<color name="blue">#344ff4</color>
<color name="black">#000000</color>
<color name="gray">#8f8f8f</color>
<color name="overlay_dark_20">#33000000</color>
</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"?>
<LinearLayout 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:orientation="vertical">
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:background="@color/black"
android:layout_height="wrap_content">
<include layout="@layout/toolbar_flightsearch" />
</com.google.android.material.appbar.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="@layout/include_commentlayout"/>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_marginTop="7dp"
android:layout_above="@+id/addcomment"
android:background="@drawable/bg_gradient_soft" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:background="@color/white"
android:id="@+id/addcomment"
android:layout_alignParentBottom="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:weightSum="2"
android:gravity="center"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="56dp"
android:layout_marginLeft="16dp"
android:layout_weight="1.8"
android:orientation="horizontal"
android:layout_marginStart="16dp">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8.7dp"
android:background="#00000000"
android:hint="Comment..."
android:lineSpacingExtra="2sp"
android:textColor="#3d3f3e"
android:textSize="12.7sp"
android:textStyle="normal" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:tint="@color/gray"
android:layout_marginRight="16dp"
android:layout_marginLeft="18dp"
android:src="@drawable/ic_send_black_24dp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
Step 04 :
Create toolbar_flightsearch.xml under res ⇒ layout and add the below values.
<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/blue"
app:contentInsetStartWithNavigation="0dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
Step 04 :
Create include_commentlayout.xml under res ⇒ layout and add the below values.
<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:scrollbars="none"
android:background="@color/white"
android:scrollingCache="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="78dp"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="47dp"
android:layout_height="47dp"
android:layout_marginLeft="13dp"
android:layout_marginTop="20.8dp"
>
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_gravity="center"
android:layout_marginLeft="1.5dp"
android:layout_marginRight="0.5dp"
android:src="@drawable/comment_profileone"
app:civ_border_color="@color/white"
app:civ_border_width="2.5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="25.9dp"
android:layout_weight="1"
android:orientation="vertical">
<customfonts.MyTextView_LatoBold
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="2.6sp"
android:text="Jaren Hammer"
android:textColor="#0d0e15"
android:textSize="13.4sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<customfonts.TextView_Lato_Regular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="2.1sp"
android:text="8 days ago"
android:textColor="#768196"
android:textSize="11.5sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#131314"
android:letterSpacing="0.01"
android:layout_margin="15.8dp"
android:lineSpacingExtra="5.8sp"
android:text="Me is its behind decades agency, longer the big times then may to one-by-one, own with by this half subdued parent, this incentive it all you in the slight in gave human nonsense, he I searching opinion."
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="52.2dp"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="18.7dp"
android:src="@drawable/iconblog_fav" />
<customfonts.MyTextView_LatoBold
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="7.3dp"
android:lineSpacingExtra="2.6sp"
android:text="42"
android:textColor="#0d0e15"
android:textSize="13.4sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1">
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="24.6dp"
android:layout_marginRight="15.4dp"
android:src="@drawable/iconblog_save"
android:tint="@color/black" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_marginTop="7dp"
android:layout_marginLeft="15.8dp"
android:layout_marginRight="15.8dp"
android:background="@drawable/bg_gradient_soft" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:layout_width="47dp"
android:layout_height="47dp"
android:layout_marginLeft="13dp"
android:layout_marginTop="20.8dp"
>
<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_gravity="center"
android:layout_marginLeft="1.5dp"
android:layout_marginRight="0.5dp"
android:src="@drawable/comment_profiletwo"
app:civ_border_color="@color/white"
app:civ_border_width="2.5dp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="25.9dp"
android:layout_weight="1"
android:orientation="vertical">
<customfonts.MyTextView_LatoBold
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="2.6sp"
android:text="Vivianna Kiser"
android:textColor="#0d0e15"
android:textSize="13.4sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<customfonts.TextView_Lato_Regular
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="2.1sp"
android:text="7 days ago"
android:textColor="#768196"
android:textSize="11.5sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="13.4sp"
android:textColor="#131314"
android:letterSpacing="0.01"
android:layout_margin="15.8dp"
android:lineSpacingExtra="5.8sp"
android:text="I among was motivator, of sounded in scent brought origin; Succeeding, that was and head place his of universal in of the them, more entirely produce again. Left him, at of now one were to crew sighed. Turns being an sitting children the them. Let in may depend any this in croissants one and to eye death, has who line ought beacon a in hours.
The their someone in from was elite.
"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="52.2dp"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:paddingLeft="18.7dp"
android:src="@drawable/iconblog_fav" />
<customfonts.MyTextView_LatoBold
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="7.3dp"
android:lineSpacingExtra="2.6sp"
android:text="17"
android:textColor="#0d0e15"
android:textSize="13.4sp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="1">
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="24.6dp"
android:layout_marginRight="15.4dp"
android:src="@drawable/iconblog_save"
android:tint="@color/black" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_marginTop="7dp"
android:layout_marginLeft="15.8dp"
android:layout_marginRight="15.8dp"
android:background="@drawable/bg_gradient_soft" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:layout_margin="20dp"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon_load"
android:layout_gravity="center"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11.5sp"
android:textColor="#131314"
android:letterSpacing="0.01"
android:layout_marginLeft="10dp"
android:lineSpacingExtra="7.7sp"
android:text="Load more"
/>
</LinearLayout>
</LinearLayout>
</androidx.core.widget.NestedScrollView>Now run the app and see the output, you will see the nice Comment Screen for your next Android Application with Android Source code.
So that’s all for this Comment Screen with Android Source code Tutorial. If you are having any confusion or queries please do comment. Thank You.
