Hi I am looking for the sliding menu similar to the below availble in iOS, I am looking similar in android, Is there any reference code available similar to this.
https://github.com/romaonthego/REFrostedViewController/raw/master/Demo.gif
You can actually make use of this library by jfeinstein10:
https://github.com/jfeinstein10/SlidingMenu
The drawer slides in/out very similar as in iOS.
I think it is DrawerLayout in android. Just try this tutorial. For more details, you can read this document.
In the case you need a root layout in DrawerLayout instead of ListView.
For example in my case:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
<!-- The main content view -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f4f4f4" />
<!-- The navigation drawer -->
<LinearLayout
android:id="#+id/linearLayout"
android:layout_width="220dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#fff">
<TextView
android:id="#+id/tv_word"
android:text="New words"
android:layout_marginLeft="5dp"
android:layout_marginTop="10dp"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:layout_width="210dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
now, on your activiy class:
DrawerLayout mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
TextView tv_word = (TextView )findViewById(R.id.tv_word );
tv_word.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mDrawerLayout.closeDrawer(linearLayout);//don't forget it
//.....
}
});
Related
In my xamarin android app I have a right navigation bar and a custom toolbar. The code for navigation bar is this
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="right"
android:id="#+id/right_nav_view"
app:menu="#menu/menu_navigation_swipe" />
And the code for toolbar is this
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/rectangle"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/HomeButton"
android:layout_gravity="center"
android:src="#drawable/logo"
android:clickable="true" />
<ImageView
android:padding="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/right_nav"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#drawable/icon_settings"
android:clickable="true" />
</RelativeLayout>
</android.support.v7.widget.Toolbar>
I wanna open the navigation bar when the user press the ImageView with id = right_nav. How can i do this?
Xamarin android. Open right navigation bar with button from custom toolbar
Place your NavigationView into a DrawerLayout, for example:
<?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-auto"
android:id="#+id/drawer_layout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- I place your Toolbar in this include_list_viewpager layout -->
<include layout="#layout/include_list_viewpager"/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="right"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header"
app:menu="#menu/drawer_view"/>
</android.support.v4.widget.DrawerLayout>
Then, as #Federico Navarrete has pointed out, define a click event for your ImageView:
DrawerLayout drawerLayout = FindViewById<DrawerLayout> (Resource.Id.drawer_layout);
ImageView right_nav = FindViewById<ImageView>(Resource.Id.right_nav);
right_nav.Click += (s, e) =>
{
drawerLayout.OpenDrawer(Android.Support.V4.View.GravityCompat.End);
};
Try This
ImageView right_nav = (ImageView)findViewById(R.id.right_nav);
right_nav.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
drawer.openDrawer(Gravity.RIGHT);
}
});
You can use this code to open it from the right side:
//You get your navigation drawer
var drawer = FindViewById<DrawerLayout>(Resource.Id.right_nav_view);
//You get the image view
var right_nav = FindViewById<ImageView>(Resource.Id.right_nav);
//You define the click event
right_nav.Click += (s, e) =>
{
//You open the navigation Drawer from the right
drawer.OpenDrawer(GravityCompat.Right);
}
I am trying to create a personal details page where the user can view and change his/her personal details. I followed a tutorial and created a Navigational Drawer which loads a ListView. The thing is that i need to add a few TextViews and 1 button but no matter where i put them in the xml, they keep showing outside the drawer, messing up the whole layout. Any help? Thanks for your time everyone!!!
GuestMain.java
public class GuestMain extends Activity {
/////////NAVIGATIONA LDRAWER///////
String[] info;
DrawerLayout dLayout;
ListView dList;
ArrayAdapter<String> adapter;
///////////////////////////////////
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_guest_main);
addListenerOnButton();
////////////////////////////////////////NAVIGATIONAL DRAWER//////////////////////////////////////////////
info = new String[]{"Full Name","Phone Number","Email","Address","Country","City"};
dLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
dList = (ListView) findViewById(R.id.left_drawer);
adapter = new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,info);
dList.setAdapter(adapter);
dList.setSelector(android.R.color.darker_gray);
/////////////////////////////////////////////////////////////////////
}
activity_guest_main.xml
<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" >
<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"
android:background="#color/white"
tools:context="com.example.domotel.GuestMain" >
<ImageButton
android:id="#+id/iconback"
android:contentDescription="#string/btn_back"
android:src="#drawable/icon_back"
android:layout_width="40dp"
android:layout_height="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_marginTop="11dp"
android:scaleType="fitStart"
android:clickable="true"
android:background="#e5b53a" />
<ImageButton
android:id="#+id/iconuser"
android:contentDescription="#string/btn_back"
android:src="#drawable/icon_user"
android:layout_width="40dp"
android:layout_height="25dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:layout_marginTop="12dp"
android:scaleType="fitStart"
android:clickable="true"
android:background="#e5b53a" />
</RelativeLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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="#d9ffffff"/>
<!-- 85% Opacity -->
</android.support.v4.widget.DrawerLayout>
Not sure if I completely understand what you are trying to do, but here is the way that I understand what your saying. You want to have the ability to edit items inside the drawer and then have the changes reflected outside. Don't really think that this is what the drawer was designed for. But in order to have the text boxes inside the drawer with the strings you could create another xml layout file with the list view containing a string and a text box. Then in place of android.R.layout.simple_list_item_1 you would use your drawer_layout from your xml layout file
adapter = new ArrayAdapter(this, R.layout.drawer_layout, R.id.text_field, info)
Then you need to handle the text and layout from within the drawer
I made a simple app which when I open it I see the wallpaper and the 2 buttons.First button opens my gallery and the second one opens a Calculator app. Now I want to be able to slide from left to right and bring up the Navigation Drawer Activity.
I did this: right clicked on my app -> New -> Activity -> Navigation Drawer Activity. It created 2 java classes ( NavigationActivity and NavigationDrawerFragment ), some layouts (activity_navigation fragment_navigation and fragment_navigation_drawer). Anyway, what I don't know is how to make the navigation drawer show up, how do I link it to my activity_main ?
This is the activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity"
android:background="#drawable/digital_blue_wallp">
<TextView
android:text="#string/welcome"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#fff8fdff"
android:textSize="24sp"
android:id="#+id/welcome"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button"
android:background="#drawable/calcu"
android:layout_alignParentBottom="true"
android:layout_alignRight="#+id/welcome"
android:layout_alignEnd="#+id/welcome"
android:layout_centerHorizontal="true"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/button2"
android:background="#drawable/gallery"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
In you main activity layout, declare the navigation drawer like this:
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<GridView
android:id="#+id/left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:paddingTop="10dp"
android:choiceMode="singleChoice"
android:numColumns="2"
android:verticalSpacing="15dp"
android:horizontalSpacing="5dp"
android:background="#color/black_transparent"/>
</android.support.v4.widget.DrawerLayout>
I chose to use a GridView but you can use whatever you want. Then in your activity instantiate the drawer and subview:
mDrawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
mAppsGrid = (GridView)findViewById(R.id.left_drawer);
You should then create a custom drawer adapter, which is very similar to a grid adapter and simply controls the items within the view.
mDrawerAdapter = new DrawerAdapter(this);
mAppsGrid.setAdapter(mDrawerAdapter);
mAppsGrid.setOnItemClickListener(this));
I know this doesn't specifically tell you what you're doing wrong, but without seeing more of your code, it would just be guess what's going wrong on your app. Hope this helps!
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?
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>
i thinks This is a good alternative
AFAIK it does not use SlidingDrawer and you can modify the direction of the drawer
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)
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>
plain android you can use DrawerLayout.
but i recommend SlidingMenu lib what has a better usability for user and programmer.
Most of the answers are pretty old. If you are working on API 30/31 you should use a Sheet instead. As described on the Android Material design documentation
Layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout
...>
<FrameLayout
...
android:id="#+id/standard_bottom_sheet"
style="?attr/bottomSheetStyle"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<!-- Contents -->
<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" />
<!-- Contents End -->
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Two things to pay attention to are:
Notice both the app:layout_behavior and style of the FrameLayout
In order for the Sheet to work it needs to be enclosed in a CoordinatorLayout
Sample Fragment:
class ModalBottomSheet : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? = inflater.inflate(R.layout.modal_bottom_sheet_content, container, false)
companion object {
const val TAG = "ModalBottomSheet"
}
}
Activity Code:
You can show the Sheet programmatically by using this...
val modalBottomSheet = ModalBottomSheet()
modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)
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?
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>
i thinks This is a good alternative
AFAIK it does not use SlidingDrawer and you can modify the direction of the drawer
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)
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>
plain android you can use DrawerLayout.
but i recommend SlidingMenu lib what has a better usability for user and programmer.
Most of the answers are pretty old. If you are working on API 30/31 you should use a Sheet instead. As described on the Android Material design documentation
Layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout
...>
<FrameLayout
...
android:id="#+id/standard_bottom_sheet"
style="?attr/bottomSheetStyle"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
<!-- Contents -->
<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" />
<!-- Contents End -->
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Two things to pay attention to are:
Notice both the app:layout_behavior and style of the FrameLayout
In order for the Sheet to work it needs to be enclosed in a CoordinatorLayout
Sample Fragment:
class ModalBottomSheet : BottomSheetDialogFragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? = inflater.inflate(R.layout.modal_bottom_sheet_content, container, false)
companion object {
const val TAG = "ModalBottomSheet"
}
}
Activity Code:
You can show the Sheet programmatically by using this...
val modalBottomSheet = ModalBottomSheet()
modalBottomSheet.show(supportFragmentManager, ModalBottomSheet.TAG)