Develop Reference

Using LinearLayout as Custom Options Menu for RecyclerView Item

Looking at many examples (mostly the messaging apps like Facebook etc) - I made a LinearLayout which describes all the options (in this case DELETE / EDIT etc along with few other icons) and added it to all items in my RecyclerView. When item in RecyclerView is Tapped and Hold I am making it visible with an animation.
This works fine for the most part but I feel like this is not the right way as each of my RecyclerView item has this LinearLayout attached but just hidden (taking too many resources) and then I am changing the Visibility State to visible or gone in case of Tap and Hold and Sigle Tap respectively.
My RecyclerView Item code is the following
<?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="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/item_content"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginRight="10dp"
android:orientation="horizontal">
<refractored.controls.CircleImageView
android:layout_gravity="top"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/item_image"
android:layout_width="26dp"
android:layout_height="26dp"
android:layout_marginTop="2dp"
android:src="#drawable/profile" />
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<TextView
android:id="#+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lineSpacingExtra="5dp"
android:layout_marginLeft="10dp"
android:paddingBottom="13dp"
android:paddingTop="13dp"
android:paddingLeft="15dp"
android:paddingRight="25dp"
android:text="111"
android:textColor="?attr/chatTextColor"
android:background="#drawable/rect_message_rec"
android:elevation="1dp"
android:textSize="15dp"/>
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/item_date_content"
android:layout_width="70dp"
android:layout_height="20dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="10dp"
android:visibility="gone"
android:background="#drawable/rect_white_border"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
<TextView
android:id="#+id/item_datetime"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="24m ago"
android:textSize="10sp"
android:gravity="center"
android:textColor="#a9a9b0"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/options_layout"
android:layout_width="wrap_content"
android:layout_height="45dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="30dp"
android:visibility="gone"
android:background="#drawable/rect_white_border"
android:elevation="10dp"
android:gravity="center"
android:layout_alignParentRight="true"
android:orientation="horizontal">
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_1"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_delete_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_2"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_edit_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_3"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_download_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_4"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_push_gif"
android:layout_marginRight="10dp"
/>
<pl.droidsonroids.gif.GifImageView
android:id="#+id/opt_5"
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/ic_pull_gif"
/>
</LinearLayout>
</RelativeLayout>
In android:id="#+id/options_layout" I am hiding it than showing it when user tap and holds But I felt like there are better ways to do this, If I Look at the other apps, it seems like its an overlay on top of while 'Activity' or Fragment as shown in the following screenshot
The above feels more responsive and light-weight. The other way I thought I could do this is to put this options_layout on my MainActivity and call it every time when user Tap and holds an item of RecyclerView but if this is how it is done then the question is how do you align the layout right on top of RecyclerView item as shown in the above screenshot, the option layout opens just at the right potion to the recycler view selected item.
Any idea how is it done?

View gets invalidated when keyboard opens up

Ok, I realize this is kind of a strange question but I have no idea what is causing it.
I have created a custom view with a square. I've added a few of those to the activity with defining it in the xml of the activity, so everyone of them has a unique ID. Each of them can be manipulated (change the color of the square) with for example the button click. All was working well until I clicked on some EditText I also had defined in my activity. And for some reason OnDraw() of my custom view fired. All of the custom views defined in that activity were updated with the same color.
I have no idea why this fires when I click the EditText. Any EditText. I have tried adding a new one and it is the same.
<?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"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/activity_horizontal_margin">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/editText"
android:singleLine="true"
android:layout_alignTop="#+id/button"
android:layout_toLeftOf="#+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Send"
android:id="#+id/button"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
<ListView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/modesList"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:layout_marginRight="#dimen/activity_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_above="#+id/editText" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Text"
android:id="#+id/textView3"
android:layout_above="#+id/editText"
android:layout_centerHorizontal="true" />
<com.zavod404.orglce.ledcontroller.ModeColorsView
android:id="#+id/experiment"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
This is my layout. Some of the custom view are on other layouts and they too get updated when I click on whichever EditText.

Better way to divide screen and reuse element in activity

I´m a bit lost.
I´m developping my first Android app, and I´m not sure about the better way to implement some activities.
No my problem is than in my app, I have to divide the screen in two equals parts, one side for each player. Each side has two TextView, some buttons, etc, the same for both player, but one the sides rotated 180 degrees relative to the other.
What would be the better way to do that?
Define a whole layout and repeat the same layout inside for each player? I think this would be the worst solution because the management of the listeners for the views would be duplicated and more complicated.
Use a layout to define the player views and put it in a ListView or Table with two items/rows, using a custom adapter to unify the management of the listeners? In this case I don´t know how to divide the screen in two equals parts and fit the whole screen...
Use fragments, defining a fragment to define the player a put it twice in the layout?
Another idea.....
Could anyone help me and tell me the better way to do that in Android and the better way in terms of management and performance?
Thanks in advance.

