Making a fragment translucent in android

Question

I have a fragment A that covers up the whole screen and another fragment B that is at the bottom of the screen of 50dp.Fragment B overlaps some bottom portion of fragment A.I want to make fragment B translucent so the overlapped portion of fragment A is seen.

I tried using Theme.Translucent,used framelayouts,used setAlpha() method,but didn't get the desired result.Just like we have a translucent actionbar in android,similarly I want to make my fragment B translucent.

I tried referring to these links... link1 : making the background translucent

link 2: https://zaman91.wordpress.com/2010/03/22/android-how-to-create-transparent-or-opeque-background/

link3: Making a android button’s background translucent,

some code to help you understand..

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res/com.examples"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@null"
    android:fitsSystemWindows="true" >

    <!-- Your normal content view -->

    <com.examples.views.SlidingUpPanelLayout
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center|top" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/icn_actionbar_background"
                android:minHeight="?attr/actionBarSize" >

                <com.examples.views.CustomTextView
                    android:id="@+id/toolbar_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:gravity="center"
                    android:singleLine="true"
                    android:text="Toolbar Title"
                    android:textColor="@color/action_bar_text"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    app:font="@string/font_avenirMedium" />
            </android.support.v7.widget.Toolbar>

            <!-- Say this is Fragment A -->
            <fragment
                android:id="@+id/frag_fragmentA"
                android:name="com.examples.fragments.FragmentA"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center" />

            <!-- The rest of your content view -->

        </LinearLayout>

                      <!-- this is fragment B -->
        <fragment
            android:id="@+id/fragment B"
            android:name="com.examples.fragments.MyFragmentB"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center|top" />
    </com.examples.SlidingUpPanelLayout>

    <LinearLayout
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="left|start"
        android:fitsSystemWindows="true" >

        <!-- Your drawer content -->

        <include
            android:id="@+id/left_drawer"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            layout="@layout/drawer_layout" />
    </LinearLayout>

</android.support.v4.widget.DrawerLayout>

the offset of 50dp is given in the SlidingPanelLayout itself..so only 50 dp of fragment B is visible.

In all these links Theme.Translucent is added to activity theme..but I want to create a theme that makes only that fragment translucent.

Any suggestions or help guys..deeply appreciated.Thanks.

