Develop Reference

How can i hide the elements when my keyboard pops up?

I have seen a few similar questions, but they want the things to show up, I want to hide them.
Basically I have a bunch of elements in my RelativeLayout and when the activity shows, the keyboard pops up, since I have an editText, and the elements that are aligned in the Bottom go up along the keyboard, I don't want that, I want them to stay hidden, any idea how can I achieve this?
This is the xml of my Activity:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="#drawable/bg"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:orientation="vertical"
android:id="#+id/invoices_layout"
tools:context=".NavManager">
<RelativeLayout
android:id="#+id/mcr_bar_progress"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:visibility="visible">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerInParent="true"
android:layout_marginTop="15dp"
android:text="Agregar Productos"
android:textColor="#android:color/white"
android:textSize="34sp" />
<TextView
android:id="#+id/textGrid2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/textView"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:text="Grupo MkTech Solutions"
android:textColor="#android:color/white"
android:textSize="15sp" />
<EditText
android:id="#+id/txtproducto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_marginStart="0dp"
android:layout_marginTop="92dp"
android:layout_marginEnd="0dp"
android:hint="Ej: Refresco Natural"
android:inputType="text"
android:textColor="#color/white"
android:textSize="15sp"
app:backgroundTint="#color/white" />
<ImageButton
android:id="#+id/btnbuscar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/txtproducto"
android:layout_alignEnd="#+id/txtproducto"
android:layout_marginTop="4dp"
android:layout_marginEnd="0dp"
android:onClick="onClickSwitch"
app:srcCompat="#drawable/research" />
<TextView
android:id="#+id/txttotal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:padding="10dp"
android:textColor="#color/WhiteBgText"
android:textSize="15sp" />
<ImageButton
android:id="#+id/btnlimpiarcarro"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:onClick="onClickCleanCart"
android:padding="10dp"
app:srcCompat="#drawable/quit" />
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="0dp"
android:layout_marginTop="150dp"
android:layout_marginBottom="50dp"
android:fillViewport="true">
<TableLayout
android:id="#+id/tableInvoices"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="0dp"
android:stretchColumns="*"></TableLayout>
</ScrollView>
</RelativeLayout>
</LinearLayout>
The last two elements before the scrollview are the ones that need to stay hidden.

add the following to your activity in the manifest:
android:windowSoftInputMode="adjustPan"
from the API:
The activity's main window is not resized to make room for the soft keyboard. Rather, the contents of the window are automatically panned so that the current focus is never obscured by the keyboard and users can always see what they are typing. This is generally less desirable than resizing, because the user may need to close the soft keyboard to get at and interact with obscured parts of the window.

By my understanding of your question you do not want the keyboard to push the UI elements at the bottom of your layout.
To achieve this all you need to do is put the following line into your manifest activity tag:
android:windowSoftInputMode="adjustNothing"

Android Soft Keyboard Disrupt's My Layout

I know a ton of questions on this topic have been asked but none seem to work for me. I have a linear layout with an an edit text and icons below but when the keyboard pops up it covers the icons and half the edit text.
My Manifest File:
<activity
android:name="com.social.pages.Post"
android:windowSoftInputMode="stateVisible|adjustResize"
android:screenOrientation="portrait" >
</activity>
My Layout File:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/feed_bg" >
<LinearLayout
android:id="#+id/stories_post_entire"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/story_post"
android:layout_centerHorizontal="true"
android:background="#drawable/bg_parent_rounded_corner"
android:orientation="vertical"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingTop="#dimen/feed_item_padding_top_bottom" >
<!--
<LinearLayout
android:id="#+id/stories_post_text"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginTop="15dp"
android:orientation="horizontal"
android:paddingBottom="#dimen/feed_item_padding_top_bottom"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
-->
<EditText
android:id="#+id/stories_post_story"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:background="#drawable/bg_parent_rounded_corner"
android:ems="10"
android:gravity="top"
android:hint="Tell Your Story..."
android:padding="10dp"
android:paddingLeft="10dp"
android:scrollbars="vertical"
android:typeface="serif" />
<LinearLayout
android:id="#+id/stories_post_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="10dp"
android:paddingLeft="#dimen/feed_item_padding_left_right"
android:paddingRight="#dimen/feed_item_padding_left_right" >
<ImageView
android:id="#+id/stories_post_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/tag" />
<ImageView
android:id="#+id/stories_post_take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:scaleType="fitCenter"
android:src="#drawable/take_pic" />
</LinearLayout>
</LinearLayout>
<!-- </LinearLayout> -->
<Button
android:id="#+id/story_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Post" />
</RelativeLayout>
No Java code has been written yet.

