Alternative way for implementing a slidingdrawer that has now been deprecated since api 17

Question

In my app I have a sliding drawer with image buttons in them and when clicked it displays the image description and info. So basically I am only using one XML file and one Java file for this. (But I have noticed that adding more imagebuttons and mages to display it takes a while to load). And now that since API 17 is deprecating the sliding drawer leaves me a bit worried for future downloads of the app. Now my question is, is there a alternative way to achieve this without using sliding drawer or spinner. I don't really want to create a xml and java file for each image (I'll end up with 100+ xml's and java's) Here is my code that I have at the moment.

XML:

<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">

<ScrollView 
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">
   <RelativeLayout 
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"> 

<ImageView 
    android:id="@+id/iM1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitStart"
    android:adjustViewBounds="true"/>

</RelativeLayout>
</ScrollView>

<SlidingDrawer
    android:id="@+id/sD1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:content="@+id/content"
    android:handle="@+id/handle">

    <Button
        android:id="@+id/handle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/icon_1" />

    <RelativeLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" 
        android:background="@drawable/icon_background1">

        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" >

                <Button
                    android:id="@+id/asample"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/imageicon1"/>
                   .....

And Java:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN); 
    setContentView(R.layout.campsites);
    setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
    final SlidingDrawer slider = (SlidingDrawer) findViewById(R.id.sD1);
    final ImageView imageView = (ImageView) findViewById(R.id.iM1);
    slider.animateOpen();

    Button next = (Button) findViewById(R.id.asample);
    Button next1 = (Button) findViewById(R.id.bsample);
    ..........

    next.setOnClickListener(new View.OnClickListener() {

        public void onClick(View view) {
            imageView.setImageDrawable(getResources().getDrawable(R.drawable.asample));
            slider.animateClose();
        } 
    });
    next1.setOnClickListener(new View.OnClickListener() {

        public void onClick(View view) {
            imageView.setImageDrawable(getResources().getDrawable(R.drawable.bsample));
            slider.animateClose();
        } 
    });
    ............

Can anyone please help or have a suggestion on what to do?

Answer 1

This is a SlidingDrawer from the left, correct? If so, you can look into DrawerLayout.

This is part of the Android Support Library and you should be able to replace your XML with this instead fairly simply and be backwards compatible to API4

From that page, there is an example.

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

Some notes from that page

This layout demonstrates some important layout characteristics:

• The main content view (the FrameLayout above) must be the first child in the DrawerLayout because the XML order implies z-ordering and the drawer must be on top of the content. The main content view is set to match the parent view's width and height, because it represents the entire UI when the navigation drawer is hidden.
• The drawer view (the ListView) must specify its horizontal gravity with the android:layout_gravity attribute. To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL).
• The drawer view specifies its width in dp units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

Mostly the difference is that the DrawerLayout is top level and you put your XML within it. So something like this (totally untested):

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!-- your content surrounded by a layout to signify that it's actually content -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ScrollView 
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
           <RelativeLayout 
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"> 

                <ImageView 
                    android:id="@+id/iM1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:scaleType="fitStart"
                    android:adjustViewBounds="true"/>

            </RelativeLayout>
        </ScrollView>
    </RelativeLayout>
    <!-- your sliding menu in its own layout -->
    <LinearLayout 
        android:layout_gravity="start"
        android:layout_width="240dp"
        android:layout_height="wrap_content"> 
        <Button
            android:id="@+id/handle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/icon_1" />

        <RelativeLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:background="@drawable/icon_background1">

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <RelativeLayout
                    android:layout_width="fill_parent"
                    android:layout_height="fill_parent" >

                    <Button
                        android:id="@+id/asample"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/imageicon1"/>
                       .....
    </LinearLayout>
</android.support.v4.widget.DrawerLayout>

Answer 2

i thinks This is a good alternative
AFAIK it does not use SlidingDrawer and you can modify the direction of the drawer

Answer 3

The SlidingUpPanel from the guys of the app Umano seems the best way right now. You can find it in: https://github.com/umano/AndroidSlidingUpPanel

I found the information about it in this other SOF post: vertical DrawerLayout or SlidingPaneLayout :D

Edit: This one also looks very promising: https://github.com/6wunderkinder/android-sliding-layer-lib (in the youtube video seems to work just from right to left and left to right, but if you download the actual demo app, you will see that it´s also possible to go from bottom to top and top to bottom)

Answer 4

I would rather suggest a simple sliding menu, that i created myself.

concept i used

Slider button and content panel

initially slider button is to the left(in my example) , when you click on it ,it shifts and the content pane is made visible

how i achieived this

I played with the margin left , so when you press the slider button the content pane (hidden initially) becomes as wide as screen_width/3 , and when you press it again it hides..

heres my code to it.

public class MainActivity extends Activity  {
    boolean toggle_open=false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
                
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
    
    public void open(View v){
        switch (v.getId()) {
        case R.id.imageButton1:
            if(!toggle_open){
                RelativeLayout header=(RelativeLayout)findViewById(R.id.header);
                Display size=getWindow().getWindowManager().getDefaultDisplay();
                int widthby2=size.getWidth()/3;
                RelativeLayout.LayoutParams lp=new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
                lp.setMargins(size.getWidth()/2, 0, 0, 0);
                header.setLayoutParams(lp);
            
                RelativeLayout slider=(RelativeLayout)findViewById(R.id.panel);
                slider.setLayoutParams(new RelativeLayout.LayoutParams((size.getWidth()/2),size.getHeight()));
                slider.setVisibility(View.VISIBLE);
            
                toggle_open=true;
            }
            else{
                RelativeLayout header=(RelativeLayout)findViewById(R.id.header);
                RelativeLayout.LayoutParams lp=new RelativeLayout.LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.WRAP_CONTENT);
                lp.setMargins(0, 0, 0, 0);
                header.setLayoutParams(lp);
                
                RelativeLayout slider=(RelativeLayout)findViewById(R.id.panel);
                slider.setVisibility(View.GONE);
                toggle_open=false;
                    
            }
            break;

        default:
            break;
        }
    }

}

Layout XML Code

<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=".MainActivity" >

    <RelativeLayout
        android:id="@+id/header"
        android:background="@android:color/black"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:padding="20dp" >

        <ImageButton
            android:id="@+id/imageButton1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:background="@android:color/black"
            android:onClick="open"
            android:src="@android:drawable/ic_dialog_dialer" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/imageButton1"
            android:layout_toRightOf="@+id/imageButton1"
            android:text="Admin Panel"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="@android:color/white" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/panel"
        android:visibility="gone"
        android:layout_toLeftOf="@+id/header"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:background="@android:color/darker_gray"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <fragment class="com.example.avanse.FragmentLayout$TitlesFragment"
            android:id="@+id/titles"
            android:layout_width="match_parent" android:layout_height="match_parent"/>

    </RelativeLayout>

</RelativeLayout>