UI Designs

UI Design: Birthday Reminder App

Hellooo Developers,

Today we are going to implement UI design for birthday reminder app. Design Credits: DC Design, Design UI Link. Uplabs is a huge collection of ui designs and designers. So we are going to implement one of them.

As google have migrated to androidx libraries, we are going to develop on same platform. If you want to migrate your android studio .Check out link for Migrate to androidx

We are going to learn to implement:

  • Create Custom Background for buttons, edittext Components.
  • Use of constraint layout for UI designing.
  • Implementing Images to UI screen.
  • Use of Card View  with applying corners to it.
  • Use of View Pager and Fragments
  • Use of Recycler View and Implementing Adapters, View Holders.

Final Layout seems like this:ui1

Some Resources are needed:

  1. Image App Logo and Textual App Logo
  2. Fake Data as names, birth date, photos.
  3. Colors Values.
  4. Icons for facebook, instagram, pinterest, twitter.

Download resources From Here.

Colors.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="orange">#ED8E17</color>
<color name="grey">#2C3340</color>
<color name="lightorange">#F3D0A6</color>
<color name="lightgrey">#F2F1ED</color>
</resources>

 

Now, Lets declare text needed here,

<resources>
<string name="app_name">HpyBrthdy</string>
<string name="startmsg">Let\'s Start</string>
<string name="signin">Sign In</string>
<string name="signup">Sign Up</string>
<string name="passwordhint">Password</string>
<string name="forgetpass">Forget Password ?</string>
<!-- sample data -->
<string name="personName">Shreeja Munit</string>
<string name="personDob">19 March 1992</string>
<string name="persondaysToGo">20 Days</string>
<string name="search">Search Here</string>
<string name="menu">Profile Menu</string>
<string name="infoperson">Lorem ipsum dolor sit amet, vis at prima minimum aliquando,</string>
<string name="connectwith">Connect with</string>
</resources>

And Some Libraries To Add to gradle.build (app module) in dependencies section. We require for designing material :

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])

    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'androidx.cardview:cardview:1.0.0'
    implementation 'com.makeramen:roundedimageview:2.3.0'

    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    implementation 'com.google.android.material:material:1.1.0'
}

Now, Lets Design Layouts:

Splash Screen:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="#ED8E17"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/rl_logo"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_marginTop="92dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imgv_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/splashlogo"
            android:visibility="visible" />
    </RelativeLayout>

    <TextView
        android:id="@+id/tvletsstart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="96dp"
        android:nextFocusDown="@id/btn_signin"
        android:text="@string/startmsg"
        android:textColor="@color/grey"
        android:textSize="30dp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/rl_logo" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="horizontal"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvletsstart"
        app:layout_constraintVertical_bias="0.54">

        <Button
            android:id="@+id/btn_signin"
            android:layout_width="130dp"
            android:layout_height="50dp"
            android:layout_marginRight="20dp"
            android:background="@drawable/btn_backgnd"
            android:text="@string/signin"
            android:textAllCaps="false"
            android:textColor="@color/btncolor"
            android:textSize="18dp"
            tools:layout_editor_absoluteX="48dp"
            tools:layout_editor_absoluteY="594dp" />

        <Button
            android:id="@+id/btn_signup"
            android:layout_width="130dp"
            android:layout_height="50dp"
            android:layout_marginLeft="20dp"
            android:background="@drawable/btn_backgnd"
            android:text="@string/signup"
            android:textAllCaps="false"
            android:textColor="@color/btncolor"
            android:textSize="18dp"
            tools:layout_editor_absoluteX="48dp"
            tools:layout_editor_absoluteY="594dp" />

    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

We included 2 buttons .. Sign-In and Sign Up Buttons to link their pages for Login And registration.

In this we used shape for buttons applying shape drawable as background to buttons.

btn_backgnd.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"
        >
        <shape android:shape="rectangle">
            <corners android:radius="25dp"/>
            <size android:width="120dp" android:height="50dp"/>
            <solid android:color="@color/grey"/>
            <stroke android:color="@color/grey" android:width="2dp"/>
        </shape>
    </item>

    <item
        android:state_hovered="true">
        <shape android:shape="rectangle">
            <corners android:radius="25dp"/>
            <size android:width="120dp" android:height="50dp"/>
            <solid android:color="@color/grey"/>
            <stroke android:color="@color/grey" android:width="2dp"/>
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape android:shape="rectangle">
            <corners android:radius="25dp"/>
            <size android:width="120dp" android:height="50dp"/>
            <stroke android:color="@color/grey" android:width="4dp"/>
        </shape>
    </item>

