android : Layout size changes on Orientation - android

I am facing a problem with me Layout. I am trying to build one xml file that operates both on landscape and portrait. On one specific Layout, on rotation (from portrait to landscpe) the Layout seems to expand itself. Although, every single object is there, I get a big gap.
This is how it is on Portrait.
These depict how it is after rotation (Landscape).
My xml file is:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimaryDark"
android:orientation="vertical">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:fitsSystemWindows="false"
android:id="#+id/coordintorLayout">
<com.andremion.floatingnavigationview.FloatingNavigationView
android:id="#+id/floating_navigation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#+id/toolbar"
app:layout_anchorGravity="bottom|end"
app:drawMenuBelowFab="true"
app:headerLayout="#layout/navigation_view_header"
app:menu="#menu/menu" />
<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="wrap_content"
android:background="#color/colorPrimaryDark"
android:orientation="vertical">
<include
layout="#layout/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="center"
android:gravity="bottom|center">
<!--
<include
layout="#layout/single_item_customize"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
-->
<ViewStub
android:id="#+id/layout_stub1"
android:inflatedId="#+id/inflated_layout_stub1"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.75" />
<ViewStub
android:id="#+id/layout_stub2"
android:inflatedId="#+id/inflated_layout_stub2"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.75" />
<ViewStub
android:id="#+id/layout_stub3"
android:inflatedId="#+id/inflated_layout_stub3"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.25" />
<TextView
android:layout_width="match_parent"
android:layout_height="0px"
android:layout_weight="0.25"
android:inputType="textMultiLine"
android:ems="10"
android:id="#+id/editText"
android:background="#color/colorPrimaryDark"
android:clickable="false"
android:editable="false"
android:enabled="false"
android:focusable="false"
android:focusableInTouchMode="false"
android:freezesText="false"
android:linksClickable="false"
android:longClickable="false"
android:text="#string/default_message" />
</LinearLayout >
</ScrollView>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
I am pretty sure that something is wrong with my xml, but I cannot figure it out.
Thanks in Advance.
PS: I have already the
android:configChanges="orientation|screenSize|keyboardHidden"
inside my manifest.

You should re implement the layout with the same name under layout-land
so your file structure should be as follow :
MyProject/
res/
layout/ # default (portrait)
main.xml
layout-land/ # landscape
main.xml
i hope this will help you :)

found the solution.
Changed the:
android:layout_gravity="center" inside the second LinearLayout, with
android:layout_gravity="top|center".

Try using android:fillViewport="true" and change your layout_height attribute to match_parent in your ScrollView.

Related

Linear Layout overlapping with Scroll view and other Linear Layout

