This question is raised by so many people but for my case those solution and tips are not working.
I'm using RecycleView in fragment to display gridview for product display but is't cut last item at bottomside, I have gone through many solution like android:clipToPadding="false" and android:paddingBottom="myactionbarsize" but eventually it's doen't work.
Have a look at my code
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/ll_parent_vendors"
android:background="#color/bg_main">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_vendors"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:clipToPadding="false"
/>
<TextView
android:id="#+id/txt_empty_vendors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=""
android:textColor="#color/edt_hint_color"
android:textSize="#dimen/TextSizeNormal"
android:visibility="gone"
android:layout_margin="16dp"
android:padding="16dp"
android:gravity="center"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Here is my item Xml code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ll_row_vendor_services"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="vertical"
android:padding="1dp">
<com.customview.SquareImageView
android:id="#+id/img_vendor_services"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_placeholder"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#ffffff"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/txt_service_title"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:lines="1"
android:text="#string/app_name"
android:textColor="#color/edt_color"
android:textSize="#dimen/TextSizeSmall" />
<TextView
android:id="#+id/txt_service_price"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="#string/app_name"
android:textColor="#color/colorAccent"
android:textSize="#dimen/TextSizeSmall" />
</LinearLayout>
<LinearLayout
android:id="#+id/ll_chat"
android:layout_width="50dp"
android:layout_height="match_parent"
android:gravity="center">
<ImageView
android:layout_width="25dp"
android:layout_height="25dp"
android:background="#drawable/ic_chat"
android:clickable="false"
android:tint="#color/colorAccent" />
</LinearLayout>
</LinearLayout>
</FrameLayout>
and how I initialize in my fragment
rv_vendors = view.findViewById(R.id.rv_vendors);
rv_vendors.setHasFixedSize(true);
rv_vendors.setLayoutManager(new GridLayoutManager(mContext, 2));
Here are my Screenshot of emulator Pixel API 24 which cuts the layout at bottom.
and other one which is MIA1 real device Screenshot it's perfect with same propertie.
how this happens any hints ?
Related
i have two recyclers view in Fragment bottom sheet
the bottom sheet keeps moving with the recyceler view so that i will not be able to scroll the recycler views here is my code
`
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.appcompat.widget.LinearLayoutCompat
android:id="#+id/expandable_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal">
<com.plus.medfastplus.customViews.views.CustomBoldTextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:layout_weight="1"
android:gravity="center_vertical"
android:text="Press to manage your already assisted requests?"
android:textColor="#color/colorPrimary" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="40dp"
android:layout_height="40dp"
android:gravity="center">
<ImageView
android:id="#+id/imageView"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#drawable/ic_arrow_down" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
<net.cachapa.expandablelayout.ExpandableLayout
android:id="#+id/expandale_view"
android:layout_width="match_parent"
android:layout_height="150dp"
android:layout_marginStart="20dp"
app:el_duration="1000"
app:el_expanded="false"
app:el_parallax="0.5">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/referral_recycler_view"
android:layout_width="match_parent"
android:fadeScrollbars="false"
android:layout_height="150dp"
/>
</net.cachapa.expandablelayout.ExpandableLayout>
<View
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#color/colorPrimary" />
<com.plus.medfastplus.customViews.views.CustomRegularTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="What kind of assists you need?"
android:textColor="#color/black" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/services_recycler_view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_marginStart="5dp"
android:layout_marginTop="10dp"
/>
<com.plus.medfastplus.customViews.views.CustomBoldButton
android:id="#+id/back_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/rounded_button_abit_blue"
android:gravity="center"
android:text="#string/back"
android:textColor="#color/white" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
`
i have tried to add
nestedScrollingEnabled="false"
this seems to be works with only the other recycler view and the first one will not work
i'm trying to make this design in xml but i'm not sure if it's possible what I want.
I want to have a box and three icons (generated for every cardview) on the right separated in two layouts but all in the same cardview.
Is it possible or do I have to use the cardview as the first box and put the buttons separately?
Hope the following code helps you ,
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView 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.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="1dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintGuide_percent=".8"/>
<ImageView
android:id="#+id/image"
app:layout_constraintRight_toLeftOf="#+id/guideline"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_width="0dp"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/actionLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_constraintLeft_toRightOf="#+id/guideline"
app:layout_constraintRight_toRightOf="parent" >
<Button
android:id="#+id/likeButton"
style="?attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="100" />
<Button
android:id="#+id/disLikeButton"
style="?attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="100" />
<Button
android:id="#+id/optionButton"
style="?attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
app:iconGravity="end" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
Sorry for long post, but it isn't long. But only looks long due to images.
I wanted to make layout like below:
So I wrote a layout for it as under
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_height="match_parent"
android:layout_width="70dp"
android:src="#drawable/ic_launcher_background"
android:id="#+id/stock_item_image_small"/>
<!-- Arrow at the end of the fragment item -->
<ImageView
android:layout_width="30dp"
android:layout_height="match_parent"
android:src="#drawable/ic_chevron_right_black_18dp"/>
</LinearLayout>
</FrameLayout>
And this is visible as below
I then added a long string with below code
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="horizontal"
android:padding="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_height="match_parent"
android:layout_width="70dp"
android:src="#drawable/ic_launcher_background"
android:id="#+id/stock_item_image_small"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:textColor="#android:color/black"
android:text="A line to string which is long enough to overflow our of container"/>
<!-- Arrow at the end of the fragment item -->
<ImageView
android:layout_width="30dp"
android:layout_height="match_parent"
android:src="#drawable/ic_chevron_right_black_18dp"/>
</LinearLayout>
</FrameLayout>
And it now looks like below.
As you can see, the arrow at the end, which was visible prior to adding a TextView has now overflown out of the view and is not visible.
I basically want to know how can we add components one after another and they don't flow out of the view
How can I fix this ?
Also, can someone suggest a good material to for Layouts or begining with Android layout design ?
UPDATE:
I incorporated the suggestions of Ichvandi Octa, and wrote below code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="horizontal"
android:padding="5dp">
<!-- Added to create border around frame -->
<!-- Achieved using corner radius and padding -->
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp"
app:contentPadding="1dp"
android:backgroundTint="#android:color/black"
app:cardElevation="20dp">
<androidx.cardview.widget.CardView
android:layout_margin="0dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:cardCornerRadius="10dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/fragment_stock_item_image"
android:layout_width="70dp"
android:layout_height="match_parent"
android:src="#drawable/ic_launcher_background"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/fragment_stock_item_name"/>
<TextView
android:id="#+id/fragment_stock_item_name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:textColor="#android:color/black"
android:text="A line to string which is long enough to overflow our of container and it has lot of text"
app:layout_constraintStart_toEndOf="#id/fragment_stock_item_image"
app:layout_constraintTop_toTopOf="#id/fragment_stock_item_image"
app:layout_constraintBottom_toBottomOf="#id/fragment_stock_item_image"
app:layout_constraintEnd_toStartOf="#id/_fragment_stock_frame_line_sep"/>
<androidx.cardview.widget.CardView
android:layout_width="10dp"
android:layout_height="match_parent"
android:id="#+id/_fragment_stock_frame_line_sep"
app:layout_constraintStart_toEndOf="#id/fragment_stock_item_name"
app:layout_constraintTop_toTopOf="#id/fragment_stock_item_name"
app:layout_constraintBottom_toBottomOf="#id/fragment_stock_item_name"
app:layout_constraintEnd_toStartOf="#id/fragment_stock_item_qty">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:backgroundTint="#android:color/darker_gray"
android:layout_marginLeft="4.5dp"
android:layout_marginRight="4.5dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"/>
</androidx.cardview.widget.CardView>
<TextView
android:id="#+id/fragment_stock_item_qty"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="200"
app:layout_constraintEnd_toStartOf="#id/_fragment_stock_item_arrow"
app:layout_constraintStart_toEndOf="#id/_fragment_stock_frame_line_sep"
app:layout_constraintTop_toTopOf="#id/_fragment_stock_frame_line_sep"
app:layout_constraintBottom_toBottomOf="#id/_fragment_stock_frame_line_sep"/>
<ImageView
android:layout_width="30dp"
android:layout_height="match_parent"
android:id="#+id/_fragment_stock_item_arrow"
android:src="#drawable/ic_chevron_right_black_18dp"
app:layout_constraintStart_toEndOf="#id/fragment_stock_item_qty"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
</androidx.cardview.widget.CardView>
</FrameLayout>
But now, I this number '200' is taking too much space.
Try this out
<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="80dp"
android:padding="5dp">
<ImageView
android:id="#+id/imageView25"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView66"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView25"
app:layout_constraintEnd_toStartOf="#+id/imageView26"
app:layout_constraintStart_toEndOf="#+id/imageView25"
app:layout_constraintTop_toTopOf="#+id/imageView25"
tools:text="#tools:sample/lorem/random" />
<ImageView
android:id="#+id/imageView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_arrow_right_black" />
</androidx.constraintlayout.widget.ConstraintLayout>
it should be 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="80dp"
android:padding="5dp">
<ImageView
android:id="#+id/imageView25"
android:layout_width="70dp"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:srcCompat="#tools:sample/avatars" />
<TextView
android:id="#+id/textView66"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="#+id/imageView25"
app:layout_constraintEnd_toStartOf="#+id/view4"
app:layout_constraintStart_toEndOf="#+id/imageView25"
app:layout_constraintTop_toTopOf="#+id/imageView25"
tools:text="#tools:sample/lorem/random" />
<ImageView
android:id="#+id/imageView26"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_arrow_right_black" />
<View
android:id="#+id/view4"
android:layout_width="1dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:background="#android:color/black"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/textView67"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView67"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:text="2"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
app:layout_constraintBottom_toBottomOf="#+id/imageView26"
app:layout_constraintEnd_toStartOf="#+id/imageView26"
app:layout_constraintTop_toTopOf="#+id/imageView26" />
</androidx.constraintlayout.widget.ConstraintLayout>
Now, it should be like this
I'm making an application that gets the categories of foods from a remote database and put them in a recyclerView
but the positions keep changing after setting the text,
I need the "see more" to remain on the right side like this
.
How can I solve this problem?
This is how it looks now
.
That's my code:
<?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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/textTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="Heading"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
app:layout_constraintBaseline_toBaselineOf="#+id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"
app:layout_constraintStart_toStartOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:gravity="right">
<TextView
android:id="#+id/textView"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:text="#string/see_more"
android:textColor="#26979d"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textTest1"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="17dp"
android:layout_height="19dp"
app:srcCompat="#drawable/ic_right_arrow"
tools:layout_editor_absoluteX="335dp"
tools:layout_editor_absoluteY="9dp" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
Thanks to CodeRed answer, I found the answer, hope it will help someone else. It was a wrap-content error
<?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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:id="#+id/linearlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/activity_horizontal_margin">
<TextView
android:id="#+id/textTest1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginLeft="16dp"
android:text="Heading"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
app:layout_constraintBaseline_toBaselineOf="#+id/textView"
app:layout_constraintEnd_toStartOf="#+id/textView"
app:layout_constraintStart_toStartOf="parent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="right">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/see_more"
android:textColor="#26979d"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/textTest1"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="15dp"
android:layout_height="15dp"
app:srcCompat="#drawable/ic_right_arrow"
tools:layout_editor_absoluteX="335dp"
tools:layout_editor_absoluteY="9dp" />
</LinearLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
I cannot try this myself but I am sure that your android:layout_width in the second LinearLayout is the suspect. As you can see, the See More > is floating in the right however the width itself is restricting it to go further
Why is 3rd linear layout (containg two text views) being pushed out of screen in following xml file? Simultaneous design in Android Studio is showing expected behaviour but when testing in phone, 3rd linear layout is being partially visible.
What I am trying to achieve is dividing screen into 3 parts (10%, 80% and 10%).
<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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="3"
android:text="Place a stone" />
<Button
android:id="#+id/resetButton"
android:layout_height="match_parent"
android:layout_weight="1"
android:layout_width="0dp"
android:text="Reset" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="8">
<me.varunon9.fito.CanvasBoardView
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:orientation="horizontal">
<TextView
android:id="#+id/userInfoTextView"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:background="#drawable/focussed_background"
android:text="Your turn\nStones left: 9" />
<TextView
android:id="#+id/computerInfoTextView"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:text="Computer's turn\nStones left: 9" />
</LinearLayout>
Even this xml is also being pushed out of screen-
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/topBar"
android:orientation="horizontal"
android:layout_alignParentTop="true">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="Place a stone" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomBar"
android:layout_marginBottom="0dp"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<TextView
android:id="#+id/userInfoTextView"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:text="User Info" />
</LinearLayout>
</RelativeLayout>
I am using Fragment (Tabbed Activity). When using same xml layout (above snippets) in activity, things are working fine. Problem seems with Fragment.
To avoid nested weights (bad for performance), you can use Relative layout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/topBar"
android:orientation="horizontal"
android:layout_alignParentTop="true"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="40dp"
android:layout_marginBottom="40dp"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="40dp"
android:id="#+id/bottomBar"
android:orientation="horizontal"
android:layout_alignParentBottom="true"/>
</RelativeLayout>
Instead of using nested weights, which happen to be terribly bad for performance, use ConstraintLayout which is very easy to implement in the layout editor.
If you have never used it before it can appear to be a bit complicated; but that is not the case. Refer to this link to get an idea on how to implement a ConstraintLayout.
Here is the code for what you want to achieve
<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"
android:orientation="vertical">
<android.support.constraint.Guideline
android:id="#+id/guideline1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1"
tools:layout_editor_absoluteY="51dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.9"
tools:layout_editor_absoluteY="460dp"
tools:layout_editor_absoluteX="0dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="192dp" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.75"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="288dp" />
<TextView
android:id="#+id/stoneTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/stoneText"
app:layout_constraintBaseline_toBaselineOf="#+id/resetButton"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<Button
android:id="#+id/resetButton"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:text="#string/reset_text"
app:layout_constraintBottom_toTopOf="#+id/guideline1"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.64"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginTop="24dp" />
<TextView
android:id="#+id/playerTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/player_text"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
app:layout_constraintTop_toTopOf="#+id/guideline2"
android:layout_marginTop="8dp"
app:layout_constraintRight_toLeftOf="#+id/guideline3"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintHorizontal_bias="0.0" />
<TextView
android:id="#+id/computerTV"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="#string/computer_text"
app:layout_constraintTop_toTopOf="#+id/guideline2"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="16dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="#+id/guideline3"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.0"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp" />
<FrameLayout
android:id="#+id/contentLayout"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginLeft="8dp"
app:layout_constraintLeft_toLeftOf="parent"
android:layout_marginRight="8dp"
app:layout_constraintRight_toRightOf="parent"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="#+id/guideline1"
android:layout_marginTop="8dp">
<!--Add your other view(s) here-->
</FrameLayout>
</android.support.constraint.ConstraintLayout>
Found it! Problem was not with fragment layout but its container, i.e. ViewPager. I am using Tabbed Activity and by default View Pager was too long (going out of screen).
Here is the solution: Android Tabbed Activity Bottom off Screen
Thanks for effort guys.
Hiiii
I think you don't have proper info, how to use "Weightsum".
well no issue, i will explain you,
When you want to use "Weight" in linear layout you should use "Weightsum" in your main "LinearLayout" after that you can use sub layout or widgets in sum of weight like below code.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:weightSum="1"
android:orientation="horizontal">
<TextView
android:id="#+id/messageTextView"
android:layout_height="match_parent"
android:layout_width="0dp"
android:layout_weight="0.5"
android:text="Place a stone" />
<Button
android:id="#+id/resetButton"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:layout_width="0dp"
android:text="Reset" />
</LinearLayout>