Develop Reference

How can I prevent FrameLayout from shadowing my Views?

My interface looks like this:
XML:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/profile_fields_container"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/account_person_name_label" />
<EditText
android:id="#+id/person_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_emailId_label" />
<EditText
android:id="#+id/person_emailId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_phoneNo_label" />
<EditText
android:id="#+id/person_phoneNo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="phone"
android:maxLength="10"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_password_label" />
<EditText
android:id="#+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="#string/account_person_retypePassword_label" />
<EditText
android:id="#+id/retype_password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:minWidth="150dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/learner_tutor_status_label" />
<android.support.v7.widget.AppCompatSpinner
android:id="#+id/learner_tutor_status_spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<!--Floating Button-->
<Button
android:id="#+id/create_account"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:text="#string/create_account_string"
style="#style/Widget.AppCompat.Button.Colored"/>
</FrameLayout>
Now, you can see at the bottom there is I am here to.... This is a dropdown and when I choose one of the options, my code dynamically adds a few views to the hierarchy but the problem is they are not visible(not all of them; just I am a... is visible.)
I checked the layout hierarchy through the Layout inspector and turns out that the hierarchy is alive but the floating button(Create Account) has overshadowed it.
Now, I know if I were to replace the root FrameLayout with a LinearLayout, it would be visible but the problem is that if then I would click on a EditText button, the keypad would cover the screen with the Create Account button as covered too. I actually want this button to be on the screen at all times.
Does anyone how can I get around this problem?

Your layout is not totally correct because your floating button hides the bottom of your ScrollView all the time. You should replace the FrameLayout with a vertical LinearLayout (just like you said) and then specify the window behavior of your activity when the soft keyboard pops up with the windowSoftInputMode attribute in your activity element on the AndroidManifest.xml file. If you use android:windowSoftInputMode="adjustResize", the window will resize accordingly and the button should be always visible.

Bottom view scrolls with recyclerview in viewpager with tablayout and Caordinatelayout

I am using coardinate layout with recyclerview in viewpager and tablayout. I have a view for banner which i want to show over the recyclerview at the bottom. This bottom view is only visible if i scroll up the recyclerview list and hides when i scrollback down.I want this view to be visible all the time over recyclerview. Any help will be appreciated. Thanks in advance.r image description here]1]1
Here is my xml code
<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="#color/deal_display_bg"
tools:context="com.safar.spicedeals_activities.DealsActivity$PlaceholderFragment">
<View
android:id="#+id/topview_deal"
android:layout_width="match_parent"
android:layout_height="3dp"
android:layout_alignParentTop="true"
android:background="#color/spice_laddooblue"
android:visibility="gone" />
<View
android:layout_width="match_parent"
android:layout_height="5dp" />
<TextView
android:id="#+id/no_deals_available"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="#string/no_deals_available"
android:textColor="#color/spice_laddooblue"
android:textSize="18sp"
android:textStyle="bold"
android:visibility="gone" />
<FrameLayout
android:id="#+id/frameLayoutDeals"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/bannerView"
android:layout_below="#+id/topview_deal"
android:padding="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ProgressBar
android:id="#+id/progressBarDeals"
style="?android:attr/android:progressBarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="visible" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- </android.support.v4.widget.SwipeRefreshLayout> -->
</FrameLayout>
<RelativeLayout
android:id="#+id/relativeLayout_PriceTotal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#drawable/background_with_border_square"
android:padding="10dp"
android:visibility="gone">
<TextView
android:id="#+id/textView_totalPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:text="#string/total_price"
android:textColor="#color/spice_laddooblue"
android:textSize="15sp"
android:textStyle="bold" />
<TextView
android:id="#+id/textView_totalPriceResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignTop="#+id/textView_totalPrice"
android:layout_marginLeft="3dp"
android:layout_marginTop="2dp"
android:layout_toRightOf="#+id/textView_totalPrice"
android:textColor="#color/spice_laddooblue"
android:textSize="15sp"
android:textStyle="bold" />
<Button
android:id="#+id/button_processDeal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/textView_totalPrice"
android:layout_marginTop="10dp"
android:background="#color/spice_laddooblue"
android:text="#string/proceed_tag"
android:textColor="#color/White"
android:textStyle="italic" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/bannerView"
android:layout_width="match_parent"
android:layout_height="58dp"
android:layout_alignParentBottom="true"
android:background="#drawable/curved_white_with_blue_border"
android:visibility="gone">
<TextView
android:id="#+id/bannerText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerInParent="true"
android:layout_centerVertical="true"
android:gravity="center"
android:padding="3dp"
android:text="Banner"
android:visibility="gone" />
<ImageView
android:id="#+id/bannerImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:padding="3dp"
android:scaleType="fitXY"
android:visibility="gone" />
<ImageView
android:id="#+id/bannerClose"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:src="#drawable/cross_icon" />
</RelativeLayout>
</RelativeLayout>

