Develop Reference

Android: sliding drawer content overlapping the whole screen

I have an application that uses a sliding drawer. I had to make some changes, the sliding drawer content was a simple relative layout but I had to change it to include a fragment.
this is the slider layout before the changes:
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal"
android:handle="#+id/handle"
android:rotation="180"
android:content="#+id/content">
<ImageView
android:id="#id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/handle"
android:rotation="180"
/>
<RelativeLayout
android:id="#id/content"
android:background="#drawable/border"
android:layout_width="140dip"
android:layout_height="fill_parent"
android:orientation="vertical"
android:rotation="180"
android:focusable="true"
android:focusableInTouchMode="true">
<EditText
android:drawableLeft="#android:drawable/ic_menu_search"
android:layout_width="fill_parent"
android:layout_height="50dp"
android:id="#+id/editInp"
android:layout_marginLeft="20dip"
android:imeOptions="actionDone"
android:layout_marginRight="20dip"
android:layout_marginTop="15dip"
android:hint=""
android:textColor="#color/themeapp"
android:background="#drawable/layout_corner_white"
android:singleLine="true"
android:inputType="textNoSuggestions"/>
<ImageView
android:id="#+id/clear_button"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginTop="23dip"
android:layout_alignRight="#id/editInp"
android:src="#android:drawable/ic_menu_close_clear_cancel"/>
<RelativeLayout
android:id="#+id/progress_conteiner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="#+id/footer1"
android:layout_below="#+id/header1"
android:visibility="gone">
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
style="?android:attr/progressBarStyle"/>
</RelativeLayout>
<ExpandableListView
android:id="#+id/list"
android:layout_below="#+id/editInp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dip"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:divider="#color/themeapp"
android:dividerHeight="1dp"
android:indicatorRight="300dp" />
</RelativeLayout>
</SlidingDrawer>
after the changes it looks like this:
<SlidingDrawer
android:id="#+id/drawer"
android:layout_width="140dp"
android:layout_height="fill_parent"
android:layout_alignParentTop="true"
android:orientation="horizontal"
android:handle="#id/handle"
android:rotation="180"
android:content="#id/content_frame">
<ImageView
android:id="#+id/handle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/handle"
android:rotation="180"
/>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="140dp"
android:layout_height="fill_parent" >
</FrameLayout>
</SlidingDrawer>
java code to inflate the fragment:
getActivity().getSupportFragmentManager().beginTransaction().add(R.id.content_frame, new FragmentFleetListMap(this)).commit();
the previous slider content, has been moved (unchanged) to a separate layout file to be used in the newly created fragment.
before, the slider worked weel, but now I see the fragment content overlapped to the activity content (see screeenshot below), is also not limited to the slider space but takes up the whole screen
as you can see in the screenshot the slider is open and it takes the correct portion on the screen (see the position of the handler [the little orange rectangle in the middle of the right side), so I think the problem is actually that the fragment content is not being positioned inside the slider
can anybody help me with this?

looks like this line:
getActivity().getSupportFragmentManager().beginTransaction().add(R.id.content_frame, new FragmentFleetListMap(this)).commit();
was "adding" my fragment containing the list over the mapfragment instead of the frameLayout. changing it to:
getChildFragmentManager().beginTransaction().add(R.id.content_frame, new FragmentFleetListMap(this)).commit();
solved the problem

Add header Image in navigation drawer on android studio sample navigation drawer

i need to add header image like this Post :
can I add an image header in navigation drawer layout
but, im using android studio sample navigation drawer for doing this.
it is good or bad for design this ?
and the better way or Compact way for doing this ?
any suggestion ?
thanks.

Can I add an Image Header in Navigation Drawer Layout?
Yes you can add with no problems.
If you use android studio navigation drawer or some thing else every thing are same. Some additional methods will be present and you need to check the methods required by you and delete other methods. You may also need to add few methods.
As per the latest android, best way of designing navigation drawer is by using recycler view and by using material design.
There are lot of materials in google for doing this, one of the finest tutorials I prefer is in the link given below you can have a look:
https://www.youtube.com/watch?v=zWpEh9k8i7Q&list=PLonJJ3BVjZW6CtAMbJz1XD8ELUs1KXaTD&index=6
Hope it helps.

In the menudrawer activity setcontentview(layout).Inside this layout
try to add an imageview.My sample xml is as folllows
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- As the main content view, the view below consumes the entire
space available using match_parent in both dimensions. -->
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:background="#android:color/transparent"
android:layout_height="match_parent" />
<!-- android:layout_gravity="start" tells DrawerLayout to treat
this as a sliding drawer on the left side for left-to-right
languages and on the right side for right-to-left languages.
The drawer is given a fixed width in dp and extends the full height of
the container. A solid background is used for contrast
with the content view. -->
<LinearLayout
android:layout_height="match_parent"
android:layout_width="120dp"
android:weightSum="7"
android:layout_gravity="start"
android:id="#+id/parentlayoutt"
android:choiceMode="singleChoice"
android:orientation="vertical"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:id="#+id/headerimage"
android:src="#drawable/yourimage"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/parentmenuone"
android:soundEffectsEnabled="true"
android:descendantFocusability="blocksDescendants"
android:background="#color/pure_white"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/birdwhite"
android:background="#color/white"
android:id="#+id/sidejive1"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive1"
android:id="#+id/title1"
android:clickable="false"
android:textColor="#color/violetbg"
android:text="#string/createmenu"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:descendantFocusability="blocksDescendants"
android:id="#+id/parentmenutwo"
android:background="#drawable/whitebox"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/profilewhite"
android:background="#color/white"
android:id="#+id/sidejive2"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive2"
android:id="#+id/title2"
android:clickable="false"
android:textColor="#color/violetbg"
android:text="#string/Accountmenu"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:descendantFocusability="blocksDescendants"
android:id="#+id/parentmenuthree"
android:background="#drawable/whitebox"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/homewhite"
android:background="#color/white"
android:id="#+id/sidejive3"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive3"
android:id="#+id/title3"
android:textColor="#color/violetbg"
android:text="#string/Dashboardmenu"
android:clickable="false"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="#+id/parentmenufour"
android:descendantFocusability="blocksDescendants"
android:background="#drawable/whitebox"
>
<ImageButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="#drawable/examplewhite"
android:background="#color/white"
android:id="#+id/sidejive4"
android:clickable="false"
android:layout_centerInParent="true"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_centerHorizontal="true"
android:layout_below="#+id/sidejive4"
android:id="#+id/title4"
android:textColor="#color/violetbg"
android:text="#string/Examplemenu"
android:clickable="false"
/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>

Relative Layout with HorizontalScrollView

I am trying to set my ImageButtons in a horizontal scroll view that appears under the frame layout. Below is what I have done so far. However, this scrolls everything, including my frame layout. How do I avoid that? Or in another way to look at it, I'm trying to take my navigation drawer and lay it down instead of popping out from the side? Maybe there's a way to replicate that? Overall goal is to get something that looks similar to the old blackberry scroll menu.
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".DMActivity">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:gravity="center">
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="900px"></FrameLayout>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:src="#drawable/directmessage_button"
android:id="#+id/btn_DirectMessages"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false" />
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:src="#drawable/instantmessage_button"
android:id="#+id/btn_InstantMessage"
android:layout_toRightOf="#+id/btn_DirectMessages"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/container"
android:layout_toRightOf="#+id/btn_InstantMessage"
android:src="#drawable/reports_button"
android:id="#+id/btn_Reports"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/conference_button"
android:id="#+id/btn_Conference"
android:layout_toRightOf="#+id/btn_Reports"
android:layout_below="#+id/container"
android:background="#0000"
android:padding="20px"
android:focusableInTouchMode="false"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/account_button"
android:id="#+id/btn_Account"
android:layout_toRightOf="#id/btn_Conference"
android:layout_below="#+id/container"
android:background="#0000"
android:padding="20px"/>
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/filetransfer_button"
android:id="#+id/btn_FileTransfer"
android:layout_below="#id/container"
android:layout_toRightOf="#+id/btn_Account"
android:background="#0000"
android:padding="20px"/>
</RelativeLayout>
</HorizontalScrollView>
<fragment android:id="#+id/navigation_drawer"
android:layout_width="#dimen/navigation_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
android:name="datamotion.dmandroidclient.NavigationDrawerFragment"
tools:layout="#layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>

I don't know if I understood well, but I use this library to do horizontal scroll, you can implement this horizontal listView and inside it put your ImageButtons just like you would do with a vertical ListView.
https://github.com/sephiroth74/HorizontalVariableListView
Hope it helps you.

Tabs and swipe views error in tools:listitem

I have implemented a tabs and swipe method inside my application, Here's a link! (this is the nice tutorial)
inside my application in the first TAB I have a ListView and the row are defined in other xml.
this is tab1.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tab1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/LinearLayout5"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/LinearLayout3"
android:layout_alignParentBottom="true"
android:layout_below="#+id/LinearLayout3"
android:layout_marginTop="10dp"
android:background="#ccffcc"
android:orientation="horizontal" >
<ListView
android:id="#+id/listView"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true">
<!-- tools:listitem="#layout/row"> -->
</ListView>
</LinearLayout>
</LinearLayout>
this is the row.xml
<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:padding="5dp"
tools:context=".MainActivity" >
<TextView
android:id="#+id/tv_prodotto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginLeft="50dp"
android:text="Prodotto"
android:textStyle="bold" android:textColor="#000000" />
<View
android:id="#+id/viewLine"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_below="#id/tv_prodotto"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:background="#666666" />
<TextView
android:id="#+id/tv_qta"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/tv_prodotto"
android:layout_marginLeft="50dp"
android:layout_marginTop="3dp"
android:text="Quantita"
android:textColor="#000000"
android:textSize="12sp" />
</RelativeLayout>
the compiler give me an error in the tools:listitem
This is the error: Attribute is missing the Android namespace prefix
before implement the Tabs and swipe method (in a normal application) the tools:listitem="#layout/row" run correctly without compiler error!
How can I resolve this?

I will save you all the trouble.
I hope you're using the eclipse.
When you create new android project in Eclipse, they give you option if you want to implement tab swipe (many other options too).
While creating the new project, on very last window. They give you option for "Navigation Type". This is where you choose if you want to implement tab with swipe feature. To implement tab with swipe, your minimum API has to be 11.
Let me know how it goes, if you have any other question feel free to ask.
Hope this help you out.

How to create a slider like on the GoWeather weather app?

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.