Saving your ample hours of designing and developing the Android UI being our goal, We now present to you the news feed app screen with the detailed process.
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
For custom fonts folder

For asset folder

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 'de.hdodenhof:circleimageview:3.0.1' implementation 'androidx.recyclerview:recyclerview:1.0.0' implementation 'androidx.cardview:cardview:1.0.0' implementation 'com.android.support:design:29.0.2' implementation 'com.github.siyamed:android-shape-imageview:0.9.+@aar' implementation 'de.hdodenhof:circleimageview:3.0.1' implementation 'com.balysv:material-ripple:1.0.2' implementation 'com.android.support:support-vector-drawable:29.0.2' implementation 'com.makeramen:roundedimageview:2.3.0' }
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="transparent">#00000000</color> <color name="white">#ffffff</color> <color name="overlay_dark_10">#1A000000</color> <color name="overlay_dark_20">#33000000</color> <color name="icon_tintclr">#a9885d</color> </resources>
Open strings.xml located under res ⇒ values and add the below values.
<resources> <string name="app_name">ProfileOne</string> <string name="comments">Comments</string> <string name="miki_ito">Miki Ito</string> <string name="digital_product_designer">Digital Product \nDesigner</string> <string name="freelance_designer_specialized_in_ui_and_interaction_design_born_amp_raised_in_china"><![CDATA[Freelance designer specialized in UI and interaction design, born & raised in China.]]></string> <string name="_34">34</string> <string name="posts">Posts</string> <string name="_1256">1256</string> <string name="folowers">Folowers</string> <string name="_8942">8942</string> <string name="following">Following</string> <string name="photos">Photos</string> <string name="stats">Stats</string> <string name="charts">Charts</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> <style name="RippleStyleWhite"> <item name="mrl_rippleOverlay">true</item> <item name="mrl_rippleColor">#80FFFFFF</item> <item name="mrl_rippleHover">true</item> <item name="mrl_rippleAlpha">0.2</item> </style> <style name="RippleStyleBlack" parent="RippleStyleWhite"> <item name="mrl_rippleColor">#8096989A</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" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#f8f5f2" android:orientation="vertical" tools:context=".MainActivity"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@color/white" app:contentInsetStartWithNavigation="0dp" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> </com.google.android.material.appbar.AppBarLayout> <View android:layout_width="match_parent" android:layout_height="2dp" android:background="@drawable/bg_gradient_soft" /> <androidx.core.widget.NestedScrollView android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="none"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="0dp" android:layout_margin="30dp" android:layout_weight="1" android:orientation="horizontal"> <ImageView android:layout_width="133.9dp" android:layout_height="133.9dp" android:scaleType="centerCrop" android:src="@drawable/profileone_img"/> <LinearLayout android:layout_width="0dp" android:layout_weight="1" android:layout_height="0dp"/> <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical"> <customfonts.MyTextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="26.9sp" android:textColor="#131314" android:lineSpacingExtra="6.1sp" android:gravity="end" android:text="@string/miki_ito" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#9b9ca3" android:lineSpacingExtra="2.6sp" android:gravity="end" android:text="@string/digital_product_designer" /> <RelativeLayout android:layout_width="wrap_content" android:layout_gravity="end" android:gravity="bottom" android:layout_height="match_parent" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/pone_btn" /> </RelativeLayout> </LinearLayout> </LinearLayout> <customfonts.TextView_Lato_Regular android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#363028" android:layout_margin="27dp" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="@string/freelance_designer_specialized_in_ui_and_interaction_design_born_amp_raised_in_china" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="27dp" android:layout_marginRight="27dp" android:background="#e5e7e8"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:weightSum="3" android:layout_margin="27dp" android:orientation="horizontal"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_weight="1" android:orientation="vertical"> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="@string/_34" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#9b9ca3" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="@string/posts" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_weight="1" android:orientation="vertical"> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="@string/_1256" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#9b9ca3" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="@string/folowers" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_weight="1" android:orientation="vertical"> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="@string/_8942" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#9b9ca3" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="@string/following" /> </LinearLayout> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:layout_marginLeft="27dp" android:layout_marginRight="27dp" android:background="#e5e7e8"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginRight="27dp" android:layout_marginLeft="27dp" android:layout_marginTop="27dp" android:orientation="horizontal"> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_small" android:layout_weight="1" app:cardBackgroundColor="@color/white" app:cardCornerRadius="10dp" app:cardElevation="0dp"> <com.balysv.materialripple.MaterialRippleLayout style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="115dp" android:clickable="true" android:orientation="vertical" android:padding="@dimen/spacing_large"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_smlarge" android:layout_marginTop="@dimen/spacing_smlarge" app:srcCompat="@drawable/icon_pone_msg" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:text="@string/comments" /> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_small" android:layout_weight="1" app:cardBackgroundColor="@color/white" app:cardCornerRadius="10dp" app:cardElevation="0dp"> <com.balysv.materialripple.MaterialRippleLayout style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="115dp" android:clickable="true" android:orientation="vertical" android:padding="@dimen/spacing_large"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_smlarge" android:layout_marginTop="@dimen/spacing_smlarge" app:srcCompat="@drawable/icon_pone_g" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:text="@string/photos" /> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_small" android:layout_weight="1" app:cardBackgroundColor="@color/white" app:cardCornerRadius="3dp" app:cardElevation="0dp"> <com.balysv.materialripple.MaterialRippleLayout style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="115dp" android:clickable="true" android:orientation="vertical" android:padding="@dimen/spacing_large"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_smlarge" android:layout_marginTop="@dimen/spacing_smlarge" app:srcCompat="@drawable/icon_pone_clock" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:text="@string/stats" /> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout> </androidx.cardview.widget.CardView> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginRight="27dp" android:layout_marginLeft="27dp" android:layout_marginBottom="27dp" android:orientation="horizontal"> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_small" android:layout_weight="1" app:cardBackgroundColor="@color/white" app:cardCornerRadius="10dp" app:cardElevation="0dp"> <com.balysv.materialripple.MaterialRippleLayout style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="115dp" android:clickable="true" android:orientation="vertical" android:padding="@dimen/spacing_large"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_smlarge" android:layout_marginTop="@dimen/spacing_smlarge" android:tint="@color/icon_tintclr" android:src="@drawable/ic_slow_motion_video_black_24dp" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:text="Videos" /> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_small" android:layout_weight="1" app:cardBackgroundColor="@color/white" app:cardCornerRadius="10dp" app:cardElevation="0dp"> <com.balysv.materialripple.MaterialRippleLayout style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="115dp" android:clickable="true" android:orientation="vertical" android:padding="@dimen/spacing_large"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_smlarge" android:layout_marginTop="@dimen/spacing_smlarge" android:tint="@color/icon_tintclr" android:src="@drawable/ic_person_outline_black_24dp" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:text="Peopele" /> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout> </androidx.cardview.widget.CardView> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_small" android:layout_weight="1" app:cardBackgroundColor="@color/white" app:cardCornerRadius="3dp" app:cardElevation="0dp"> <com.balysv.materialripple.MaterialRippleLayout style="@style/RippleStyleBlack" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:layout_width="match_parent" android:layout_height="115dp" android:clickable="true" android:orientation="vertical" android:padding="@dimen/spacing_large"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="@dimen/spacing_smlarge" android:layout_marginTop="@dimen/spacing_smlarge" android:tint="@color/icon_tintclr" android:src="@drawable/ic_multiline_chart_black_24dp" /> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="15.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:text="@string/charts" /> </LinearLayout> </com.balysv.materialripple.MaterialRippleLayout> </androidx.cardview.widget.CardView> </LinearLayout> </LinearLayout> </androidx.core.widget.NestedScrollView> </LinearLayout>
Step 04 :
Now the XML part is done, moving to the next we have to create the Menu folder in resources.
Right-click on the res folder and create a new Android resource directory. and in that folder create one menu resource file. and write the following code. I created menu_basic.xml
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:icon="@drawable/ic_more_vert_black_24dp" android:orderInCategory="100" android:title="" app:showAsAction="always" /> </menu>
Step 05 :
Open the Mainactivity.java class file and write the following code.
import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setNavigationIcon(R.drawable.ic_keyboard_backspace_black_24dp); setSupportActionBar(toolbar); getSupportActionBar().setTitle(""); getSupportActionBar().setDisplayHomeAsUpEnabled(true); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_basic, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { if (item.getItemId() == android.R.id.home) { finish(); } else { Toast.makeText(getApplicationContext(), item.getTitle(), Toast.LENGTH_SHORT).show(); } return super.onOptionsItemSelected(item); } }
Now run the app and see the output, you will see the beautiful profile screen for your next android project.
So that’s all for this Profile Screen with Android studio code. Tutorial. If you are having any confusion or queries please do comment. Thank You.