Develop Reference

Android: after changing orientation, a duplicate layout appears under ScrollView

The following image might further clarify my problem:
I have a RecyclerView that inside a ScrollView. Scrolling the view after changing the orientation produces an output like the screenshot. (NOTE: I'm not sure if changing orientation has anything to do with this issue as I can't scroll in portrait mode)
It is as if there are two identical layouts on top of each other, but when the user scrolls, only the topmost layout moves but the other one stays still.
Here's my xml code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="#dimen/padding_16">
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/question_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:layout_margin="#dimen/margin_8"
android:adjustViewBounds="true"
android:maxWidth="300dp"
android:scaleType="centerInside"
android:src="#drawable/zm_image_placeholder" />
<TextView
android:id="#+id/doubt_comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/question_image"
android:layout_alignParentEnd="true"
android:layout_marginHorizontal="#dimen/margin_8"
android:layout_marginStart="#dimen/margin_56"
android:layout_marginEnd="#dimen/margin_8"
android:fontFamily="#font/gothambook"
android:paddingHorizontal="#dimen/padding_8"
android:paddingVertical="#dimen/padding_4"
android:text="This is the comment added by the student. This is the comment added by the student. This is the comment added by the student. "
android:textSize="16sp" />
<com.google.android.material.imageview.ShapeableImageView
android:id="#+id/answer_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/doubt_comment"
android:layout_alignParentStart="true"
android:layout_margin="#dimen/margin_8"
android:adjustViewBounds="true"
android:maxWidth="300dp"
android:scaleType="centerInside"
android:src="#drawable/zm_image_placeholder" />
<TextView
android:id="#+id/doubt_answer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/answer_image"
android:layout_alignParentStart="true"
android:layout_marginTop="#dimen/margin_8"
android:layout_marginEnd="#dimen/margin_56"
android:fontFamily="#font/gothambook"
android:paddingHorizontal="#dimen/padding_8"
android:paddingVertical="#dimen/padding_4"
android:text="This is the comment added by the student. This is the comment added by the student. This is the comment added by the student. "
android:textSize="16sp" />
</RelativeLayout>
</ScrollView>
Edit: This problem also occurs in portrait mode after I've changed orientation (portrait -> landscape -> portrait). If I don't change the orientation, everything works fine.

Adding android:configChanges="orientation|screenSize" in the Manifest solved the issue in this case.
It is similar to this issue

get keyboard to open underneath Parent view of Edit Text

I do set resize in my manifest so the screen does move up when I tap on the EditText, however It looks like this:
And I would like it to look like this:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white_three"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/enter_bio"
android:layout_width="match_parent"
android:layout_alignParentBottom="true"
android:layout_height="130dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:paddingTop="5dp">
<EditText
android:id="#+id/user_biography"
android:layout_width="match_parent"
android:layout_height="100dp"
android:hint="#string/biography_placeholder"
android:textAppearance="#style/TextAppearance.Font.Volkswagen"
android:textColor="#color/black_87"
android:textSize="16sp"
android:maxLength="160"
android:imeOptions="actionDone|flagNoFullscreen"
android:inputType="textAutoCorrect|textCapSentences"
/>
<TextView
android:id="#+id/user_biography_counter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginEnd="18dp"
android:paddingBottom="5dp"
android:textAppearance="#style/TextAppearance.Font.Volkswagen"
android:textColor="#color/black_87"
android:textSize="14sp"
tools:text="60" />
</RelativeLayout>
</LinearLayout>
enter_bio is the element I would like the keyboard to appear under

put the entire view inside a ScrollView and set the android:windowSoftInputMode = adjustPan it will do the trick.
you just need to add this piece of code.
or
Try this
getActivity().getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE |WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);
However, instead of doing this at runtime, you can set it in the manifest as an Activity (parent) attribute. This will also be handled in your fragment (child):
android:windowSoftInputMode="stateAlwaysHidden|adjustResize"

How to achieve this kind of layout in Android

