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. !!