You're setting the EditText element to 300dp height which prevents anything from moving up. I was able to fix this by wrapping the EditText and following LinearLayout (that houses your images) in a RelativeLayout. By doing this, you can set the image-housing LinearLayout to alignParentBottom="true". I believe this is your desired effect.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:id="#+id/stories_post_entire"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/story_post"
android:layout_centerHorizontal="true"
android:orientation="vertical" >
<!-- ADDITION -->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:id="#+id/stories_post_story"
android:layout_width="fill_parent"
android:layout_height="300dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="10dp"
android:ems="10"
android:gravity="top"
android:hint="Tell Your Story..."
android:padding="10dp"
android:paddingLeft="10dp"
android:scrollbars="vertical"
android:typeface="serif" />
<LinearLayout
android:id="#+id/stories_post_bar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:layout_marginTop="10dp" >
<!-- ADDITION ^^^ alignParentBottom-->
<ImageView
android:id="#+id/stories_post_tag"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:src="#drawable/osumu_blur"/>
<ImageView
android:id="#+id/stories_post_take_pic"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:scaleType="fitCenter"
android:src="#drawable/osumu_blur"/>
</LinearLayout>
<!-- ADDITION -->
</RelativeLayout>
</LinearLayout>
<!-- </LinearLayout> -->
<Button
android:id="#+id/story_post"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="Post" />
</RelativeLayout>
NOTE: I replaced your drawable src with "dummy_image"

THe only thing you can do about the soft keyboard is to set the android:windowSoftInputMode in the manifest (or to change it on the fly programatically). The allowed modes are basically nothing (just let the keyboard pop up and cover whatever), pan (scrolls the app such that the cursor is on the screen), and resize (resizes your app to lay out completely above the keyboard).
You obviously want resize. However to make that work, your layout needs to be resizable- there needs to be some element that can be shrunk and still fit your app in the smaller size, or there needs to be empty space that can be shrunk. If you have to much on screen, that won't work. And in that case Android will still ensure that the cursor is on screen, but will not do anything else.
Looking at your layout- I don't see anything that can shrink. You may be able to refactor it to make the edit text use fill_parent so it can be shrunk, but that would require making it (or its direct parent) layout_above and layout_below two other elements so it is sized to be the remaining space between them. That's about all I can see for you to do, other than remove elements.

ImageView on top of Button

I'm trying to put a small ImageView on top of a button, but somehow it stays under it. I don't understand why as this sort of layout work perfectly with other views.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now"
android:id="#+id/but_book_now"
/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
I've tried with different background for the button, but the image can be seen only when it is transparent. I also tried to replace the ImageView with a colored View, still doesn't work.
Any idea? Thx
EDIT:
There is a confusion in answers I get, I mean to make the ImageView on top of the Button in its Z-order, not y-axis.
EDIT 2 :
I don't want to use an image button, the image is just a "pin" on the button that will appear/disappear.
I don't want to use a drawable on the button, I need to place it where I want exactly.
Using FrameLayout instead of RelativeLayout doesn't change anything.
Using imgView.bringToFront() doesn't work.
EDIT 3 :
The problem doesn't appear on device before Lollipop. On KitKat, the layout works as intended.

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="80dp" >
<Button
android:id="#+id/filter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="7dp"
android:background="#0000FF"
android:gravity="center"
android:paddingBottom="25dp"
android:paddingTop="25dp"
android:text="Sort"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/widget_title_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:adjustViewBounds="true"
android:paddingTop="-10dp"
android:scaleType="fitStart"
android:src="#drawable/ic_launcher" />
</FrameLayout>
Try it,though I haven't tested it.

Try
findViewById(R.id.img_bookmark).bringToFront();

You need to set the button below the imageview so:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:layout_below="#+id/img_bookmark"/>
<ImageView
android:layout_width="35dp"
android:layout_height="35dp"
android:id="#+id/img_bookmark"
android:src="#drawable/ic_action_bookmark_full"
android:layout_marginRight="15dp"
android:layout_marginEnd="15dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
EDIT
I noticed now that you wanted an image ON TOP of a button not ABOVE so don't care to my code above and use ImageButton:
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/background_white_clickable"
android:text="#string/book_now
android:id="#+id/but_book_now"
android:src="#drawable/ic_action_bookmark_full"/>
</RelativeLayout>

Sample code:
<RelativeLayout
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/img_bookmark"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_alignParentRight="true"
android:src="#drawable/ic_launcher" />
<Button
android:id="#+id/but_book_now"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/img_bookmark"
android:text="Test" />
</RelativeLayout>
Note :
Edit the text and src, for your needs

If you want image view with button :
<Button
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="#drawable/ic_launcher"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</RelativeLayout>
If you want image view without button :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/but_book_now"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_launcher"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ff00ff"
android:text="This is button"
android:padding="10dp"
android:textColor="#ffff00"
/>
</LinearLayout>