</selector>

 

Now next we gonna write back end code for splash screen above, so our buttons will work.

package your_package_name;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    Button btnsIn,btnsUp;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fst);
        btnsIn=(Button)findViewById(R.id.btn_signin);
        btnsIn.setOnClickListener(this);
        btnsUp=(Button)findViewById(R.id.btn_signup);
        btnsUp.setOnClickListener(this);


    }

    @Override
    public void onClick(View v) {
        switch(v.getId()){
            case R.id.btn_signup:
                Intent in=new Intent(MainActivity.this,ScnActivity.class);
                in.putExtra("pos",0);
                startActivity(in);
                break;

            case R.id.btn_signin:
                Intent in1=new Intent(MainActivity.this,ScnActivity.class);
                in1.putExtra("pos",1);
                startActivity(in1);
                break;
        }
    }
}

In Above code, we created class and extended to AppCompactActivity class. And So, we can listen button click we will implement listeners. Implement class with OnClickListeners and get Override Method OnClick().

Using findViewById() we linked button class objects with UI Button components. Then Set listener property onClickListener. Using Condition view.getId() with switch case ,we can differentiate.  Using Intent we will switch to next activity Login or Register as user wants.

As keeping design in mind, using one activity, we can show login screen and register screen. this we are implementing using view pager in CardView (used for design the background layer). And Fragments to Show both screens and handle the process and data.

content_scn.xml:

<?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:layout_height="match_parent"
    tools:context="com.shrenoid.mybdyremind.ScnActivity"
    android:background="@color/orange">
    <ImageView
        android:id="@+id/appicon"
        android:layout_marginTop="35dp"
        android:layout_marginBottom="35dp"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:src="@drawable/appname"
        android:layout_alignParentTop="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true" />
    
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appicon"
        android:layout_marginBottom="-23dp"
        app:cardCornerRadius="30dp"
        android:padding="10dp"
        app:cardBackgroundColor="@android:color/white">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/container"
            android:padding="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >
        </androidx.viewpager.widget.ViewPager>
    </androidx.cardview.widget.CardView>
</RelativeLayout>

Now , creating fragment Register Screen :

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:layout_marginBottom="20dp">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAllCaps="true"
        android:text="SIGN UP"
        android:textColor="@android:color/black"
        android:textSize="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="20dp"
        android:layout_gravity="center">
    </TextView>

    <EditText
        android:id="@+id/cfstname"
        android:singleLine="true"
        android:hint="First Name"
        android:typeface="serif"
        android:drawableEnd="@drawable/ic_person_black_24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginRight="25dp"
        android:layout_marginLeft="25dp"
        android:padding="10dp"
        android:textSize="18dp"
        android:layout_marginBottom="5dp"
        android:background="@drawable/etbackgnd"
        android:textColorHint="@color/grey"
        />

    <EditText
        android:layout_gravity="center_horizontal"
        android:typeface="serif"
        android:id="@+id/clstname"
        android:singleLine="true"
        android:hint="Last Name"
        android:drawableEnd="@drawable/ic_person_black_24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginRight="25dp"
        android:layout_marginLeft="25dp"
        android:textSize="18dp"
        android:padding="10dp"
        android:background="@drawable/etbackgnd"
        android:textColorHint="@color/grey"
        android:layout_marginBottom="5dp" />

    <EditText
        android:id="@+id/cemail"
        android:hint="Email"
        android:singleLine="true"
        android:typeface="serif"
        android:drawableEnd="@drawable/ic_email_black_24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginRight="25dp"
        android:layout_marginLeft="25dp"
        android:textSize="18dp"
        android:padding="10dp"
        android:background="@drawable/etbackgnd"
        android:textColorHint="@color/grey"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="5dp" />

    <EditText
        android:id="@+id/cpass"
        android:hint="Password"
        android:singleLine="true"
        android:typeface="serif"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="25dp"
        android:layout_marginLeft="25dp"
        android:textSize="18dp"
        android:drawableEnd="@drawable/ic_vpn_key_black_24dp"
        android:padding="10dp"
        android:background="@drawable/etbackgnd"
        android:textColorHint="@color/grey"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="3dp" />
    <Button
        android:id="@+id/btncreateac"
        android:text="Sign Up"
        android:typeface="serif"
        android:textAllCaps="false"
        android:background="@drawable/shape"
        android:textColor="@android:color/black"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="10dp"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"/>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="5dp"
        android:layout_gravity="center">
        <TextView
            android:id="@+id/lprblmtext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Already Registered?"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_marginTop="10dp"
            android:textSize="15dp"
            android:textColor="@color/grey"
            android:layout_marginBottom="5dp" />
        <TextView
            android:id="@+id/txtwaytosignup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Sign In"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="10dp"
            android:textSize="15dp"
            android:textColor="@color/orange"
            android:layout_marginBottom="5dp" />
    </LinearLayout>

