Horizontal Layout messed up when using Jetpack Fragment Navigation - android

Android dev beginner here. I've followed a tutorial for fragment-based navigation. I'm running into troubles when changing device orientation. It works fine on a real device, but in the emulator it is broker.
I've read some things about the view being re-rendered on device orientation change, but in my case the entire layout gets messed up, including the top bar as well as the bottom bar (back, etc.). A screenshot and code included below.
Note: layout looks completely fine when seeing it in design tab of XML layout file.
This is what it looks like in a vertical orientation:
Code for main activity and main fragment is below:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:defaultNavHost="true"
app:navGraph="#navigation/nav_graph" />
</androidx.constraintlayout.widget.ConstraintLayout>
and my main fragment is this one:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=".MainFragment"
android:id="#+id/parentLayout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="30dp"
android:gravity="center">
...some stuff here...
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

=> this looks incorrect:
android:layout_width="0dp"
android:layout_height="0dp"
Try to follow this example :
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment android:name="com.example.news.ArticleListFragment"
android:id="#+id/list"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Related

Android Studio works doesn't show at first

I'm working with navigation component and made one fragment with authorization which should be shown at the beginning, but if I press "Run app" there is nothing on the screen, but after I click "Apply changes and Restart Activity" I can see all views etc.
Is this a normal thing or how can I fix this?
mainActivity.xml:
<?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=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/main_fragments_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:name="androidx.navigation.fragment.NavHostFragment"
app:defaultNavHost ="true"
app:navGraph ="#navigation/nav_graph_common"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Failed making scrollable a ConstraintLayout in an Android Fragment

Recently I tried to create a fragment and the LinearLayout is bigger than the screen and I need to use the ScrollView. I've tried different ways reading other questions in Stackoverflow and I couldn't resolve the issue.
This is my XML Code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView
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">
<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=".ui.configuration.ConfigurationFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:ignore="MissingConstraints">
<TextView
android:id="#+id/text_configuration_first_tittle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/configuration_first_title"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>
Any idea?
Resolved... The scrollview was working.
I only need to add marginBotton with enough height size to considere the Botton Navigation Bar

How to add text views and buttons on Google Maps fragment?

This is a simple layout and I wanted to add text views and 5 buttons on it but whatever I do those buttons don't appear on the map.
<?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="match_parent"
android:layout_height="match_parent">
<!--fragment to display our maps-->
<!--Search View for the google autocomplete support -->
<fragment
android:id="#+id/map"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MapsActivity" />
</RelativeLayout>
Your xml should look something like this:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutDirection="ltr">
<androidx.fragment.app.FragmentContainerView
android:id="#+id/map_layout"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<Button
android:id="#+id/btn"
android:layout_width="150dp"
android:layout_height="50dp"
android:layout_marginBottom="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
you can add more buttons/TextView

Displaying DialogFragment with NavHostFragment displays empty

Im trying to display a DialogFragment which after showing up on the screen should display a start destination from the nav_graph specified in the NavHostFragment. Here's DialogFragment layout:
<?xml version="1.0" encoding="utf-8"?>
<layout>
<!-- <androidx.constraintlayout.widget.ConstraintLayout -->
<!-- android:layout_width="match_parent"-->
<!-- android:layout_height="800dp">-->
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:visibility="visible">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginBottom="8dp"
android:orientation="vertical">
<fragment
android:id="#+id/nav_host_home_bottom_sheet"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="0dp"
app:defaultNavHost="true"
app:layout_constraintBottom_toTopOf="#+id/dismiss_registration_button"
app:layout_constraintTop_toTopOf="parent"
app:navGraph="#navigation/membership_navigation" />
<com.google.android.material.button.MaterialButton
android:id="#+id/dismiss_registration_button"
style="#style/Widget.MaterialComponents.Button.TextButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="#font/open_sans_regular"
android:text="#string/all_dismiss"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
<!-- </androidx.constraintlayout.widget.ConstraintLayout>-->
What happens is only Dismiss button displays in the DialogFragment. When I uncomment ConstraintLayout with layout_height fixed to 800dp then startDestination from NavHostFragment loads ok. The problem is that I don't want to hadrcode the layout_height - how can I display it with either CoordinatorLayou or ConstraintLayout without hardcoding the layout_height?
To make it work I simply changed DialogFragment layout to
<?xml version="1.0" encoding="utf-8"?>
<layout>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">
<fragment
android:id="#+id/nav_host_fragment"
android:name="androidx.navigation.fragment.NavHostFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:defaultNavHost="true"
app:navGraph="#navigation/membership_navigation" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
and then handle scroll view and others in fragments where it's needed.

Fit entire screen (bottom and status bar) ViewPager

I am having trouble in filling entire screen with my background. I have my main_activity with green background to check if it fills entire screen and it works. The main activity properly fills entire screen as I want.
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:background="#color/colorPrimaryDark"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.viewpager.widget.ViewPager
android:id="#+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:layout_gravity="start"
/>
<!--android:layout_marginTop="-20dp"
android:layout_marginBottom="-20dp"/-->
<com.tbuonomo.viewpagerdotsindicator.WormDotsIndicator
android:id="#+id/pager_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
app:dotsColor="#color/colorPrimaryDark"
app:dotsStrokeColor="#color/colorPrimaryDark"
app:dotsCornerRadius="8dp"
app:dotsSize="16dp"
app:dotsSpacing="4dp"
app:progressMode="true"
android:layout_marginTop="25dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Now I have my fragment with orange background. I have set width and height to match parent and also fitSystemWindows, same as in main activity, but it doesnt fit 100% - status bar and bottom bar are unaffected.
<?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:id="#+id/constraintLayout"
android:background="#drawable/pantry_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<TextView
android:id="#+id/label"
android:text="#string/fragment_pantry"
app:layout_goneMarginTop="50dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_constraintTop_creator="1"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:layout_marginTop="75dp"
android:layout_marginBottom="#dimen/activity_vertical_margin"
tools:layout_constraintLeft_creator="1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="#+id/constraintLayout"/>
</androidx.constraintlayout.widget.ConstraintLayout>
The effect is visible on screen below. I tried a simple workaround with negative margins but I am afraid of how it will work on other devices.
PS: Phone has notch ... doubt that has anything to do with it.
try this code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="#+id/SliderDots"
android:orientation="horizontal"
android:gravity="center"
android:layout_marginBottom="20dp"
android:layout_gravity="center_horizontal|bottom|center"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</LinearLayout>
</FrameLayout>
Add these lines of code in your Activity on before setContentView(R.layout.activity_main);
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main);

Categories

Resources