dialog partially hidden - android

Inside some Activity I have Button, which opens Dialog (marked as Fragment on pic).
In this Dialog I have some other Button and EditText.
By default, focus set to EditText.
The problem is, when the Dialog is opened, it's not shown completely. The Button is hidden behind the screen (Screen and Hidden sections on pic), so I have to scroll up to see the Button.
I've tried to disable EditText focus, tried to set focus to Button, but Dialog is still not fully shown.
Is there any way I can force the Dialog to open completely?
It appears, that the Dialog covers exactly half of the Screen. If I don't have a lot of elements inside, it shown completely, if I do - I have to scroll.
UPD:
My Dialog uses custom XML with the following structure:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="300dp"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="16dp">
<TextView
android:id="#+id/title"/>
</LinearLayout>
<RelativeLayout
android:id="#+id/someid"
android:layout_width="match_parent"
android:layout_height="300dp"
android:visibility="gone"
tools:visibility="gone">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:visibility="visible">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="270dp"
android:orientation="vertical"
android:visibility="visible"
tools:visibility="visible">
<LinearLayout
android:id="#+id/editTextLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:visibility="gone"
tools:visibility="visible">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="13dp"
android:gravity="bottom"
android:orientation="horizontal">
<EditText
android:id="#+id/EditText"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<Button
android:id="#+id/Button" />
</LinearLayout>
<View
android:id="#+id/overlayButtons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white_70"
android:visibility="gone"
tools:visibility="gone" />
</RelativeLayout>
</LinearLayout>
P.S. the structure is complex, because I have a lot of other elements like Buttons, Text etc. inside. I've deleted them and left only important one like Linear/Relative layouts.

Ok, so I've figured it out.
It's impossible to define dialog`s height via layout, so I had to do it in the code.
Here is code snippet:
DisplayMetrics displayMetrics = getActivity().getResources().getDisplayMetrics();
int height = displayMetrics.heightPixels;
int maxHeight = (int) (height*0.75);
final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from((View) view.getParent());
bottomSheetBehavior.setPeekHeight(maxHeight);
So now, dialog can occupy up to 75% of screen height if needed.

Related

Move elements in Layout when keyboard is shown

I inflate a pop-up layout, where I implement some kind of chat. At the bottom (align parent bottom) I have EditText, where I can type message. And I have a ScrollView with LinearLayout, that uses left space of a layout. Messages appear in ScrollView. The problem is how to move elements when keyboard is shown. For example, I tap on EditText and soft keyboard appears above EditText, so I don't see what I'm typing. How to move it?
I tried to use windowSoftInputMode in manifest with adjustResize or adjustPan but it didn't help.
XML:
<?xml version="1.0" encoding="utf-8"?>
<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="320dp"
android:layout_height="500dp"
tools:context="shkatovl.osanka.MainActivity"
android:background="#drawable/border_popup"
android:focusable="true">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ScrollView
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_marginTop="100dp"
android:layout_alignParentBottom="true"
android:layout_marginBottom="58dp">
<LinearLayout
android:id="#+id/llDialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="58dp"
android:background="#drawable/rect8"
android:layout_alignParentBottom="true">
<EditText
android:id="#+id/etDialog"
android:layout_width="244dp"
android:layout_height="38dp"
android:textSize="16sp"
android:textColor="#color/font"
android:hint="Сообщение"
android:paddingStart="15dp"
android:textColorHint="#color/font40"
android:background="#drawable/rect9"
android:theme="#style/EditText"
android:text=""/>
</RelativeLayout>
</ScrollView>
</RelativeLayout>

how to make app a percent of the screen size

