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
Related
enter image description here
please see the pic. How can I fix this error? I tried installing a couple other devices, checked some function for hardware vs software graphics. TIA
<android.support.constraint.ConstraintLayout 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"
tools:context="haroonahmad.berkeleysucksapp.MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Berkeley Admisions"
android:textSize="24sp"
tools:layout_editor_absoluteY="88dp"
tools:layout_editor_absoluteX="88dp" />
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="16dp"
tools:layout_editor_absoluteY="335dp" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
tools:layout_editor_absoluteX="268dp"
tools:layout_editor_absoluteY="335dp" />
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Points: 0"
tools:layout_editor_absoluteX="163dp"
tools:layout_editor_absoluteY="415dp" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="495dp"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
</RelativeLayout>
edit: sorry i'm a completely new to adding code, didn't realize I could only add to the first post.
I tried changing the ConstraintLayout in both places to RelativeLayout, didn't work. then tried right clicking on the resource file and changed the layout and layoutvertical to RelativeLayout, and still didn't work. thanks for any further suggestions
You're probably using a root layout that does not match the alignments you're setting in other views. Try using RelativeLayout as root layout.
Maybe if you post your XML layout, it is easier for us to identify the problem.
OK I fixed it by changing the whole text before xmlns to RelativeLayout. thanks for the tip!
First the title may look senseless but I don't know how I describe my problem well in the title.
I have a Relative layout which has 2 buttons (Past games and Upcoming Games) and 2 listviews. Whenever a button is pressed the associated listview is collapsed (height will be zero) if it is already expanded or the reverse will happen. ( i used this solution)
Problem:
Everything is fine when I run it on a 5-inch screen phone. Please see the following picture:
[![][2]][2]
But if I run it on a 10-inch tablet it looks like this:
[![][3]][3]
The same will happen when it will run on less than 5-inch phone.
My questions
Do I need to make another layout for the tablet? like in the layout-large folder?
or I can use some event(s) in Jave file that dynamically set the buttons align parent bottom property when the listview is not collapsed.
or it can be fixed in my current XML
Below is the code for that part I am asking for help
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_marginTop="10dp"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/btnPastGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Past Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvPastGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:layout_marginTop="5dp"
android:divider="#null" />
<Button
android:id="#+id/btnUpcommigGames"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/lvPastGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="15dp"
android:layout_marginStart="15dp"
android:background="#color/YellowColor"
android:text="Up Coming Games"
android:textAllCaps="false"
android:textSize="15sp" />
<ListView
android:id="#+id/lvUpcomingGames"
android:layout_width="match_parent"
android:layout_height="255dp"
android:layout_below="#+id/btnUpcommigGames"
android:layout_centerHorizontal="true"
android:layout_marginLeft="17dp"
android:layout_marginStart="17dp"
android:divider="#null" />
</RelativeLayout>
</LinearLayout>
If you guys can give me some advice on making the user interface that will run on all screen sizes and densities I will be very thankful
Thanks to anyone who will help me
You are trying to workaround functionality of ExpandableListView. Look at the following page:
http://www.androidhive.info/2013/07/android-expandable-list-view-tutorial/
My application is intended to be used in portrait mode. The application itself is locked in landscape mode (in the manifest) because I am working with an OpenCV JavaCameraView.
I would like to position a row of buttons along the bottom edge of the screen (as the user sees it). This is the right-hand side of the screen, as the phone sees it. I've tried using a LinearLayout and playing around with the gravity settings, but this orientates the buttons so that the text is facing according to the landscape orientation; e.g. when the phone is held in portrait mode (as intended), the text is orientated so that the bottom of the text is pointing left (because it has been told it is in landscape mode).
Is there any way I can make the buttons and the LinearLayout ignore the portrait/landscape settings and force them to behave as I would like?
This is my current .xml file for the activity:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:opencv="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<org.opencv.android.JavaCameraView
android:id="#+id/main_activity_surface_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ImageView
android:id="#+id/recordingIconImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:src="#drawable/circle_red"
android:visibility="invisible" />
<TextView
android:id="#+id/movement"
android:rotation="270"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:text=""
android:textSize="20sp"
android:textStyle="bold"
android:textColor="#FF0000" />
<LinearLayout
android:id="#+id/button_row_linear_layout"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:orientation="vertical" >
<Button
android:id="#+id/button_retry"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Retry" />
<Button
android:id="#+id/button_start"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Start" />
<Button
android:id="#+id/button_next"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:rotation="270"
android:layout_weight="1"
android:onClick="captureButtonPressed"
android:text="Next" />
</LinearLayout>
</RelativeLayout>
***Edit:
Adding images to clarify (as suggested in comments) and have already switched to relative layout on my own, so the .xml is also updated. Image of current state:
As you can see I've got the buttons where I would like them (used android:rotation="270"). Two issues now:
1) The text of the TextView is clipped offscreen. I'm pretty sure this is because the sizing constraints are calculated as if it is not rotated and only after layout occurs is it rotated (this is a guess, but it does appear as if that is what's happening)
2) I can't seem to get the buttons to expand to take up available space inside the linear layout.
Any suggestions would be very welcome!
Cheers.
I've got an activity layout specified in an XML file - activity_intro.xml - and I'm trying to create another one that is similar but slightly different - that's going to be activity_instructions.xml.
The Intro activity has a 9patch image at the bottom of the screen that is supposed to stay there and only adjust to different widths of the screens.
The Instructions activity is supposed to contain the same image but above 2 more buttons - all three of these views need to be always located at the bottom of the screen.
activity_intro.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<ImageView
android:id="#+id/introAnimationImageView"
android:layout_width="152dip"
android:layout_height="176dip"
android:layout_gravity="center_horizontal"
android:contentDescription="#string/intro_animation_content_description"
android:src="#drawable/animation_intro01" />
<TextView
android:id="#+id/introTextViewTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_title"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/introTextViewSubtitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/intro_subtitle"
android:textAppearance="?android:attr/textAppearanceMedium" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<Button
android:id="#+id/introButtonLoginSignup"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="#string/intro_button_label_login_signup" />
<Button
android:id="#+id/introButtonInstructions"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/introButtonLoginSignup"
android:text="#string/intro_button_label_instructions" />
<Button
android:id="#+id/introButtonReportAnonymously"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/introButtonLoginSignup"
android:layout_centerHorizontal="true"
android:text="#string/intro_button_label_report_anonymously" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0"
android:contentDescription="#null"
android:scaleType="fitXY"
android:src="#drawable/footer_cityscape" />
</LinearLayout>
Result:
Since I've got working code for Intro, I wanted to make Instructions follow its example but the layout_weight property isn't behaving as expected. First of all, I was only trying to put in the 2 buttons and leave out the image:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_weight="0.1"
android:background="#drawable/home_background" >
<LinearLayout
style="#style/Activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="#+id/instructionsTextViewTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/instructions_title_1"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textStyle="bold" />
<ImageView
android:id="#+id/instructionsImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:contentDescription="#string/instructions_image_content_description"
android:src="#drawable/forms" />
<TextView
android:id="#+id/instructionsTextViewDescription"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/instructions_description_1"
android:textAppearance="?android:attr/textAppearanceMedium" />
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" >
<Button
android:id="#+id/instructionsButtonPrevious"
style="#style/ButtonPrevious"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:text="#string/instructions_button_label_previous" />
<Button
android:id="#+id/instructionsButtonNext"
style="#style/ButtonNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="#string/instructions_button_label_next" />
</RelativeLayout>
</LinearLayout>
This only worked when I set the layout_weight of the bottom RelativeLayout to 1 (instead of 0) and for the ScrollView 0.1 (instead of 1). If I used the original values the RelativeLayout would take up all the screen. Could anyone explain to me why that is?
I also tried googling the issue and noticed people would suggest to set layout_height to 0dip which I tried but it also didn't work as expected.
Secondly, I tried adding the already mentioned ImageView to the bottom RelativeLayout. This, however, basically displays only the ImageView and not the buttons - or one of the buttons is on top of the image (hiding it). Why is that? Don't I specifically set the buttons to be placed below it?
What should the code look like in order for it to be doing what I expect it?
Further explanation:
Below are images that should help indicate what exactly I want to achieve. The green bits are the ScrollViews - I added them because Android devices tend to have diverse screen sizes. Their purpose is to present the content properly independently of the screen size, i.e. if the screen is small, the user will be able to scroll that part to read the entire text and view the image.
The red bit on the left (Intro) shows the ImageView that is supposed to always be at the bottom of the screen; it'll always be there, visible, and it's the green bit above it that will be movable.
If you take a look at the red bit on the right (Instructions), there's a Next button that's covering the image with the lorry/truck that was visible in the Intro screenshot. Now that's wrong - there should be 2 buttons BELOW the image, as seen on the last screenshot (the 2 blue rectangles).
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.