@Skynet...will this make it translucent??...also with this code line..do I need to set any theme? — AndroidMech, Jan 23 '15 at 07:05
@AndroidMech do you wants to make fragmentA transaculate only ? the control on fragmentA will b enable ? — user1140237, Jan 23 '15 at 07:08
@user1140237 No..fragment A should be as it is...the fragment B that overlaps fragment A at the bottom of screen should be translucent..so content of fragment A is visible behind Frag B...I could have posted a image exactly what I want..but due to some org limits..I cant.. — AndroidMech, Jan 23 '15 at 07:13
@Skynet when I used your code..it made my fragment B totally pitch black..I want the layout of fragment A to be little bit visible behind fragment B. — AndroidMech, Jan 23 '15 at 07:15
Dont know what the problem is there - it gives me a translucent color in my code but I have used it in a Dialog Fragment - I would suggest to try with a different ColorDrawable. — Skynet, Jan 23 '15 at 07:17
Also I would suggest adding a screenshot with description of before and after effects for it to be descriptive and more understandable. — Skynet, Jan 23 '15 at 07:18
@Skynet I am really sorry about not been able to add an image to be more descriptive...but i can give you an example..it is similar to google play music..when you play a song a small player appears at the bottom over the songs list..say I want to make that player translucent...lets say songs list fragment is my fragment A and the player that appears below is fragment B that becomes visible when song is played..I want that player to be translucent or semi-transparent so the songs list behind the player is partially visible...can this give you a little bit more imagination of how it should be.. — AndroidMech, Jan 23 '15 at 07:25
I do understand - [Here](http://stackoverflow.com/questions/8465258/how-can-i-force-the-action-bar-to-be-at-the-bottom-in-ics) is a dirty solution. Please note - this may or may not work on Tablets. You will have to put in additional effort in order to make it work for Tablets and also would mean a lot of re-factoring your original code. — Skynet, Jan 23 '15 at 07:29
@Skynet will try referring that link as well..thanks..still if you have some more suggestion do let me know..:) — AndroidMech, Jan 23 '15 at 07:34
You wont believe I am working on something similar just that havent posted it on SO as of yet. [This](http://stackoverflow.com/questions/19311192/blur-background-behind-alertdialog) is another way of doing it. — Skynet, Jan 23 '15 at 07:35
does your fragments already overlap? Is the opacity the only issue? — Chris, Jan 23 '15 at 07:42
@Chris..yes Chris..the fragments do overlap..I have used a SlidingUpPanelLayout in my xml..and when i slide the fragment B it overlaps fragment A fully..and yes..i guess. opacity is the only issue..I will update the post with the xml code.. — AndroidMech, Jan 23 '15 at 07:49
@AndroidMech Why not set the background in the fragment B to be a semi-transparent color? If you're using this library https://github.com/umano/AndroidSlidingUpPanel (I can't say for sure you are since you're referring to com.example namespace), you have to also set the overlay attribute to true so that it doesn't push up the other fragment. This way, your overlay (fragment B) will be semi-transparent and will show on top of FragmentA when it's pulled up, giving you what you need. — kha, Jan 23 '15 at 08:26
@kha yes I am using that lib..actually not the whole lib..I ported that view class to my proj..so the rest i don't need wont be integrated .. — AndroidMech, Jan 23 '15 at 09:21
@AndroidMech Then can you do what I said? set overlay to true and make the background of fragment B to semi-transparent. It should work. If you don't have the overlay bit, you should copy that too. Don't forget to give them credit though in your app :). — kha, Jan 23 '15 at 09:48
@kha yes..i will definitely give them credit..I always do..i will try out that overlay attribute and let you know..it should work hopefully..:) — AndroidMech, Jan 23 '15 at 09:54
Instead of a second Fragment (B), can you make a bottom RelativeLayout in your first fragment and show hide it on demand? - Not a classy solution although! — Skynet, Jan 23 '15 at 10:20
@Skynet I am hiding and showing that fragment on demand..but when it is been shown..I want it to be translucent.. — AndroidMech, Jan 28 '15 at 11:45
Bro, can you set [this](https://www.dropbox.com/s/g2qhzld12p36wqz/bottom_bg_blur_02.png?dl=0) as your B fragment's background? Let me know if it works for you. — Skynet, Jan 28 '15 at 12:02
@Skynet yes I will try and let you know..Sorry for the delay..was off work for some time...thanks — AndroidMech, Feb 04 '15 at 13:28
@kha The SlidingPanelLayout class that I have been using probably is old one..Could you please suggest me link that contains that overlay attribute..coz there are a couple of versions of this class modified by different people.. thanks.. — AndroidMech, Feb 04 '15 at 13:30
@Skynet Nope bro..the background image you provided ain't giving the expected results.. — AndroidMech, Feb 05 '15 at 10:32

user1140237 · Answer 1 · 2015-01-23T07:43:45.580

You can add fragment in frame layout it will overlap..

Activity

    public class MainBaseFragmentActivity extends FragmentActivity {

    @Override
    protected void onCreate(Bundle arg0) {
        super.onCreate(arg0);
        setContentView(R.layout.main_fragment_container);
        getSupportFragmentManager().beginTransaction()
                .add(R.id.main_container, new FragmentScreenA()).commit();

    }

}

FragmentA 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="match_parent"
    android:background="#ff00ddff"
     >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn_screen_a"
        android:gravity="center_horizontal"
        android:text="A"
        android:textColor="#ffffff"
        android:textSize="100sp" />

    <Button
        android:id="@+id/btn_screen_a"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Go to Screen B" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" 
        android:text="Text From Fragment A" android:gravity="center" android:textSize="30sp"
        android:textColor="#ffffff" />

</RelativeLayout>

Fragmnet A Class

public class FragmentScreenA extends Fragment {
    private Button btn_screen_a;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    private View rootView;


    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        rootView= inflater.inflate(R.layout.fragment_screen_a, container, false);
        return rootView;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

            btn_screen_a = (Button) rootView.findViewById(R.id.btn_screen_a);
            btn_screen_a.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    getActivity().getSupportFragmentManager()
                            .beginTransaction()
                            .add(R.id.main_container, new FragmentScreenB())
                            .addToBackStack("FragmentScreenB").commit();
                }
            });


    }

FragmentB class

public class FragmentScreenB extends Fragment {

    private Button btn_screen_b;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
    }

    @Override
    public View onCreateView(LayoutInflater inflater,
            @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        rootView = inflater.inflate(R.layout.fragment_screen_b, container,
                false);
        return rootView;

    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

            btn_screen_b = (Button) view.findViewById(R.id.btn_screen_b);
            btn_screen_b.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    getActivity()
                            .getSupportFragmentManager()
                            .beginTransaction()
                            .replace(R.id.main_container, new FragmentScreenC())
                            .addToBackStack("FragmentScreenB").commit();
                }
            });

    }

    private View rootView;


}

Fragment B XMl layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:gravity="center" android:layout_weight="9"
        android:orientation="vertical" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:text="B"
            android:textSize="100sp" />

        <Button
            android:id="@+id/btn_screen_b"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Go to Screen C" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"  android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>

</LinearLayout>

![enter image description here][1]![enter image description here][2] this is for the solution which you asked.. Suggestion you can create multiple fragment in same screen. And that is proper way AFAIK

@Skynet pls check the layout of fragment B .. its trnasparent .. and if he wants he can make the portion visible(transparent) which he wants to display and rest of the portion he can make is color or fill the view which he wants to display. in the code which i gve bottom part is transparent — user1140237, Jan 23 '15 at 07:40
I might be color blind - Fragment B seems green to me and Fragment A seems Blue to me? — Skynet, Jan 23 '15 at 07:41
@Skynet yes may b bt by images you are checking the output anyways check the updated answer i made whole Fragement B layout transparent — user1140237, Jan 23 '15 at 07:44
Do you consider that fact that Fragment B should only be at the bottom of the layout and not overlap the whole screen - as that might distort clicks? — Skynet, Jan 23 '15 at 07:50
@user1140237 I have tried adding a frame layout..but the SlidingUpPanel that I have used gives me views issues..:( — AndroidMech, Jan 28 '15 at 11:48

Making a fragment translucent in android

1 Answers1