Recently i have encounterd a problem. My linear layout where my edit text and image button is in is overlapping with my toolbar and my scroll view. I've tried other things like layout_below etc and nothing worked. Groupchat.xml
<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="match_parent"
android:layout_height="match_parent"
tools:context=".GroupChatActivity"
android:orientation="vertical">
<include
android:id="#+id/group_chat_bar_layout"
layout="#layout/app_bar_layout">
</include>
<ScrollView
android:id="#+id/my_scroll_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/group_chat_bar_layout"
android:layout_above="#+id/myLinearLayout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/group_chat_text_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:textAllCaps="false"
android:textSize="20sp"
android:textColor="#android:color/background_dark"
android:layout_marginStart="2dp"
android:layout_marginEnd="2dp"
android:layout_marginBottom="50dp"/>
</LinearLayout>
</ScrollView>
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<EditText
android:id="#+id/input_group_message"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:hint="Write message..." />
<ImageButton
android:id="#+id/send_message_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:src="#drawable/send_message" />
</LinearLayout>
This is how the preview of the groupchat.xml file looks in Android Studio:
enter image description here
This was how the app looked with this code.
This are the results
Just in case, this is the code of my toolbar: Appbarlayout.xml
<android.support.v7.widget.Toolbar
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:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
It in a seperate xml because i'm using it for other activities in my app to thats why theres ang include in th Groupchat.xml
ALSO I AM FOLLOWING THIS TUTORILA. I suggest you go ther and see it because that is what i followed.
go to this video
Thank you.
The problem is with layout placements. your LinearLayout with ID: myLinearLayout is not aligned anywhere in RelativeLayout that's why it is getting rendered on top of the screen. make following changes and your good to go.
in your LinearLayout with id: myLinearLayout, add this line:
android:layout_alignParentBottom="true"
like this:
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal">
Add
android:layout_below="#+id/group_chat_bar_layout"
this line to LinearLayout
<LinearLayout
android:id="#+id/myLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/group_chat_bar_layout"
android:orientation="horizontal">
<EditText
android:id="#+id/input_group_message"
android:layout_width="270dp"
android:layout_height="wrap_content"
android:hint="Write message..." />
<ImageButton
android:id="#+id/send_message_button"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:src="#drawable/bkg" />
</LinearLayout>`

Softkeyboard pushes whole layout to the top

I am working on an app in which I have implemented the live video broadcasting, and have a feature to place a live comment just like a Facebook live video feature. The problem I am facing is with EditTextView for comments. When Soft Keyboard appears on the screen It pushes the layout to the top.
I have tried to adjustResize, adjsutPan & adjust Nothing properties in Manifest. But these properties doesn't fulfill the UI requirement. What I want is to just move EditTextView to the top of Soft Keyboard and the rest of the layout as it is.
Layout
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:clickable="true">
<org.webrtc.SurfaceViewRenderer
android:id="#+id/camera_view_renderer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:drawingCacheQuality="high"
android:fitsSystemWindows="true" />
<RelativeLayout
android:id="#+id/top_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:animateLayoutChanges="true"
android:clipChildren="false"
android:clipToPadding="false">
<View
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#drawable/top_gradient" />
<include
android:id="#+id/headerLayout"
layout="#layout/header_layout" />
<com.lts.localee.customViews.LTextView
android:id="#+id/my_points"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/headerLayout"
android:gravity="center"
android:text=""
android:textColor="#color/white"
android:textSize="16dp" />
<com.lts.localee.customViews.PointsRangeComponent
android:id="#+id/points_range_component"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_below="#+id/headerLayout"
android:layout_marginBottom="120dp" />
<View
android:id="#+id/_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#AA2f3c43"
android:visibility="gone" />
<FrameLayout
android:id="#+id/livePredQuestionGameSubBaseContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="false" />
<com.lts.localee.customViews.LTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="7dp"
android:layout_marginTop="100dp"
android:background="#drawable/rounded_button_prediction_pressed"
android:gravity="center"
android:minWidth="60dp"
android:padding="10dp"
android:text="sadas"
android:textColor="#color/white"
android:textSize="18dp"
android:visibility="gone" />
</RelativeLayout>
<com.lts.localee.customViews.TriviaCommentComponent
android:id="#+id/comments_component"
android:layout_width="match_parent"
android:layout_height="120dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:visibility="visible"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</RelativeLayout>
Please help me out to solve this issue. Thanks
use android:windowSoftInputMode="adjustPan|adjustResize" inside your manifest
If android:windowSoftInputMode="adjustPan|adjustResize didn't help you, I think it's better to use <ScrollView> in your XML file

Android: how to avoid soft keyboard pushing up my layout?

This is my layout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="#layout/include_toolbar_actionbar"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/background"
android:paddingTop="#dimen/keyline_5"
android:paddingRight="#dimen/keyline_2"
android:paddingLeft="#dimen/keyline_2"
android:orientation="vertical">
<TextView
android:id="#+id/title"
style="#style/FlatCardTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TITLE" />
<EditText
android:id="#+id/content"
android:inputType="textMultiLine"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/keyline_1"
android:layout_marginBottom="#dimen/keyline_4"
android:lines="16"
android:minLines="4"
android:maxLines="16"
android:scrollbars="vertical"/>
</LinearLayout>
</LinearLayout>
<include layout="#layout/include_visibility_right_editor" />
</RelativeLayout>
The layout "include_visibility_right_editor" must be always at the bottom. Unfortunately, when the soft keyboard appears, all the layout is pushing up...
Thank for your help guys!
Use the following property in manifest activity declaration:
android:windowSoftInputMode="adjustNothing"
Also check other options according to your requirement

Android - Scrollview don't push up when keyboard appear

My app have an activity with layuot like this
<RelativeLayout
android:id="#+id/layoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgroundchatfixed">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layoutKhungChat"
android:id="#+id/svChat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/layoutChat">
</LinearLayout>
</ScrollView>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_khungchat"
android:layout_alignParentBottom="true"
android:id="#+id/layoutKhungChat">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/khungchat_chat"
android:layout_centerVertical="true"
android:id="#+id/etChatbox"/>
</RelativeLayout>
</RelativeLayout>
When i touch my Edittext, only layout "layoutKungChat" push up.
Any solution to push up also Scrollview above it?
Thanks.
Try adding this to the activity tag in the manifest:
android:windowSoftInputMode="adjustPan"
use this code
<RelativeLayout
android:id="#+id/layoutMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backgroundchatfixed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/background_khungchat"
android:layout_alignParentBottom="true"
android:id="#+id/layoutKhungChat">
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/khungchat_chat"
android:layout_centerVertical="true"
android:id="#+id/etChatbox"/>
</RelativeLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layoutKhungChat"
android:id="#+id/svChat">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/layoutChat">
</LinearLayout>
</ScrollView>
the one in the last always be written over the other layouts so if you want like buttons to be above an image layout as an example write it inside of layout below the image

How to include layout inside layout?

How to include layout inside layout in Android?
I am creating common layout. I want to include that layout in another page.
Edit: As in a comment rightly requested here some more information. Use the include tag
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/yourlayout" />
to include the layout you want to reuse.
Check this link out...
Note that if you include android:id... into the <include /> tag, it will override whatever id was defined inside the included layout. For example:
<include
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/some_id_if_needed"
layout="#layout/yourlayout" />
yourlayout.xml:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/some_other_id">
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/button1" />
</LinearLayout>
Then you would reference this included layout in code as follows:
View includedLayout = findViewById(R.id.some_id_if_needed);
Button insideTheIncludedLayout = (Button)includedLayout.findViewById(R.id.button1);
Use <include /> tag.
<include
android:id="#+id/some_id_if_needed"
layout="#layout/some_layout"/>
Also, read Creating Reusable UI Components and Merging Layouts articles.
Try this
<include
android:id="#+id/OnlineOffline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
layout="#layout/YourLayoutName" />
From Official documents about Re-using Layouts
Although Android offers a variety of widgets to provide small and
re-usable interactive elements, you might also need to re-use larger
components that require a special layout. To efficiently re-use
complete layouts, you can use the tag to embed another
layout inside the current layout.
Here is my header.xml file which i can reuse using include tag
<?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="fill_parent"
android:background="#FFFFFF"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:gravity="center"
android:text="#string/app_name"
android:textColor="#000000" />
</RelativeLayout>
No I use the tag in XML to add another layout from another XML file.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#f0f0f0" >
<include
android:id="#+id/header_VIEW"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
layout="#layout/header" />
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="#ffffff"
android:orientation="vertical"
android:padding="5dp" >
</LinearLayout>
Learn More Using this link
https://developer.android.com/training/improving-layouts/reusing-layouts.html
<androidx.constraintlayout.widget.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=".Game_logic">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:id="#+id/text1"
android:textStyle="bold"
tools:text="Player " />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textStyle="bold"
android:layout_marginLeft="20dp"
android:id="#+id/text2"
tools:text="Player 2" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Blockquote
Above layout you can used in other activity using
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.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=".SinglePlayer">
<include layout="#layout/activity_game_logic"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Categories

Resources