I am trying to use percentRelativeLayout to make my app 90% width of the screen size and 50% of the screen height.
My layout consists of two fragments: 1) the left side is 4 buttons and 2) the right side is a container that inserts a different fragment with each button click.
When I use percentRelativeLayout or percentFrameLayout to make the height 50% of the screen, and the width 90% of the screen I get the result below where it seems like I am getting my fragments as 50% height and 90% width INSIDE a box that is 50% of the height of the total screen and 90% of the width of the total screen. Does anyone know how I can fix this?
I have tried setting my layout_height and width to match_parent for both my layouts and the result is either the same, or the app takes up the whole screen. I also made sure to use a theme that takes up the whole screen, and not a Dialog theme. I have also tried using a parent RelativeLayout with a percentRelativeLayout nested inside with layout_widthPercent and layout_heightPercent applied to my fragments and I get the same result.
<android.support.percent.PercentFrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_widthPercent="90%"
app:layout_heightPercent="50%"
>
<fragment
android:id="#+id/menuFragment"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_margin="5dp"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.percent.PercentFrameLayout>
Here is what I want it to look like
Here is what it looks like now
It looks like your menu fragment's width takes about 30% of the total width of its dialog styled parent and the content takes about 70%. I would use a PercentRelativeLayout inside the PercentFrameLayout like the following
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.percent.PercentRelativeLayout
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"
android:layout_gravity="center"
android:background="#drawable/rounded_edges"
android:theme="#style/Theme.AppCompat.Light.NoActionBar"
app:layout_heightPercent="50%"
app:layout_widthPercent="90%">
<fragment
android:id="#+id/menuFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_alignParentStart="true"
app:layout_widthPercent="30%"
class="it.anddev.bradipao.janus.MenuFragment"
tools:layout="#layout/fr_menu">
</fragment>
<FrameLayout
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_toEndOf="#+id/menuFragment" />
</android.support.percent.PercentRelativeLayout>
</android.support.percent.PercentFrameLayout>
As for the double white background appearing behind your Welcome fragment, I cannot really tell why it is happening without looking at its layout file. You may want to remove the background in the layout for all the fragments you replace in the container FrameLayout
Things which i have changed to show button is removed the menu fragment with four buttons to mimic the image you want as the result, you can replace this four buttons with the menu fragment
<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#android:color/holo_blue_dark"
android:padding="4dp"
app:layout_heightPercent="50%"
app:layout_marginPercent="5%"
app:layout_widthPercent="90%">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center_vertical"
android:layout_margin="4dp"
android:layout_weight="0.3"
android:background="#android:color/holo_purple"
android:contentDescription="this is where you can keep your buttons"
android:gravity="center"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="First"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Second"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Third"
android:textAllCaps="false" />
<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_margin="4dp"
android:layout_weight="1"
android:text="Forth"
android:textAllCaps="false" />
</LinearLayout>
<FrameLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:layout_margin="4dp"
android:layout_weight="0.7"
android:background="#android:color/holo_green_dark"
android:contentDescription="this would be your frame container"></FrameLayout>
</LinearLayout>
</android.support.percent.PercentFrameLayout>
output

Dialog: Overflowing ScrollView Content

Newbie android developer here. I have this layout for my dialog:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/llParent"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:id="#+id/svChild"
android:layout_width="match_parent"
android:layout_height="wrap_content">
... content goes here
</ScrollView>
<Button
android:id="#+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/svChild"
android:text="CANCEL"/>
<Button
android:id="#+id/btnOk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/svChild"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:text="OK" />
</RelativeLayout>
When the ScrollView's content overflows the screen, it covers the buttons below. Sometimes the buttons are already outside the screen when changing some properties of the layout.
What I want:
Show always the buttons on the bottom of the screen, not covered and not outside
llParent and svChild's heights are set to wrap_content so that if the content is quite small, the dialog doesn't have to take up all of the screen's height
Thanks
Use following code which will work properly
<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="com.demo.example.activity.ScrollDemo">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/btnButton"
android:id="#+id/scrollView">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
//Place your content here
</LinearLayout>
</ScrollView>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
android:id="#+id/btnButton"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Dependencies are most important here.
if you have any issue feel free to comment.

