CODEWITHSUNDEEP
androidandroid-cardview
taraloca
taraloca

Reputation: 9135

Open CardView on Top of ListView Android

I want to click on a list item (vertical) and have this open a RecycleView/CardView on top of list with the list dimmed or faded behind the horizontal CardView. OnItemClicked, I trigger a new activity...for the cards. This works, but I want it floating on top of my list centered vertically.

Here is the code that works for separate:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context="${relativePackage}.${activityClass}"
    android:layout_margin="@dimen/hourly_layout_margin"
    android:animateLayoutChanges="true">

Layout with listView here and I want the card_view_container to be centered over top when an item in list is selected

<!-- layouts invisible or visible depending whether user chose to view details -->
<RelativeLayout
    android:id="@+id/card_view_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    android:backgroundTint="@color/bright_foreground_inverse_material_light">
    <FrameLayout
        android:id="@+id/vg_cover"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        tools:ignore="UselessParent"/>
</RelativeLayout>

Click a listView row:

@Override
public void onItemClick(AdapterView<?> parent, View view, int position,
                        long id) {
    Intent intent = new Intent(getActivity(), HourlyDetailsActivity.class);
    intent.putExtra("POSITION", position);
    startActivity(intent);
}

but this replaces the original layout and I want it faded...like an overlay comes in.

Upvotes: 2

Views: 425

Answers (2)

Moinkhan
Moinkhan

Reputation: 12932

You can do it using animation..

fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
           android:interpolator="@android:anim/accelerate_interpolator"
           android:fromAlpha="0.0" android:toAlpha="1.0"
           android:duration="500" />

fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
           android:interpolator="@android:anim/accelerate_interpolator"
           android:fromAlpha="1.0" android:toAlpha="0.0"
           android:fillAfter="true"
           android:duration="500" />

Now just apply this animation on activity transaction.

Intent i = new Intent(this, HourlyDetailsActivity.class);
startActivity(i);
overridePendingTransition(R.anim.fade_in, R.anim.fade_out);

Upvotes: 0

Shahzeb
Shahzeb

Reputation: 3734

Implement a Floating Activity

In AndroidManifest.xml

<activity
    android:name=".FloatingActivity"
    android:label="@string/title_activity_floating"
    <!-- Use Translucent theme to get transparent activity background 
     and NoTitleBar to avoid super old style title bar ;) -->
    android:theme="@android:style/Theme.Translucent.NoTitleBar">
</activity>

Upvotes: 1

Related Questions