The go weather app (Go Weather On Google Play) has a nice little slider near the bottom just above the "MON", "TUE", "WED" in the image below.
You can drag the slider Up to show a longer daily forecast in addition to the 3 days shown. You can also drag the slider down to close the slider and hide the daily graphical temperatures + icons.
I assume this is not a normal slider since it seems to support 3 positions
90% of the screen (visible with forecast)
20% of the screen (as below)
0% of the screen (not visible except the slider bar)
Does anyone know how to make this type of UI?
Really appreciate a code sample or link to sites.
This is just an arrangement of layouts and widgets,
here is the sample xml I created, you can put diff widgets and layouts to design like this,
<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" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="#dimen/padding_medium"
android:text="#string/hello_world"
tools:context=".MainActivity" />
<SlidingDrawer android:id="#+id/SlidingDrawer" android:handle="#+id/slideHandleButton"
android:content="#+id/contentLayout" android:layout_width="wrap_content"
android:layout_height="120dp" android:orientation="vertical"
android:layout_alignParentBottom="true"
>
<Button
android:layout_width="fill_parent"
android:layout_height="10dp"
android:id="#+id/slideHandleButton"
android:background="#00868B" />
<LinearLayout
android:id="#+id/contentLayout"
android:layout_width="fill_parent"
android:layout_height="150dp"
android:background="#90000000"
android:gravity="center|top"
>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/diego"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Diego"
/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/ellie"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ellie"
/>
</LinearLayout>
</FrameLayout>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:layout_gravity="center_vertical"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/scart"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/sid"
/>
</LinearLayout>
</FrameLayout>
</LinearLayout>
</SlidingDrawer>
Just paste this in your program, you will see the working data. No need to write code for now, You can handle related events base on your needs. Here I used images from site, so download some images or use your existing images and replace the drawable used in this code.
Hope you will get this.
Related
In my first screen shot you can see expended listview at top and textview placed at below next to expended listview.
But if you look at my second screen shot, as the listview adds more items textview place at the bottom does not appear.
My layout code is :
<LinearLayout
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/form_view"
>
<LinearLayout
android:id="#+id/relativeLayout1"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Spinner
android:layout_height="wrap_content"
android:layout_width="0dip"
android:layout_weight="2"
android:id="#+id/spinnerSemester" />
<Button
android:id="#+id/graph_button"
android:layout_width="0dip"
android:layout_weight="0.7"
android:layout_height="wrap_content"
android:text="Chart" />
</LinearLayout>
<ExpandableListView
android:id="#+id/lv_attendance"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_weight="1"
android:cacheColorHint="#00000000"
>
</ExpandableListView>
<TextView
android:id="#+id/TV_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lv_attendance"
android:paddingLeft="10dp"
android:text="[NOTE : The data displayed here is for advance information only. Please check with the college office/department concerned for the final and certified data. In case of discrepancies, the data maintained in the college records will be deemed to be the final one.]"
android:layout_marginTop="10px"
android:textSize="13sp" />
</LinearLayout>
Thanks,
Nandakishore P
Try as below...
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/form_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Spinner
android:id="#+id/spinnerSemester"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="2" />
<Button
android:id="#+id/graph_button"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:text="Chart" />
</LinearLayout>
<ExpandableListView
android:id="#+id/lv_attendance"
android:layout_width="match_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:cacheColorHint="#00000000" >
</ExpandableListView>
<TextView
android:id="#+id/TV_note"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:paddingLeft="10dp"
android:text="[NOTE : The data displayed here is for advance information only. Please check with the college office/department concerned for the final and certified data. In case of discrepancies, the data maintained in the college records will be deemed to be the final one.]"
android:textSize="13sp" />
</LinearLayout>
consider specifyig android:layout_weight to the views, also encasing that text view in a framelayout or linearlayout
Gods, I hate layout...
Dont use android:layout_below="#+id/lv_attendance", its creating problem, use alignParentBottom instead.
I am developing a new Android application. I need to design the below screenshot in my application . I am using eclipse IDE.
Using the below code I formed the above shown screen-shot. But whenever I choose the different screen previews ( 4.7’’ WXGA , 4.0” WXGA etc., ) am getting the inner images which are marked with arrows in the below scree shot are misaligned. The below is the screen shot which is an example. All the images in the layout are icons ( Ex., home, share ).
<?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/bar"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.9" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_marginTop="240dp"
android:layout_weight="1.00"
android:src="#drawable/rec_button_stop"
android:visibility="gone" />
</LinearLayout>
<LinearLayout android:id="#+id/linearLayout3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" >
<ImageView android:id="#+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="40dip" android:layout_marginTop="90dip"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="40dip"
android:layout_marginTop="90dip"
android:src="#drawable/home" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight="1.00"
android:src="#drawable/rec_button_stop" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayout2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="30dp"
android:layout_height="fill_parent"
android:layout_marginLeft="10dip"
android:src="#drawable/share" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
So I need the samller images ( icons which are marked with arrows) to be fixed at the same position ( in straight line ) whenever I change the screen priviews with different sizes.
Can some one guide me with some code snippets or with some links.
#2Vision2 : This problem is caused because you have used fixed margin in layout components.
For supporting various size devices you have to create different layouts. You are facing this problem because you are using only single layout. Create 4 directories in res/ directory in your app for layouts of all sizes
layout (for devices below 4")
layout-800X480 (for devices above 4" & below 5")
layout-sw620dp (for 7" tablets)
layout-sw800dp (for 10" tablets)
Also if want to create different layouts for landscape mode then create layout-land, layout-land-800X480,.. directories for supporting app in landscape mode also.
try this xml file,this will work universally in all sizes(land & port)!actually you may be using wrong way to use weight.
hope this will help you getting idea how to set layout and gravity,with the use of WEIGHT.
<?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:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".75" >
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight=".25"
android:background="#android:color/darker_gray" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".20"
android:gravity="center" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".60"
android:gravity="center|top" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="fill_parent"
android:layout_weight=".20"
android:gravity="center" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
weight can be also used in Relative Layout.but preffered way to use it with linear Layout.
still any query, plz ask...
When I render a large Webview on android 4.1, the webview loads correctly, but also popsout of the layout. Here's an example:
As you can see in the top left corner, there's a white space, that shouldn't be there. If I tap with my finger it, it disappears...
I've tried to invalidate & requestLayout the top level container of this contentView, but it's still happening.
As I said in title, this is only happening in 4.0.4 devices (I know that 4.1 are ok.)
Do you guys know what else could I try?
Thanks.
Edit
That blank rectangle, is somehow over the menubar. Maybe invalidating menu will solve it?
I've tried: this.invalidateOptionsMenu(); and still the same issue.
Edit2:
This is the layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/containerTotaApp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="horizontal" >
<View
android:id="#+id/rightshadow"
android:layout_width="10dp"
android:layout_height="10dp"
android:layout_alignParentBottom="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/contentContainer"
android:background="#drawable/shadow_right" />
<RelativeLayout
android:id="#+id/bgImageSliderContainer"
android:layout_width="700dp"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#000000" >
</RelativeLayout>
<ScrollView
android:id="#+id/scrollView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true" >
<LinearLayout
android:id="#+id/containerRightOptional"
android:layout_width="680dp"
android:layout_height="match_parent"
android:background="#ffffff"
android:orientation="vertical"
android:visibility="gone" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/navigationContainer"
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="#393939" >
<LinearLayout
android:id="#+id/containerTopMenu"
android:layout_width="match_parent"
android:layout_height="70dp"
android:background="#drawable/companybg"
android:gravity="center_vertical"
android:orientation="vertical" >
<TextView
android:id="#+id/textEntradaMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:text="COMPANY"
android:textSize="32sp" />
</LinearLayout>
<ScrollView
android:id="#+id/scrollView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/containerTopMenu">
<LinearLayout
android:id="#+id/containerEntradesMenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
</RelativeLayout>
<RelativeLayout
android:id="#+id/contentContainer"
android:layout_width="600dp"
android:layout_height="fill_parent"
android:layout_toRightOf="#+id/navigationContainer"
android:background="#ffffff">
<LinearLayout
android:id="#+id/titleContentContainer"
android:layout_width="fill_parent"
android:layout_height="70dp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:gravity="center_vertical"
android:background="#EBEBEB">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:onClick="toggleMenu"
android:src="#drawable/vista2_cerca" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="TextView"
android:textColor="#288BA2"
android:textSize="30sp" />
</LinearLayout>
<View
android:id="#+id/separadortop"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/titleContentContainer"
android:background="#cecece"
android:visibility="gone" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/separadortop"
android:visibility="gone" />
<View
android:id="#+id/separadortop2"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_below="#+id/spinner1"
android:background="#cecece" />
<ScrollView
android:id="#+id/scrollView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/separadortop2"
android:background="#ffffff" >
<LinearLayout
android:id="#+id/variableContent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
</RelativeLayout>
The webviews are added dynamically to VariableContent
Granted that I can't pinpoint exactly what the source of your problem is, you can give disabling the hardware acceleration a try:
web.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
There are also other "interesting" options that you might try to switch on and off:
webv.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
(I know that caching shouldn't be related to your problem, but turning caching off fixed the most curious glitches in my webview, so you probably want to try yourself) and
web.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
No offense to the developers Team, but WebViews on Android are quite a mess, and here are a couple of links to back this statement up:
hardware accelerated webview slide-in animation flickering on ICS
webview goes blank when loading url in android ics
WebView, showing blank in ICS
which might also be useful to you.
Let us know if you find some solution anyway
Hope this helps
I am using the sliding menu in my application
After clicking on the setting icon I go the following result
The content in the first layout is wrapping, instead I want to hide that part of view
Xml file
<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"
android:background="#drawable/menu_bg"
tools:context=".PrincipalActivity" >
<include layout="#layout/actionbar_menu" android:id="#+id/actionBarMenu"/>
//listview for displaying menu
<ListView
android:id="#+id/listMenu"
android:layout_below="#+id/actionBarMenu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:divider="#282828"
android:dividerHeight="1dip"
android:background="#3F3F3F"
android:fadingEdge="none"
android:listSelector="#drawable/list_selector">
</ListView>
//this is main layout which is visible first time when application starts
<RelativeLayout
android:id="#+id/layoutToMove"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_below="#+id/actionBar"
android:background="#282828">
<include layout="#layout/actionbar_layout" android:id="#+id/actionBar"/>
<ImageButton
android:id="#+id/menuButton"
android:layout_width="48dp"
android:layout_height="48dp"
android:layout_alignBottom="#+id/actionBar"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:onClick="openCloseMenu"
android:src="#drawable/menu"
android:background="#android:color/transparent" />
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="asdkjasdksajdkasjdkasjdkasdddddddddddddddddddddddddddddd"
android:textColor="#fff"
android:layout_centerVertical="true"/>
<Button
android:id="#+id/separator"
android:layout_width="1dp"
android:layout_height="50dp"
android:layout_toRightOf="#+id/menuButton"
android:background="#drawable/custom_button_black" />
</RelativeLayout>
Any kind of help will be greatly appreciated
You should consider using jfeinstein10's SlidingMenu. It is quite good and is widely used by many popular Android apps such as Foursquare Rdio, Falcon Pro, ...etc
I have a layout where I need to show a webview on part of the screen. I've set the layout up and in the Graphical Layout in Eclipse, it does look as I want to, like this (logo and heading blacked out):
However when I open this layout in the simulator or on a Phone it shows the WebView as a full screen. How do I make a layout like this? Any help is much appreciated!
Here's my XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
style="#style/Theme.KB_default"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#drawable/header_background_shape" >
<TextView
android:id="#+id/heading"
style="#style/Theme.KB_header"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:text="#string/app_name" >
</TextView>
<ImageView
android:id="#+id/imageViewPadlock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:contentDescription="#string/global_secure_connection"
android:src="#drawable/padlock" />
</RelativeLayout>
<View
android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#color/black" >
</View>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="0.41"
android:orientation="vertical" >
<WebView
android:id="#+id/webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="40dp"
android:layout_height="20dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="15dp"
android:contentDescription="#string/global_logo"
android:scaleType="fitXY"
android:src="#drawable/logo_transparrent_notext" />
</LinearLayout>
</LinearLayout>
make one of table block as webview
check this link
http://developer.android.com/reference/android/widget/TableLayout.html
You can also check this example by using dialog
http://www.41post.com/4673/programming/android-creating-a-webview-dialog
Well I seem to be the stupidist guy alive. My layout worked but I forgot to add " setContentView(xml.file);" so it never loaded the XML... Stupid