Is it possible to show handle when drawer is closed and hide it when drawer is open ?
I've tried overriding SlidingDrawer but had no success so far.
To hide handle button following trick worked for me
<Button
android:id="#+id/handle"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#00000000" />
you can use slidingdrawer's topOffset attribute with a negative value in dp. (the size of your handle) like so:
android:topOffset="-50dp"
this way when you open the sliding drawer the handle will go pass the top screen making it gone from the view. now for a cleaner look you just have to create a transparent space between the handle and the content layout of your sliding drawer. you can do this by using a linearlayout with a transparent background assigned as your slidingdrawer's "android:content" layout and put your 'real' content layout inside and assigning a topMargin to it. looks something like this:
<LinearLayout
android:id="#+id/transparent_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/real_content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp" >
</LinearLayout>
</LinearLayout>
and here's how the whole xml layout for your sliding drawer with "hiding" / "overshot" handle would look like:
<SlidingDrawer
android:id="#+id/slidingdrawer_no_handle_when_opened"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:content="#+id/hiding_handle"
android:handle="#+id/transparent_layout"
android:orientation="vertical"
android:topOffset="-50dp" >
<LinearLayout
android:id="#+id/hiding_handle"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/buttonTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hiding Handle" />
</LinearLayout>
<LinearLayout
android:id="#+id/transparent_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent" >
<LinearLayout
android:id="#+id/real_content_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp" >
</LinearLayout>
</LinearLayout>
</SlidingDrawer>
*note - you need to adjust the value for topOffset and topMargin n accordance to you actual layout. and you need to provide another way for the user to close the sliding drawer since your handle is hidden when opened right? ;)
To hide the handle set the alpha to 0 and to show it set the alpha to 255.
handle.setAlpha(0); // hide
handle.setAlpha(255); // show
Related
I load a smiliar layout when my fragment starts:
<ScrollView
android:layout_height="wrap_content"
android:layout_width="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/firstView" />
<View
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/secondView" />
</LinearLayout>
</ScrollView>
When the fragment starts I want my firstView to be (so to speak) hidden and when a user scrolls down it should move with secondView so it becomes visible.
Basically I would like my ScrollView to be started with negative position. The problem is I don't know the height of firstView.
Is it possible to define this behavior with xml attributes?
Regards,
roncsak
Well, it can be done with CollapsingToolbarLayout.
Material design spec: https://material.io/develop/android/components/collapsing-toolbar-layout/
I am fairly new to Android UI design. I'm attempting to mimic the UI design of the following Living Social screen shot:
What is the best way to structure the UI elements here? How can this be implemented in XML? I'm trying to use the Android Eclipse UI editor to drag and drop UI elements, but it seems that I'll need to dynamically program the UI. What is the recommended way to approaching a problem like this?
So far, I have the following:
<LinearLayout
android:id="#+id/LinearLayout1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin">
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageViewBackground"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="fill"
android:scaleType="fitXY"
android:src="#android:drawable/dialog_holo_dark_frame" />
<View
android:id="#+id/view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<View
android:id="#+id/view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</ScrollView>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:backgroundTint="#color/abc_search_url_text_normal"
android:gravity="bottom|end"
android:orientation="vertical" >
<Button
android:id="#+id/buttonBUY"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="BUY!" />
</LinearLayout>
</LinearLayout>
Questions:
I'm using a parent LinearLayout. Inside this, I have a ScrollView for the top and a LinearLayout on the bottom. The LinearLayout on the bottom has a child button for the BUY NOW button. Is this the correct parent layout scheme?
Inside the ScrollView is an ImageView which is aligned to the top of the ScrollView. Then, inside the scrollview are X number of white boxes. How can I place the inner white box view slightly on top of the ImageView? Will I need to do this programatically?
What is the recommended way to create the inner white box views? Do I need to create a separate .xml view file for each of these? Or would you recommend to use a Fragment for each of the white boxes? Or, do I need to implement a custom view class for each of the white boxes?
Thank you
Probably, you need Parallax effect and CardView controls inside linear layout control. In order to add bottom button you can use Relative layout. As for parallax, please, take a look at the following thread : How to do the new PlayStore parallax effect
Basically I have 2 linear layouts. One linear layout will expand or collapse when user clicked on the button. The other one will always shows at the top. Here is my xml:
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<Button
android:id="#+id/btnNewsFeed"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/lightred"
android:minHeight="20dp"
android:text="News feed"
android:textColor="#FFFFFF" />
<LinearLayout
android:id="#+id/llNewsFeed"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/btnNewsFeed"
android:background="#FFFFFF"
android:orientation="vertical"
android:visibility="gone" >
<ListView
android:id="#+id/EventNewsFeedListview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:listSelector="#F6CECE" >
</ListView>
</LinearLayout>
<LinearLayout
android:id="#+id/legendDiv"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/btnNewsFeed"
android:alpha=".75"
android:background="#fff"
android:orientation="vertical"
android:visibility="gone" >
<TableLayout
android:id="#+id/tableEvent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1"
android:visibility="gone" >
//Table Rows
</TableLayout>
</LinearLayout>
</RelativeLayout>
So my legend div will be shown when user selected on the navigation drawer item and it has the opacity of 0.75. And my llNewsfeed will be expand or collapse when the btnNewsFeed onClick. The problem that I was having now is let's say when the legendDiv is shown, llNewsFeed was hide behind the legendDiv. I wonder is there any possible way to set the z-index for it? Because the llNewsFeed supposed to be in front of the legendDiv.
Any guides? Thanks in advance.
You can use bringToFront method like :
myView.bringToFront();
Also read this — Defining Z order of views. it may help.
Since API level 21 you can set the z-index with View.setZ(float) or View.setTranslationZ(float)
I have a layout xml file:
<?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:orientation="vertical"
android:background="#000000" >
<FrameLayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:layout_above="#+id/taoFooter">
<com.example.gamedice.DrawingPanel
android:id="#+id/taoCanvas"
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:background="#000000" />
</FrameLayout>
<LinearLayout
android:id="#+id/taoFooter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
style="#android:style/Holo.ButtonBar">
<Button
android:id="#+id/roll1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll1"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll2"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll3"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
<Button
android:id="#+id/roll4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/roll4"
android:layout_weight="1"
style="#android:style/Widget.Holo.Button.Borderless"
android:onClick="rollTaoDice" />
</LinearLayout>
</RelativeLayout>
In addition to other items in the layout, this layout has a button bar consisting of four buttons at the bottom of the screen. Based on user input, I want to be able to replace this button bar with another predefined set of buttons, and then be able to change back later.
Since I know what the alternate set of buttons will be ahead of time, I thought it might be possible to use an alternate layout xml file, but I couldn't figure out how to do that. Can anyone give me some guidance?
You can add your second set of buttons in a layout like you did with the first, then in the layout xml file set the attribute android:visibility="gone" on the second layout. In your code you can call setVisibility(View.GONE) for one layout (e.g. taoFooter) and setVisibility(View.VISIBLE) on the other layout when you need to switch the buttons out.
Alternatively, if you easily want to add some animations you can add a ViewFlipper around your two alternate button layouts. Only the first one is visible by default. You can switch to the next layout with showNext(). Add calls to setInAnimation() and setOutAnimation() before that to enable the animations.
Do you know how to achieve the same effect as winamp for android ? I want to do the similar thing. That is when I click on listview, sliding drawer popup. But so far I only can show the sliding drawer in new activity not in the same.
How can I achieve in overlap view. That is when I close the drawer, the layout is show at the front, and the sliding handle is on the layout, when I open the drawer, it covers the main layout.
Any ideas about that ?
Thanks !!
Step #1: Create a RelativeLayout
Step #2: Put the rest of your UI in the RelativeLayout
Step #3: Put the SlidingDrawer in the RelativeLayout as a later child then the rest of the UI (e.g., in layout XML, have it as the last child element of the RelativeLayout)
Children of RelativeLayout (and FrameLayout) stack on top of one another on the Z-axis (i.e., out the face of the screen). Hence, later children will overlap earlier ones. By putting your SlidingDrawer last, it will overlap everything else when opened.
Thank you CommonsWare you helped me,I do not have much reputation to vote up. Here is my sample layout...
I used it.sephiroth.slider.widget.MultiDirectionSlidingDrawer as the SlidingDrawer
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:layout_alignParentLeft="true" android:layout_marginLeft="82dp"
android:layout_alignTop="#+id/button_open">
<Button
android:id="#+id/button_open"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="#string/open"
android:visibility="visible" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New EditText"
android:id="#+id/editText" android:layout_alignParentLeft="true" android:layout_marginLeft="114dp"
android:layout_alignParentTop="true" android:layout_marginTop="6dp"/>
</RelativeLayout>
<it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer
xmlns:panel="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:id="#+id/drawer"
panel:direction="topToBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
panel:handle="#+id/handle"
panel:content="#+id/content">
<include
android:id="#id/content"
layout="#layout/pen_content" />
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="40px"
android:src="#drawable/sliding_drawer_handle_bottom" />
</it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer>
</RelativeLayout>