My question is related to this one:
Multiple Fragments in One Activity
I'm displaying three fragments in an activity on a tablet: two only contain text(Ingredients and Steps) and one an Exoplayer and text. All the fragments are enclosed in respective Frame Layouts. I'm using the Constraint Layout as the parent layout. The ExoPlayer isn't uniformly displayed in both portrait and landscape modes due to the length of the text in the Ingredients fragment. It is supposed to always be to the right of that Fragment and above the Steps Fragment. The two other Fragments are displayed properly on the left of the screen.
I thought about using a Linear layout and setting layout weights but then read in several posts that it's not recommended. What is the best way to display the ExoPlayer fragment in this type of layout? Thank you in advance.
<?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:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/tablet_detail_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="annin.my.android.bakingapp.ui.IngredientStepsActivity">
<!--
This layout is a two-pane layout for the master/detail flow.
-->
<FrameLayout
android:id="#+id/ingredients_fragment_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/steps_fragment_container"
app:layout_constraintVertical_weight="0.4"
>
</FrameLayout>
<FrameLayout
android:id="#+id/video_fragment_container"
android:layout_width="wrap_content"
android:layout_height="250dp"
android:layout_marginStart="5dp"
android:layout_marginTop="80dp"
android:layout_marginEnd="60dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="#+id/ingredients_fragment_container"
app:layout_constraintVertical_weight="0.4" >
</FrameLayout>
<FrameLayout
android:id="#+id/steps_fragment_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="40dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ingredients_fragment_container"
app:layout_constraintVertical_weight="0.4"
>
</FrameLayout>
</android.support.constraint.ConstraintLayout>
</ScrollView>
Its pretty straightforward, just make 2 fragment and then assign them the respective fragment files like so:
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/my_fragment"
android:name="annin.my.android.bakingapp.ui.Fragment1" />
<fragment
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/my_fragment_2"
android:name="annin.my.android.bakingapp.ui.Fragment2" />
Related
I want to force my layout shows the elements responsive in all kind of smartphones. I'm working on Android Studio 3.5
I want my app see like this in all devices (layout just in one view)
But in some devices with a smaller screen my same layout looks like this:
How to force my layout and all my elements to see in one page like my first image and avoid to? I don't want any kind of scrollview, I just one all my elements in one view.
My layout.xml
<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="Fragments.InicioFragment">
<LinearLayout
android:layout_marginTop="10dp"
android:layout_gravity=""
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:orientation="vertical">
<ScrollView
android:background="#drawable/border_black_radius"
android:layout_width="match_parent"
android:layout_height="160dp"
android:scrollbars="vertical"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/contenido_seccion1"
android:textAlignment="center"
android:text="#string/prueba"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="#dimen/font_m"/>
</LinearLayout>
</ScrollView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/temas_recycler"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp">
</androidx.recyclerview.widget.RecyclerView>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/resumen_recycler"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="200dp">
</androidx.recyclerview.widget.RecyclerView>
</LinearLayout>
<!-- TODO: Update blank fragment layout -->
</FrameLayout>
You can use ConstraintLayout
Constraint layout works with screen ratios and (almost) always will represent your layout in the same way.
Also try to use DPs whenever you can and try to create a dimens.xml resource for each screen density.
Check this too: https://developer.android.com/training/multiscreen/screendensities
A bit of context: I am trying to implement a SearchView, when onQueryTextChange is called, it displays a ProgressBar, and when the query is done it hides the progress bar and displays another view depending on the outcome of the query. If the query returns nothing, it makes a textview visible saying "No Results" and if there is data, it populates the recyclerView.
My question is, what is the correct way of implementing this?
Do I stack them all on top of each other and make each one visible/invisible depending on the outcome of the query? Or do I use a viewflipper to display a fragment for no result and a fragment containing a recyclerview? Or lastly there is another way I do not know of?
This is what my search fragment looks like:
<?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:fitsSystemWindows="true"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="#color/colorWhite">
<android.support.v7.widget.SearchView
android:id="#+id/fragsearch_searchView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:queryBackground="#android:color/transparent"
app:queryHint="Search"
app:iconifiedByDefault="false"
android:background="#color/backgroundColor"/>
<View
android:id="#+id/fragsearch_divider1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#color/dividerColor"
android:layout_below="#+id/fragsearch_searchView"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/fragsearch_recycler"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:layout_below="#+id/fragsearch_divider1"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fragsearch_progress_layout"
android:background="#color/colorWhite"
android:visibility="invisible"
android:layout_below="#+id/fragsearch_divider1"
android:gravity="center">
<ProgressBar
android:id="#+id/fragsearch_progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
<TextView
android:id="#+id/fragsearch_textview_noresults"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/fragsearch_divider1"
android:padding="12dp"
android:text="No Results Found"
android:visibility="invisible"/>
</RelativeLayout>
Right now I'm just stacking all of them on top of each other and changing the visibility on each one. Is there a better way of doing this?
I like to use a ViewFlipper for this. This way you can encapsulate the various view states in separate layouts and verify at design time that the correct layout is displayed. Much nicer than setting visibility on different Views.
<ViewFlipper>
<ViewGroup1>
</ViewGroup1>
<ViewGroup2>
</ViewGroup2>
</ViewFlipper>
To switch between the different children of a ViewFlipper call setDisplayedChild(index),
FrameLayout is used for this purpose.It is very useful for arranging views on top of each other.In your case replace RelativeLayout with FrameLayout.
I have done it using Constraintlayout considering searchview inside toolbar:
<?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"
android:padding="#dimen/padding_8dp">
<ProgressBar
android:id="#+id/progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="gone"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"/>
<androidx.recyclerview.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:id="#+id/recycler_company_details"/>
<TextView
android:id="#+id/txt_empty_data"
android:text="No data available!!"
android:layout_width="wrap_content"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:textColor="#android:color/holo_red_dark"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>
Consider using framelayout for this purpose, also we can easily set children layout gravity, it gets rendered perfectly. Relativelayout could also help, but we should avoid views termed as 'Legacy'.
Hi i am new for android in my app i am adding Frame-layout inside LinearLayout but Frame-Layout and it's inside fields are not adding
my code is below please help me some one
main.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">
<FrameLayout
android:id="#+id/frame"
android:layout_width="match_parent'"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_weight ="1"
android:layout_height="wrap_content"
android:background="#android:color/holo_red_dark"
android:text="something" />
<Button
android:layout_width="30dp"
android:layout_height="30dp"
android:background="#android:color/holo_red_light"/>
</FrameLayout>
<ListView
android:id="#+id/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/frame" />
</LinearLayout>
I think you misunderstand the purpose of FrameLayout.
http://developer.android.com/reference/android/widget/FrameLayout.html
FrameLayout is designed to block out an area on the screen to display
a single item. Generally, FrameLayout should be used to hold a single
child view, because it can be difficult to organize child views in a
way that's scalable to different screen sizes without the children
overlapping each other.
You are trying to put two items inside of it. I would suggest removing the FrameLayout. You have no need of it.
<?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">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="#+id/button" />
</FrameLayout>
</LinearLayout>
This works for displaying a single button, but there's no point in having it there.
Basically, what I want to do is:
1.- I have two fragments "outside" the activity.
2.- Now there could be two possibilities, fragment 1 or fragment must be shown with a slide up animation.
3.- Fragment 1 is always above fragment 2 when both are on screen.
4.- Any of the fragments can hide, placing correctly the showing one at the botton of the screen.
I am a little bit lost with layout design. I have tried
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/fragment1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="-20dp"
android:visibility="gone" />
<FrameLayout
android:id="#+id/fragment2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="-20dp"
android:visibility="gone" />
</RelativeLayout>
And I even show both of them at the same time. Even using different fragmenttransactions for each fragment. Using, android:layout_above doesn't work.
What is the simplest way to develop this design?
Try this
<?xml version="1.0" encoding="utf-8"?>
<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="wrap_content"
android:gravity="bottom"
android:layout_alignParentBottom="true"
android:layout_marginBottom="-100dp"
android:orientation="vertical">
<FrameLayout
android:id="#+id/fragment1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorAccent"
/>
<FrameLayout
android:id="#+id/fragment2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorPrimary"
/>
</LinearLayout>
</RelativeLayout>
Animate the linearLayout. And as per your requirement change the visiblity of framelayout(gone/visible)
Maybe using two FrameLayouts for FragmentA would help for the two scenarios.
When it is the only one visible you can use
android:layout_alignParentBottom="true"
When it is on top of FrameLayout holding FragmentB, you can use
android:layout_above="#+id/fragment2"
Then play with the "visibilities" of these based on your scenarios.
I want to diplay this layout: Two fragments, the first one turned by 90 degrees counter-clockwise (well the layout of it) stuck to the left side of the screen and the second one filling the remaining space on the right side of it.
This is what I want to achieve:
I use this layout to display them floating the one over the other:
<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:layout_margin="0dp"
android:orientation="vertical"
android:padding="0dp"
tools:context=".StartActivity" >
<fragment
android:id="#+id/first"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="0dp"
android:background="#dddddd"
android:padding="10dp" />
<fragment
android:id="#+id/second"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_margin="0dp"
android:layout_weight="1"
android:background="#333333"
android:padding="10dp" />
</LinearLayout>
EDIT:
The problem is that I don't manage to rotate the fragment and still ensure that the fragment's layout is anlingnt correctly while supporting API level 11+