How to display the FAB in all activities - android

In my activity_navigation.xml I put my FAB here.
The is below:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/content_frame">
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:menu_icon="#drawable/quick_apply"
android:layout_gravity="bottom|right"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/view_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/imgicon"
fab:fab_size="mini"
fab:fab_label="View Images" />
<com.github.clans.fab.FloatingActionButton
android:id="#+id/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/camicon"
fab:fab_size="mini"
fab:fab_label="Camera" />
</com.github.clans.fab.FloatingActionMenu>
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:menu="#menu/activity_navigation_drawer"
android:background="#color/tableHeader"/>
I set this xml on my NavigationActivity where this will be like my BaseActivity and then extended it to all my other Activities.
My problem when running the app the FAB is not displaying, because it has been covered by the xml I assign to the content_frame. But If I put the com.github.clans.fab.FloatingActionMenu in one of my other activities's xml for example in my Home Screen it will display it but i wonder how can I display the FAB without repeating it to add on my xml. All the action of the FAB I put it on my NavigationActivity.
Thank you for the help.
update
By the way I'm using the FrameLayout named content_frame to my other activities to display the xml of that Activity like in my Home Screen like this
FrameLayout contentFrameLayout = (FrameLayout) findViewById(R.id.content_frame);
getLayoutInflater().inflate(R.layout.activity_home, contentFrameLayout);

//i do not have your resource value, so i try to make a test example, which replace your drawer view with textview. If i put framelayout height with match parent, i only see one textview, only if i put the height be 20dp, it will appear both textviews.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="20dp"
android:id="#+id/content_frame">
<TextView
android:text="text above"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</FrameLayout>
<TextView
android:text="text below"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>

What I did is I create two FrameLayout in my activity_navigation.xml
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1"/>
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:menu_icon="#drawable/quick_apply"
android:layout_gravity="bottom|right"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/view_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/imgicon"
fab:fab_size="mini"
fab:fab_label="View Images" />
<com.github.clans.fab.FloatingActionButton
android:id="#+id/camera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/camicon"
fab:fab_size="mini"
fab:fab_label="Camera" />
</com.github.clans.fab.FloatingActionMenu>
</FrameLayout>
Where my FAB is not inside the content_frame, so that it will not overlap.

use Fragment instant of Activity

Related

Linear Layout overlapping with Scroll view and other Linear Layout

