Develop Reference

Button hides other elements behind it when clicked

I'm working on the UI of my project, specifically I'm in a compound view extending a FrameLayout. Inside it I have two buttons, one (the smaller one) on top of the other (the larger one). I managed to make the smaller button be always on top with the 'android:elevation' property. The problem is that when I run the app and I click on the larger button, it hides the smaller one behind it, despite having a lower elevation property. I want the smaller one to be always on top even if the user clicks on the other button, but I can't manage to make it work.
Here is the xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="80dp"
android:layout_height="80dp"
android:padding="0dp"
android:layout_margin="0dp">
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:insetTop="0dp"
android:insetBottom="0dp"/>
<Button
android:layout_width="20dp"
android:layout_height="30dp"
android:backgroundTint="#color/black"
android:layout_gravity="bottom|end"
android:insetTop="0dp"
android:insetBottom="0dp"
android:elevation="10dp"/>
</FrameLayout>

you may try to set up translationZ instead elevation (or next to it) - translationZ is intended to be "fixed" elevation and elevation is dynamic, can be animated. note that every Button has a stateListAnimator set up, which is overriding elevation parameter in default implementation. check out what it does in HERE
easy way to fix would be to set for both Buttons android:stateListAnimator="#null", but you will loose some anims when click occur
easiest way would be to have one FrameLayout, inside two additional FrameLayouts and inside each one Button - fastest, but unelegant and not so efficient (but still for two buttons it won't be noticeable)

BottomSheetDialogFragment behaviour when showing keyboard [duplicate]

This question already has answers here:
Bottomsheet with edit text moved up by keyboard
(2 answers)
Closed 2 years ago.
I am using a BottomSheetDialogFragment which contains:
- A RecyclerView with a list of comments made by users
- A EditText at the bottom, where users can write a new comment and post it
When the user taps on the EditText, the keyboard shows up from the bottom.
What i want is the keyboard to push ONLY the EditText, so that the user can see what he's typing, but not push the whole BottomSheetDialogFragment.
You can see the desirable behaviour in the Facebook app for example.
I have tried setting different values for setSoftInputMode but all i can achieve is either to move the whole BottomSheetDialogFragment, or to move nothing (leaving the EditText covered).

The easiest way to do this is to not use a BottomSheetDialogFragment but instead to use a regular fragment that covers the entire window or an activity. Fragment or Activity; whichever you prefer doesn't matter as long as you're taking up the whole screen.
When the on-screen keyboard appears, the activity window (by default) resizes to make way for the on-screen keyboard.
Since a BottomSheetDialogFragment has it's gravity set to bottom, when the activity window resizes, it pushes the bottom sheet and all of it's contents upwards.
Here's an example of the simplest layout that can achieve what you're going for
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#80000000" />
<androidx.recyclerview.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="vertical" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
First is a view with a constant height which imitates the dark area outside of a dialog. No matter how the window resizes this will always be 80dp.
Second is the RecyclerView which resizes based on the remaining available space the LinearLayout has. Pay attention to the attribute android:layout_weight.
Third is EditText which has a constant height of wrap_content. Again No matter how the window resizes this will always be the same height. Since the RecyclerView will take up as much space as it can, this EditText will remain at the bottom of the screen.
Once the window resizes due to the on-screen keyboard appearing, the LinearLayout will resize and recalculate it's children's sizes. Since the View and the EditText has a constant height it will have to make the RecyclerView smaller making it appear like the EditText moved upwards.
You don't have to use a LinearLayout to do this, you can achieve the same effect with any other layout. The key point here is to use a layout that takes up the whole screen.

Android Sliding Up View

I need to do a Sliding Up View wich should slide up from the bottom of the screen when I click a button. It has to show on the bottom of the screen and I need to slide/drag it to the center of the screen. The images below explain it better.
almost like the AndroidSlidingUpPanel from "umano" which you can find here:
The problem is that I want the first child (The content of my View - an image for example) to fill all the screen and also I want the second child(the actual bottom bar) to be showed when I click a button. The images below explain it better. If there is not possible to do this by changing the AndroidSlidingUpPanel, how can I do that? I have never worked with views like this. I would really appreciate any tip or help. Thank you very much.

To hide or show panel, you can use
showPanel()
method.
To hide it try this:
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.hidePanel();
To make it appe
SlidingUpPanelLayout slidingPanel = (SlidingUpPanelLayout) findViewById(R.id.sliding_panel);
slidingPanel.showPanel();
This is available only in v 2.0 of AndroidSlidingUpPanel (https://github.com/umano/AndroidSlidingUpPanel). As I know, it's included in android support library v13 now, but not sure if there is latest version.

You can check this library for dragging content from all four edges of the screen https://github.com/SimonVT/android-menudrawer
You can make a custom layout inside this menu drawer to get your expected result.

You can do it with AndroidSlidingUpPanel, just set visibility:
android:visibility="GONE"
on the 2° child of the view (the panel) and use .showPane() and .hidePane() on SlidingUpPanelLayout to show/hide the panel when you click the button.

The following library do it as well
https://github.com/Paroca72/sc-widgets
Inside you will find a widget named ScSlidingPanel.
This widget work different from the other and can be use and customize very easily.
You put it inside a RelativeLayout give an alignment and it will open from that side.. Left, Right, Top and Bottom or mixed..
In your specific case your must align your panel at bottom of the container and it will sliding from the bottom.
<!-- Define the container -->
<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"
tools:context=".MainActivity">
<!-- Sliding from top -->
<scapps.com.library.ScSlidingPanel
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<!-- HERE THE YOUR CONTENT -->
<!-- or you can load by setLayout method -->
</scapps.com.library.ScSlidingPanel>
</RelativeLayout>
Another important property that you can use right for your case is the handle size.
You can define an handle and define the beavior of it.. as your image above you used a button.. you can unsing an image and setting setToggleOnTouch() to true for open/close the panel touching on handle.

Status bar always on screen

Good day (or evening, or night)
I'm developing an app for android and I'm very curious about one thing. I have an activity, where user chats with another, like "im" chat. There are an EditText on the bottom and some kind of actionbar on the top. What I need is when user enters a message and the software keyboard is on screen, my activity should move up, but the actionbar should still be "glued" to the top of the screen, because it has some valuable controls on it.
Again, that's not an ActionBar, but just a 48dp height layout in a parent vertical linear layout. So I need to know is there an easy way to prevent it from moving to the top, when the layout moves off the screen.
I tried to put everything in a FrameLayout and put this bar on top of it, but on keyboard opens it goes off the screen too...

On you Activity at AndroidManifest you should put this: android:windowSoftInputMode="adjustResize"

Use something like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.myapp.MyActionBar
android:layout_width="match_parent"
android:layout_height="48dp"/>
<LinearLayout
android:id="#+id/mylayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1dp"/>
<!-- Add your edittext and button -->
</LinearLayout>
This will make sure the actionbar and edittext + button are allways on screen, and the mylayout takes up the rest of the screen. When your keyboard is shown, the mylayout will shrink.

Try adding android:windowSoftInputMode="adjustResize" to your activity in the manifest. This tells Android to completely resize your layout when the keyboard comes up, rather than pan it. Note that if there isn't enough room for the entire layout this still won't work. But you ought to be able to make it work if your top level layout is a RelativeLayout, with the edit text set to align bottom, the top bar to align top, and the middle section to fill_parent and be above the edit text and below the bar.

use a RelativeLayout as your base Layout and add android:layout_alignParentTop="true" to your action bar to keep it up
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/action_bar_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_alignParentTop="true" >
</LinearLayout>
<TextView
android:id="#+id/text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>

How to use LayoutInflater / ViewStub for an overlay

As I am actually not very confident with programatically changing Views, I have following problem:
At the first start of my app, I want to have an overlay for the main screen, that tells the user to have a look at the settings, as there are two critical options the user has to configure.
I don't want to use an AlertDialog and rather not use a wizard. So, I decided to take an approach similar to Go SMS and create an overlay at the first start. The mockup I created looks like this:
Normal menu:
First start:
So these are the problems I have:
Like I said, I don't want to use a screenshot overlaying on first start, as this would take too much space and would not be language and screen independent.
I would have the circle as an png, but I don't know how exactly put it over the image
The same problem with the text
And finally I want to put a semi-transparent white over the app. It does not necessarily need the hole for the icon, though it would be nice.
In case you need the Layout Source, you can get it at pastebin
So, I just need to get a start here, if it is better to use LayoutInflater or ViewStub and how to realize it, as I have absolutely no experience with it...
Thanks!
/edit: I uploaded a new, more well-arranged layout.

I have faced a similar problem, I client wanted a walkthrough of the application, where the entire screen had to become whiter (as they said: "transparent"), except for the button being explained by an overlay speech-bubble.
Fortunately for you, your layout is not nearly as complicated as the one I had to work with :)
Now, you can get the transparency-effect in two ways, either have a white background and call all the views setAlpha() methods, or you can create a half-transparent white overlay.
If you go with the overlay, you'll have to find a way to display the opaque buttons through the overlay. This can get a bit complicated.
If you go with the first option, you can just setAlpha(1) on the opaque view to get it to show up.
The setAlpha() method is only available from api version 11+, so if you target an earlier version, you might have to do it in a slightly more complicated way.
Example of setting alpha on views pre-honeycomb:
Layout for your buttons (make them however you want, just make them similar so you can loop through them):
<LinearLayout
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:tag="image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/tile"/>
<TextView
android:tag="text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#FF000000"
android:text="button1"/>
</LinearLayout>
In your program, when you are want to make the buttons transparent:
LinearLayout l = (LinearLayout) findViewById(R.id.button1);
((ImageView)l.findViewWithTag("image")).setAlpha(0x7F);
((TextView)l.findViewWithTag("text")).setTextColor(0x7F000000);
When you have decided on how you want to create the transparency effect, you will have to decide on how to display the overlay-text/bubble. You'll most likely want to put this in a separate layer on top of your entire layout, to make sure that it is not affected by your new view.
One way to achieve this is by changing your root layout element to a FrameLayout, and then creating/displaying in this. e.g:
<FrameLayout background="#FFFF"> <!-- white background, just in case -->
<LinearLayout>
<!-- the rest of your layout -->
</LinearLayout>
<LinearLayout visibility="gone"> <!-- this will be your overlay view -->
<ImageView /> <!-- the arrow/ring -->
<TextView /> <!-- the description -->
</LinearLayout>
</FrameLayout>
When the introduction is displayed, you set the position of the hidden overlay-view to the position of the table item to be explained, change the text to an appropriate string/resource and display the view.
When the introduction is over, you reset the alpha values of all buttons, and set the visibility of the overlay to gone again.

Since I don't have much experience with ViewStub, I would do it with LayoutInflater.
First of all, you need to have a second layout loaded on top of your current layout. The easiest is to have a FrameLayout, which has as one child your current view, and the dynamically you load the second child on the first start. When you load a content view in an Activity, it will be attached to some already created views (some DecorView, a FrameLayout, etc). So you can either re-use the existing FrameLayout, or you can create a new one.
I would vote for the second solution, since it's more stable (I just mentioned the other possibility in case you want to minimize the number of layers).
So, as a first step, wrap your current layout inside a FrameLayout, and give it an id, let's say "#id/root".
Then, in the onCreate method, you can have something like this:
setContentView(R.layout.main);
if (isFirstRun()) {
ViewGroup parent = (ViewGroup)findViewById(R.id.root); // locate the FrameLayout
LayoutInflater li = LayoutInflater.from(this); // get an instance of LayoutInflater
li.inflate(R.layout.overlay, parent);
}
So far you will have the overlay loaded. Now it's up to you to define the overlay.
To make the whitening effect, just set the following attribute on the root view in your overlay.xml layout:
android:background="#40ffffff"
To position the circle, first you need to find it's location. You can use the View.getLocationOnScreen to get the absolute coordinate of the icon (below the circle) on the screen. Then you can have two options:
either create a custom view (for the overlay) and manually draw the circle at the given location
or add the circle using an ImageView and adjust the left and top margins based on the coordinates