</LinearLayout></ScrollView>

And next , creating fragment Login Screen ,

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <LinearLayout
        android:orientation="vertical" android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAllCaps="true"
            android:text="SIGN IN"
            android:textColor="@android:color/black"
            android:textSize="20dp"
            android:layout_marginTop="35dp"
            android:layout_gravity="center">
        </TextView>

        <EditText
            android:id="@+id/lemail"
            android:hint="Email"
            android:padding="10dp"
            android:drawableEnd="@drawable/ic_person_black_24dp"
            android:background="@drawable/etbackgnd"
            android:textColor="@color/grey"
            android:singleLine="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="30dp"
            android:layout_marginRight="25dp"
            android:layout_marginBottom="20dp"
            android:typeface="serif"
            android:textSize="18dp"
            android:textColorHint="@color/grey"/>
        <EditText
            android:textColorHint="@color/grey"
            android:drawableEnd="@drawable/ic_vpn_key_black_24dp"
            android:id="@+id/lpass"
            android:hint="@string/passwordhint"
            android:singleLine="true"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginTop="10dp"
            android:layout_marginRight="25dp"
            android:layout_marginBottom="20dp"
            android:typeface="serif"
            android:padding="10dp"
            android:autofillHints="@string/passwordhint"
            android:background="@drawable/etbackgnd"
            android:textSize="18dp"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tvforgetPass"
            android:textColor="@color/orange"
            android:layout_marginRight="20dp"
            android:layout_gravity="end|right"
            android:text="@string/forgetpass">
        </TextView>
        <Button
            android:id="@+id/btnloginac"
            android:text="Sign In"
            android:typeface="serif"
            android:textAllCaps="false"
            android:background="@drawable/shape"
            android:textColor="@android:color/black"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="20dp"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"/>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="20dp"
            android:layout_gravity="center">
            <TextView
                android:id="@+id/lprblmtext"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Create New Account?"
                android:gravity="center"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:textSize="15dp"
                android:textColor="@color/grey"
                android:layout_marginBottom="5dp" />
            <TextView
                android:id="@+id/txtwaytosignup"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Sign Up"
                android:gravity="center"
                android:layout_gravity="center"
                android:layout_marginLeft="5dp"
                android:layout_marginTop="10dp"
                android:textSize="15dp"
                android:textColor="@color/orange"
                android:layout_marginBottom="5dp" />
        </LinearLayout>

    </LinearLayout>
</ScrollView>

Now, Lets write Scn_Activity Class, We will add pager adapter using Support Fragment Manager.

package your_package_name;

import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
import androidx.viewpager.widget.ViewPager;

public class ScnActivity extends AppCompatActivity {
    Button btn;
    FragmentManager fragmentManager;
    FragmentTransaction fragmentTransaction;
    Fragment fragment;
    ImageView spot,unspot;

    Integer poscatch; //0->c,1->s
    ViewPager vpage;
    AdapterFragPager adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.content_scn);

        if(getActionBar()!=null)
            getActionBar().hide();
        poscatch=(Integer)getIntent().getExtras().get("pos");     
        vpage=(ViewPager)findViewById(R.id.container);

        Animation bottomUp = AnimationUtils.loadAnimation(getApplicationContext(),
                R.anim.fragmentanim);
        adapter=new AdapterFragPager(getSupportFragmentManager());
        vpage.setAdapter(adapter);
        vpage.startAnimation(bottomUp);
        vpage.setVisibility(View.VISIBLE);
        vpage.setCurrentItem(poscatch);

        if(poscatch==0){
            fragmentManager = getSupportFragmentManager();
            fragmentTransaction=fragmentManager.beginTransaction();            
            fragment=new FragCreateLay();
            fragmentTransaction.replace(R.id.container,fragment);
            fragmentTransaction.commit();
        }

       if(poscatch==1){
           fragmentManager = getSupportFragmentManager();
           fragmentTransaction=fragmentManager.beginTransaction();
           fragment=new FragSignLay();
           fragmentTransaction.replace(R.id.container,fragment);
           fragmentTransaction.commit();
       }
    }
}