I finally decided to use the include tag in my root layout this way:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dip"
android:orientation="vertical"
tools:context="com.example.cdp.mispartidas.actividades.Duel">
<include android:id="#+id/player0"
android:layout_gravity="top"
android:rotation="180"
android:layout_weight="1"
android:layout_marginBottom="10dp"
layout="#layout/player_duel"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/holo_blue_dark"/>
<include android:id="#+id/player1"
android:layout_gravity="bottom"
android:layout_weight="1"
android:layout_marginBottom="10dp"
layout="#layout/player_duel"/>
Now my doubt is the better way to manage the listeners. In the "player_duel" layout I have two buttons that modify the content of a TextView, another button for another task, and Dialog that has to appear when click on the TextView, etc.
Now I have all the View duplicated. I can identify then by using the corresponding layout, but how I could unify the event listeners management?
Regards

player_duel.xml
<LinearLayout>
<TextView android:id="#+id/tv_0"/>
<Button android:id="#+id/btn_0"/>
<Button android:id="#+id/btn_1"/>
<Button android:id="#+id/btn_2"/>
</LinearLayout>
OnClickListner listener = new OnClickListener(){
public void onClick(View v){
if(v.getParent()!=null && v.getParent().getId() == R.id.player0){
swicth(v.getId()){
case R.id.tv_0:
break
case R.id.btn_0:
break
case R.id.btn_1:
break
case R.id.btn_2:
break
}
}else if(v.getParent()!=null && v.getParent().getId() == R.id.player1){
......
}
}
};
((ViewGroup)findViewById(R.id.player0)).findViewById(R.id.tv_0).setOnClickListener(listener);
......

This is the layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="10dp">
<RelativeLayout
android:id="#+id/leftside"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="left"
android:orientation="vertical"
android:layout_gravity="left"
android:padding="10dp">
<ImageButton android:id="#+id/diceduel"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/dice"
android:scaleType="center"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_gravity="top"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<ImageButton android:id="#+id/changeduel"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_autorenew_white_24dp"
android:background="#drawable/roundbutton"
android:scaleType="fitXY"
android:padding="10dp"
android:focusable="false"
android:focusableInTouchMode="false"
android:layout_gravity="bottom"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="false"
android:layout_alignParentBottom="true" />
<TextView
android:layout_width="40dp"
android:layout_height="40dp"
android:id="#+id/diceresult"
android:textAlignment="center"
android:layout_below="#+id/diceduel"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:textSize="30dp"
android:gravity="center" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:layout_gravity="center"
android:layout_weight="1" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/playername"
android:gravity="center"
android:paddingTop="10dp"
android:textSize="20dp"
android:maxLines="1"
android:ellipsize="marquee"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:textColor="#android:color/black" />
<TextView
android:id="#+id/scoreduel"
android:layout_alignParentLeft="false"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:textSize="100dp"
android:layout_weight="1"
android:textStyle="bold"
android:maxLines="1"
android:ellipsize="none"
android:layout_gravity="center"
android:textColor="#android:color/black"
android:layout_below="#+id/playername"
android:layout_alignParentBottom="true" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/rightside"
android:layout_alignParentLeft="true"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="vertical"
android:layout_gravity="right"
android:padding="10dp">
<ImageButton android:id="#+id/sumduel"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_add_white_24dp"
android:background="#drawable/roundbutton"
android:scaleType="fitXY"
android:padding="10dp"
android:layout_gravity="top"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" />
<ImageButton android:id="#+id/substractduel"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="#drawable/ic_remove_white_24dp"
android:background="#drawable/roundbutton"
android:scaleType="fitXY"
android:padding="10dp"
android:layout_gravity="bottom"
android:layout_alignParentLeft="false"
android:layout_alignParentTop="false"
android:layout_alignParentEnd="false"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="false" />
</RelativeLayout>
I finally found the solution by defining the two-views array and using the "fake" viewholder. I define a listener for all the common views in the layout, and store the index as property in the constructor, so in the listener I only have to refer the proper item in the array with the index.

RecyclerView item touch to highlight

