What is the best way to create this Layout in Android? - android

I have been struggling for hours to get this layout to work.
Here is my code:
<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:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
android:orientation="horizontal"
tools:context=".MainPreviewActivity">
<fragment
android:name="com.apps.foo.CleanPreviewFragment"
android:id="#+id/clean_preview_fragment"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent">
</fragment>
<fragment
android:name="com.apps.foo.pointop.DirtyPreviewFragment"
android:id="#+id/filters_fragment"
android:layout_weight="0.5"
android:layout_width="0dp"
android:layout_height="match_parent">
</fragment>
<fragment
android:name="com.apps.foo.pointop.ProcessedPreviewFragment"
android:id="#+id/processed_preview_fragment"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="match_parent">
</fragment>
</LinearLayout>
Every fragment is a simple RelativeLayout (all have the same view):
<RelativeLayout
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="com.apps.<whatever the fragment name is>">
</RelativeLayout>
Now I want make it work like this:
1) No nested layout_weight
2) No Nesting at all (for example nest the 2 first fragments etc
etc)
3) Not using code to do it programmatically after the view has
rendered.
In my opinion the cleanest most readable way of doing this, would be to set the orientation of fragment 1 and fragment 2 to horizontal, and fragment 3 to vertical, but it does not work.
I've also checked this answer,
but the guy, uses a layout_weight with a RelativeLayout. RelativeLayouts do ignore weights this will not work.
Any help will be appreciated?

You can add a dummy view of 0dp width and height in the center of the layout using a RelativeLayout, and position your Fragments accordingly:
<RelativeLayout
... >
<View
android:id="#+id/center_anchor"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true" />
<fragment
android:layout_toLeftOf="#id/center_anchor"
android:layout_above="#id/center_anchor"
... />
<fragment
android:toLeftOf="#id/center_anchor"
android:layout_below="#id/center_anchor"
... />
<fragment
android:toRightOf="#id/center_anchor"
... />
</RelativeLayout>

Related

two fragments in an activity.xml are not sharing width of the screen

I've two fragments inside an activity.xml but the width is not 50% for each.
I believe following are the properties to make them work, please advise if not.
layout_weight="1"
layout_width="0dp"
<?xml version="1.0" encoding="utf-8"?>
<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" >
<fragment
android:id="#+id/ListFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:layout="#layout/list_fragment" />
<fragment
android:id="#+id/FormFragment"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
app:layout_constraintEnd_toStartOf="#+id/ListFragment"
app:layout_constraintTop_toTopOf="parent"
tools:layout="#layout/form_fragment" />
</android.support.constraint.ConstraintLayout>
Use a LinearLayout rather than a ConstraintLayout.
https://developer.android.com/guide/topics/ui/layout/linear#Weight
Or use layout_constraintHorizontal_weight
https://developer.android.com/training/constraint-layout/index.html#constrain-chain
The parent layout for these fragments is ConstraintLayout and layoutWeight attribute does not work with that. if you want to divide the layout using this attribute the only thing you need to do is to change constraintLayout to LinearLayout.

layout_weight is not working in scroll view

I am trying to use this code but its not working when i put layout weight.If i remove layout weight and enter height for image view,it works fine.
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10">
<ImageView
android:id="#+id/informative_image_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3.7"
android:scaleType="fitXY"></ImageView>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view_option_menu"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="6.3" />
</LinearLayout>
</ScrollView>
Actually you don't need scrollview. Remove it. And if you are using recyclerview inside scrollview then you need to specify height in dp of list to make it work properly.

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.

How to make a fragment height take up all space left

I have an activity with two fragments A and B. Both have widths set to match_parent. Fragment B has a height of 200dp and is underneath Fragment A. I would like the height of Fragment A to fill up whatever space remains in the activity. How can I achieve this? Any hints will be highly appreciated.
I have posted my activity_main.xml
<LinearLayout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:baselineAligned="false"
android:orientation="vertical"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<fragment
android:id="#+id/image_showing_list"
android:name="com.example.gallery.ImageShowingList"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<fragment
android:id="#+id/image_showing_list_list"
android:name="com.example.gallery.ImageShowingList"
android:layout_width="match_parent"
android:layout_height="100dp" />
</LinearLayout>
If they are in a vertical LinearLayout, then assign android:layout_height="0dp" and android:layout_weight="1" to Fragment A.
make your linear layout android:orientation="vertical" and watch the magic happen

Two fragment can't weight in the Linear layout?

i try to display a two-pane UI design. I try to add two fragments in a linear layout with a weight. However, the linear layout seems to ignore the weight. How do i correct it?? Thanks
[Link:] http://dl.dropbox.com/u/78582670/twopanes.png
my layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<fragment
class="com.usci.view.fragment.CatalogFragment"
android:id="#+id/fragment_catalog"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.2">
</fragment>
<fragment
class="com.usci.education.TestFragment1"
android:id="#+id/fragment_test"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.8">
</fragment>
</LinearLayout>
Solution:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<fragment
class="com.usci.view.fragment.CatalogFragment"
android:id="#+id/fragment_catalog"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="8">
</fragment>
<fragment
class="com.usci.education.TestFragment1"
android:id="#+id/fragment_test"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="2">
</fragment>
</LinearLayout>
always , when you use weights , set the width/height (of the children) to 0px ,and prefer integers for the weights .
so , the solution is :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<fragment
class="com.usci.view.fragment.CatalogFragment"
android:id="#+id/fragment_catalog"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="2">
</fragment>
<fragment
class="com.usci.education.TestFragment1"
android:id="#+id/fragment_test"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_weight="8">
</fragment>
</LinearLayout>
With me is working by putting 20,80 .. try also 0.8,0.2:
<fragment
class="com.usci.view.fragment.CatalogFragment"
android:id="#+id/fragment_catalog"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.8">
</fragment>
<fragment
class="com.usci.education.TestFragment1"
android:id="#+id/fragment_test"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="0.2">
</fragment>
Set android:layout_width and android:layout_height value match_parent, then for example set android:layout_weight (1 fragment and 2 fragment) value 1

Categories

Resources