Next , we will write fragment class for both create and register screen,

Create_fragment_class : FragCreateLay.java

package your_package_name;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.EditText;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class FragCreateLay extends Fragment {
    EditText name,lastname,email,password;
    Button btncreate;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View v=inflater.inflate(R.layout.fragcreateac,container,false);
        name=(EditText)v.findViewById(R.id.cfstname);
        lastname=(EditText)v.findViewById(R.id.clstname);
        email=(EditText)v.findViewById(R.id.cemail);
        password=(EditText)v.findViewById(R.id.cpass);
        btncreate=(Button)v.findViewById(R.id.btncreateac);
        return v;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);  }
}

Signin_fragment_class : FragSignLay.java

package your_package_name;

import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class FragSignLay extends Fragment {
EditText lemail,lpass;
    TextView tvques;
    Button btnsign;
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View v1=inflater.inflate(R.layout.fraglogin,container,false);
        lemail=(EditText) v1.findViewById(R.id.lemail);
        lpass=(EditText)v1.findViewById(R.id.lpass);
        btnsign=(Button) v1.findViewById(R.id.btnloginac);
        btnsign.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent tologin=new Intent(getContext(),ThrdActivity.class);
                startActivity(tologin);

            }
        });
        tvques=(TextView)v1.findViewById(R.id.lprblmtext);
        return v1;
    }
}

So, This way we implemented sign in and sign up screen. next after registering and sign-in ,we will display home screen of app to ThrdActivity class . To use floating action button, recycler view, toolbar with search,and proper designing  we need layering. So I applied New Theme to this Activity in Manifest to this activity:

android:theme="@style/AppTheme.NoActionBar"

Next We will write two layouts 1. Activity_third (including Coordinator layout) , 2. content_third (will be including in activity third)

activity_third:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="160dp"
        app:elevation="0dp"
        android:background="@drawable/toolbarbackgnd"
        android:theme="@style/AppTheme.AppBarOverlay"
        >

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/orange"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <EditText android:layout_gravity="center"
            android:layout_width="match_parent"
            android:padding="5dp"
            android:drawablePadding="5dp"
            android:layout_marginBottom="5dp"
            android:layout_height="50dp"
            android:hint="@string/search"
            android:textColorHint="@color/grey"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:textColor="@color/grey"
            android:drawableStart="@drawable/iconsearch"
            android:background="@drawable/etbackgnd"/>

    </com.google.android.material.appbar.AppBarLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rccylv_lstbuddy"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="-40dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <include layout="@layout/content_third" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:background="@color/orange"
        android:backgroundTintMode="add"
        app:backgroundTint="@color/orange"
        app:srcCompat="@drawable/ic_action_name" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

content_third.xml layout is included in activity_third.xml. For Now we dont need elements in it, so we are keeping it empty. Checkout this below highlighted codeline.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:showIn="@layout/activity_main"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</androidx.constraintlayout.widget.ConstraintLayout>

And last we will require cell layout for recycler view items:

<?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"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="15dp"
    >
    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardElevation="15dp"
        app:cardCornerRadius="15dp"
        android:layout_margin="2dp"
        app:cardBackgroundColor="@android:color/white">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <androidx.cardview.widget.CardView
            android:layout_width="110dp"
            android:layout_height="110dp"
            app:cardCornerRadius="15dp"
            android:layout_margin="5dp"
            android:layout_gravity="center"
            android:layout_weight="1">
            <ImageView
                android:id="@+id/budyimg"
                android:scaleType="fitXY"
                android:layout_width="match_parent"
                android:layout_height="match_parent"

                android:src="@drawable/img1"/>
        </androidx.cardview.widget.CardView>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_gravity="top"
            android:layout_weight="1"
            android:padding="5dp"
            android:layout_marginTop="5dp"
            >
            <TextView
                android:id="@+id/budyname"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/personName"
                android:textSize="15sp"
                android:textColor="@android:color/black"/>
            <TextView
                android:id="@+id/budydate"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/personDob"
                android:textSize="15sp"
                android:textColor="@android:color/black"/>
            <TextView
                android:id="@+id/budycount"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="@string/persondaysToGo"
                android:textColor="@color/orange"
                android:textSize="15sp"/>
        </LinearLayout>
        <ImageView
            android:id="@+id/budyfav"
            android:padding="5dp"
            android:layout_width="100px"
            android:layout_height="100px"
            android:layout_weight="1"
            android:layout_gravity="center"
            android:src="@drawable/ic_heart_greyfill"/>
    </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Now ,lets code for these components,