Scrollview does not scroll when keyboard appears

I have a few EditTexts in my RelativeLayout, and a button aligned at the bottom of it. When the keyboard pops up, I want my layout to resize (therefore, I'm using android:windowSoftInputMode="adjustResize") and also want it to be scrollable, because in smaller screens resizing it isn't enough.
The problem is I can't get it to scroll at all!
I do need the Button to stay at the bottom of the screen.
<?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"
android:background="#FFF">
<!-- some hidden RelativeLayouts, filling the whole screen -->
<RelativeLayout
android:id="#+id/form_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent" android:layout_height="match_parent"
android:fillViewport="true" android:layout_above="#+id/ok_btn">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent" android:background="#99000000" android:visibility="visible">
<View
android:id="#+id/shade"
android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignTop="#+id/logradouro1"
android:background="#FFF" android:layout_marginTop="-30dp"/>
<!-- some visible EditTexts and TextViews here -->
</RelativeLayout>
</ScrollView>
<Button android:id="#+id/ok_btn"
android:layout_width="match_parent"
android:layout_height="50dp" android:background="#color/verdeBotao" android:text="Cadastrar"
android:textColor="#FFF" android:layout_alignParentBottom="true"/>
</RelativeLayout>
</RelativeLayout>
Below are 2 screenshots to illustrate what is happening. Please notice that I can't scroll when the keyboard is up.
Thanks!
i am posting something similar to your ui. take a RelativeLayout for the button at the bottom. set gravity to bottom and your button view should android:layout_alignParentBottom="true"
<ScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/m_table_menu" >
<LinearLayout
android:id="#+id/layuserdetails"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:orientation="horizontal"
android:padding="5dp" >
Yourviewss......i guess edittexts
</LinearLayout>
</ScrollView>
//scrollable Button layout
<RelativeLayout
android:id="#+id/m_table_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="bottom"
android:padding="0dp" >
<LinearLayout
android:id="#+id/laysharepost"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:orientation="vertical"
android:padding="5dp" >
//replace textview with buttonview..
<TextView
android:id="#+id/share_tvcommentdone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button_selector"
android:padding="10dp"
android:text="POST"
android:textColor="#android:color/white" />
</LinearLayout>
</RelativeLayout>

Android layout issue using Dialog

I'm developing an android application for Tablet. I have implemented a DialogFragment that look like this:
The xml layout is defined by this code:
<?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"
android:orientation="vertical"
android:background="#F7F7F7" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentTop="true">
<EditText
android:id="#+id/destinatario_messaggio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:inputType="text"
android:hint="Destinatario del messaggio"
android:textColor="#000000"
android:textSize="24dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:background="#FFFFFF">
<View android:layout_width="fill_parent"
android:layout_height="1dip"
android:background="#888888" />
<EditText
android:id="#+id/body_messaggio"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="20dp"
android:inputType="textMultiLine"
android:text=""
android:hint="Scrivi Messaggio"
android:textColor="#000000"
android:textSize="24dp"
android:maxLines="5"/>
</LinearLayout>
</RelativeLayout>
I have two problem:
1- Since I'm using tablet, I want that all the spaces available on the left and on the right of my Dialog is filled from the Dialog itself. Even if I have setted in the root View this:
android:layout_width="match_parent"
my Dialog is floating at center of the Activity, letting a lot of space available on the left and on the right of it.
How can my Dialog occupy all the width available in my device?
2- When the keyboard(IME) appears for editing the EditText field my Dialog is thrust upon hiding the top of the Dialog (the Title and the first TextView become invisible). Instead what I want is that the top of the Dialog remains on top and the center of the Dialogis "compressd". It seems like my layout does not adapt itself to the new available space.
For your first part to make the dialog fill in width use.
dialog.getWindow().getAttributes().width = LayoutParams.FILL_PARENT;

Categories

Resources