How to keep views from disappearing in wrap_content - java

I have a problem where a view of mine is disappearing in my RecyclerView when the layout of that view is wrap_content. The RecyclerView is match_parent both directions, and uses a LinearLayout that inflates the below xml file. Here is what each piece of the RecyclerView is supposed to look like:
And here is the XML for that:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp">
<View
android:id="#+id/scheduleBlockColor"
android:layout_width="15dp"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/scheduleBlockText"
android:background="#color/colorCougarRed" />
<RelativeLayout
android:id="#+id/scheduleBlockText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/scheduleBlockColor"
android:layout_toRightOf="#id/scheduleBlockColor"
android:paddingEnd="0dp"
android:paddingLeft="5dp"
android:paddingRight="0dp"
android:paddingStart="5dp">
<TextView
android:id="#+id/scheduleBlockTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:text="#string/schedule_block_time_default"
android:textSize="16sp" />
<TextView
android:id="#+id/scheduleBlockClassName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockTime"
android:ellipsize="end"
android:padding="2dp"
android:singleLine="true"
android:text="#string/schedule_block_class_default"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/scheduleBlockRoom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/scheduleBlockClassName"
android:padding="2dp"
android:text="#string/schedule_block_room_default"
android:textSize="16sp" />
</RelativeLayout>
</RelativeLayout>
My question is, how do I keep that colored piece from disappearing when the RecyclerView loads? If I have the parent RelativeLayout above set to match_parent, it works fine. I've tried this answer, but haven't had the same success

It is because of the height set on the <View>. It gets messed up (even with match_parent) by the fact that it doesn't have content. Since the intention is to have a vertical stripe, you could anchor it to the top and bottom of the parent. You already are doing it for the bottom part (kind of, aligning it to the bottom of the text view container), so you only need to take care of the top anchoring:
<View
android:id="#+id/scheduleBlockColor"
...
android:layout_alignParentTop="true"
... />

Instead of padding using layout_margin inside your RelativeLayout.

Related

ConstraintLayout applying margin bottom to a view, also applies it to the top of the view

I have a TextView, below it an EditText and below it another TextView. When I apply a bottom margin of 12 dp to the EditText, it's applied but it also applies to the top of the view. I don't know if this is the way ConstraintLayout works. marginTop works as expected.
https://i.stack.imgur.com/VEOUz.jpg
From what i can see in your attachment you are creating a vertical chain but you didn't restrain your "description" to the bottom. This could cause issues since the constraint layout doesn't know where the chain ends. make sure you add app:layout_constraintBottom_toBottomOf="parent" or whatever view you need as a bottom chain constraint on the description TextView.
I recreated your example and there is mirror margin for the edit text.
<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">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Name"
app:layout_constraintBottom_toTopOf="#id/editText"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="spread" />
<EditText
android:id="#+id/editText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="edit text"
app:layout_constraintBottom_toTopOf="#+id/description"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/name" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Description"
android:textColor="#color/colorTextPrimaryLight"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/editText" />
You can play around with the chainStyle to see which fits best your needs.

How can i remove unnecessary top padding in cardview?

I managed to implement Cardviews in my app, but the cardview show an unnecessary padding in the top.
What i want to achieve is to get a header image like this :
Here's my cardview Layout file :
<android.support.v7.widget.CardView
android:id="#+id/programCardview"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="wrap_content"
android:layout_width="match_parent"
card_view:cardUseCompatPadding="true"
xmlns:card_view="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/programHeader"
android:layout_width="match_parent"
android:layout_height="160dp"
android:src="#drawable/createdprogramviewcard"/>
<RelativeLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp">
<TextView
android:id="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="Programme d'endurance"
android:textSize="20sp"
android:textAlignment="center"/>
<TextView
android:id="#+id/objectif"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="Objectif : " />
<TextView
android:id="#+id/programObjectif"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="6 séances"
android:layout_toRightOf="#id/objectif"/>
<TextView
android:id="#+id/programWorkouts"
android:layout_below="#+id/programTitle"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textAlignment="textEnd"
android:layout_alignParentRight="true"
android:text="6 séances" />
</RelativeLayout>
</LinearLayout>
This is the code of the RecyclerView :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewPrograms"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
I manage to change the attribute cardUseCompatPadding but that not affect the internal form of the cardview, it's just there to separate them.
Thanks in advance.
I found a solution for my problem by changing the height of the imageView to 130dp. Apparently since i made the with of the image to match_parent, i had to find the exact height that will suit the image inside the cardview without giving it some extra padding.
The situation is due to two reasons, the first is that the height property of the CardView is in match_parent or in a larger size than the components occupy and at the same time the gravity property of the layout is in center.
To fix it just set the gravity of the LinearLayout to center | fill or just to fill.
I used these below attributes and it works for me.
card_view:cardElevation="0dp"
card_view:cardMaxElevation="0dp"
Or you can just use MaterialCardView instead of legacy CardView

Elements below the expandable list - not floating footer