package your_package_name;

import android.content.Intent;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;

public class ThrdActivity extends AppCompatActivity implements ClickItemListenerRcyclrv{
    private static final int REQCODE_NEWENTRY = 301;
    RecyclerView rcLstBuddies;
    BDYListAdapter adapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        FloatingActionButton fab = findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent toNewEntry=new Intent(ThrdActivity.this,EntryActivity.class);
                startActivityForResult(toNewEntry,REQCODE_NEWENTRY,null);
            }
        });
//setting Recycler View and Its Adapter.
        rcLstBuddies=findViewById(R.id.rccylv_lstbuddy);
        adapter = new BDYListAdapter(this,this);
        rcLstBuddies.setAdapter(adapter);
        rcLstBuddies.setLayoutManager(new LinearLayoutManager(this));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
       //You can show settings prefernces or settings activity
            return true;
        }

        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if(requestCode==REQCODE_NEWENTRY && resultCode==RESULT_OK){
        // YOu can proceed with form of adding person and send result back to this activity
       // here data will be caught and you can proceed
        }
    }

}

For Recyler View and to fill data in view ,we require Adapters and Onclicklisteners .Let’s implement it.

First Lets Implement OnClickListener on Recycler View Item.

package your_package_name;

public interface ClickItemListenerRcyclrv {
    public void onItemClick(int position);
}

Implement it on Third Activity, When i click on recycler view each item , it should go to profile page.Add Below code to third activity.

@Override
public void onItemClick(int position) {
    Intent toProfile=new Intent(ThrdActivity.this,Bdyprofile.class);
    toProfile.putExtra("pname",adapter.mBdys.get(position).getBdy_name());
    startActivity(toProfile);
}

Now we implement Recycler View Adapter :

package your_package_name;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

class BDYListAdapter extends RecyclerView.Adapter<BDYListAdapter.MyBuddyViewHolder> {
    final LayoutInflater mInflater;
    public List<BDYentity> mBdys;
    ClickItemListenerRcyclrv listenerRcyclrv;
    int[] img=new int[10];

    public BDYListAdapter(Context thrdActivity,ClickItemListenerRcyclrv listener) {
        mInflater=LayoutInflater.from(thrdActivity);
        listenerRcyclrv=listener;
        img= new int[]{R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5,R.drawable.img6,R.drawable.img4,R.drawable.img5,R.drawable.img6};
        mBdys=new ArrayList<>();
        mBdys.add(new BDYentity(1,"Shreeja Munit","19 March 1992","20 days",1));
        mBdys.add(new BDYentity(2,"Shreee Deshmukh","2 Jan 1987","25 days",0));
        mBdys.add(new BDYentity(3,"Shriiiii Lalwani","4 May 2007","1 days",0));
        mBdys.add(new BDYentity(4,"Shreni Nahar","18 July 1987","5 days",0));
        mBdys.add(new BDYentity(5,"Shreji Kasliwal","30 Oct 1936","7 days",0));
        mBdys.add(new BDYentity(6,"Shrenika Chudiwal","11 Feb 1963","26 days",0));
        mBdys.add(new BDYentity(7,"Shrenu Medhne","5 Dec 1985","88 days",0));
        mBdys.add(new BDYentity(8,"Sainik Dagde","16 April 1993","65 days",0));
        mBdys.add(new BDYentity(9,"Shreyas Shaha","1 Nov 1995","42 days",0));
    }