Recently i have encounterd a problem. My linear layout where my edit text and image button is in is overlapping with my toolbar and my scroll view. I've tried other things like layout_below etc and nothing worked. Groupchat.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".GroupChatActivity"
android:orientation="vertical">
<include
android:id="#+id/group_chat_bar_layout"
layout="#layout/app_bar_layout">
</include>
<ScrollView
android:id="#+id/my_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/group_chat_bar_layout"
android:layout_above="#+id/myLinearLayout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/group_chat_text_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAllCaps="false"
android:textSize="20sp"
android:textColor="#android:color/background_dark"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="50dp"/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/input_group_message"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:hint="Write message..." />
<ImageButton
android:id="#+id/send_message_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:src="#drawable/send_message" />
</LinearLayout>
This is how the preview of the groupchat.xml file looks in Android Studio:
enter image description here
This was how the app looked with this code.
This are the results
Just in case, this is the code of my toolbar: Appbarlayout.xml
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
It in a seperate xml because i'm using it for other activities in my app to thats why theres ang include in th Groupchat.xml
ALSO I AM FOLLOWING THIS TUTORILA. I suggest you go ther and see it because that is what i followed.
go to this video
Thank you.
The problem is with layout placements. your LinearLayout with ID: myLinearLayout is not aligned anywhere in RelativeLayout that's why it is getting rendered on top of the screen. make following changes and your good to go.
in your LinearLayout with id: myLinearLayout, add this line:
android:layout_alignParentBottom="true"
like this:
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
Add
android:layout_below="#+id/group_chat_bar_layout"
this line to LinearLayout
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/group_chat_bar_layout"
android:orientation="horizontal">
<EditText
android:id="#+id/input_group_message"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:hint="Write message..." />
<ImageButton
android:id="#+id/send_message_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:src="#drawable/bkg" />
</LinearLayout>`

CardView and other elements are not being displayed in my xml file

I am using an AppCompatActivity and at the moment, I am trying to add a navigational drawer to the toolbar.
Problem is, now the cardview is not being displayed and the navigational drawer is also not working.
This is my code:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp">
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cards"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:padding="10dp"
android:layout_alignParentBottom="true">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Username"
android:id="#+id/usersName"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Others"
android:id="#+id/others"
android:layout_centerVertical="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"></android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Would really mean a lot and make my day if someone could fix my error please. I don't know where I have gone wrong, and I just want to have the navigation drawer button in the toolbar and the cardview on the screen
Youre trying to squeeze a 200dp cardview inside a 150dp container. Use match_parent for drawerlayout.
Then, straight from the developer guides:
The main content view must be the first child in the DrawerLayout because the XML order implies z-ordering and the drawer must be on top of the content.
The main content view is set to match the parent view's width and height, because it represents the entire UI when the navigation drawer is hidden.
For more information follow the developer resources
Try this solution, this has android:layout_gravity="start" in NavigationView and CardView android:layout_height="match_parent" and some other minor changes.
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="150dp">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/cards"
android:layout_width="match_parent"
android:layout_height="match_parent"
card_view:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:padding="15dp">
<TextView
android:id="#+id/usersName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="Username"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/others"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="Others"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:fitsSystemWindows="true">
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

Customise Textview of included layout

I have a layout as follows:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/logo_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/logos_background">
</ImageView>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginBottom="5dp"
android:layout_alignBottom="#+id/logo_background"
>
<TextView
android:id="#+id/logoDetails"
android:text="Test Logo details"
android:textSize="15sp"
android:layout_centerHorizontal="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="#+id/stockQuantity"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:layout_below="#+id/logoDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="x10"/>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
I need to include this layout multiple times in another layout which I have done as follows:
<HorizontalScrollView
android:layout_below = "#+id/selectLayout"
android:id="#+id/pager"
android:scrollbars="none"
android:layout_marginLeft="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<include layout="#layout/viewpager_item_layout"/>
<include layout="#layout/viewpager_item_layout"/>
<include layout="#layout/viewpager_item_layout"/>
<include layout="#layout/viewpager_item_layout"/>
<include layout="#layout/viewpager_item_layout"/>
<include layout="#layout/viewpager_item_layout"/>
<include layout="#layout/viewpager_item_layout"/>
</LinearLayout>
</HorizontalScrollView>
This gives the the following result:
The problem is I need to access the text views and image views in each <include>. So the logo image will be different the test logo details will be different and the 'x10' will be different for each one as I hope to populate them from a database. Could anyone shine a light on this?
It had been my intention to use a view pager for this but that doesn't work as it takes up the whole width and height of the screen.
<include android:id="#+id/news_title"
layout="#layout/viewpager_item_layout"/>
Try if it helps.
You can access like this :
View includedLayout = findViewById(R.id.news_title);
TextView insideTheIncludedLayout = (TextView )includedLayout.findViewById(R.id.logoDetails);
after setting layout to include tags , in your code use this :
View v = findViewById(R.id.your_layout_id);
TextView tv = (TextView) v.findViewById(R.id.text_view_id);

Android: Able to Click through the nav drawer?? AppCompat v7:r21

When I open my navigation drawer in an android app I created, I'm still able to click on list items in my main layout (The content layout). I mean, I am actually able to click on a ListView item through my navigation drawer. I don't have any clickable items in the navigation drawer yet, but I've put it in a proper FrameLayout with a white background. The content of the drawer, I am designing in a fragment. Here is my code:
activity_home.xml (MainActivity)
<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"
android:background="#android:color/white"
tools:context=".HomeActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar_home"
layout="#layout/my_awesome_toolbar" />
<FrameLayout
android:id="#+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ImageButton
android:id="#+id/fab_addContact"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_marginBottom="#dimen/view_margin_large"
android:layout_marginEnd="#dimen/view_margin_large"
android:layout_marginRight="#dimen/view_margin_large"
android:background="#drawable/fab_button"
android:contentDescription="#string/fab_contDesc"
android:padding="#dimen/view_margin_large"
android:src="#drawable/ic_add_white_24dp" />
</FrameLayout>
</LinearLayout>
<FrameLayout
android:id="#+id/drawer_frame"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#android:color/white"
android:clickable="true" />
</android.support.v4.widget.DrawerLayout>
fragment_drawer.xml (DrawerFragment to go into the #+id/drawer_frame )
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="144dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/material_design_wallpaper" />
<ImageView
android:id="#+id/iv_userThumbnail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_margin="16dp"
android:background="#drawable/display_pic_thumbnail"
android:contentDescription="#string/contact_thumbnail" />
<View
android:layout_width="match_parent"
android:layout_height="#dimen/view_margin_xx_large"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/shadow" />
<TextView
android:id="#+id/tv_userName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/tv_userEmail"
android:layout_alignLeft="#+id/tv_userEmail"
android:layout_alignStart="#+id/tv_userEmail"
android:layout_marginBottom="#dimen/view_margin_small"
android:text="Siddhant Chavlekar"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#android:color/white"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_userEmail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="#dimen/view_margin_large"
android:layout_marginLeft="#dimen/view_margin_large"
android:layout_marginStart="#dimen/view_margin_large"
android:text="siddhant.chavlekar87#gmail.com"
android:textColor="#android:color/white" />
</RelativeLayout>
</LinearLayout>
Why is this happening? I'm using the AppCompat v7:r21 library to provide backwards compatibility for my Lollipop (Material Design) Apps.
So, I put the above mentioned line which is android:clickable="true" in my drawer_frame FrameLayout and so far I haven't come across any difficulties. Although, if I put it in my other layout, the bug still arises...
So I guess the solution is to put android:clickable="true" in the layout which represents the drawer. (The layout with android:layout_gravity="start")

Hide a layout when focus on it is lost in XML

I have the following xml file:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/FrameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="#+id/musicLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="horizontal"
android:padding="10dp"
android:focusable="true"
android:visibility="visible" >
<ImageView
android:id="#+id/backward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/backward" />
<ImageView
android:id="#+id/stop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:src="#drawable/stop" />
<ImageView
android:id="#+id/pausePlay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:src="#drawable/play" />
<ImageView
android:id="#+id/forward"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingRight="10dp"
android:src="#drawable/forward" />
</LinearLayout>
The framelayout is for an actionbar with tabs which are the viewpager in the above layout. The actionbar works perfect. The problem that I want to solve is that the last linearlayout, which is actually a media player floating in the bottom of the screen, needs to be hidden when I press outside the linearlayout! I have tested the onfocuschangelistener in the musicLayout and onclick in the pageviewer but nothing happens! What am i doing wrong?
Edit:
In case it helps, every tab is a fragment with its own layout which is added to the viewPager.
I think the easiest solution to this problem would be to add a transparent view that matches parent of your ViewGroup. Basically, you would have the ViewPager, LinearLayout and View at the same level. You can then register an onClickListener on your transparent View and that should do the trick.
Layout should be something as simple as this :
<View android:id="#+id/transparent_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"/>

Categories

Resources