Next: Tutorials IIII
Next Tutorial
What is Material Design
Prev Page
View All Tutorials
This is the App - SlidingDrawerListView
This is the Sliding Drawer Left to Right
You can customize the sliding drawer by adding to it text, images, buttons, whatever you want. A Sliding Drawer is coded in the SlidingDrawer element.
For this tutorial we are coding a sliding drawer with a ListView. The listview is our first view, and then we added the sliding drawer view.
We gave the sliding drawer a light green background color and added to it an image and some text. We also included a FrameLayout so the two views - ListView, and SlidingDrawer view would overlap each other.
The sliding drawer needs a handle which we added in our code. The handle is an image. You can add whatever you want for the handle image. The image is added to the res/drawable-hdpi folder of your app project. If you want you can rotate the handle image by using the android:rotation attribute in your code.
Our ListView is coded using the ListView Element. The listview requires an array to hold the items for the listview. The array is coded in the java file. For our array we added English and Japanese words. You can add as many words as you want. They become scrollable once they exceed the physical parameter of the device screen.
You can customize your listview layout. We added a divider and added color to the divider. You can also give your divider a height which we did.
Additional Reading at Android Developer website
Sliding Drawer Android
ListView, ListActivity
Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE
You can name your app whatever you like; if your using the name as shown in our example code use;
SlidingDrawerListView for the App Name and,
for the package name(next line) use:
com.aac.slidingdrawerlistviewexample
For this app we need to edit these pages;
1 layout file, main.xml; located at res/layout/main.xml, already created, just replace the code on this page with the code from our Example Code section and save the page.
The layout page has our Sliding Drawer code and it has the handle code for the sliding drawer. The ImageView with the id of handle contains the image: toggle_drawer.png, that will be used as the handle for the sliding drawer.
We also wanted to add an image and some text to our drawer view. To do so, we coded a linear layout container, and within that container we added our ImageView element(with the id of imageView1), and to that we added our image - japanimage.png, and our TextView element for the text, which we coded in the text string named - drawertext, at res/strings.xml file.
We added a light green background to our sliding drawer view. This is coded in the Linear Layout code.
For our ListView, we added a ListView element, and added our items to the listview using an array which we coded in our java file. You can also add some customization to your listview layout; like a divider to put after each item and how tall you want the divider. We also gave our divider a color. These are coded in the ListView element's code.
Our app layout has a LinearLayout wrapper, and then a FrameLayout. We used the frame layout so the views would overlap each other. For our image and text in the drawer, we used a LinearLayout to use as the container to put our ImageView and TextView elements.
1 java class page; MainActivity.java; located at app/src/java/MainActivity.java, already created; we have to copy and replace the code on this page with the code from our Example Code section. Save the page once the code is pasted.
In this file we put our array- listItemArray which contains the item names for our listview. You can add as many items as you want. We added English to Japanese words.
Because we are using the ListView code class, the items will scroll automatically once they exceed the physical boundry of the view display.
We also code our ArrayAdapter where we define the layout for our listview items. For this, we use the simple_list_item1 code, which is a built-in default code you can use for ListView. You need only define it at the android.R.layout at ArrayAdapter in the MainActivity.java file; and put the android:id=@android:id/list in your ListView element in the main.xml file.
The java page also has our import statement codes. The import codes must be coded in your java page for each code class your implementing.
The import codes for this app are:
import android.os.Bundle;
import android.app.ListActivity;
import android.widget.ArrayAdapter;
1 strings file, strings.xml required for this App: The string file located at res/values/strings.xml has the required app_name string for the app name, and the text for each of the views.
Just copy/paste the code from our Example Codes section. Save the page.
Next Tutorial
What is Material Design
Prev Page
View All Tutorials
Android Tutorial, Sliding Drawer with ListView
This is the App - SlidingDrawerListView
This is the Sliding Drawer Left to Right
How To Implement a Sliding Drawer with ListView
As you learned in our previous tutorial - SlidingDrawer; a sliding drawer can be used to overlap two views. The sliding drawer view slides out from the side, top, or bottom of the app view.You can customize the sliding drawer by adding to it text, images, buttons, whatever you want. A Sliding Drawer is coded in the SlidingDrawer element.
For this tutorial we are coding a sliding drawer with a ListView. The listview is our first view, and then we added the sliding drawer view.
We gave the sliding drawer a light green background color and added to it an image and some text. We also included a FrameLayout so the two views - ListView, and SlidingDrawer view would overlap each other.
The sliding drawer needs a handle which we added in our code. The handle is an image. You can add whatever you want for the handle image. The image is added to the res/drawable-hdpi folder of your app project. If you want you can rotate the handle image by using the android:rotation attribute in your code.
Our ListView is coded using the ListView Element. The listview requires an array to hold the items for the listview. The array is coded in the java file. For our array we added English and Japanese words. You can add as many words as you want. They become scrollable once they exceed the physical parameter of the device screen.
You can customize your listview layout. We added a divider and added color to the divider. You can also give your divider a height which we did.
Additional Reading at Android Developer website
Sliding Drawer Android
ListView, ListActivity
Creating - Naming Your App Using AIDE
When creating your app,(from left menu) choose:Create New Project;
Then, choose
New Android App(gradle, android Java/xml)
or
Hello World App Java/xml
if your using the original version of AIDE
You can name your app whatever you like; if your using the name as shown in our example code use;
SlidingDrawerListView for the App Name and,
for the package name(next line) use:
com.aac.slidingdrawerlistviewexample
The Coded Pages
Code for the app - Sliding DrawerFor this app we need to edit these pages;
1 layout file, main.xml; located at res/layout/main.xml, already created, just replace the code on this page with the code from our Example Code section and save the page.
The layout page has our Sliding Drawer code and it has the handle code for the sliding drawer. The ImageView with the id of handle contains the image: toggle_drawer.png, that will be used as the handle for the sliding drawer.
We also wanted to add an image and some text to our drawer view. To do so, we coded a linear layout container, and within that container we added our ImageView element(with the id of imageView1), and to that we added our image - japanimage.png, and our TextView element for the text, which we coded in the text string named - drawertext, at res/strings.xml file.
We added a light green background to our sliding drawer view. This is coded in the Linear Layout code.
For our ListView, we added a ListView element, and added our items to the listview using an array which we coded in our java file. You can also add some customization to your listview layout; like a divider to put after each item and how tall you want the divider. We also gave our divider a color. These are coded in the ListView element's code.
Our app layout has a LinearLayout wrapper, and then a FrameLayout. We used the frame layout so the views would overlap each other. For our image and text in the drawer, we used a LinearLayout to use as the container to put our ImageView and TextView elements.
1 java class page; MainActivity.java; located at app/src/java/MainActivity.java, already created; we have to copy and replace the code on this page with the code from our Example Code section. Save the page once the code is pasted.
In this file we put our array- listItemArray which contains the item names for our listview. You can add as many items as you want. We added English to Japanese words.
Because we are using the ListView code class, the items will scroll automatically once they exceed the physical boundry of the view display.
We also code our ArrayAdapter where we define the layout for our listview items. For this, we use the simple_list_item1 code, which is a built-in default code you can use for ListView. You need only define it at the android.R.layout at ArrayAdapter in the MainActivity.java file; and put the android:id=@android:id/list in your ListView element in the main.xml file.
The java page also has our import statement codes. The import codes must be coded in your java page for each code class your implementing.
The import codes for this app are:
import android.os.Bundle;
import android.app.ListActivity;
import android.widget.ArrayAdapter;
1 strings file, strings.xml required for this App: The string file located at res/values/strings.xml has the required app_name string for the app name, and the text for each of the views.
Just copy/paste the code from our Example Codes section. Save the page.
EXAMPLE CODE - Code For This Tutorial
JUST copy the code for this tutorial App Name is 'SlidingDrawerListView - located at AppProjects/SlidingDrawerListView in AIDE, open the AIDE app, then open App Projects, THEN select the 'SLidingDrawerListView', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'SlidingDrawerListView' is there next to AppProjects like so: AppProjects/SlidingDrawerListView, then you know you have the proper App.
JUST copy the code for this tutorial App Name is 'SlidingDrawerListView - located at AppProjects/SlidingDrawerListView in AIDE, open the AIDE app, then open App Projects, THEN select the 'SLidingDrawerListView', app from your files hierachy(left menu); then click on any file from the app, like strings.xml Make sure at top of page, the app name 'SlidingDrawerListView' is there next to AppProjects like so: AppProjects/SlidingDrawerListView, then you know you have the proper App.
Once a file is in the editor, you can edit, save it, then RUN your APP, Install,
and Open your app.
Make sure you SAVED EACH PAGE,(or choose automatic saving in AIDE settings) before you RUN your code. SAVE, RUN, INSTALL, OPEN, your App. Once it has been
installed on your tablet, you can open it Simply by Clicking on the Android little green App Icon,with the wording 'SlidingDrawerListView' on your tablet. It will
be with your other installed apps.
If you make further changes to this App, you need to SAVE, RUN, UPDATE, INSTALL, OPEN the app again.
This free script provided by
JavaScript
Kit
AIDE for creating Android Apps on your tablet or cell phone(android).
Free and Paid.
GoTo Aide
ANDROID STUDIO - for creating Android Apps on your desktop computer.
Free to Install and Use
Learn more - Android Studio
The Java XML files we code(example codes) and the Android Apps we create in our Free Tutorials are compatible with Android Studio and AIDE. Just choose Java XML as your Programming Language.