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. Download this res.zip and add them to your project res folder. This file contains a few drawable images 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="black">#000000</color> <color name="transferent">#00000000</color> <color name="grey_10">#e6e6e6</color> <color name="grey_60">#666666</color> <color name="overlay_dark_20">#33000000</color> </resources>
Open strings.xml located under res ⇒ values and add the below values.
<resources> <string name="app_name">Blog Feed</string> <string name="by_jaxon_in_travel">By Jaxon in Travel</string> <string name="_7_days_ago">7 days ago</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="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /> </resources>
On doing this, create a menu folder under the Res. and in the same directory create one menu resource file, name it as menu_profile and paste the following code.
<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="Search" app:showAsAction="always" /> </menu>
Create another menu resource file in the menu folder and name it as menu_bottom_blogfeed and paste the following code.
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:icon="@drawable/ic_menu_black_24dp" android:title="Recents" /> <item android:icon="@drawable/icon_bfeedbook" android:iconTint="@color/white" android:title="Favorites" /> <item android:icon="@drawable/icon_bfeedbell" android:iconTint="@color/white" android:title="Nearby" /> </menu>
Step 03 :
Now is the time for making the XML file. For this, Open activity_main.xml and paste the following code. output of this XML is:

<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout 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:background="@color/grey_10" android:fitsSystemWindows="true"> <com.google.android.material.appbar.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/black" android:theme="@style/AppTheme.AppBarOverlay"> <androidx.appcompat.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:contentInsetStartWithNavigation="0dp" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" /> <com.google.android.material.tabs.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:tabGravity="fill" app:tabIndicatorColor="@android:color/white" app:tabIndicatorHeight="3dp" app:tabMode="scrollable" app:tabSelectedTextColor="@android:color/white" app:tabTextColor="@color/grey_10" /> </com.google.android.material.appbar.AppBarLayout> <androidx.viewpager.widget.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> <com.google.android.material.bottomnavigation.BottomNavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_gravity="bottom" android:background="@color/white" app:menu="@menu/menu_bottom_blogfeed" /> </androidx.coordinatorlayout.widget.CoordinatorLayout>
Step 04 :
Open MainActivity.java file and follow the below code. Here we use tab layout to show some tabs, so follow each step and see the ready output. After pasting this code to your main activity you will face some errors as this code includes some fragment class and we did not create it yet, so the next step is to create the package and under that package create one class. I named IncludeBlogfeedFragment.
import androidx.appcompat.app.AppCompatActivity; import androidx.appcompat.widget.Toolbar; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter; import androidx.viewpager.widget.ViewPager; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; import com.example.newsfeedapp.Fragment.IncludeBlogfeedFragment; import com.google.android.material.tabs.TabLayout; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private ViewPager view_pager; private TabLayout tab_layout; @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_menu__white_24dp); setSupportActionBar(toolbar); getSupportActionBar().setTitle("Feed"); getSupportActionBar().setDisplayHomeAsUpEnabled(true); view_pager = (ViewPager) findViewById(R.id.view_pager); setupViewPager(view_pager); tab_layout = (TabLayout) findViewById(R.id.tab_layout); tab_layout.setupWithViewPager(view_pager); } private void setupViewPager(ViewPager viewPager) { MainActivity.SectionsPagerAdapter adapter = new MainActivity.SectionsPagerAdapter(getSupportFragmentManager()); adapter.addFragment(IncludeBlogfeedFragment.newInstance(), "HOME"); adapter.addFragment(IncludeBlogfeedFragment.newInstance(), "TRAVEL"); adapter.addFragment(IncludeBlogfeedFragment.newInstance(), "BUSINESS"); adapter.addFragment(IncludeBlogfeedFragment.newInstance(), "TECH"); viewPager.setAdapter(adapter); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_profile, 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); } private class SectionsPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>(); private final List<String> mFragmentTitleList = new ArrayList<>(); public SectionsPagerAdapter(FragmentManager manager) { super(manager); } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } public void addFragment(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } } }
Step 05 :
After creating IncludeBlogfeedFragment class past the following code.
import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.example.newsfeedapp.R; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; public class IncludeBlogfeedFragment extends Fragment { public IncludeBlogfeedFragment() { } public static IncludeBlogfeedFragment newInstance() { return new IncludeBlogfeedFragment(); } @Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) { super.onViewCreated(view, savedInstanceState); } @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { return inflater.inflate(R.layout.include_blogfeedfragment,container,false); } }
As we know IncludeBlogfeedFragment is a fragment class so we need to design an XML for that. refer to the following code and make it.

