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>
