Bring view to front of image view - Android XML - android

I am having a couple of issue with the layout on one of my activities. Here is what I currently have:
As you can see, the green circle is underneath the header image, even though it should overlap at the top. Also, as you can just see, the text to the right of the circle is underneath the header image even though it should be on a single line underneath.
This is my current XML (I've excluded the irrelevant stuff):
<ScrollView
android:id="#+id/scroll"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:fillViewport="true" >
<RelativeLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="135dp"
android:id="#+id/headerImageView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" android:layout_alignParentLeft="true"
android:scaleType="centerCrop"
android:adjustViewBounds="false"
android:background="#drawable/header_image_test" />
<Button
android:layout_width="49dp"
android:layout_height="49dp"
android:layout_alignBottom="#id/headerImageView"
android:layout_alignRight="#id/headerImageView"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/star"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/headerImageView"
android:orientation="horizontal"
android:id="#+id/main_details_layout">
<TextView
android:id="#+id/waitTimeTextView"
android:layout_width="90dp"
android:layout_height="90dp"
android:text="#string/wait_time_default"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:gravity="center"
android:background="#drawable/color0"
android:textColor="#FFFFFF"
android:layout_marginTop="-30dp"
android:textSize="30dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.7"
android:text="Attraction Name"
android:textSize="23dp"
android:layout_marginRight="8dp"
android:gravity="bottom"
android:lines="1"
android:id="#+id/attractionNameTextView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Last Updated"
android:textSize="16dp"
android:layout_marginRight="8dp"
android:gravity="bottom"
android:id="#+id/updatedTextView"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>
For the text, I have tried forcing the number of lines to be 1, and specifically setting the height, but neither seems to have worked. Also, for the circle I have tried brining it to the front in code, but it messes up the layout.
Anyone have any suggestions for changes?


Your Layout is wrong. Try This:
<RelativeLayout
android:id="#+id/container"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="match_parent"
android:layout_height="135dp"
android:id="#+id/headerImageView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true" android:layout_alignParentLeft="true"
android:scaleType="centerCrop"
android:adjustViewBounds="false"
android:background="#drawable/header_image_test" />
<Button
android:layout_width="49dp"
android:layout_height="49dp"
android:layout_alignBottom="#id/headerImageView"
android:layout_alignRight="#id/headerImageView"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:background="#drawable/star"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/headerImageView"
android:orientation="horizontal"
android:layout_marginTop="-30dp"
android:id="#+id/main_details_layout">
<TextView
android:id="#+id/waitTimeTextView"
android:layout_width="90dp"
android:layout_height="90dp"
android:text="#string/wait_time_default"
android:layout_marginLeft="8dp"
android:layout_marginRight="16dp"
android:gravity="center"
android:background="#drawable/color0"
android:textColor="#FFFFFF"
android:textSize="30dp" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_marginTop="30dp"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.7"
android:text="Attraction Name"
android:textSize="23dp"
android:layout_marginRight="8dp"
android:gravity="bottom"
android:lines="1"
android:id="#+id/attractionNameTextView"/>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="Last Updated"
android:textSize="16dp"
android:layout_marginRight="8dp"
android:gravity="bottom"
android:id="#+id/updatedTextView"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>

Related

Linearlayout above Relativelayout ( gravity bottom )

Layout wrap content not working
Below is my XML code . I want to place the portion linear layout with grey colour just above the main image . Screenshot of my code here.
In devices with aspect ratio 16:9 design is correct , but in 18:9 and 18.5:9 the grey portion is on top side .
The topic text and icon must be top left side portion of main image .
The design i want here
Never mind top side . From bottom the hight must be wrap the size of image
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#color/light_green"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/dark_green">
<LinearLayout
android:id="#+id/topLin"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#color/grey"
android:orientation="horizontal">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:adjustViewBounds="true"
android:src="#drawable/test" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:layout_marginStart="20dp"
android:layout_marginTop="15dp">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#color/grey"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

Here the main layout is RelativeLayout and the children are both layout_alignParentBottom="true"
You can just switch the child layouts around until you get the required layout
Tip: The less layouts you use, the faster rendering will be on slow devices.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/light_green">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/grey">
<TextView
android:id="#+id/nameTxt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:gravity="center|start"
android:maxLength="25"
android:singleLine="true"
android:text="Abin Stanly"
android:textColor="#color/white"
android:textStyle="bold" />
</LinearLayout>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
<ImageView
android:id="#+id/icon"
android:layout_width="#dimen/icon_height"
android:layout_height="#dimen/icon_height"
android:layout_gravity="center"
android:src="#drawable/ic_love" />
</LinearLayout>
</RelativeLayout>

I have added weightSum to parent LinearLayout so you can easily divide screen according to your requirements.
Assigned View android:layout_weight="3" so it will cover 3/10th part of the screen, you can change it according to what you feels good for you.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentBottom="true"
android:background="#android:color/holo_green_light"
android:orientation="vertical"
android:weightSum="10"
xmlns:android="http://schemas.android.com/apk/res/android">
<View
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"
android:background="#android:color/holo_green_light"
/>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="7">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLength="25"
android:padding="11dp"
android:background="#android:color/darker_gray"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<RelativeLayout
android:id="#+id/RelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/nameTxt"
android:layout_alignParentBottom="true"
>
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/mobile_world" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignTop="#id/imageView"
android:background="#android:color/black"
android:padding="11dp"
>
<ImageView
android:id="#+id/icon"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_gravity="center"
android:src="#drawable/back_arrow" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:layout_gravity="center_vertical"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</LinearLayout>
Output

Check this layout:
<?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="#android:color/holo_green_light">
<TextView
android:id="#+id/nameTxt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/imageView"
android:background="#android:color/darker_gray"
android:maxLength="25"
android:padding="10dp"
android:text="Abin Stanly"
android:textColor="#android:color/white"
android:textStyle="bold" />
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:scaleType="centerCrop"
android:src="#drawable/test" />
<TextView
android:id="#+id/topicTxt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/imageView"
android:layout_gravity="center_vertical"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:drawableStart="#drawable/ic_love"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingEnd="10dp"
android:shadowColor="#android:color/darker_gray"
android:shadowDx=".5"
android:shadowDy=".5"
android:shadowRadius="3.5"
android:text="Topic"
android:textColor="#android:color/white"
android:textStyle="bold" />
</RelativeLayout>

Android App Layout collapses on physical device

The layouts and elements in Android Studio look exactly how I want it to be but as soon as I install the APK on my device, the layout collapses. All views are collapsed one on top of another which is not what was shown in Android Studio's preview...
I'm using linear layouts and relative layout. I had used android studio 1-2yrs ago and there was no such thing as constrained layout, now every time I create a layout I get an constrained error.
XML Main activity (only one):
<?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" tools:context="com.simultaneousequations.spacelaunchx.spacelaunchx.MainActivity">
<LinearLayout
android:id="#+id/linearLayoutTop"
android:layout_width="0dp"
android:layout_height="101dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="11dp"
android:orientation="vertical"
app:layout_constraintBottom_toTopOf="#+id/linearLayoutCenter"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<RelativeLayout
android:id="#+id/relativeLayoutTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorLightGrey">
<LinearLayout
android:id="#+id/linearLayoutTopImage"
android:layout_width="110dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/iridumNEXT40_50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="false"
android:cropToPadding="false"
android:scaleType="fitStart"
app:srcCompat="#mipmap/iridiummission5" />
</LinearLayout>
<TextView
android:id="#+id/iridium5Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="12dp"
android:layout_toEndOf="#+id/linearLayoutTopImage"
android:layout_toRightOf="#+id/linearLayoutTopImage"
android:fontFamily="sans-serif-condensed"
android:text="Iridium NEXT 40 50"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorRedDragon"
android:textSize="16sp"
android:textStyle="bold|italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutCenter"
android:layout_width="400dp"
android:layout_height="101dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="101dp"
android:background="#color/colorLightGrey"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="109dp">
<LinearLayout
android:id="#+id/linearLayoutCenterImage"
android:layout_width="110dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/crs14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:scaleType="fitStart"
app:srcCompat="#mipmap/crs14" />
</LinearLayout>
<TextView
android:id="#+id/crs14Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
ndroid:layout_marginTop="16dp"
android:layout_toEndOf="#+id/linearLayoutCenterImage"
android:layout_toRightOf="#+id/linearLayoutCenterImage"
android:fontFamily="sans-serif-condensed"
android:text="SpaceX NASA - CRS-14"
android:textAlignment="center"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorRedDragon"
android:textSize="18sp"
android:textStyle="bold|italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutCenterBottom"
android:layout_width="400dp"
android:layout_height="101dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="101dp"
android:background="#color/colorLightGrey"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="109dp">
<LinearLayout
android:id="#+id/linearLayoutCenterBottomImage"
android:layout_width="110dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/bhu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:scaleType="fitCenter"
app:srcCompat="#mipmap/spacexlogo"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="101dp" />
</LinearLayout>
<TextView
android:id="#+id/bhuText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="12dp"
android:layout_toEndOf="#+id/linearLayoutCenterBottomImage"
android:layout_toRightOf="#+id/linearLayoutCenterBottomImage"
android:fontFamily="sans-serif-condensed"
android:text="Bangabandhu-1"
android:textAlignment="center"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorRedDragon"
android:textSize="18sp"
android:textStyle="bold|italic" />
</RelativeLayout>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
What am I doing wrong?

Seems like you're not familiar with ConstraintLayout.
That's OK. Don't use ConstraintLayout when you don't want to use it. Using this is not necessary.
What you have to do is just change the root layout to either LinearLayout, RelativeLayout or any other Layout you want to use as per your requirements.
I'm giving you the code that you should use in this case. In that code, I'm using RelativeLayout as the root layout, because you are using layout_alignParentBottom like attributes.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.companys.appx.appx.MainActivity">
<LinearLayout
android:id="#+id/linearLayoutTop"
android:layout_width="0dp"
android:layout_height="101dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="11dp"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/relativeLayoutTop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorLightGrey">
<LinearLayout
android:id="#+id/linearLayoutTopImage"
android:layout_width="110dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/iridumNEXT40_50"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:adjustViewBounds="false"
android:cropToPadding="false"
android:scaleType="fitStart"
app:srcCompat="#mipmap/iridiummission5" />
</LinearLayout>
<TextView
android:id="#+id/iridium5Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="12dp"
android:layout_toEndOf="#+id/linearLayoutTopImage"
android:layout_toRightOf="#+id/linearLayoutTopImage"
android:fontFamily="sans-serif-condensed"
android:text="Iridium NEXT 40 50"
android:textAlignment="textStart"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorRedDragon"
android:textSize="16sp"
android:textStyle="bold|italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutCenter"
android:layout_width="400dp"
android:layout_height="101dp"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="101dp"
android:background="#color/colorLightGrey"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="109dp">
<LinearLayout
android:id="#+id/linearLayoutCenterImage"
android:layout_width="110dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/crs14"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:scaleType="fitStart"
app:srcCompat="#mipmap/crs14" />
</LinearLayout>
<TextView
android:id="#+id/crs14Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="16dp"
android:layout_toEndOf="#+id/linearLayoutCenterImage"
android:layout_toRightOf="#+id/linearLayoutCenterImage"
android:fontFamily="sans-serif-condensed"
android:text="SpaceX NASA - CRS-14"
android:textAlignment="center"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorRedDragon"
android:textSize="18sp"
android:textStyle="bold|italic" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutCenterBottom"
android:layout_width="400dp"
android:layout_height="101dp"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="101dp"
android:background="#color/colorLightGrey"
tools:layout_editor_absoluteX="8dp"
tools:layout_editor_absoluteY="109dp">
<LinearLayout
android:id="#+id/linearLayoutCenterBottomImage"
android:layout_width="110dp"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/bhu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:scaleType="fitCenter"
app:srcCompat="#mipmap/spacexlogo"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="101dp" />
</LinearLayout>
<TextView
android:id="#+id/bhuText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_marginTop="12dp"
android:layout_toEndOf="#+id/linearLayoutCenterBottomImage"
android:layout_toRightOf="#+id/linearLayoutCenterBottomImage"
android:fontFamily="sans-serif-condensed"
android:text="Bangabandhu-1"
android:textAlignment="center"
android:textAllCaps="false"
android:textAppearance="#style/TextAppearance.AppCompat.Body1"
android:textColor="#color/colorRedDragon"
android:textSize="18sp"
android:textStyle="bold|italic" />
</RelativeLayout>
</LinearLayout>
</RelativeLayout>
If there is any mistake(typo) in the code change it.
The only point is to use RelativeLayout as the root Layout instead of ConstraintLayout
In the above code, I've removed all the ConstraintLayout Attributes from the first LinearLayout because the root Layout is no more a ConstraintLayout.
This Trick will remove the problem. The problem was occurring because ContraintLayout has its own rules that you were not following. But now as you've changed the root Layout the problem will no longer exist.

How to align TextView + RecyclerView at screen bottom within ScrollView?

I have the next structure of XML file in my Fragment. I have an issue with RelativeLayout 3 (id=referralsContainer). It consist of textView (id=inviteText) + RecyclerView (id=rv_referrals). I need to show textView at the bottom of screen with any resolution. And after that textView must be RecyclerView with elements (when user will scroll down). I tried to do something like this in method, when all elements of recyclerview loaded, but recyclerview is replaced in different positions by Y axe from time to time, I can't understand how to correctly place that textview at the bottom of the scrren. And also ScrollView cuts several items of recyclerView. Does anybody can help with this? All positions in debugger looks right. Code+xml is below image. Thanks.
this.dataSourceListForAdapter.addAll(incomeListOfItemsFromServer);
recyclerView.setY(scrollView.getBottom() - textView.getHeight());
recyclerView.setY(coordinatorView.getBottom() - textView.getHeight());
adapter.notifyDataSetChanged();
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/invite_friends_swipe_refresh"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/invite_friends_content_part"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:visibility="visible">
<RelativeLayout
android:id="#+id/invite_friends_container"
android:layout_width="match_parent"
android:layout_height="190dp"
android:layout_alignParentTop="true"
android:background="#color/re_black_light_new">
<TextView
android:id="#+id/invite_friends_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/invite_friends_button_container"
android:gravity="center"
android:paddingEnd="40dp"
android:paddingStart="40dp"
android:textColor="#color/white"
android:textSize="16sp"
tools:text="#string/friends_invite_message" />
<RelativeLayout
android:id="#+id/invite_friends_button_container"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true">
<View
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_marginTop="2dp"
android:background="#drawable/combined_shape_white" />
<View
android:layout_width="match_parent"
android:layout_height="20dp"
android:layout_alignParentBottom="true"
android:background="#color/white" />
<android.support.v7.widget.CardView
android:id="#+id/invite_friends_button_invite"
android:layout_width="147dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
card_view:cardBackgroundColor="#color/white"
card_view:cardCornerRadius="3dp"
card_view:cardElevation="2dp"
card_view:cardPreventCornerOverlap="false"
card_view:cardUseCompatPadding="true">
<TextView
android:id="#+id/invite_friends_button_invite_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/yellow_button_selector"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif-medium"
android:gravity="center"
android:text="#string/friends_invite"
android:textAllCaps="true"
android:textColor="#color/re_black_light_new"
android:textSize="14sp" />
</android.support.v7.widget.CardView>
</RelativeLayout>
</RelativeLayout>
<TextView
android:id="#+id/copy_choice_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/invite_friends_container"
android:layout_centerHorizontal="true"
android:textSize="12sp"
android:text="#string/copy_link_text"
android:textColor="#color/re_gray_new" />
<RelativeLayout
android:id="#+id/invite_friends_referal_link_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/copy_choice_label"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginTop="16dp"
android:background="#drawable/rectangle_gray">
<TextView
android:id="#+id/invite_friends_referal_link_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerVertical="true"
android:background="?attr/selectableItemBackground"
android:clickable="true"
android:focusable="true"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:padding="7dp"
android:textColor="#color/re_black_light"
android:textSize="12sp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/invite_friends_full_info_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/invite_friends_referal_link_button"
android:layout_marginTop="32dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="10dp"
android:layout_marginStart="24dp"
android:layout_toLeftOf="#+id/invite_friends_container_central"
android:gravity="center_vertical">
<TextView
android:id="#+id/invite_friends_text_friends"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:text="#string/friends_invite_friends"
android:textColor="#color/re_black_light_new"
android:textSize="12sp" />
<TextView
android:id="#+id/invite_friends_friends_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/invite_friends_text_friends"
android:layout_marginTop="4dp"
android:fontFamily="sans-serif-medium"
android:textColor="#color/re_black_light_new"
android:textSize="24sp"
tools:text="4" />
<View
android:id="#+id/invite_friends_divider_horizontal"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/invite_friends_friends_count"
android:layout_marginTop="8dp"
android:background="#drawable/dash_horizontal_gray"
android:layerType="software" />
<TextView
android:id="#+id/invite_friends_text_orders"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/invite_friends_divider_horizontal"
android:layout_marginTop="14dp"
android:fontFamily="sans-serif-medium"
android:text="#string/friends_invite_orders"
android:textColor="#color/re_black_light_new"
android:textSize="12sp" />
<TextView
android:id="#+id/invite_friends_orders_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/invite_friends_text_orders"
android:layout_marginTop="4dp"
android:fontFamily="sans-serif-medium"
android:textColor="#color/re_black_light_new"
android:textSize="24sp"
tools:text="32" />
</RelativeLayout>
<View
android:id="#+id/invite_friends_container_central"
android:layout_width="1dp"
android:layout_height="1dp"
android:layout_centerInParent="true"
android:background="#drawable/dotted_line"
android:layerType="software" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
android:layout_marginStart="10dp"
android:layout_toRightOf="#+id/invite_friends_container_central">
<TextView
android:id="#+id/invite_friends_income_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:layout_marginStart="6dp"
android:fontFamily="sans-serif-medium"
android:text="#string/friends_invite_income"
android:textColor="#color/re_black_light_new"
android:textSize="12sp" />
<LinearLayout
android:id="#+id/invite_friends_income_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/invite_friends_income_text"
android:layout_marginTop="4dp"
android:orientation="horizontal">
<TextView
android:id="#+id/invite_friends_income_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="6dp"
android:fontFamily="sans-serif-medium"
android:lines="1"
android:maxLines="1"
android:textColor="#color/re_black_light_new"
android:textSize="24sp"
tools:text="1488.77" />
<TextView
android:id="#+id/invite_friends_income_currency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="sans-serif-medium"
android:lines="1"
android:maxLines="1"
android:textColor="#color/re_black_light_new"
android:textSize="12sp"
tools:text="руб." />
</LinearLayout>
<View
android:id="#+id/invite_friends_divider_horizontal_2"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_below="#+id/invite_friends_income_container"
android:layout_marginEnd="16dp"
android:layout_marginTop="8dp"
android:background="#drawable/dash_horizontal_gray"
android:layerType="software" />
<TextView
android:id="#+id/invite_friends_text_income_pending"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/invite_friends_divider_horizontal_2"
android:layout_marginStart="6dp"
android:layout_marginTop="14dp"
android:fontFamily="sans-serif-medium"
android:text="#string/friends_invite_income_pending"
android:textColor="#color/re_black_light"
android:textSize="12sp" />
<LinearLayout
android:id="#+id/invite_friends_text_income_pending_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/invite_friends_text_income_pending"
android:layout_marginStart="6dp"
android:layout_marginTop="4dp"
android:orientation="horizontal">
<TextView
android:id="#+id/invite_friends_text_income_pending_count"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-medium"
android:textColor="#color/re_gray_new"
android:textSize="24sp"
tools:text="0" />
<TextView
android:id="#+id/invite_friends_text_income_pending_count_currency"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
android:fontFamily="sans-serif-medium"
android:lines="1"
android:maxLines="1"
android:textColor="#color/re_gray_new"
android:textSize="12sp"
tools:text="руб."/>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:id="#+id/referralsContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/invite_friends_content_part"
android:visibility="gone"
android:orientation="vertical">
<TextView
android:id="#+id/inviteText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:fontFamily="sans-serif-medium"
android:text="Вы уже пригласили:"
android:textColor="#color/re_black_light_new"
android:textSize="20sp"
android:textStyle="normal" />
<ImageView
android:id="#+id/scrollMore"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/inviteText"
android:layout_centerHorizontal="true"
android:layout_marginBottom="6dp"
android:layout_marginTop="6dp"
android:src="#drawable/ic_scroll_more" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_referrals"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/scrollMore"
android:scrollbars="vertical" />
</RelativeLayout>
</RelativeLayout>
<LinearLayout
android:id="#+id/invite_friends_error_part"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:gravity="center"
android:orientation="vertical"
android:visibility="gone">
<ImageView
android:id="#+id/error_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="20dp"
android:scaleType="fitCenter"
android:src="#drawable/lost_connection_holder" />
<TextView
android:id="#+id/error_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/error_image"
android:layout_marginBottom="60dp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:text="#string/no_connection_message"
android:textColor="#color/black_tr_38"
android:textSize="19sp" />
</LinearLayout>
</RelativeLayout>
</ScrollView>
</android.support.v4.widget.SwipeRefreshLayout>

ScrollView is not purposed for sub-child layouts aligned to the bottom of screen as its direct child doesn't know where the bottom is. From your question is not clear how do you need (want) to scroll bottom part.
If it is ok to scroll by dragging bottom part (RelativeLayout 3) it is better to use BottomSheetBehaviour in Coordinatorlayout for this layout.
If not then just put RelativeLayout 3 under (below) SwipeRefreshLayout and handle ScrollView scrollChanged events to animate scrolling of bottom layout if you need or just show/hide this bottom layout.
Don't forget that on small resolutions layout aligned to the bottom will cover the content of ScrollView and user won't be able to scroll top layout.

Bug layout does not show some part

I have designed in a linear layout with a listview it is supposed to have everything shown with the whole photo and it leaves the part of likey comment but only the photo comes out and in small photos if the part comes out but in other big photos it does not
It would be nice to implement picasso but I do not know how to do it or if it can
I attach the layouts:
this is the layout_post part of a recycler view
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="horizontal">
<TextView
android:layout_marginBottom="5dp"
android:id="#+id/tv_post_username"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:layout_weight="1"
android:singleLine="true"
android:text="Username"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold" />
<TextView
android:id="#+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:layout_marginTop="16dp"
android:text="10h30" />
</LinearLayout>
<TextView
android:id="#+id/tv_post_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:text="Post text has some words that I could use for a placeholder like this" />
<ImageView
android:id="#+id/iv_post_display"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/imageholder" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/like_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:id="#+id/iv_like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/chill"
android:layout_marginBottom="1dp"/>
<TextView
android:id="#+id/tv_likes"
android:layout_marginTop="2dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/comment_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="16dp">
<ImageView
android:layout_width="wrap_content"
android:layout_marginTop="5dp"
android:layout_height="wrap_content"
android:src="#drawable/ic_mode_comment_black_24dp" />
<TextView
android:layout_marginTop="5dp"
android:id="#+id/tv_comments"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:text="0"
android:textSize="16sp" />
</LinearLayout>
</LinearLayout>
this is the rowpost
is a cardview that include the layoutpost
<RelativeLayout android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
android:background="#212121">
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:layout_marginTop="20dp"
android:layout_marginBottom="60dp"
android:elevation="10dp">
<include layout="#layout/layout_post" />
</android.support.v7.widget.CardView>
the content view:
<FrameLayout 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="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="95dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.android.octa.memetixs.Activities.main.PostActivity"
tools:showIn="#layout/app_bar_post">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="471dp">
<android.support.v4.view.ViewPager
android:id="#+id/myViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</RelativeLayout>
This is a small, low resolution photo here if it shows:
And here if everything is shown as it should be

If you use a LinearLayout without weightSum attribute then it simple stacks the child views one over the other Without adjusting its dimension to fit.
Use android:weightSum attribute in the LinearLayout and android:layout_weight + android:layout_height="0dp" for the child views, then if for example weightSum == 6 and a child has layout_weight == 1 then it will get 1/6 of space.

android : Shade over Layout and it's content

I want to make the green shade over the linearlayout and it's content like the following image
and here is a code snippet of the UI
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="168dp"
android:layout_height="120dp"
android:orientation="vertical"
android:background="#drawable/grid_item_init_border"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="90dp"
android:padding="8dp"
android:orientation="horizontal"
android:background="#color/white"
android:layout_margin="1dp">
<ImageView
android:id="#+id/image"
android:layout_width="80dp"
android:layout_height="match_parent"
android:src="#drawable/no_image" />
<TextView
android:id="#+id/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:maxLines="2"
android:ellipsize="end"
android:layout_marginLeft="4dp"
android:text="VVVVVVVVVVz"/>
<TextView android:id="#+id/category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/app_name"
android:layout_below="#+id/app_name"
android:lines="1"
android:ellipsize="marquee"
android:text="xxxxxxxxxxz"/>
</RelativeLayout>
<CheckBox
android:id="#+id/share"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_margin="4dp"
android:paddingLeft="24dp"
android:text="CheckBox"
android:button="#drawable/checkbox_white_gray"
android:background="#color/init_grid_item_checkbox_gray"/>
what should I add to my code for the shadow to be drawn over the layout ?

You should add another view in the RelativeLayout and arrange margins/paddings as follows:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="168dp"
android:layout_height="120dp"
android:orientation="vertical"
android:background="#drawable/grid_item_init_border">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="90dp"
android:orientation="horizontal"
android:background="#color/white"
android:layout_margin="1dp">
<ImageView
android:id="#+id/image"
android:layout_width="80dp"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:layout_marginDown="8dp"
android:src="#drawable/no_image" />
<TextView
android:id="#+id/app_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/image"
android:maxLines="2"
android:ellipsize="end"
android:layout_marginLeft="4dp"
android:layout_marginTop="8dp"
android:layout_marginRight="8dp"
android:text="VVVVVVVVVVz"/>
<TextView
android:id="#+id/category"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:layout_alignLeft="#+id/app_name"
android:layout_below="#+id/app_name"
android:lines="1"
android:ellipsize="marquee"
android:text="xxxxxxxxxxz"/>
<View android:id="#+id/overlay"
layout_width="match_parent"
layout_height="match_patent"
background="#drawable/green_overlay"/>
</RelativeLayout>
<CheckBox
android:id="#+id/share"
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_margin="4dp"
android:paddingLeft="24dp"
android:text="CheckBox"
android:button="#drawable/checkbox_white_gray"
android:background="#color/init_grid_item_checkbox_gray"/>
</LinearLayout>
where #drawable/green_overlay is your overlay (a color, a shape, an image or even a 9patch). If you need a pressed/unpressed status you can even use a selector (take a look here)

Categories

Resources