android : Shade over Layout and it's content - android

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)

Related

Android xml styling for different sized elements in constrained layout

I have the farrowing code that I am using to dynamically place items in gridview
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="350dp"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_margin="#dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="#dimen/margin_small">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/margin_small"
android:layout_gravity="center">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/name"
card_view:layout_constraintTop_toTopOf="parent"
card_view:layout_constraintBottom_toTopOf="#+id/cost"
card_view:layout_constraintStart_toStartOf="#+id/image"
android:maxLines="3"
android:padding="9dp"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<TextView
android:id="#+id/cost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ksh_000_00"
card_view:layout_constraintTop_toBottomOf="#+id/name"
card_view:layout_constraintBottom_toTopOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/image"
android:textAppearance="?android:attr/textAppearanceSmall"
android:typeface="serif"/>
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:contentDescription="#string/food_fuzz_logo"
android:src="#drawable/logo"
card_view:layout_constraintBottom_toTopOf="#+id/footer"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/cost"
tools:scaleType="fitCenter" />
<LinearLayout
android:layout_width="match_parent"
android:id="#+id/footer"
android:layout_height="wrap_content"
card_view:layout_constraintTop_toBottomOf="#+id/image"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/name"
android:orientation="horizontal"
android:background="#color/gradient_background">
<TextView
android:id="#+id/minus"
android:layout_width="14dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginStart="#dimen/activity_vertical_margin"
android:gravity="start"
android:text="#string/minus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:id="#+id/quantity"
android:text="#string/zero"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:layout_gravity="center"
android:gravity="center"/>
<TextView
android:layout_width="30dp"
android:layout_height="wrap_content"
android:id="#+id/plus"
android:text="#string/plus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold"
android:layout_gravity="end"
android:gravity="end"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
now I would like to have it like the bootstrap card with card-header, card-body and card-footer effect but I am only able to make it have the body like effect only. My attempt for the footer only positions the footer id element in the centre and its components crumbled together instead of the first one(minus) being spread out one to the extreme left, the other(quantity) in the centre and the last one(plus)n to the extreme right of the cardview's linear layout item.
This is what the code gives me
And this is what I expect
yet what I want is for the grey area to span the entire width of the card view and position the components appropriately as explained earlier
How is it possible to achieve my design idea?
what I want is for the grey area to span the entire width of the card view
I see that you used tools:scaleType for the image, and this won't work at runtime, as tools namespace is used for design purpose, so change it to android:scaleType
and position the components appropriately as explained earlier
You need to set the width of the LinearLayout that holds the buttons to match_parent, and set the weight values so that the buttons can be distribute like you need:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="350dp"
android:layout_margin="#dimen/margin_small"
card_view:cardCornerRadius="10dp"
card_view:cardElevation="#dimen/margin_small">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="#dimen/margin_small">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxLines="3"
android:padding="9dp"
android:text="#string/name"
android:textAppearance="?android:attr/textAppearanceSmall"
card_view:layout_constraintBottom_toTopOf="#+id/cost"
card_view:layout_constraintStart_toStartOf="#+id/image"
card_view:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/cost"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/ksh_000_00"
android:textAppearance="?android:attr/textAppearanceSmall"
android:typeface="serif"
card_view:layout_constraintBottom_toTopOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/image"
card_view:layout_constraintTop_toBottomOf="#+id/name" />
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="fitCenter"
android:src="#drawable/ic_launcher_background"
card_view:layout_constraintBottom_toTopOf="#+id/footer"
card_view:layout_constraintEnd_toEndOf="parent"
card_view:layout_constraintStart_toStartOf="parent"
card_view:layout_constraintTop_toBottomOf="#+id/cost"
tools:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/footer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/gradient_background"
android:orientation="horizontal"
card_view:layout_constraintBottom_toBottomOf="parent"
card_view:layout_constraintEnd_toEndOf="#+id/image"
card_view:layout_constraintStart_toStartOf="#+id/name"
card_view:layout_constraintTop_toBottomOf="#+id/image">
<TextView
android:id="#+id/minus"
android:layout_width="14dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginStart="#dimen/activity_vertical_margin"
android:gravity="start"
android:text="#string/minus"
android:layout_weight="1"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/quantity"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/zero"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/plus"
android:layout_width="30dp"
android:layout_height="wrap_content"
android:layout_marginEnd="#dimen/activity_vertical_margin"
android:layout_weight="1"
android:layout_gravity="end"
android:gravity="end"
android:text="#string/plus"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

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>

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.