    @NonNull
    @Override
    public MyBuddyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View itemView = mInflater.inflate(R.layout.rcyclr_bdycell, parent, false);
        return new MyBuddyViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull MyBuddyViewHolder holder, int position) {
        if (mBdys != null) {
            BDYentity current = mBdys.get(position);
            holder.bdyimg.setImageDrawable(mInflater.getContext().getResources().getDrawable(img[position]));
            holder.bdyname.setText(mBdys.get(position).getBdy_name());
            holder.bdydate.setText(mBdys.get(position).getBdy_bornDate());
            holder.bdycount.setText(mBdys.get(position).getDaysToGo()+"");
            if(mBdys.get(position).getIsFavorite()==1){
                holder.bdyfav.setImageDrawable(mInflater.getContext().getResources().getDrawable(R.drawable.ic_heart_oraangefill));
            }else holder.bdyfav.setImageDrawable(mInflater.getContext().getResources().getDrawable(R.drawable.ic_heart_greyfill));


        } else {
            // Covers the case of data not being ready yet.
            holder.bdyname.setText("No Birthday's Found");

        }
    }

    @Override
    public int getItemCount() {
        return mBdys.size();
    }

    public class MyBuddyViewHolder extends RecyclerView.ViewHolder{
        final ImageView bdyimg,bdyfav;
        final TextView bdyname,bdydate,bdycount;

        public MyBuddyViewHolder(@NonNull View itemView) {
            super(itemView);
            bdyimg=itemView.findViewById(R.id.budyimg);
            bdyfav=itemView.findViewById(R.id.budyfav);
            bdyname=itemView.findViewById(R.id.budyname);
            bdydate=itemView.findViewById(R.id.budydate);
            bdycount=itemView.findViewById(R.id.budycount);
            itemView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    listenerRcyclrv.onItemClick(getAdapterPosition());
                }
            });
        }
    }
}

On Item Click of Recycler View ,we will show Profile Page with their info and birthday date and day. Lets design Profile UI Screen.

activity code:

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Bdyprofile">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/orange"
        android:theme="@style/AppTheme.AppBarOverlay"
        >

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/orange"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_bdyprofile" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

content 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:orientation="vertical"
    tools:showIn="@layout/activity_bdyprofile"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:background="@color/orange">
    <androidx.cardview.widget.CardView
        android:layout_width="150dp"
        android:layout_height="150dp"
        app:cardCornerRadius="20dp"
        app:cardElevation="60dp"
        android:layout_gravity="center"
        android:layout_marginTop="60dp"
        android:layout_marginBottom="30dp"
        android:elevation="60dp">
        <ImageView
            android:id="@+id/imgUserHome"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/img1"/>
    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardvinfo"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/appicon"
        app:cardCornerRadius="30dp"
        android:layout_marginBottom="-20dp"
        android:padding="10dp"
        android:layout_marginTop="-100dp"
        app:cardBackgroundColor="@android:color/white">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="294dp"
            android:layout_marginTop="70dp"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="Shreeja Munit"
                android:textColor="@color/grey"
                android:textSize="20dp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="5dp"
                android:text="@string/personDob"
                android:textColor="@color/grey"
                android:textSize="18dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="18dp"
                android:text="@string/persondaysToGo"
                android:textColor="@color/grey"
                android:textSize="18dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="25dp"
                android:layout_marginTop="25dp"
                android:layout_marginRight="25dp"
                android:gravity="center"
                android:lineSpacingExtra="10dp"
                android:text="@string/infoperson"
                android:textColor="@color/grey"
                android:textSize="15dp" />


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="25dp"
                android:layout_marginTop="35dp"
                android:layout_marginRight="25dp"
                android:lineSpacingExtra="10dp"
                android:text="@string/connectwith"
                android:textColor="@color/grey"
                android:textSize="25dp"
                android:textStyle="bold" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:src="@drawable/facebook" />

                <ImageView
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:src="@drawable/instagram" />

                <ImageView
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:src="@drawable/pinterest" />

                <ImageView
                    android:layout_width="35dp"
                    android:layout_height="35dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginRight="20dp"
                    android:src="@drawable/twitter" />

            </LinearLayout>
        </LinearLayout>


    </androidx.cardview.widget.CardView>

</LinearLayout>

Let’s write back code for profile Activity,

package com.shrenoid.mybdyremind;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.graphics.Color;
import android.graphics.Shader;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ImageView;
import com.makeramen.roundedimageview.RoundedImageView;

public class Bdyprofile extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bdyprofile);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setTitle("Profile");
    }
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_profile, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.menu_more) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

This is How we implemented birthday Reminder Application UI. Thank You for your Time. I assure you enjoy the article and you must learned a lot.

Thank You , Keep Visiting. !!

Leave a Reply

Your email address will not be published. Required fields are marked *