Jak utworzyć przezroczystą warstwę nad elementem CardIView?

Question

Potrzebuję przezroczystej warstwy na konkretnej Griditem w miejscu, gdzie klikam ikonę RED MARKED (3 kropki). Mam przezroczystą warstwę. Ale to nie jest za dużo. Mam ją na samym początku aktywności. Jak to zrobić?

To jest mój kod:

adapter Class:

private void createDialogBox() { 
    AlertDialog.Builder builder = new AlertDialog.Builder(context); 
    final AlertDialog dialog = builder.create(); 
    dialog.getWindow().clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND); 
    View dialogLayout = LayoutInflater.from(context).inflate(R.layout.demo_dialog, null); 
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); 
    dialog.setView(dialogLayout, 0, 0, 0, 0); 


    dialog.setOnShowListener(new DialogInterface.OnShowListener() { 
     @Override 
     public void onShow(DialogInterface d) { 
     } 
    }); 
    dialog.getWindow().setLayout(WindowManager.LayoutParams.MATCH_PARENT, WindowManager.LayoutParams.MATCH_PARENT); 
    dialog.show(); 
} 

demo_dialog.xml:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/linearLayout" 
    style="@style/LinearLayout_mm" 
    android:layout_gravity="center" 
    android:gravity="center" 
    android:onClick="Click" 
    android:orientation="vertical" 
    android:theme="@style/cust_dialog"> 

    <ImageView 
     android:id="@+id/pullToRefresh_img" 
     style="@style/LinearLayout_mm" 
     android:onClick="Click" 
     android:src="@drawable/ig_dash_front1" /> 

</LinearLayout> 

style.xml:

<style name="cust_dialog" parent="@android:style/Theme.Holo.NoActionBar.Fullscreen"> 
     <item name="android:textColor">@color/white</item> 
     <item name="android:background">#80000000</item> 
     <item name="android:windowFrame">@null</item> 
     <item name="android:windowBackground">@color/black</item> 
     <item name="android:windowNoTitle">true</item> 
     <item name="android:windowIsFloating">false</item> 
     <item name="android:windowContentOverlay">@null</item> 
     <item name="android:windowTitleStyle">@null</item> 
     <item name="android:colorBackgroundCacheHint">@null</item> 
     <item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item> 
     <item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item> 
     <item name="android:gravity">center</item> 
     <item name="colorAccent">#00f3f4f8</item> 
    </style> 

Answer 1

Myślę, że i ale zadziałało .. !!

Możesz użyć funkcji widoczności w połączeniu z układem ramki, aby uzyskać tło przezroczystości. Dla Twojego zrozumienia zawarłem szczegółowy kod z wyjaśnieniem.

Wypróbuj to ..

To jest twój układ pojedynczego elementu xml. Może być trochę mylące, daj mi znać.

Krok 1: Musisz stworzyć Relatywny pokaz w widoku cardview, jak poniżej.

<android.support.v7.widget.CardView 
android:layout_width = "160dp" 
android:layout_height = "176dp" 
app:cardCornerRadius = "5dp" 
app:cardElevation = "5dp"> 

<RelativeLayout 
android:layout_width = "match_parent" 
android:layout_height = "match_parent" 
android:gravity = "center"> 

.... 
.... // Here we need to do some trick to make the pop up appear. 

</RelativeLayout> 

</android.support.v7.widget.CardView> 

Krok 2: To ty rzeczywisty układ widoczny na obciążenia. Umieść swój widok obrazu wewnątrz względnego poziomu gry, jak poniżej. Dodaj menu i opcje tytułu u dołu, korzystając z układu klatek połączonego z widokiem. Zobacz poniższy kod.

<ImageView 
    android:id = "@+id/item_image" 
    .... 
    android:layout_gravity = "center" 
    android:background = "@android:color/transparent" 
    android:src = "@drawable/tes"/> 

    <FrameLayout 
    android:id = "@+id/frame_1" 
    android:layout_width = "match_parent" 
    android:layout_height = "32dp" 
    android:layout_alignParentBottom = "true"> 

    <View 
     android:id = "@+id/overlay_1" 
     android:layout_width = "match_parent" 
     android:layout_height = "32dp"/> 

    <RelativeLayout 
     android:layout_width = "match_parent" 
     android:layout_height = "wrap_content" 
     android:layout_alignParentBottom = "true" 
     android:gravity = "center"> 

     <TextView 
     android:id = "@+id/item_title" 
     ... 
      ... /> 

     // Three dots 
     <ImageButton 
     android:id = "@+id/item_menu" 
     .. 
     android:layout_alignParentRight = "true" 
     android:background = "@android:color/transparent" 
     android:scaleType = "centerCrop" 
     android:src = "@drawable/abc_ic_menu_moreoverflow_mtrl_alpha"/> 

    </RelativeLayout> 
    </FrameLayout> 

