Develop Reference

Design view breaks as soon as I add any FragmentContainerView

Here you can see the split screen design view working when I comment out the FragmentContainerView:
And as soon as I uncomment it, the design view breaks
There are no errors as far as I can tell.
The full xml, just showing the structure and not the sibling content:
<?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"
tools:context=".activities.ParametersActivity" android:layout_height="match_parent"
android:layout_width="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:id="#+id/colorLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:visibility="gone"
android:orientation="vertical">
<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
</LinearLayout>
</LinearLayout>
</ScrollView>
</LinearLayout>
What's interesting is that the FragmentContainerView does seem to actually be working when I build the app. So I bet this is just an Android Studio bug.
What can I do to debug and resolve this?

The layout error prompted by Android Studio is:-
This can be resolved in the following ways:-
If you are using the JetPack Navigation library and have a navGraph layout file, then specify it under the app:navGraph tag as :
<androidx.fragment.app.FragmentContainerView
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"
app:navGraph="#navigation/nav_graph" />
If a single fragment is required to be displayed, then the same can be done by specifying its name under the android:name tag as :
<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="com.example.YourFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
In the latter approach, however, as the error image says, a specific layout can not be shown by FragmentContainerView in edit mode. You can have a preview of the Fragment displayed by tools:layout tag.
<androidx.fragment.app.FragmentContainerView
xmlns:android="http://schemas.android.com/apk/res/android"
android:name="com.example.YourFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout="#layout/fragment_your_fragment"/>
This should solve the problem, the layout is clearly visible on my IDE now!

Cannot set `app:layout_behavior` on fragment tag

I have a simple fragment:
<?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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_anchor="#id/tabLayout"
app:layout_anchorGravity="bottom"
android:text="test" />
</LinearLayout>
In the SampleFragment2.kt I simply inflate the above layout.
I include it below my AppBarLayout and add the app:layout_behaviour tag to it:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!-- ... -->
</com.google.android.material.appbar.AppBarLayout>
<fragment
android:id="#+id/somefragment"
android:name="com.company.sample.SampleFragment2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:layout_anchor="#id/tabLayout"
app:layout_anchorGravity="bottom" />
And this gives me runtime error:
java.lang.ClassCastException: com.google.android.material.appbar.AppBarLayout$LayoutParams cannot be cast to androidx.coordinatorlayout.widget.CoordinatorLayout$LayoutParams
If I omit the fragment tag and simply put the LinearLayout from the fragment below the AppBarLayout and add the app:layout_behavior tag there, it works just fine.
How can I achieve the same behavior when using a fragment tag?

As #MikeM. pointed out in his comment, app:layout_anchor="#id/tabLayout" was the problem. I removed all anchor attributes and it worked.

Structure of fragment isn't shown during design in android studio.Only the shade is shown.How to get the original fragment during design?

While designing the main activity I tried to add two fragments.But the original structure of the fragment is not shown in design tab of activity_main, instead shaded regions are shown for each fragment.How to get original structure of fragments during design?
enter image description here

In your activity_main.xml make sure each of your fragment tags specify:
android:name with a path to your fragment
tools:layout with the fragment's layout
If you're using an include tag then you'll need to use something like tools:showIn=".MainActivity" (docs) in your fragments.
Here's an example:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context=".MainActivity">
<fragment android:name="com.example.FirstFragment"
android:id="#+id/firstFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_first" />
<fragment android:name="com.example.SecondFragment"
android:id="#+id/secondFragment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout="#layout/fragment_second" />
</LinearLayout>
fragment_first.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".FirstFragment">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/hello_blank_fragment" />
</FrameLayout>

Android ViewPager Indicator layout

Hi Have a a VewPager indicator that will show what Fragment I am currently Viewing. I need to add a button under the circles but when I do i don't see any button at all.
My xml looks like this:
<?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"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<com.kassisdion.library.ViewPagerWithIndicator
app:arrow.enable="true"
app:arrow.width="10dip"
app:arrow.height="500dip"
app:round.enable="true"
app:round.size="15dip"
app:round.drawable="#drawable/background_rounded"
app:round.color.default="#android:color/white"
app:round.color.selected="#android:color/holo_blue_light"
android:id="#+id/viewPagerWithIndicator"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.kassisdion.library.ViewPagerWithIndicator>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Skip"/>
</LinearLayout>
I tried changing the Layout but that just threw exceptions.
How can I do this?
Thanks

How to show SlidingPaneLayout at right side?

Hi I am a beginner for android and in my app I have to show SlidingPaneLayout at the right side but using my below code it's coming from left side.
Please help me.
How can I make it be at right side?
And second my requirement is my SlidingPaneLayout must be overlapped on Action bar but using my below xml code SlidingPaneLayout showing like my below image
please suggest me how can resolve this two problem
toolbar_layout:-
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:elevation="4dp"
>
</android.support.v7.widget.Toolbar>
activity_sliding:-
<android.support.v4.widget.SlidingPaneLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/SlidingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<LinearLayout
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="right">
<ListView
android:id="#+id/MenuList"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</ListView>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:background="#101010"
android:orientation="vertical" >
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/android_robot" />
</LinearLayout>
</android.support.v4.widget.SlidingPaneLayout>
main_layout:-
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<include
android:id="#+id/SlidingPanel"
layout="#layout/activity_sliding">
</include>
</LinearLayout>

In your manifest, add the following attribute to the opening <application> tag.
android:supportsRtl="true"
Then add this attribute to the opening SlidingPaneLayout tag in your layout.
android:layoutDirection="rtl"
And finally, move the tool_bar <include> element into the main content LinearLayout within the SlidingPaneLayout, and adjust the ImageView's height and weight.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#101010"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/toolbar_layout">
</include>
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#drawable/android_robot" />
</LinearLayout>
Please note that the child Views of the SlidingPaneLayout will inherit the rtl layoutDirection. This may cause problems in child Views if their layout behavior is affected by the direction. For example, a horizontally-oriented LinearLayout will lay out its children starting from the right. This is easily remedied by setting android:layoutDirection="ltr" on the affected Views.
Also note that this example hard codes the direction in the layout. If you need to support both LTR and RTL layouts application-wide, you'll need to do this programmatically, accounting for the device's default direction.