Bring view to front of image view - Android XML

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>

Android Scrollview inside a tab not showing all content

I have two tabs and in the second tab I have content which is larger than the viewport, so I need ScrollView. However, I can't get ScrollView to show all content. It cuts the view at the last ~10/20dp. Here's my TabFragment.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Dikte glas (mm)"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp" />
<TextView
android:id="#+id/seekBarValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textAppearance="?android:attr/textAppearanceMedium"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_alignParentEnd="true">
</TextView>
<SeekBar
android:id="#+id/seekBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="200"
android:layout_marginTop="16dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#+id/seekBarValue"/>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="20dp"
android:layout_marginRight="8dp"
android:layout_below="#id/seekBar">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/soakTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Soak time"
android:textStyle="bold"
/>
<TextView
android:id="#+id/txtResultStep1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view1">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/initialCooling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Initial Cooling"
android:textStyle="bold"
android:textSize="18sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
android:layout_below="#id/initialCooling"/>
<TextView
android:id="#+id/rate1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_below="#id/initialCooling"
android:layout_marginTop="16dp"
/>
<TextView
android:id="#+id/txtResultStep2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/rate1"
/>
<TextView
android:id="#+id/range1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Range"
android:layout_below="#id/rate1"
android:layout_marginTop="8dp"
/>
<TextView
android:id="#+id/txtResultStep3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/range1"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/secondCooling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2nd Cooling"
android:textStyle="bold"
android:textSize="18sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
android:layout_below="#id/secondCooling"/>
<TextView
android:id="#+id/rate2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_below="#id/secondCooling"
android:layout_marginTop="16dp"
/>
<TextView
android:id="#+id/txtResultStep4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/rate2"/>
<TextView
android:id="#+id/range2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Range"
android:layout_below="#id/rate2"
android:layout_marginTop="8dp"
/>
<TextView
android:id="#+id/txtResultStep5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/range2"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view3">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/thirdCooling"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3rd Cooling"
android:textStyle="bold"
android:textSize="18sp"
/>
<View
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="8dp"
android:background="#android:color/darker_gray"
android:layout_below="#id/thirdCooling"/>
<TextView
android:id="#+id/rate3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Rate"
android:layout_below="#id/thirdCooling"
android:layout_marginTop="16dp"
/>
<TextView
android:id="#+id/txtResultStep6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/rate3"/>
<TextView
android:id="#+id/range3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Range"
android:layout_below="#id/rate3"
android:layout_marginTop="8dp"
/>
<TextView
android:id="#+id/txtResultStep7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"
android:layout_alignBaseline="#id/range3"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardCornerRadius="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_below="#id/card_view4">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="#+id/totalMinimumTime"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Total minimum time"
android:textStyle="bold"
/>
<TextView
android:id="#+id/txtResultStep8"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="right"
android:width="120dp"
android:layout_alignParentEnd="true"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Above in the following image you can see what happens when I have my cursor in the ScrollView. The blue line is just above the navigation bar.
Under is what happens when I have my cursor in the RelativeLayout inside ScrollView (which is how it's supposed to be):
Android Studio
Could someone tell my why the ScrollView is not showing all my content?
This is how it is on the emulator.
Emulator
I've fixed it by using NestedScrollView instead of ScrollView, because the fragment is initiated in a CoordinatorLayout. I didn't know that only NestedScrollVew would work then.
Here's an answer to a year old question. But I had the same problem not being able to scroll for the last few dps. I also had a android:layout_marginTop on my top element with content. Changing that to a android:paddingTop on the ScrollView solved it for me.
I wanted to suggest this in a comment but my reputation isn't high enough. First of all, is the first screenshot what you see in the emulator or in android studio?
EDIT: Sorry just saw the names of the links. You already answer that question.
Try removing the scrollview from the RelativeLayout. If everything is contained in the scrollView, you shouldn't need the layout. I feel like the outside relativeLayout's "match_parent" fields for both width and height are problematic. Worth a shot.

Categories

Resources