<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:background="#f5f5f5" android:clipToPadding="false" android:scrollbars="none" android:scrollingCache="true"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15.6dp" android:scrollbars="none"> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal"> <FrameLayout android:layout_width="115.2dp" android:layout_height="134.4dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/blogfeed_imageone"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#ffffff" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="#entertainment" /> <TextView android:layout_width="85dp" android:background="@drawable/edit_line_rect" android:layout_height="23dp" android:textSize="11.5sp" android:layout_marginLeft="15.4dp" android:layout_marginRight="15.4dp" android:layout_marginBottom="15.4dp" android:layout_marginTop="7dp" android:textColor="#ffffff" android:lineSpacingExtra="1.5sp" android:gravity="center_horizontal" android:text="Follow" /> </LinearLayout> </FrameLayout> <FrameLayout android:layout_width="115.2dp" android:layout_marginLeft="15dp" android:layout_height="134.4dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/blogfeed_imagetwo"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#ffffff" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="#sport" /> <TextView android:layout_width="85dp" android:background="@drawable/edit_line_rect" android:layout_height="23dp" android:textSize="11.5sp" android:layout_marginLeft="15.4dp" android:layout_marginRight="15.4dp" android:layout_marginBottom="15.4dp" android:layout_marginTop="7dp" android:textColor="#ffffff" android:lineSpacingExtra="1.5sp" android:gravity="center_horizontal" android:text="Follow" /> </LinearLayout> </FrameLayout> <FrameLayout android:layout_width="115.2dp" android:layout_marginLeft="15dp" android:layout_height="134.4dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/blogfeed_imagethree"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="13.4sp" android:textColor="#ffffff" android:lineSpacingExtra="2.6sp" android:gravity="center_horizontal" android:text="#urban" /> <TextView android:layout_width="85dp" android:background="@drawable/edit_line_rect" android:layout_height="23dp" android:textSize="11.5sp" android:layout_marginLeft="15.4dp" android:layout_marginRight="15.4dp" android:layout_marginBottom="15.4dp" android:layout_marginTop="7dp" android:textColor="#ffffff" android:lineSpacingExtra="1.5sp" android:gravity="center_horizontal" android:text="Follow" /> </LinearLayout> </FrameLayout> </LinearLayout> </HorizontalScrollView> <View android:layout_width="match_parent" android:layout_height="4dp" android:layout_marginTop="7dp" android:background="@drawable/bg_gradient_soft" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/spacing_large" android:gravity="center_vertical" android:orientation="horizontal" android:paddingLeft="@dimen/spacing_large" android:paddingRight="@dimen/spacing_large"> <customfonts.MyTextView_LatoBold android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:textSize="13.4sp" android:textColor="#131314" android:lineSpacingExtra="2.6sp" android:text="Popular" /> <Button style="@style/Widget.AppCompat.Button.Borderless" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:minWidth="0dp" android:text="See All" android:textColor="@color/grey_60" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:padding="@dimen/spacing_medium" android:visibility="visible"> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_medium" android:layout_weight="1" app:cardCornerRadius="2dp" app:cardElevation="2dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="120dp" android:background="@drawable/blogfeed_imagefour" android:scaleType="centerCrop" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" android:padding="@dimen/spacing_large"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <customfonts.MyTextView_LoraBold android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="19.2sp" android:textColor="#131314" android:lineSpacingExtra="4.8sp" android:text="Discovering the Beuaty of Street\nArt with John McDonald" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="15dp" android:layout_above="@+id/view_layout" android:orientation="horizontal"> <LinearLayout android:layout_width="41dp" android:layout_height="41dp" android:layout_marginTop="15.8dp"> <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="38dp" android:layout_height="38dp" android:layout_gravity="center" android:layout_marginLeft="1.5dp" android:layout_marginRight="0.5dp" android:src="@drawable/pop_profile" app:civ_border_color="@color/white" app:civ_border_width="2.5dp" android:layout_marginStart="1.5dp" android:layout_marginEnd="0.5dp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="16.9dp" android:layout_weight="1" android:orientation="vertical" android:layout_marginStart="8dp"> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:lineSpacingExtra="2.6sp" android:text="@string/by_jaxon_in_travel" android:textColor="#c2c2cc" 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="@string/_7_days_ago" android:textColor="#c2c2cc" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginBottom="78dp" android:padding="@dimen/spacing_medium" android:visibility="visible"> <androidx.cardview.widget.CardView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_margin="@dimen/spacing_medium" android:layout_weight="1" app:cardCornerRadius="2dp" app:cardElevation="2dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:layout_width="match_parent" android:layout_height="120dp" android:background="@drawable/blogfeed_imagefour" android:scaleType="centerCrop" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" android:padding="@dimen/spacing_large"> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <customfonts.MyTextView_LoraBold android:layout_width="wrap_content" android:layout_height="wrap_content" android:textSize="19.2sp" android:textColor="#131314" android:lineSpacingExtra="4.8sp" android:text="Discovering the Beuaty of Street\nArt with John McDonald" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout_marginBottom="15dp" android:orientation="horizontal"> <LinearLayout android:layout_width="41dp" android:layout_height="41dp" android:layout_marginTop="15.8dp"> <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="38dp" android:layout_height="38dp" android:layout_gravity="center" android:layout_marginLeft="1.5dp" android:layout_marginRight="0.5dp" android:src="@drawable/pop_profile" app:civ_border_color="@color/white" app:civ_border_width="2.5dp" android:layout_marginStart="1.5dp" android:layout_marginEnd="0.5dp" /> </LinearLayout> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="8dp" android:layout_marginTop="16.9dp" android:layout_weight="1" android:orientation="vertical" android:layout_marginStart="8dp"> <customfonts.TextView_Lato_Regular android:layout_width="wrap_content" android:layout_height="wrap_content" android:lineSpacingExtra="2.6sp" android:text="@string/by_jaxon_in_travel" android:textColor="#c2c2cc" 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="@string/_7_days_ago" android:textColor="#c2c2cc" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView> </LinearLayout> </LinearLayout> </androidx.core.widget.NestedScrollView>