I am trying to implement a bottom sheet from the google design lib. Clicking on a button should open up bottom sheet which covers the whole activity window. Like when we open an email in Inbox by Gmail. But, it should open up from bottom and slide down to dismiss.
Button click should open up bottom sheet and on slide down or top left Close (X) button should close the sheet.
I have set up something like this:
<android.support.design.widget.CoordinatorLayout
.. >
<android.support.v4.widget.NestedScrollView
android:id="#+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/bottom_sheet_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Hello Bottom Sheet !!" />
</android.support.v4.widget.NestedScrollView>
<include layout="#layout/content_my_activity" />
</android.support.design.widget.CoordinatorLayout>
And I am intializing it like this:
mBottomSheet = (NestedScrollView) findViewById(R.id.bottom_sheet);
mBottomSheetBehavior = BottomSheetBehavior.from(mBottomSheet);
mButton = (Button) findViewById(R.id.bottom_sheet_button);
mButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
});
However, when I click on a button, the text just appears at the bottom. Overlapping the default existing content. And no black transparent tint behind the bottom sheet.
How can I make it full screen when clicking on button?
The reason I am not using a fragment here is, I have some(many) variables depending on the content of the bottom sheet. So, if I show a bottom sheet via fragment, I need to pass and receive all the data to and fro. To avoid this, I want it to be part of the activity.
Is there any way I can achieve this? Thanks for your help.
mButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
mBottomsheet.callOnClick();
}
});
Try this code........
When you click at button you can consider this action like your NestedScrollView container just become visible so it will take place like you write at params
android:layout_width="match_parent"
android:layout_height="wrap_content"
If you want it to take full parent height just use
android:layout_height="match_parent"
If to speak about shadow background like at fragment you can trick that you can set background alpha color for NestedScrollView
android:background="#64000000"
But it is a hack, you can use fragment and just send all information to it from activity and vice versa
Related
Is it possible to set the visibility of the MainActivity page in android to invisible or make it transparent may be? I have tried setting the visibility to invisible and also made height width as 0dp but this still shows the mainactivity with a white background and blue header.
What I am trying to achieve is, I am opening a floating window which is draggable on click of a button in the mainactivity, but I want to directly open the floating window by triggering the button click from the code itself. This works but the mainactivity still shows up for a second before the floating window is opened. I want to make the mainactivity page invisible or transparent so the mainactivity page is not noticeable.
Here is the XML of mainactivity.xml ,
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="Invisible"
android:background="#color/material_on_primary_disabled"
tools:context="com.example.widget_android.MainActivity">
<Button
android:id="#+id/open_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center"
android:text="Open Widget" />
on click of open_widget(which is triggered from code rather than the user having to click on it) the floating window is opened up.
I want to take the user directly to the floating window rather than the landing page which is the mainactivity page.
Here is what is happening on the backend java code
findViewById(R.id.open_widget).setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
startService(new Intent(MainActivity.this,WidgetService.class));
finish();
}
});
findViewById(R.id.open_widget).performClick();
The reason you get a white screen is because that is the default behaviour. You've tried to put an invisible, transparent, or non-existing (size of 0 pixels) View on top of the default View, so you are still seeing the default View. What you need to do is to replace the default View with a transparent View.
See How do I create a transparent Activity on Android? for information on how to get a transparent Activity.
I know how to set floating action button like shown in bellow image. But i need to show different layout on click or anytime when i want to show that layout. second layout is attached
How can i achieve this?
Refer this link Floating Action Button Toolbar https://github.com/AlexKolpa/fab-toolbar
There you need to add dependency in the project.
compile 'com.github.alexkolpa:floating-action-button-toolbar:0.5.1'
In your XML file,
<com.github.alexkolpa.fabtoolbar.FabToolbar
android:id="#+id/fab_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
tb:tb_anim_duration="500"
tb:tb_button_gravity="end"
tb:tb_container_gravity="center"
>
<ImageView
android:id="#+id/attach"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_attachment_white_48dp"
android:layout_marginLeft="#dimen/icon_margin"
android:layout_marginRight="#dimen/icon_margin"
/>
<!-- More buttons can be added here -->
To hide or show the Toolbar, simply call hide() and show().
FabToolbar fabToolbar = ((FabToolbar) findViewById(R.id.fab_toolbar));
findViewById(R.id.attach).setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
fabToolbar.hide();
}
});
I am attempting to create a drop-down menu like the one found in the Google+ app. A screenshot can be found below. I have looked at Spinners and Popup Menus, but neither of these fit exactly for what I am trying to create. The first image shows the closed menu, and the second shows what the drop-down menu looks like when opened.
http://www.droid-life.com/wp-content/uploads/2014/05/google-plus-4.4-1.jpg
The menu should not appear inside the action bar, and when scrolling, the menu displaying the selected option remains at the top of the screen.
Sorry I don't have enough reputation to add comments, So I'll post as an answer, hope it'll help anybody. This is just my alternative solution trying to achieve a ui like google plus app as you've posted.
My current solution is to use a toolbar beneath the actionbar(which is a toolbar also set as actionbar). Then I add onClickListener for the toolbar. When the toolbar is tapped, a recyclerview will be visible. Which the recyclerview can be populate by dynamic data or custom data you put in the layout. Example code :
main_layout.xml
<LinearLayout .... >
// the actionbar toolbar
<android.support.v7.widget.Toolbar
android:id="#+id/action_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:theme="#style/toolbarStyle"/>
// second toolbar act as the spinner
<android.support.v7.widget.Toolbar
android:id="#+id/dropdown_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
style="#style/dropdownToolbar">
..... // add a spinner indicator (imageview)
</android.support.v7.widget.Toolbar>
//separator line
<View
android:id="#+id/separator_line"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:background="#adacad"/>
// two child overlaps in framelayout
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white">
// the visible layout example
<android.support.v7.widget.RecyclerView
android:id="#+id/default_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
// the layout that is visible when toolbar is tapped
// this is spinner content, put anything u want here
<android.support.v7.widget.RecyclerView
android:id="#+id/dropdown_recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"/>
</LinearLayout>
This will give u a full width and length layout. the dropdown_recyclerview content depends on what u want. I added an imageview to indicate if the fake spinner is open or close. Sample code for java :
MainActivity.java
//action toolbar
Toolbar actionToolbar = (Toolbar) findViewById(R.id.action_toolbar);
setSupportActionBar(actionToolbar);
RecyclerView dropdownRecyclerView = (RecyclerView) findViewById(R.id.dropdown_recyclerview);
//second toolbar
Toolbar dropdownToolbar = (Toolbar) findViewById(R.id.dropdown_toolbar);
//Listen for toolbar onClick
dropdownToolbar.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//toggle visibility of dropdown spinner
if (!SHOW_SPINNER_FLAG) {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
} else {
//set indicator close / open
dropdownRecyclerView.setVisibility(View.VISIBLE);
}
}
});
Later on you can customized the layout and add some animation to reveal the fake spinner layout. If there's other way, please share. For the moment this is what i use in my app and it works fine for me. Sorry for my poor english.
example app image
For example suppose I have a button like this:
On clicking the Button I want a layout to be shown under it dynamically which overlays other views.
How can I achieve something like this ?
On clicking the Button I want a layout to be shown under it
dynamically which overlays other views.
you can do same using PopupWindow see below example:
How to create popups in Android
Depending on your parent layout you may have to tweak the code slightly but this overall idea should work for you.
Put your login layout below your loginBtn and set the layout to visibility:gone
<Button
android:id="#+id/loginBtn"
.../>
<RelativeLayout
android:id="#+id/loginLyt"
android:visibility="gone"
android:layout_below="#id/loginBtn"
...>
<!--your EditTexts and enter btn -->
</RelativeLayout>
<!-- rest of your layout... -->
then in your activity use the loginBtn click Listener to toggle the visibility of the loginLyt
loginBtn.setOnClickListener(new OnClickListener(){
public void onClick(View v){
if(loginLyt.getVisibility() == View.GONE){
loginLyt.setVisibility(View.VISIBLE);
}else{
loginLyt.setVisibility(View.GONE);
}
}
});
My launching activity consists of Linear layout with two buttons. Both buttons have listeners: the first one (b) moves itself upon click: 30px to the left and 30px back upon the next click.
The second one (b2) changes its text upon click. Here is the code:
public class TestActivity extends Activity {
public final String TAG="TestActivity";
boolean toTop=true;
boolean setInitialText=false;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button b=(Button)findViewById(R.id.button);
Button b2=(Button)findViewById(R.id.button2);
b.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
int modifier;
if(toTop) modifier=-30;
else modifier=30;
v.layout(v.getLeft()+modifier,v.getTop(),v.getRight()+modifier,v.getBottom());
toTop=!toTop;
}
});
b2.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
String currentText;
if(setInitialText)currentText="Press to change text";
else currentText="Press to change back";
((Button)v).setText(currentText);
setInitialText=!setInitialText;
}
});
}
}
XML layout-file:
<?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:gravity="center"
android:orientation="vertical" >
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Press to begin animation" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Press to change text" />
My problem: when b is moved to the left and I press b2, b moves to its initial position. Why? I don't want it to move back and didn't specify it anywhere.
It looks like View.layout looses its effect. Why it happens? I tested that in other situations and it seems that any UI update makes all invoked View.layout methods loose their effect.
In my main project there is a ListView which is populated with images from background - all view moves loose effect when new image appears. Besides, if I add EditText and try to enter something (as user), view moves loose their effect as well. Can anyone explain to me what's going on and why do views move back?
Looks like parent layout repositions it's siblings after you set a new text for the button2, because as describe in xml, button2 wraps it's content by width and height.
As you changed button's content, it requests it's parent layout to get a new position for it. In this case parent layout will recalculate position values for all of it's siblings. That's why button1 also comes back to it's previous position.
Keep in mind, that you also set the gravity value for parent layout as center, that means that when layout will position it's siblings it will position them in it's center.
Try to experiment with some ohter layout classes like FrameLayout, which has absolute manner of positioning it's siblings and RelativeLayout which and also try your case getting rid of layout's gravity.
Here says that this issue may be solved, using view.setLayoutParams() instead of view.layout()