Krok 3 Połowa realizacji gdzie zakończonego tutaj. Teraz umieść drugi FrameLayout poniżej istniejącego układu ramki.W tym nowo dodanym układzie ramek zdefiniowano trzy przyciski, jak poniżej.

<FrameLayout 
    android:id = "@+id/frame_2" 
    android:layout_width = "match_parent" 
    android:layout_height = "match_parent" 
    android:layout_alignParentBottom = "true" 
    android:visibility = "gone"> 

    <View 
     android:id = "@+id/overlay_2" 
     android:layout_width = "match_parent" 
     android:layout_height = "match_parent"/> 

    <LinearLayout 
     android:layout_width = "match_parent" 
     android:layout_height = "match_parent" 
     android:layout_alignParentBottom = "true" 
     android:gravity = "center" 
     android:orientation = "vertical"> 

     <Button 
     android:id = "@+id/b1" 
     ... 
     android:text = "DETAIL"/> 

     <Button 
     android:id = "@+id/b2" 
     ... 
     android:text = "CART"/> 

     <Button 
     android:id = "@+id/b3" 
     ... 
     android:text = "CHECKOUT"/> 
    </LinearLayout> 
    </FrameLayout> 

Teraz Twój plik XML jest gotowy. Więc masz 1 widok obrazu, 2 framelayouts zawinięte w RelativeLayout, który jest pod Cardview.

Teraz czas na kod.

W adapterze Recyclerview, utwórz na końcu poniższą funkcję, po prostu skopiuj wklej poniższy kod. Ma to na celu wygenerowanie półprzezroczystego tła po pojawieniu się trzech przycisków.

adapter Class

public void setOverlay(View v, int opac) { 
    int opacity = opac; // from 0 to 255 
    v.setBackgroundColor(opacity * 0x1000000); // black with a variable alpha 
    FrameLayout.LayoutParams params = 
      new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT, FrameLayout.LayoutParams.MATCH_PARENT); 
    params.gravity = Gravity.NO_GRAVITY; 
    v.setLayoutParams(params); 
    v.invalidate(); 
    } 

teraz na uchwycie Bindview napisać poniższy kod.

@Override 
    public void onBindViewHolder(final CustomViewHolder holder, final int position) { 

// Initally image with title and menu is shown. 

    holder.menu.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
     holder.ff.setVisibility(View.GONE); // this will hide the title and menu button. 
     holder.ff2.setVisibility(View.VISIBLE); // will show you the three button popup. 
     } 
    }); 

    holder.b1.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
     holder.ff.setVisibility(View.VISIBLE); 
     holder.ff2.setVisibility(View.GONE); 
     } 
    }); 
    holder.itemTitle.setText(memList.get(position)); 

// Hero of the code. This will set the translucent background when 3 buttons appear. 
    setOverlay(holder.overlayPager_1, 140); 
    setOverlay(holder.overlayPager_2, 200); 

    } 

znaleźć załączony zrzut ekranu

UWAGA: Jeśli chcesz krótki kod, zrobię to dla lepszego zrozumienia. Zapytania daj mi znać.

Szczęśliwe kodowanie .. !!

Answer 2

myślę, że PopupMenu to, co chcesz, a nie AlertDialog. Załóżmy, że 3-kropka-ikona nazywa more_icon, można zdefiniować PopupMenu tak:

more_icon.setOnClickListener(new View.OnClickListener() { 
     @Override 
     public void onClick(View v) { 
      PopupMenu popupMenu = new PopupMenu(v.getContext(), v); 
      popupMenu.inflate(R.menu.show_more_menu); 

      //registering popup with OnMenuItemClickListener 
      popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() { 
       public boolean onMenuItemClick(MenuItem item) { 
        if (item.getItemId() == R.id.view_detail_item) { 
         // view detail was clicked 
         return true; 
        } else if (item.getItemId() == R.id.add_to_cart_item) { 
         // add to cart was clicked 
         return true; 
        } else if (item.getItemId() == R.id.checkout_item) { 
         // checkout was clicked 
         return true; 
        } 
        return false; 
        } 
       }); 

      popupMenu.show(); 
     } 
    } 

Następnie trzeba plik xml dla rzeczywistej PopupMenu, zwany show_more_menu w folderze main/res/menu.

<?xml version="1.0" encoding="utf-8"?> 
<menu xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:id="@+id/view_detail_item" 
      android:title="View Detail" > 
    </item> 
    <item android:id="@+id/add_to_cart_item" 
      android:title="Add to Cart" > 
    </item> 
    <item android:id="@+id/checkout_item" 
      android:title="Checkout" > 
    </item> 
</menu> 

Można wtedy zastosować styl do PopupMenu jak wyszczególniono w this SO-answer, gdzie można również zmienić tło na przezroczyste.