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:
Some Resources are needed:
- Image App Logo and Textual App Logo
- Fake Data as names, birth date, photos.
- Colors Values.
- 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. !!