I'm developing an android application, one page is like this:
You can see on the top of right part, there is a "settings" button. When clicking it, there will be a panel come out from the left.
I'm new to android, and I don't know what components shall I use.
It is called side navigation or a sliding menu. Introduced by facebook i believe.
Here is an answer how to design this:
Android Facebook style slide
and project code:
https://github.com/gitgrimbo/android-sliding-menu-demo
I haven't just searched for it and pasted the link here, i actually did this in my application, it is easy to implement and works great
You can use SlidingDrawer as below:
<SlidingDrawer
android:id="#+id/my_sliding_drawer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_margin="0dp"
android:content="#+id/content"
android:handle="#+id/handle" >
<ImageButton
android:id="#+id/handle">
<!-- Your handle content comes here. -->
</ImageButton>
<LinearLayout
android:id="#+id/content">
<!-- Your drawer contents come here. -->
</LinearLayout>
</SlidingDrawer>
Related
I'm trying to build an application with a fixed top and bottombar (bars should host other controls like buttons, progressbar,...).
The content (space between top/bottombar) should be able to host activities and navigates to other activies, which also could be resulting in also changing the content of both bars (also load other activities for bars).
I've started a sample with actionBar, had this issue with fullscreen mode (Is there a theme for Holo, full screen but with Action Bar?). Resolves my problem but setting it in code behind isn't a recommended way.
What do you think? Is there a better way to reach this kind of layout, maybe is it better to use a more simple control then actionbar?
If yes, it would be great if someone knows a starting point for layouting this (example, tut) and how to realize the navigation for the content.
I'm coming from wpf with regions, I also read posts about similar functionality on stackoverflow, but I only found examples where I missed the functionality of a dynamic content (for the bars and the content between the bars).
Tons of thanks for replies
This should work (Replace middle button with say a scrollview) :
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/topbutton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true" >
</Button>
<Button
android:id="#+id/bottombutton"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentBottom="true" >
</Button>
<Button
android:id="#+id/middlebutton"
android:layout_width="40dp"
android:layout_height="wrap_content"
android:layout_above="#id/bottombutton"
android:layout_below="#id/topbutton" >
</Button>
</RelativeLayout>
Reason why the bottom button has to be above the middle button in XML's order is that a view can only refer(e.g. android:layout_above) to views above itself.
I have to use SlidingDrawer in my app. I know this class is deprecated but it very useful to do what i want so i have decided to use it.
I've used this link
Android: can height of SlidingDrawer be set with wrap_content?
in order to use wrap_content when the SlidinDrawer is open. It works perfect on android 4.2.2 with AOSP rom but with android 4.0.4 on SGSII (Samsung rom), i have some display problem when i open or close the SlidingDrawer. If there is no action, the widget appears correctly.
Have you any idea why there is this problem ?
Edit : Here is a screenshot. The problem disappeared when i took a screenshot, so to see the problem i took a photo with another device.
Alternate to SlidingDrawer is "Custom Sliding Drawer".
Sephiroth has created one of it. It has option to sliding up and down. It has handler which is used like actual handle to open and close Sliding Drawer.
I will suggest you to implement this custom one. This will solve your problem.
You just need to define following in your layout
<view class="it.sephiroth.demo.slider.widget.MultiDirectionSlidingDrawer"
xmlns:my="http://schemas.android.com/apk/res/it.sephiroth.demo.slider"
android:id="#+id/drawer"
my:direction="topToBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
my:handle="#+id/handle"
my: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="40dp"
android:src="#drawable/sliding_drawer_handle_bottom" />
</view>
Thats it. Your sliding drawer is ready to work.
I have 2-3 Activities in my app that all share data in a memory pool. I want to be able to easily switch between these activities while keeping them all simultaneously running. In addition, I am developing for Android 4.0. I would like to use TabActivity, but it has been deprecated and replaced with ActionBar, which I have tried but I don't think it's what I'm looking for. I want large tabs, similar to the classic "Artist/Playlist/All" tabs found in the stock Android Music Application, or like the Tab Bar seen at the bottom of the screenshot below. Does anyone know of a library to create these tabs or a way to make ActionBar more customizable? Or is using TabActivity a perfectly good solution, even on ICS devices?
ActionBar is what you're looking for, actually.
You should convert your Activites to Fragments. Assuming they're not too complex, this shouldn't be hard at all. There are tons of examples out there. You need one Activity, preferably a FragmentActivity, to hold all of them.
This should help:
http://arvid-g.de/12/android-4-actionbar-with-tabs-example
There are several subquestions to this, I'll try to address them all:
-In order to use the top tabs, you want to use an ActionBar.
-If you were to do it in the style of the music app, where you swipe sideways between views and the label of the current one is always front and center... For that, the class you'd want to use is called ViewPager
You can see all of these methods by creating a new Activity in eclipse, and going through the wizard. Under "Navigation Type" you can select "Tabs", "Tabs + Swipe", "Swipe Views + Title Strip". Create any one of those Activities to see how it looks, and then look at the code to see how it's implemented & how to customize it.
-Navigation along the bottom is discouraged- See the Android Design Guide, spec the section "Don't use Bottom Tab Bars"
You have probably found an answer by now, but I thought I'll share another way you could create something like that tab bar using images and xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:id="#+id/main">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/tabackground"
android:layout_alignParentBottom="true"
android:id="#+id/llBottom">
<ImageButton
android:src="#drawable/icon2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
<ImageButton
android:src="#drawable/icon5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
/>
</LinearLayout>
<ImageView
android:layout_height="24dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#10ffffff"/>
<ImageView
android:layout_height="1dp"
android:layout_width="fill_parent"
android:layout_alignTop="#+id/llBottom"
android:background="#30ffffff"/>
</RelativeLayout>
Is not perfect but with some creativity and changing some values it can look very good.
Hope it helps in some way.
Anyone know of any open source implementation of a slide toggle for android. The default android toggle(ToggleButton) is not pretty. I am looking for anything similar to iOS. I should be able to implement one from scratch. But if anything similar is already available, then i can build on it.
Thanks in advance to the wonderful stackoverflow community.
Edit1:
What I meant by iOS Slide Toggle is UISwitch
Edit2: Just want to summarize the answer. Commonsware provided the clue. I ended up back porting the Switch code from 4.0 to2.2.2. Thanks to the open-sourced code, back porting was not very difficult. The code is hosted on git hub. http://github.com/pellucide/Android-Switch-Demo-pre-4.0/tree/master/
A screenshot from that project
you can use the sliding drawer widget in android to have a sliding toggle switch. you just have to "slice" the ios toggle images into3 parts, one for the handle, one for the sliding drawer background and one for the content part. then put an image on top of it like a frame to give you the "round edges"
here's what i've come up with:
XML Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="100dp" >
<SlidingDrawer
android:id="#+id/slidingDrawer1"
android:layout_width="154dp"
android:layout_height="54dp"
android:background="#drawable/ios_retina_toggle_on_full"
android:content="#+id/content"
android:handle="#+id/handle"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/handle"
android:layout_width="54dp"
android:layout_height="54dp"
android:background="#00000000"
android:src="#drawable/ios_retina_toggle_button" />
<ImageView
android:id="#+id/content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ios_retina_toggle_off" />
</SlidingDrawer>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ios_retina_toggle_frame" />
</FrameLayout>
</LinearLayout>
ios_retina_toggle_on_full
ios_retina_toggle_button
ios_retina_toggle_off
ios_retina_toggle_frame
and finally a screenshot of how it looked on the emulator on a 3.7 WVGA screen running gingerbread:
iOS does not seem to have a "slide toggle", at least under that name, based on a Google search. And, you did not provide an image (or a link to an image) of what you want.
Android 4.0 added a Switch that you might be able to backport to earlier versions. You will see samples of it in the API Demos app on your emulator:
You can try using ToggleButton specifying your own drawables for its states.
We can try using seekbar with custom drawables and thumb, setting the max value to 1 and min to 0. we can add animations for sliding effect
I am looking for a view or some sort of information regarding the bottom bar in default applications of Android such as Email, or Unlock pattern as shown in the picture below. I have not been able find anything about this on Androids site nor from Google searches.
Image: http://img11.imageshack.us/i/viewdn.jpg/
I believe that Christopher is correct; there is no special widget to create the bar in your image. However, if you want to emulate it, you can create a layout and use the style style="#android:style/ButtonBar". That will give you the light gray background and the correct margins.
I don't believe there's any standard view for the button bar used at the bottom of these apps; it's generally just two Button items placed together in a LinearLayout or RelativeLayout.
For example, looking at the Android Open Source Project, you can see the button bar for one of the email app setup screens is defined as two plain old Button objects.
However, it is surprising that Google didn't abstract more of the common stuff into an Android theme or sublayout, rather than having the same views and attributes in each layout XML.
From: http://code.google.com/p/k9mail/source/browse/k9mail/trunk/res/layout/account_setup_basics.xml?r=1314
<RelativeLayout
android:layout_marginTop="-45dip"
android:padding="0dip"
android:layout_alignParentBottom="true"
android:gravity="bottom|right"
android:background="#android:drawable/bottom_bar"
android:layout_height="fill_parent"
android:layout_width="fill_parent">
<Button
android:id="#+id/manual_setup"
android:text="#string/account_setup_basics_manual_setup_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_marginBottom="-4dip"
android:layout_alignParentLeft="true"
android:layout_centerVertical="false"
/>
<Button
android:id="#+id/next"
android:text="#string/next_action"
android:minWidth="#dimen/button_minWidth"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:drawableRight="#drawable/button_indicator_next"
android:layout_marginBottom="-4dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="false"
/>
</RelativeLayout>