Is there any option to put elements below the expandable list, let me explain: I already implemented elements below the list, but they are behaving like footer - floating at the bottom of the screen.
But if i place elements below the list in xml, elements become hidden when any group is expanded.
at the moment my layout is behaving like this
http://shrani.si/f/2s/ba/ga2VKfi/lay2.jpg
but i want to be like this at the end of the list
http://shrani.si/f/42/4m/2GAcNu6T/lay3.jpg
My layout at the moment
<LinearLayout
android:id="#+id/linearLayoutListExer"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:background="#ffffff"
android:gravity="center_vertical"
android:orientation="vertical">
<ExpandableListView
android:id="#+id/ExerciseELV"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/linearLayoutStatus"
android:layout_weight="1"
android:groupIndicator="#null" />
<LinearLayout
android:id="#+id/relativeFooter"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linearLayoutListExer"
android:background="#ffffff"
android:orientation="vertical">
<TextView
android:id="#+id/textViewBellowExercise"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="10dip"
android:text="The following exercises will help you lose body weight"
android:textAppearance="?android:attr/textAppearanceSmall"
/>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#id/textViewBellowExercise">
<Button
android:id="#+id/buttonFaceit"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#color/green"
android:text="FaceIT!"
android:textColor="#color/white" />
<Button
android:id="#+id/buttonChallenge"
android:layout_width="0dp"
android:layout_height="20dp"
android:layout_margin="5dp"
android:layout_weight="1"
android:background="#color/red"
android:text="Challenge"
android:textColor="#color/white" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
Your following property should change.
Instead of
android:layout_below="#id/linearLayoutListExer"
you should write
android:layout_below="#id/ExerciseELV"
for the LinearLayout with android:id="#+id/relativeFooter"
This will make the bottom layout appear below the listview
I'm new to android so i'm sorry for any "stupid" questions i may be asking.
I ended up using addfooterview method which works great.
You need to separate footer layout in its own xml and then inflate it and add it to expandable listview.
View footer=inflater.inflate(R.layout.activity_main_footer,null);
elv.addFooterView(footer);

Splitting Android Layout Vertically Adding Gravity To Both Sides To Center Objects

I have an android layout I'd like to split down the middle vertically and then add gravity so I can center items within the left and the right halves of the layout.
Can someone explain or post an example of how this might be accomplished?
Thus far I've created a layout and a horizontal layout. My problem is the horizontal layout needs balance so I'd like to figure out a way to change my current layout (show below) to include a way of centering the objects within the left and right halves of the screen.
SOURCE:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/background"
android:orientation="vertical" >
<ImageView
android:id="#+id/emblem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginTop="24dp"
android:gravity="center"
android:scaleType="fitStart"
android:src="#drawable/apn_app_logo" />
<Button
android:id="#+id/go_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/emblem"
android:layout_alignParentRight="true"
android:layout_marginBottom="23dp"
android:layout_marginRight="22dp"
android:background="#drawable/apn_app_go_button" />
<TextView
android:id="#+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="#+id/go_button"
android:gravity="center"
android:text="#string/start_text2"
android:textColor="#000000"
android:textSize="18sp" />
</RelativeLayout>
First of all android:orientation attribute will not work in Relative Layout.If you want to split the screen half into two equal layout your parent layout will be a linear layout with android:orientation= horizontal. Then inside that have 2 LinearLayout with each android:orientation= vertical. Inside 1st Linear layout you can have the ImageView , Button and TextView with each of their layout_gravity=center.
Hope this helps. If you want to do something in the 2nd half of teh screen , do all teh stuffs in the 2nd LinearLayout.
Happy Coding.
Here's some code which should be self-explanotory:
<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="horizontal"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#00dd00"
android:gravity="center"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:background="#dd0000"
android:gravity="center_horizontal"
>
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</LinearLayout>
and here's what you'll achieve:

GridView not conforming to Relativelayout alignment

I'd like to right align this gridview so that it's flush against the right side of the screen, but it seems to always immediately follow whichever textview I set it to the right of. Not only that, but all of the textviews are displayed on top of each other.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/time_left"
android:textSize="30sp"
android:layout_alignParentLeft="true"
android:id="#+id/time_left_label"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/time_left"
android:layout_alignParentLeft="true"
android:layout_below="#id/time_left_label"/>
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="#string/progress"
android:textSize="30sp"
android:layout_alignParentLeft="true"
android:layout_below="#id/time_left"
android:id="#+id/progress_label" />
<TextView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/progress"
android:layout_alignParentLeft="true"
android:layout_below="#id/progress_label"/>
<GridView android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/main_grid"
android:numColumns="2"
android:layout_alignParentRight="true"
android:layout_toRightOf="#id/time_left_label"
android:stretchMode="none" />
</RelativeLayout>
Here's a picture of what I want drawn quickly in paint!
http://imgur.com/x7Ypr
I'd like to right align this gridview
How exactly do you want it aligned? You mention what it does, but not what you want.
it seems to...follow whichever textview I set it to the right of
Welll, you're using layout_alignParentRight and layout_toRightOf.
the textviews are displayed on top of each other.
Placing your TextViews underneath each other won't stack them. You can use a LinearLayout with its orientation set to vertical or you could use layout_below to place them under each other.

Categories