I am using a RecyclerView and I am not able to see any feedback when I touch on the item of the RecyclerView. How do I achieve it?
I am trying to show a feedback to the user when they are touching the row of RecyclerView. Something like a ripple effect.
I want to know how to achieve it in a specific row of the RecyclerView.
This is the recycler view's custom row layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/drawer_row"
android:background="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_toEndOf="#+id/navigation_image"
android:layout_toRightOf="#+id/navigation_image"
android:textSize="17sp" />
<ImageView
android:id="#+id/navigation_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp" />
<TextView
android:id="#+id/horizontal_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#F1F1F1" />
</RelativeLayout>
This is the layout of the Activity having the RecyclerView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/windowBackground">
<RelativeLayout
android:id="#+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_alignParentTop="true"
android:background="#drawable/ic_drawer_header">
<ImageView
android:id="#+id/circle_imageview"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#drawable/profile_pic"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="John Doe"
android:textSize="20sp"
android:textColor="#ffffff"
android:layout_below="#+id/circle_imageview"
android:layout_alignLeft="#+id/circle_imageview"
android:layout_alignStart="#+id/circle_imageview"
android:layout_marginTop="5dp" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Transaction Technologies"
android:layout_below="#+id/textView"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView"
android:textColor="#ffffff"
android:layout_marginTop="5dp" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/nav_header_container" />
</RelativeLayout>
I just need to highlight/give feedback of the row which is being touched by the user. How do I achieve it?
Thanks in advance.

You need to add android:focusable="true" in your custom row item for RecyclerView
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/drawer_row"
android:background="?android:selectableItemBackground"
android:focusable="true"
android:clickable="true" >
</RelativeLayout>

You can add a Ripple effect by using THIS LIBRARY.Include it in your Gradle files using.
compile 'com.thomsonreuters:rippledecoratorview:+'
Simply put your row layout in a RippleDecoratorView.For eg:
<com.thomsonreuters.rippledecoratorview.RippleDecoratorView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="4dp"
rdv:rdv_rippleColor="#android:color/holo_blue_dark"
rdv:rdv_rippleAnimationFrames="60"
rdv:rdv_rippleAnimationPeakFrame="15"
rdv:rdv_rippleMaxAlpha="0.8"
rdv:rdv_rippleAnimationDuration="600"
rdv:rdv_rippleRadius="50dp">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/drawer_row"
android:background="?android:attr/selectableItemBackground"
android:clickable="true">
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp"
android:layout_toEndOf="#+id/navigation_image"
android:layout_toRightOf="#+id/navigation_image"
android:textSize="17sp" />
<ImageView
android:id="#+id/navigation_image"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginLeft="30dp"
android:layout_marginStart="30dp" />
<TextView
android:id="#+id/horizontal_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignParentBottom="true"
android:background="#F1F1F1" />
</RelativeLayout>
</com.thomsonreuters.rippledecoratorview.RippleDecoratorView>
Or you can use any of these libs acc to your requirement:
1>https://github.com/balysv/material-ripple
2>https://github.com/siriscac/RippleView
3>https://github.com/traex/RippleEffect

I can help you but I will need some feedback from you as well. In the onCreateVIewHolder inside your recycler View adapter you must have defined textViews and assigned it to the elements inside the sample recycler view. Add this. Make sure you define the layout outside the function so its accessible throughout the class
RelativeLayout layout;
layout=(RelativeLayout)view.findViewById.(R.layout.drawer_row)
Then go to you recycler view adapter and in the onBindViewHolder define
holder.layout.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
// Handle onClick event
}
});
In the onClick event you can add any kind of feedback you want to the user to experience such as starting a new activity, toasts, messages or in this case a ripple effect. You can use a custom library for ripples such as these
Ripple effect for lollipop views
https://android-arsenal.com/details/1/980
https://github.com/balysv/material-ripple

Ripple effects are not supported in pre-Lollipop devices.
Still use this material-ripple
compile 'com.balysv:material-ripple:1.0.2'
Apply ripple on holder.drawView
MaterialRippleLayout.on(holder.drawerView)
.rippleColor(Color.RED)
.create();
Or you can apply from xml
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/ripple"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button inside a ripple"/>
</com.balysv.materialripple.MaterialRippleLayout>

view sliding over layout