This worked for me! add this attribute for your android.support.v7.widget.Toolbar
app:layout_scrollFlags="scroll"
The app:layout_scrollFlags attribute of the Toolbar indicates to the view how to respond. It has the following possible values.
scroll :
This flag is generally set for all views that need to
scroll off-screen. Views that don’t use this flag remain static
allowing the other scrollable views to slide behind it.
enterAlways :
This flag ensures that any downward scroll will cause the view to
become visible, enabling the quick return pattern.
enterAlwaysCollapsed :
An additional flag for ‘enterAlways’ which
modifies the returning view to only initially scroll back to it’s
collapsed height.
exitUntilCollapsed :
This flag causes the view to
be scrolled until it is collapsed (its minHeight is reached) before
exiting
snap : Upon a scroll ending, if the view is only partially
visible then it will be snapped and scrolled to it’s closest edge.
Hence this avoids mid-animation states of a view
More details can be found here.

Android making bottom tool bar not move to top of layout

This is sort of a continuation of , where I wanted to get a warning text at the bottom of my screen (below my bottom tool bar) when off line. When in offline mode looks correct:
However when I hide the offline mode it pops to the top of the layout, like such (hiding everything I want to show):
I tried setting the bottom tool bar to android:layout_alignParentBottom="true", that does keep it from popping to the top when I hide the RelativeLayout with the TextView in it (Offline Mode) but then they overlay each other when I do not hide the Offline Mode.
Probably easy for someone a bit more experienced with Android UI than I. The XML layout currently looks like this:
<RelativeLayout
android:id="#+id/mainLyt"
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">
<ScrollView
android:id="#+id/formScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_above="#+id/bottomBar" >
<LinearLayout
android:id="#+id/formLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="10dp"
android:paddingTop="15dp"
android:paddingRight="10dp"
android:paddingBottom="15dp"
android:orientation="vertical" >
</LinearLayout>
</ScrollView>
<RelativeLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_above="#+id/bottomOffline"
android:background="#color/form_toolbar">
<ImageButton
android:id="#+id/btnPrev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="btnPrevClicked"
android:layout_alignParentLeft="true"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_prev"
android:padding ="8dp"
/>
<ImageButton
android:id="#+id/btnIndex"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/btnPrev"
android:onClick="btnIndexClicked"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_index"
android:padding ="8dp"
/>
<ImageButton
android:id="#+id/btnValidation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/btnIndex"
android:onClick="btnValidationClicked"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_validate"
android:padding ="8dp"
/>
<ImageButton
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="btnNextClicked"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_next"
android:padding ="8dp"
/>
<!-- Some Buttons -->
</RelativeLayout>
<RelativeLayout
android:id="#+id/bottomOffline"
android:layout_width="match_parent"
android:layout_height="34dp"
android:layout_alignParentBottom="true"
android:background="#color/orangelight"
android:gravity="center_horizontal">
<TextView
android:id="#+id/offline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusableInTouchMode="false"
android:text="OFFLINE MODE"
android:textStyle="bold"
android:textColor="#color/white"
android:padding ="8dp"
/>
</RelativeLayout>
</RelativeLayout>
Thanks!

Try wrapping the bottom views in a LinearLayout and remove the align fields from the two nested views
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/bottomBar"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:orientation="horizontal"
android:background="#color/form_toolbar">
<ImageButton
android:id="#+id/btnPrev"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="btnPrevClicked"
android:layout_alignParentLeft="true"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_prev"
android:padding ="8dp"
/>
<ImageButton
android:id="#+id/btnIndex"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/btnPrev"
android:onClick="btnIndexClicked"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_index"
android:padding ="8dp"
/>
<ImageButton
android:id="#+id/btnValidation"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/btnIndex"
android:onClick="btnValidationClicked"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_validate"
android:padding ="8dp"
/>
<ImageButton
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:onClick="btnNextClicked"
android:focusableInTouchMode="false"
android:background="?android:attr/selectableItemBackground"
android:src="#drawable/toolbar_next"
android:padding ="8dp"
/>
<!-- Some Buttons -->
</RelativeLayout>
<RelativeLayout
android:id="#+id/bottomOffline"
android:layout_width="match_parent"
android:layout_height="34dp"
android:background="#color/orangelight"
android:gravity="center_horizontal">
<TextView
android:id="#+id/offline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusableInTouchMode="false"
android:text="OFFLINE MODE"
android:textStyle="bold"
android:textColor="#color/white"
android:padding ="8dp"
/>
</RelativeLayout>

Using Java, we can programatically set the view to align at the bottom when you're in online mode. The following could should be placed after the code that you use to remove the offline bar. (Since you didn't post your Java, I can't be more specific) I've assumed that the variable bottomBar is of type RelativeLayout and assigned through findViewById(R.id.bottomBar.
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)bottomBar.getLayoutParams();
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
bottomBar.setLayoutParams(params);
What this should do is set the ALIGN_PARENT_BOTTOM flag (android:layout_alignParentBottom="true" in XML) on the bottom bar so that it will stay at the bottom, even after the offline bar is removed. So, if you add that immediately after removing the offline bar, it will update the view and show the bar properly

ListView in Android hides first element when SoftKeyboard is shown