I'm new to Android development and I'm trying to achieve a layout for my app that is capable of handling different screen resolutions/ratios.
I've been reading a lot of the documentation and questions on this site to try to understand the basics and concepts.
First I went through:
developer.android.com/guide/practices/screens_support.html
And questions like:
stackoverflow.com/questions/6403619/how-to-support-all-the-different-resolutions-of-android-products
I've got a pretty basic idea on how to handle things out. But still, its pretty difficult for a starter to get going, and I found myself stucked trying to achieve the solution I came up with.
I designed my app to a target resolution of 480x800, and set it up to always show in portrait mode.
This is how it looks like and how I understand it should work (I used Waldo for the sake of example haha):
(sorry for the link, I need 10 rep to post images)
http://i.imgur.com/KXTAXir.jpg
My root Layout is a LinearLayout, wich contains 3 other Layouts being A and C set up to a weight of 0.8 while B is at 8.4. This is all fine, but the contents of B are set up to DP units at the moment just to be able to test.
B consists of a frame Layout who has 3 other Layouts inside, where 2 of them are working fine, and shown only when needed. The problem is that I need B to be able to adapt based on the contents of it first child: a LinearLayout wich contains 2 ImageView and 1 ProgressBar. I need that those ImageView always keep their ratio.
Here is an example of how it should work:
http://i.imgur.com/cH7fUze.jpg
Imagine those 4 are real screens, wich vary in ratio and size. So my app should only adapt B (from my first image) to keep the images original ratio.
Here is the layout code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/darkgray"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="LEVEL"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="#+id/level_text_score"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="SCORE"
android:textAppearance="?android:attr/textAppearanceMedium" />
<TextView
android:id="#+id/level_text_clock"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="01:59"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8.4" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="1000"
android:progress="0" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="200dp"
android:adjustViewBounds="true" />
</LinearLayout>
<RelativeLayout
android:id="#+id/pauseMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:visibility="gone" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/gameoverMask"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:visibility="gone" >
</RelativeLayout>
</FrameLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.8"
android:background="#666666" >
<TextView
android:id="#+id/level_text_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:text="0/0"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Button
android:id="#+id/button1"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="useHint" />
<Button
android:id="#+id/button2"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button1"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="toggleSound" />
<Button
android:id="#+id/button3"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/button2"
android:layout_centerVertical="true"
android:text="Button"
android:onClick="togglePause" />
</RelativeLayout>
The last thing that stays unclear to me is how to handle the text and button sizes. Should I set them in DPs? How do I get them to scale accordingly like it can be seen on the bottom of my second picture.
Thank you for your help, I also want this to serve as an example to others that are having trouble to understand how to handle this kind of scenarios.

I'm not sure, if I got your question right.
However, you can specify different layouts for different screen sizes and orientations, as described here: http://developer.android.com/guide/practices/screens_support.html
Just give the respective suffix in the name of your layout XML file.

I ended up creating a custom View for my images. The view calculates the space thats left on its parent, scales the images manually and then resizes itself to the same size of the resulting image.
To resize the progress bar to have the same width as the images, I used a custom listener that gets triggered when my custom views get resized. Then I resize the progressbar to match their width.
With this I achieved what I wanted, a layout that will work perfectly in all screen sizes.

Layout resizing wrong when keyboard is shown