I have relative layout. Within which I have many views like edit text, text views and so on. I do lots of animations in that. Everything was perfectly fine. But at one point, I have a requirement.
It is the password page. Create and confirm password. Two edittexts one after another. If the password doesnt meet the requirement, a plain orange view should slide up with error message "Invalid password".
So I put create and confirm password in linear layout. The linear layout will slide up, letting user type in passwords. After validation, if there is an error, the linear layout should slide down and the plain view will slide up. I kept the view invisible and when required I made it visible and wrote the code to slide up. The same code works when I just use single edit text instead of linear layout. But it is not working when using linear layout. Am I doing something wrong?
Adding code to it. The code specific to this issue starts with till the end of coding
I declared linear layout as view and NOT VIEWGROUP.
EDIT: After doing analysis, I found that the view I am trying to slide up after sliding down the layout is hidden somewhere in the view hierarchy.
view.bringToFront() helps to bring the error view to the front and slides up.
But after that the problem is, after my linear layout slide down, the error view is not sliding up straight away. Because I am using bringToFront(), it displays the view first on the whole screen (with background color as orange) and then the sliding starts.
I am not sure whether it is correct but I fixed this issue like this.
no background color has been given to the view
I used errorView.bringToFront () and errorView.setVisibility(true) in the animationEnd() of a Layout slidingdown animation listener.
I defined sliding up animation for the errorView in the same animationEnd() of layout sliding down listener
In the animationStart() of errorView sliding up animation listener, I defined the background color of the errorView. Now its working as expected.
But let me know better way of doing this.
//Declaration
View greyView, orangeView, yellowView, blueView, orangeErrorView, letsGetStartedView, welcomeBckView, passwordMasterLayout, orangePwdErrorView;
TextView welcomeText,errorTextView, letsGetStartedTextView, welcomeBckTxtView, errorPwdMsg;
//Password Error Handling
orangePwdErrorView = v.findViewById(R.id.orangePasswordErrorView);
errorPwdMsg = (TextView) v.findViewById(R.id.errorPasswordMessage);
//Layout code
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/sample_main_layout">
<FrameLayout
android:id="#+id/sample_content_fragment"
android:layout_weight="76.4"
android:layout_width="match_parent"
android:layout_height="0px" />
<FrameLayout
android:id="#+id/bottomPanel"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="23.6">
</FrameLayout>
</LinearLayout>
sample_content_fragment framelayout takes the below code
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:id="#+id/grey"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#58595B" />
<View
android:id="#+id/orange"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<View
android:id="#+id/yellow"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FDB518"
android:visibility="invisible" />
<View
android:id="#+id/blue"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#1893D2"
android:visibility="invisible" />
<TextView
android:layout_width="260dp"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/welcome"
android:id="#+id/welcomeTextView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="51dp"
android:textColor="#ffffff"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"
/>
<ImageView
android:layout_height="60dp"
android:layout_width="60dp"
android:id="#+id/clinicloud_logo"
android:clickable="true"
android:src="#drawable/clinicloud_icon"
android:layout_marginRight="50dp"
android:layout_alignParentStart="true"
android:layout_marginStart="35dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="40dp" />
<View
android:id="#+id/orangeErrorView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<EditText
android:layout_width="match_parent"
android:layout_height="90dp"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/emailEditText"
android:text="#string/enter_email"
android:layout_gravity="center"
android:background="#f4f4f4"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:visibility="invisible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"/>
<!--UI components for welcome back page-->
<View
android:id="#+id/welcomeBackView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#134F9F"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/welcome_back"
android:id="#+id/welcomeBackTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="90dp"
android:ems="10"
android:id="#+id/password"
android:layout_alignTop="#+id/emailEditText"
android:layout_alignParentStart="true"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:text="Password"
android:visibility="invisible"
android:background="#d2d1d1"
/>
<!--UI components for Let's get started page-->
<View
android:id="#+id/letsGetStartedView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#5C3A91"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Let&apos;s get started"
android:id="#+id/letsGetStartedTxtView"
android:textColor="#ffffff"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_alignStart="#+id/clinicloud_logo"
android:textSize="20dp"
android:textStyle="bold"
android:visibility="invisible"/>
<!--Linear layout to show the create and confirm password-->
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="180dp"
android:gravity="bottom"
android:layout_alignBottom="#+id/emailEditText"
android:layout_alignParentStart="true"
android:weightSum="1"
android:id="#+id/passwordMasterView"
android:visibility="invisible">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/createPwd"
android:layout_weight="0.50"
android:background="#F4F4F4"
android:text="#string/create_password"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:id="#+id/confirmPwd"
android:layout_weight="0.50"
android:background="#E3E3E3"
android:text="#string/confirm_password" />
</LinearLayout>
<!-- To show password errors-->
<LinearLayout
android:id="#+id/orangePasswordErrorView"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F26724"
android:visibility="invisible" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:id="#+id/errorPasswordMessage"
android:layout_alignTop="#+id/welcomeTextView"
android:layout_centerHorizontal="true"
android:textColor="#ffffff"
android:visibility="invisible"
/>
<!-- To show password errors-->
</RelativeLayout>
The java logic is in https://stackoverflow.com/questions/30523599/sliding-up-and-down-android
Please direct for any incorrect codings

I kept the view invisible and when required I made it visible and wrote the code to slide up.
I think you must do it in DialogFragment or custom AlertDialog that will be shown above your layout, if dont want to do this try envelop your RelativeLayout in FrameLayout and adding in it LinearLayout for example but visout your code difficult to say in what problem it is

You should consider using a library for the sliding panel, one that I've had excellent experiences with (and supports the functionality that your after) is umano's AndroidSlidingUpPanel. https://github.com/umano/AndroidSlidingUpPanel