I have a problem in an activity where I show a listView and an EditText field (see picture below). I want to use the soft input method adjustPan and not adjustResize. When I add a new text in the field chat and the soft keyboard is not shown the items are shown correctly. The top most item is Item 1. When now the ListView is empty and I click in the EditText field the soft keyboard is shown. I enter now a new text and press then the button "Senden" without closing the keyboard. Then my Item 1 is above the visible region of the screen of the device. In picture I want that Item 1 cames down, so that it's shown correctly (green arrow).
Here' are my layout XML's:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/list_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:animateLayoutChanges="true"
android:orientation="vertical" >
<ListView
android:id="#+id/messageList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/grid_chat"
android:layout_alignParentTop="true"
android:divider="#drawable/list_divider"
android:listSelector="#android:color/transparent"
android:dividerHeight="1dp"
android:footerDividersEnabled="true"
android:headerDividersEnabled="true" >
</ListView>
<GridLayout
android:id="#+id/grid_chat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="15dp"
android:layout_marginTop="15dp"
android:columnCount="2"
android:orientation="horizontal"
android:rowCount="1" >
<EditText
android:id="#+id/chatLine"
android:layout_width="match_parent"
android:layout_height="38dp"
android:layout_column="0"
android:layout_gravity="left"
android:layout_marginLeft="41dp"
android:layout_marginRight="36dp"
android:background="#drawable/message_border"
android:inputType="text"
android:paddingLeft="5dp"
android:paddingRight="48dp"
android:textColor="#000000" />
<ImageButton
android:id="#+id/button_send"
android:layout_width="78dp"
android:layout_height="30dp"
android:layout_column="1"
android:layout_gravity="right"
android:layout_marginLeft="-76dp"
android:layout_marginTop="5dp"
android:adjustViewBounds="false"
android:background="#android:color/transparent"
android:contentDescription="#string/empty"
android:scaleType="fitStart"
android:src="#drawable/arrow_right" />
</GridLayout>
</RelativeLayout>
where the RelativeLayout is embedded in a tab:
<FrameLayout
android:id="#+android:id/realtabcontent"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_above="#android:id/tabcontent"
android:layout_marginBottom="14dp" >
</FrameLayout>
I tried to overwrite the OnGlobalLayoutListener to adjust the top of the ListView without success.
Does anyone have met the the same problem?

Android edittext auto grow with text and pushing things down

Yes, this is yet another edittext grow question on SO. And yes I've already gone through all those edittext grow questions. But this ones a bit specific.
UI:
A simple android layout with edittext and button below it. When text is less, the edittext view is still covering whole screen leaving space for button below.
Once user starts entering text, edittext grows vertically to accommodate text. At the same time, the button should also kept pushing downwards to let edittext grow.
User can vertically scroll through screen to view full text.
UI after entering significant text:
Here's the layout with edittext and button below:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background"
android:clipToPadding="false"
android:fadingEdge="none"
android:fillViewport="true"
android:padding="13dp"
android:scrollbarStyle="outsideOverlay" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1">
<!-- some fixed width image -->
<ImageView
android:id="#+id/someimage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:src="#drawable/page_white_text" />
<EditText
android:id="#+id/some"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/someimage"
android:background="#null"
android:gravity="top"
android:minLines="10"
android:minHeight="50dp"
android:textColor="#222222"
android:textSize="15dp"
android:typeface="serif" >
<requestFocus />
</EditText>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
This works more or less. But when I enter to much text, instead of pushing button downwards. It goes behind it like:
Any help here is much appreciated. Thanks :)

Here's my recommendation: inside the ScrollView, put a RelativeLayout in which you can place every element in a certain order using android:layout_below. For the auto-growing of your EditText, use this solution.
Let's see an example:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center">
<RelativeLayout
android:id="#+id/general2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="20sp" >
<TextView
android:id="#+id/textFirstOpinion"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/titleFirstOpinion"
android:textStyle="bold"
android:textSize="23sp"
android:textColor="#FFFFFF"
android:layout_marginTop="10dp" />
<EditText
android:id="#+id/fieldFirstOpinion"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textFirstOpinion"
android:minHeight="80sp"
android:isScrollContainer="true"
android:inputType="textMultiLine"
android:textSize="20sp"
android:gravity="top|left" />
<Button
android:id="#+id/button"
android:layout_width="110dp"
android:layout_height="wrap_content"
android:layout_below="#id/fieldFirstOpinion"
android:layout_centerHorizontal="true"
android:layout_marginTop="37sp"
android:textSize="23sp"
android:text="#string/textSendButton"
android:gravity="center_horizontal"
android:padding="10dp" />
</RelativeLayout>
</ScrollView>

try adding android:layout_below="#id/some" in your LinearLayout like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical"
android:layout_below="#id/some" >
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

Since you want the button to be at the bottom of the page, add the following line
android:layout_below="#+id/some"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
in your LinearLayout code here like
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/some"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true"
android:baselineAligned="true"
android:layout_marginTop="5dp"
android:padding="10dp"
android:orientation="vertical" >
Also make sure the layout:height parameter of EditText is set to wrap_content
Try this and tell me if it works or not