When I click in my edit text and my keyboard shows up, everything seems to be ok as in the picture bellow:
But when it has to shrink a little bit more my image is resized extending a invisible area, and my TextView still as big as in the begining, then my layout doesn't work anymore:
I've tried to create new images and dimensions for xhdpi resolution, but it didn't any effect
How can I fix it? How can I resize everything proportionaly. (I've tried to put a scrollview but i have a ListView inside my layout, as you can see in the code below)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/login_background"
android:descendantFocusability="beforeDescendants"
android:clickable="true"
android:focusableInTouchMode="true"
tools:context=".LoginActivity"
android:id="#+id/fundoLogin" >
<RelativeLayout
android:id="#+id/relativeLayout2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/image_login_fields"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/image_logo"
android:layout_centerHorizontal="true"
android:contentDescription="#string/img_login_fields_desc"
android:src="#drawable/login_fields">
</ImageView>
<ImageView
android:id="#+id/image_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginBottom="#dimen/margin_logo_to_fields"
android:contentDescription="#string/img_logo_desc"
android:src="#drawable/logo" />
<TextView
android:id="#+id/labelLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#id/image_login_fields"
android:layout_alignLeft="#id/image_login_fields"
android:layout_marginTop="#dimen/margin_top_label_login"
android:layout_marginLeft="#dimen/margin_left_label_login"
android:text="#string/login"
android:textSize="#dimen/login_txt_size"
/>
<EditText
android:id="#+id/txtFieldLogin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_left_txt_field_login"
android:layout_alignTop="#id/image_login_fields"
android:layout_toRightOf="#id/labelLogin"
android:layout_alignRight="#id/image_login_fields"
android:layout_marginRight="#dimen/margin_right_txt_field_login"
android:layout_marginTop="#dimen/margin_top_txt_field_login"
android:ems="10"
android:textSize="#dimen/login_txt_size"
android:hint="#string/txtFieldLoginHint"
android:singleLine="true" >
</EditText>
<TextView
android:id="#+id/labelSenha"
android:layout_below="#id/labelLogin"
android:layout_alignLeft="#id/image_login_fields"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_top_label_senha"
android:layout_marginLeft="#dimen/margin_left_label_senha"
android:text="#string/senha"
android:textSize="#dimen/senha_txt_size" />
<EditText
android:id="#+id/txtFieldSenha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/txtFieldLogin"
android:layout_alignLeft="#id/txtFieldLogin"
android:layout_alignRight="#id/txtFieldLogin"
android:layout_marginTop="#dimen/margin_top_txt_field_senha"
android:ems="10"
android:hint="#string/txtFieldSenhaHint"
android:singleLine="true"
android:textSize="#dimen/senha_txt_size"></EditText>
<ImageButton
android:id="#+id/btnEntrar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="#id/image_login_fields"
android:layout_alignBottom="#id/image_login_fields"
android:layout_marginRight="#dimen/margin_right_btn_entrar"
android:layout_marginBottom="#dimen/margin_bottom_btn_entrar"
android:background="#drawable/btn_entrar_clicked"
android:contentDescription="#string/btn_entrar_desc"
/>
<ListView
android:id="#+id/listEmails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/image_login_fields"
android:layout_alignRight="#id/image_login_fields"
android:layout_alignLeft="#id/txtFieldLogin"
android:background="#drawable/rounded_corner"
android:visibility="invisible" >
</ListView>
</RelativeLayout>
<Button
android:id="#+id/btnTeste"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:textSize="#dimen/btn_teste_txt_size"
android:layout_marginRight="#dimen/margin_right_btn_teste"
android:layout_marginBottom="#dimen/margin_bottom_btn_teste"
android:text="#string/btnCredenciaisDeTesteTxt"
android:textColor="#color/white" />
</RelativeLayout>

What you are looking for is the android:windowSoftInputMode attribute in the AndroidManifest. This controls how your screen will respond to the keyboard being shown. Right now it appears that it is using adjustResize and you want adjustPan so in your Activity declaration in the manifest add:
<activity android:windowSoftInputMode="adjustPan"
You can read more about your options here:
http://developer.android.com/guide/topics/manifest/activity-element.html#wsoft
If you want the screen to resize you need to rethink your layout.
First, its bad form to have the login background as a separate ImageView. Since you want it to resize you should create a 9 patch for the image at its smallest necessary size. This makes the container define the size of the image, not the image itself.
Second, wrap your TextViews and EditText in a RelativeLayout alone then apply the 9 patch you created as the background of the RelativeLayout. Now you will always have a login box that wraps your Views the way you designed it even when resized.

Android RelativeLayout Design issues

I designed one layout which have total 4 RelativeLayout one is outer cover and 3 are child of it. When I put White color in the outer layout than no spaces are left but when I put 9patch image as drawable image than little default padding/margin are left. Is there any properly which solve the padding/margin issue? I have tried margin negative but it will hide bit layout I think it is not proper solution, here is my layout
when I put white color as background than my layout look like
Here is the following code of my layout
<RelativeLayout
android:id="#+id/DetailSection1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/HeaderLayout"
android:layout_toLeftOf="#+id/DetailSection2"
>
<TextView
android:id="#+id/lblRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/DetailSection1"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:textColor="#color/heding_font"
android:textSize="#dimen/headingFont"
android:text="Restaurant Name" />
<ImageView
android:id="#+id/imgpin"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblRestaurantName"
android:layout_margin="5dp"
android:src="#drawable/pin" />
<TextView
android:id="#+id/lblAddress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblRestaurantName"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgpin"
android:text="Address"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgphone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblAddress"
android:layout_margin="5dp"
android:src="#drawable/phn" />
<TextView
android:id="#+id/lblMobile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblAddress"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgphone"
android:text="Mobile"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
<ImageView
android:id="#+id/imgstar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/star" />
<TextView
android:id="#+id/lblStar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/lblMobile"
android:layout_marginTop="5dp"
android:layout_toRightOf="#+id/imgstar"
android:text="Star"
android:textColor="#color/restaurant_list_font"
android:textSize="#dimen/lableNormalFont"
/>
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection2"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignBottom="#+id/DetailSection1"
android:layout_toLeftOf="#+id/DetailSection3"
android:layout_toRightOf="#+id/lblStar" >
<ImageView
android:id="#+id/imgmore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/read_more" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/DetailSection3"
android:layout_width="95dp"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/HeaderLayout"
android:layout_gravity="center"
android:layout_centerInParent="true"
android:background="#drawable/photo_cover" >
<ImageView
android:id="#+id/imgRestaurant"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/lblMobile"
android:layout_margin="5dp"
android:src="#drawable/rihanna" />
</RelativeLayout>
</RelativeLayout>

From the 9-patch drawable image you posted:
The bottom line which indicates the horizontal data population on the view wasn't drawn from the starting point of left.
I am not sure about it. And I know I wasn't clear in explaining the above line.
Just check this:
Consider the below 9-patch is used as a background for a TextView. If you put some text in it, it will start from the area where the bottom line is drawn. Which mean it will start from the left and go all the way to right.
If you use the following 9-patch as a background and try the same thing which you did above. Will result in Text not written from the left. It leaves a bit padding.
That is the reason why you get such result. Of course I am 100% sure about it.
So, just to find out if this works. Try changing the bottom line to fill complete image.

I think you better apply the background color for which layout you want exactly.And one more keep the code so that we can understand easily what is your issue.