Does anybody know how to easily implement an action bar with two stretched buttons?
Here is an example of the Google calendar app:
Thank you!
If you rather have this in the ActionBar for whatever reason, one way to achieve this is by using a custom view on the Action bar. Within you Custom View's layout then worry about setting up the buttons width.
Telling the activity to use a custom view for the action bar:
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ActionBar ab = getActionBar();
ab.setDisplayShowHomeEnabled(false);
ab.setDisplayShowTitleEnabled(false);
final LayoutInflater inflater = (LayoutInflater)getSystemService("layout_inflater");
View view = inflater.inflate(R.layout.action_bar_edit_mode,null);
ab.setCustomView(view);
ab.setDisplayShowCustomEnabled(true);
}
layout/action_bar_edit_mode.xml can then look something like:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="fill_horizontal"
android:orientation="horizontal" >
<LinearLayout
android:layout_alignParentLeft="true"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Button
android:id="#+id/action_bar_button_cancel"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:id="#+id/action_bar_button_ok"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Ok" />
</LinearLayout>
</RelativeLayout>
Hope it helps someone!
Note: I realize the ugly nesting layouts here and normally I wouldn't recommend this but for some reason the actionbar's own layout refuses to let the LinearLayout take up the entire width on its own. Normally you should avoid nesting layouts unnecessarily like this!
Perhaps if someone sees this they can point us to a better solution?
What it looks like:
EDIT: There is an excellent post by Roman Nurik where he explains a way to do this very nicely.
EDIT 2: If anyone is curious, the correct way to lay out the buttons so that they expand the width of the actionbar without the need to nest your layouts like I did above, is to set the custom view with the proper layout parameters that allows its component to match the parent group.
Essentially:
actionBar.setCustomView(view,new ActionBar.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT));
I know 2 ways to do this, but one doesn't stay on top.
Here is the 1st:
You need to override the method onCreateOptionsMenu, but this is add on the ActionBar, you need API 11 to do this and when you rotate the screen this buttons appear on ActionBar, this depends of the screen size.
#Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater)
{
MenuItem add = menu.add(Menu.NONE, ADD_TIME, 0, R.string.add_time);
add.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
MenuItem qkAdd = menu.add(Menu.NONE, QUICK_ADD_TIME, 1, R.string.quick_add_time);
qkAdd.setShowAsAction(MenuItem.SHOW_AS_ACTION_IF_ROOM);
}
and this is the result:
if you're using a Fragment you need to set setHasOptionsMenu to true, otherwise the menu wont show.
Here is the 2nd:
cancel_done.xml
<?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="#color/color_bar"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:dividerPadding="12dp"
android:orientation="vertical"
android:showDividers="end" >
<Button
android:id="#+id/button1"
style="#drawable/btn_cab_done_holo_light"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/btn_cab_done_holo_light"
android:text="CANCEL"
android:textSize="14sp" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:dividerPadding="12dp"
android:orientation="vertical"
android:showDividers="beginning" >
<Button
android:id="#+id/button2"
style="#drawable/btn_cab_done_holo_light"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#drawable/btn_cab_done_holo_light"
android:text="DONE"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
the resource style btn_cab_done_holo_light.xml you can find on ..\sdk\platforms\android-%%\data\res\drawable and then on your layout you just add:
<include
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="fill"
layout="#layout/cancel_done" />
and this is the result:
I don't now if is the best way, but it's working.
Make a horizontal LinearLayout with two buttons. Then set each of their widths to match_parent and android:layout_weight="0.5"
(Each button will then take up 50% of the space).
EDIT:
To apply as the ActionBar background:
(ActionBarSherlock) getSupportActionBar().setCustomView(R.layout.my_view);
(ActionBar) getActionBar().setCustomView(R.layout.my_view);
You can use the actionMode of the ActionBar to implement the Done and Cancel actions.
See http://developer.android.com/guide/topics/ui/menus.html#CAB
Is called done bar in android. have a look at this it will be helpfull
https://github.com/googlesamples/android-DoneBar
Related
I am trying to hide the android action bar, I tried the following in the manifest:
android:theme="#android:style/Theme.NoTitleBar"
and also tried the following in my activity's onCreate method:
super.onCreate(savedInstanceState);
getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
getActionBar().hide();
setContentView(R.layout.viewpager);
Both work fine and the actionbar is invisible. But the problem is, I cannot use the space that the actionbar left after it disappeared. I mean, if I want to center a widget in the layout vertically, it counts for the space the action bar covers, and then centers the widget in the space left, and so it looks like not centered.Here is the xml file content:
<?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="#color/background"
android:gravity="center_vertical" >
<LinearLayout
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/imageview_create_db_first_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/data" />
<TextView
android:layout_marginTop="10dp"
android:layout_gravity="center_horizontal"
android:id="#+id/textview_create_database"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_database"
android:textSize="15sp"
android:textColor="#color/white_text"/>
</LinearLayout>
</RelativeLayout>
So can anyone help me with this?
Thanks
You should either use the no title flag:
requestWindowFeature(Window.FEATURE_NO_TITLE);
Or create your theme and add:
<item name="android:windowNoTitle">true</item>
Your code is fine. I have used similar code in my project. I think the margin:top attribute in your imageview is making it appear below the center.
android:layout_marginTop="20dp"
So remove this line.
I'm running into some problems trying to figure out how to make fragments that I have programmatically added into a LinearLayout clickable. I'm using fragments because they will be in multiple activities and it was a good way for me to create a layout like this:
http://i.stack.imgur.com/P4lOG.png
But, if there's a better way to do this that would make the process of making it clickable, I'm certainly open to changing things up.
Anyway, I'm adding the fragments to the LinearLayout, jobsList, like so:
FragmentManager fragmentManager = getFragmentManager();
int count = 2;
for (int i = 0; i < count; i++) {
FragmentTransaction fragmentTransaction = fragmentManager
.beginTransaction();
Bundle bundle = new Bundle();
bundle.putInt("jobID", i + 1);
jobFragment job = new jobFragment();
job.setArguments(bundle);
fragmentTransaction.add(R.id.jobsList, job, Integer.toString(i));
fragmentTransaction.commit();
}
The count of 2 is just a placeholder for now, later there will be an arbitrary number of jobs.
Here is the layout, it's a bit of a mess but I got all the specific weights the way I wanted this way.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/rootContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".2" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/basicPort"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:text="Port" />
<TextView
android:id="#+id/basicLoadOrEmpty"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:text="Load/Empty" />
<TextView
android:id="#+id/basicInOrOut"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background"
android:text="In/Out" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".6"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".333" >
<TextView
android:id="#+id/basicContainerNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".4"
android:background="#drawable/background"
android:text="Container #" />
<TextView
android:id="#+id/basicChassisNum"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".4"
android:background="#drawable/background"
android:text="Chassis #" />
<TextView
android:id="#+id/basicContainerType"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight=".2"
android:background="#drawable/background"
android:text="Cont. Type" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".333" >
<TextView
android:id="#+id/basicDirectionArrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".2"
android:background="#drawable/background"
android:text="Direction" />
<TextView
android:id="#+id/basicCustomer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight=".8"
android:background="#drawable/background"
android:text="Customer Location" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".333" >
<TextView
android:id="#+id/basicSteamshipLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".4"
android:background="#drawable/background"
android:text="Steamship Line" />
<TextView
android:id="#+id/basicBKG_BOL"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight=".6"
android:background="#drawable/background"
android:text="BKG-BOL#" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight=".2" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="#+id/basicStatus1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:background="#drawable/background"
android:text="Status 1" />
<TextView
android:id="#+id/basicStatus2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight=".5"
android:background="#drawable/background"
android:text="Status 2" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<Space
android:layout_width="match_parent"
android:layout_height="20dp" />
</LinearLayout>
My question to you is, is it possible to make these fragments clickable and uniquely identifiable, and if so, what is the best way to go about doing that?
Thank you for your help!
What you could do is:
Modify the layout of your fragment, so it uses the RelativeLayout (now its probably LinearLayout right?). By modify I mean either use RelativeLayout INSTEAD of LinearLayout (more complicated but i think a bit better), or put your LinearLayout INSIDE RelativeLayout.
Place a view that matches in size the size of the fragment, on top of your textViews. Add an onClickListener to it that performes the code on clicks.
First - fragments are not clickable, layouts and their children are. A Fragment can handle the click action for things that occur in its layout but you do not "click" the fragment.
Second - sounds like you're confused about how to use fragments and what a Fragment actually does. A Fragment is like an Activity with some parts missing. A Fragment has its own lifecycle and can be used to perform many of the same tasks as an Activity the difference being that (1) a Fragment is "hosted" by an activity that provides the missing functions and does not run on its own (2) a Fragment can run in the background with no UI (I do not know of a background activity yet).
You do not need to/should not be using Fragments for what you are trying to do.
Your layout is really just a series of TextViews. You should be able to make that layout in XML reuse that layout file - by simply getting a LayoutInflater anywhere else in your app that you want to. If things got really crazy you could create a custom TextView class to provide detailed functionality but you should not be using 10 fragments, each with one TextView to make that layout work.
I just wanted to follow up on things in case anybody stumbles upon this answer in the future. It turns out using fragments was a bad idea. While I was able to make them clickable and identifiable through a bit of a hack job, I ran into problems later on when I was trying to fix layout issues. So, thanks to #Rarw I looked into using a LayoutInflater instead.
And that was much easier! I just made the layout xml file, used the LayoutInflater to add it to a LinearLayout and added that to the list. Makes things much easier down the road:
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
LinearLayout container = new LinearLayout(this);
inflater.inflate(R.layout.basic, container, true);
container.setId(i);
list.addView(container, params);
container.setClickable(true);
container.setOnClickListener(this);
A hacky solution is to place a transparent button on top of the entire fragment, have the fragment extend onClickListener, and set the button's onClickListener to this.
One way to create such a button:
Use a constraintLayout as the root layout for the xml.
As the last of child of the constraintLayout, create a button, constrain it to occupy entire fragment by setting layout_constrainXXX to corner elements.
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
<!-- The remaining properties of the layout -->
<!-- All the children of the layout -->
<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#00000000"
android:id="#+id/fragment_button" />
</android.support.constraint.ConstraintLayout>
Note that you can do this other ways too, such as in a RelativeLayout
Then in the java/kotlin file, extend onClickListener.
override fun onClick(p0: View?) {
// Whatever you want to do here
}
In method onActivityCreated, set the transparent button's listener as:
var button : Button = fragment_button
button.setOnClickListener(this)
I created a menuView.xml layout to be in all of the layouts of my activity. This layout has one column on each border and a title bar like this:
ComposeView http://img845.imageshack.us/img845/2121/d6zp.png
I insert this layout in the other layouts this way:
<!-- Show menu -->
<com.example.MenuView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
But if one of the layouts has full screen view, part of this view gets covered by the MenuView, so...
How could I tell to this view to adapt its size to the blank space inside the MenuView to not get covered by it?
UPDATE -- full XML included
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#drawable/degradado">
<!-- Show menu -->
<com.example.MenuView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="#+id/Left_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true" >
//Here go buttons, views, etc...
</RelativeLayout>
<RelativeLayout
android:id="#+id/Right_layout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" >
//Here go buttons, views, etc...
</RelativeLayout>
What happens here is that these 2 Relative layouts get covered by the MenuView (The darkest gre borders and the top black bar), and the ideal way would be that these 2 layouts get fitted to the blank space (the clearest gray).
I can solve this setting margin sizes to the Relative layouts to fit inside of it, but i know this is not the best way to do it, so I don't know if there is another way.
I think the best way to solve your issue is with inheritance.
If you define an Activity that can be used as a template for all your fleshed out Activitys to add their content to.
I don't know what you custom menu is 'made of' but as a simple example:
Create a basic Activity with code:
public class ActivityWithMenu extends Activity
{
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_with_menu_layout);
}
}
and 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"
tools:context=".ActivityWithMenu" >
<TextView
android:layout_width="match_parent"
android:layout_height="20dip"
android:background="#ff000000"
android:textColor="#ffffffff"
android:text="Main Menu Title Bar"
android:id="#+id/mainmenutitle" />
<LinearLayout
android:layout_width="20dip"
android:layout_height="match_parent"
android:layout_below="#+id/mainmenutitle"
android:layout_alignParentLeft="true"
android:background="#ff999999"
android:orientation="vertical"
android:id="#+id/lefthandmenu" />
<LinearLayout
android:layout_width="20dip"
android:layout_height="match_parent"
android:layout_below="#+id/mainmenutitle"
android:layout_alignParentRight="true"
android:background="#ff999999"
android:orientation="vertical"
android:id="#+id/righthandmenu" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toLeftOf="#+id/righthandmenu"
android:layout_toRightOf="#+id/lefthandmenu"
android:layout_below="#+id/mainmenutitle"
android:orientation="vertical"
android:id="#+id/activitycontent"
/>
</RelativeLayout>
Then create your xml for a specific Activity, in this case a simple 'Hello World' layout:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff00ff00"
android:text="Hello World!"
/>
</LinearLayout>
</ScrollView>
But now when you write the code for this Activity, extend 'ActivityWithMenu' instead of the Activity class direct and inflate this xml layout as follows:
public class Activity1 extends ActivityWithMenu
{
#Override
protected void onCreate(Bundle savedInstanceState)
{
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
super.onCreate(savedInstanceState);
LinearLayout ll = (LinearLayout)findViewById(R.id.activitycontent);
ScrollView sv = (ScrollView)this.getLayoutInflater().inflate(R.layout.activity1_layout, ll, false);
ll.addView(sv);
}
}
I have added the code for making the Activity fullscreen here instead of in the parent ActivityWithMenu class assuming that you wouldn't want them all displayed that way but you could move it into the parent class if appropriate.
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)