You can define a RelativeLayout as a Button and add ClickEvents on it, add a child View with color or a child ImageView with a PNG, or whatever or both, to put images or color over it.
Example
<FrameLayout android:id="#+id/buttonTextFillColor"
android:layout_width="#dimen/mini_icon_width"
android:layout_height="#dimen/mini_icon_height"
android:background="#drawable/input_button_background"
android:clickable="true">
<View
android:id="#+id/colorTextFillColor"
android:layout_width="23dp"
android:layout_height="23dp"
android:background="#FFFFFF"
android:layout_gravity="center" />
<ImageView
android:layout_width="23dp"
android:layout_height="23dp"
android:src="#drawable/button_fill_text"
android:layout_gravity="center"/>
</FrameLayout>
You get a union of elements:
How will you see it?

please add the layout_below for Button attribute

TextView not being displayed / Relative Layout

This might seem like a very easy question for some of you folks, but I can't find a way to display my TextView even after trying numerous solutions proposed on this site. Not that I am using the built-in Eclipse XML tool for Android and that the TextView is visible on this graphical layout. Here's what I've got so far :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/home_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:contentDescription="#string/no_of_screens"
android:id="#+id/imageViewHome"
android:layout_width="290dp"
android:layout_height="212dp"
android:layout_gravity="center_horizontal"
android:paddingTop="40dp"
android:src="#drawable/logo" />
<RelativeLayout
android:id="#+id/relativeid"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<Button
android:id="#+id/launch_button"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="80dp"
android:text="#string/launch" />
<Spinner
android:id="#+id/spinner1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/launch_button"
android:layout_marginRight="20dp"
android:layout_toLeftOf="#+id/launch_button"
android:entries="#array/num_array"
android:prompt="#string/screen_prompt"
android:textSize="8pt" />
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/launch_button"
android:layout_alignBottom="#+id/launch_button"
android:layout_marginRight="16dp"
android:layout_toLeftOf="#+id/spinner1"
android:text="#string/no_of_screens"
android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>
</LinearLayout>
As for now, all of the other elements are being displayed correctly. Any help would be greatly appreciated!
Thanks

Where do you want your textView?
I would loose these two:
layout_alignBaseline="#+id/launch_button
layout_alignBottom="#+id/launch_button
and use one of these:
layout_below="#+id/launch_button
layout_above="#+id/launch_button
That will put it either above or below the button.

How to design buttons?

Does anyone know if there is a possible way to design the android buttons like this:

I'd say these are regular buttons with transparent background and icons set through drawableTop attribute. So an xml for such a button would look like:
<Button android:drawableTop="#drawable/icon" android:background="#android:color/transparent"/>

Try this
<Button android:drawableTop="#drawable/icon" android:background="#android:color/transparent"/>
ALso you can design this type of bottom bar using Tab in android
Click here
Also you can design this type of button using radio button
Click here

For that i think need to create the custom view for tab and call in tabhost
http://joshclemm.com/blog/?p=136
Thank you

okay
--take one layout and aligng it ALIGNPARENTBOTTOM = TRUE
now set background of that Layout to THIS BLACK
-- now take five button in that Layout Horizontal
now take images like these Transparent and set it to the buttons
-- also get Images for HOVER action
and set it on click of that particular button
(use layout_weight for setting equall sizes of button)
Have Fun!!

I have done same thing in one of my app. Here I am giving the xml code for this
<?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="60dp"
android:background="#000"
android:gravity="center_vertical">
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/reviewLayout"
android:gravity="center_horizontal"
>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/reviews"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Review"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/nearbyLayout"
android:layout_toRightOf="#id/reviewLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/nearby"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nearby"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/searchLayout"
android:layout_toRightOf="#id/nearbyLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/search"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Search"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="75dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/bookmarkLayout"
android:layout_toRightOf="#id/searchLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/bookmarks"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bookmarks"
android:textColor="#FFF"/>
</LinearLayout>
<LinearLayout
android:layout_width="60dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/settingsLayout"
android:layout_toRightOf="#id/bookmarkLayout"
android:gravity="center_horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="30dp"
android:src="#drawable/settings"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Settings"
android:textColor="#FFF"/>
</LinearLayout>
</RelativeLayout>
Use this layout where you want using include tag, and call it in your Activity.
Here I am giving the code to include this in Activity.
private LinearLayout reviewLay,nearbyLay, searchLay, bookmarkLay, settingLay;
reviewLay = (LinearLayout)findViewById(R.id.reviewLayout);
nearbyLay = (LinearLayout)findViewById(R.id.nearbyLayout);
searchLay = (LinearLayout)findViewById(R.id.searchLayout);
bookmarkLay = (LinearLayout)findViewById(R.id.bookmarkLayout);
settingLay = (LinearLayout)findViewById(R.id.settingsLayout);
reviewLay.setOnClickListener(this);
nearbyLay.setOnClickListener(this);
searchLay.setOnClickListener(this);
bookmarkLay.setOnClickListener(this);
settingLay.setOnClickListener(this);
btEdit.setOnClickListener(this);
Here I have used a layout instead of button and I am setting onclicklistener for each layout. Now override onclick method and do what you want with each layout