I am trying to make something like a slide down menu, but i also want it to act as a title bar.
I originally wanted to make the title bar be able to slide down and reveal a listView with clickable items. Unfortunately putting a layout in a title bar didn't work out to well.
Instead I decided to make a custom title bar and give it a size of 0,(I didn't want to use the flag FEATURE_NO_TITLE, since it removes the status bar as well)
So far i have something that slides down, but does not match the parent width. The layout of the textView that makes it slidable does not align to the left. I would like to figure out how to make the background a different colour, of the entire "sliding drawer"
i need help with:
match text view to parent width
Align text view to Left
Change colour of the panel that slides down
Thanks for any help
In my Main activity i am just setting the title to a custom title, and the content view to the following XML.
<SlidingDrawer xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/slidingDrawer"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:content="#+id/content"
android:gravity="center_horizontal"
android:handle="#+id/handle"
android:orientation="vertical"
android:rotation="180" >
<LinearLayout
android:id="#+id/handle"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:rotation="180"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Pull Here"/>
</LinearLayout>
<ImageView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FF0000"
android:rotation="180"
android:src="#drawable/ic_launcher" />
I suggest you to try the SlidingMenu library. You can find it here
Looks like you are reinventing the wheel. There are many perfectly functional sliding-drawer libraries available. You can practically have a drawer slide from top, left, right or bottom and even have them in crazy awesome locations like in a listview row.
Have a look at the app - Libraries for Developers, which lists out every library along with demos & github links. Its better if you choose one and customize it to your needs.
Related
I'm making custom view for an Action Bar. There have to be centered title, some action buttons at the right and navigation drawer button/back with title at the left.
I use RelativeLayout to place all elements, like so (this is demonstrating variant of real layout):
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/actionBarHomeContainer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:clickable="true">
<ImageView
android:id="#+id/actionBarHomeImage"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:duplicateParentState="true"/>
<TextView
android:id="#+id/actionBarHomeLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:duplicateParentState="true"/>
</LinearLayout>
<TextView
android:id="#+id/actionBarTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
<LinearLayout
android:id="#+id/actionBarOptionsContainer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_alignParentRight="true">
<!--Action items will be added here pragmatically-->
</LinearLayout>
</RelativeLayout>
In most screen cases it's all OK (green picture), but when I deal with tight screens, my title is overlapping by home label (yellow picture). Keep in mind the this is only demonstrating situation, real items smaller than drew ones and case like this is rare. So my aim is in case of title is overlapped just place it in center of remain space between actionBarHomeContainer and actionBarOptionsContainer (blue picture). Is it possible somehow and what other solutions you may suggest to me?
Thanks.
There's an official and very easy solution to your problem: Don't mimic UI elements from other platforms
Don't use labeled back buttons on action bars
Other platforms use an explicit back button with label to allow the user to navigate up the application's hierarchy. Instead, Android uses the main action bar's app icon for hierarchical navigation and the navigation bar's back button for temporal navigation. For more information, please review the Navigation pattern.
Follow this guideline to provide a consistent navigation experience across the platform.
Android action bar with up caret vs. iOS labeled "Back" button.
i'm trying to implement a menu which i want on the bottom outside of the screen. When i swipe up from the bottom edge of the screen i want it to appear there.
Furthermore i want a HorzizontalScrollView in there. Actually it should work like a Navigation Drawer on the side.
Here is the layout I already tried. I used the umano AndroidSlidingUpPanel:
<com.sothree.slidinguppanel.SlidingUpPanelLayout
xmlns:sothree="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:panelHeight="200dp"
sothree:shadowHeight="4dp"
sothree:overlay="true">
<TextView
android:text="Hier wird das pdf gezeigt"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="#+id/file_scroll_view"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:id="#+id/file_scroll_view_linear_layout"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
The slide up works, but i don
t know how to position it outside of the screen and how to let it only slide up until it aligns the bottom edge.
Furthermore I want the ScrollView working. Before I tried with the SldingUpPanel it worked like charm but now its not scrollable.
Anyone got an idea or any hint how to solve this?
for nothing to be seen you have to:
slidePanel.setPanelHeight(0); // I couldn't find anything on XML for that
and for it to stop midway through:
slidePanel.expandPane(0.1f); // for example for 10% of screen.
I'm currently trying to place a progress bar on the top left corner of my screen. However, I'm not quite sure which way is the best way to do it. Should I create a progress bar programatically instead of creating it in the xml? Or should I change my layout around? Thanks. XML below.
XML CODE:
<?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="#drawable/background"
android:focusableInTouchMode="true"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="53dp"
android:layout_marginBottom="5dp"
android:src="#raw/topbar" />
<TextView
android:id="#+id/search_nameOfFeed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical|center_horizontal"
android:text="Event Name"
android:textColor="#color/black"
android:textSize="18sp" >
</TextView>
<ListView
android:id="#+id/searchfeed_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="0.83"
android:dividerHeight="10.0sp"
android:fadingEdge="none"
android:stackFromBottom="false"
android:transcriptMode="normal" >
</ListView>
</LinearLayout>
The best option for layout when you're wanting to position views in specific areas is FrameLayout or RelativeLayout
RelativeLayout will allow you to place each view relative to each other.
FrameLayout allows you to stack views in a z-index positioning.
Play with both and you may come up with results you're looking for.
The best way to design layouts in android is by creating them in XML so you should do it in XML. You can achieve what you want by adding your ProgressBar before your ImageView
I doubt this is what you're looking for exactly, but another way you might want to implement a non-intrusive progress bar is to put it in the title bar of the activity. Check out this for an example of how to do this.
You can create it either way (In XML or Programatically). If you created it progamatcially, set the gravity to top and if you are creating in XML, use Relative Layout instead of Linear Layout and use android:layout_gravity="top|left". If you want to show it at the center follow the link
I am not sure how to do this? I want a static view at the bottom of another layout that the user can slide up to show another view. I'm not sure what this feature is called but I know the Facebook app does this and so does ESPN and Google plus. Thanks!
The simplest thing to use would be a SlidingDrawer.
As long as you want to slide up from the bottom (or the right) this will work beautifully. It doesn't work if you want to slide something down from the top or in from the left however.
To use it you just need something like this in your XML layout:
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:handle="#+id/handle"
android:content="#+id/content">
<ImageView
android:id="#id/handle"
android:layout_width="88dip"
android:layout_height="44dip" />
<GridView
android:id="#id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</SlidingDrawer>
Where the ImageView is the "handle" (the thing you drag up and down to open the drawer) and the GridView is the whatever content you want the drawer to hold (It can be any type of view, not just a GridView).
recently the android market and shopsavvy underwent UI overhauls. The result is a list then seems to slide under a curved top area with buttons on it. The top section seems to cast a slight dropshadow on the list and the list itsself has a different coloured heading to the rest of the list. It's a really big improvement on the look of android UI's , much more professional looking.
So how is the sliding under the curved top section with drop shadow achieved?
thanks guys
There was a great blog post by the developers that made the market app, and you can find it here http://www.pushing-pixels.org/2010/12/13/meet-the-green-goblin-part-1.html
At shopsavvy we took a much simpler approach and achieved generally the same results. We use a frame layout with two sub layouts that overlap each other. The top layout has as background that is a custom image that includes the shadow (we have an awesome graphics guy). The bottom layout is simply a list view that has with a margin on top to place it where we want. The pseudocode for it looks like this.
<FrameLayout>
<!-- Listview that sits under another view -->
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ListView
android:id="#+id/backgroundlist"
android:layout_marginTop="150dp"
android:layout_height="fill_parent"
android:layout_width="fill_parent" />
</LinearLayout>
<!-- view that sits on top -->
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:background="#drawable/curvedimage"
android:orientation="vertical"
>
<!-- headers, buttons and other stuff -->
<LinearLayout
.....
</LinearLayout>
</FrameLayout>
For the heading on the listview you just use the addHeaderView function on a listview. You simply make a layout for the header that you want. In our case we just use a text view with a different background color.
<TextView
xmlns:android="http://schemas.android.com/apk/res/android"
android:text="#string/scans_right_now"
android:layout_height="61dp"
android:layout_width="fill_parent"
android:gravity="bottom|center_horizontal"
android:paddingBottom="3dp"
android:textColor="#8b8b8b"
android:background="#d3d3d3"
android:textStyle="bold"
android:shadowColor="#FFFFFF"
android:shadowDx="0.0"
android:shadowDy="1.0"
android:shadowRadius="1.0" />
and then add that view as a header inside of your activity like so:
ListView list = (ListView) findViewById(R.id.backgroundlist);
View recentScansHeader = getLayoutInflater().inflate(R.layout.recent_products_header, recentViewList, false);
list.addHeaderView(recentScansHeader);