I would like to make an ImageView overlay another ImageView like this; only half of the circle green is overlaying the image:
I have tried using RelativeLayout and put both ImageView inside. Then I overlay the circle over the image by using android:layout_alignBottom. It did overlay the but I have no idea how to set the offset so that only half of the circle is overlaying the base image.
EDIT:
Sorry, here is my layout xml code
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
</RelativeLayout>
I get lots of upvote for this answer.So i try to improve that answer. May be this is the better way to do that compare to other two, because this solution doesn't required to fix the layout or divide screen in equal part so may be this is better to do that.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="#+id/viewA"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:orientation="horizontal">
<TextView
android:id="#+id/subject"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/white"
android:textSize="17sp"
/>
</LinearLayout>
<LinearLayout
android:id="#+id/viewB"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/white"
android:orientation="horizontal">
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="20dp"
android:text="Thi"
android:textColor="#android:color/black"
android:textSize="17sp"
/>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/plus"
app:layout_anchor="#+id/viewA"
app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>
Alternate way Try this
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
// this is your first layout to put the big image
// use src or backgroud image as per requirement
<LinearLayout
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
// this is your bottom layout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</LinearLayout>
</LinearLayout>
// This is the imageview which overlay the first LinearLayout
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/success"
android:adjustViewBounds="true"
android:layout_gravity="center"/>
</FrameLayout>
its look like this
found one more solution for that (Edit)
if your big image size is fixed height you can try this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/layoutTop"
android:background="#color/red_error"
android:layout_width="match_parent"
android:layout_height="200dp" >
</RelativeLayout>
<RelativeLayout
android:id="#+id/layoutBottom"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_alignParentBottom="true"
android:layout_below="#id/layoutTop" >
</RelativeLayout>
<ImageView
android:id="#+id/overlapImage"
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_above="#id/layoutBottom"
android:layout_centerHorizontal="true"
android:layout_marginBottom="-20dp"
android:adjustViewBounds="true"
android:src="#drawable/testimage" />
</RelativeLayout>
Refernce :- Android: Placing ImageView on overlap between layouts
Hope this will help.Good Luck
Try out this way:
Just change layout_width and layout_height according to your need.
<?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:orientation="vertical" >
<View
android:id="#+id/viewOne"
android:layout_width="match_parent"
android:layout_height="200dp"
android:background="#126989" />
<View
android:id="#+id/viewTwo"
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_below="#+id/viewOne"
android:background="#547866" />
<View
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignBottom="#+id/viewTwo"
android:layout_centerHorizontal="true"
android:background="#ff7800"
android:layout_marginBottom="35dp" />
</RelativeLayout>
It will look like this:
I would recommend Constraintlayout as it gives excellent control over the positioning of individual view items. Sample based on your example below
<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="#+id/parentLayout">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product"/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
app:layout_constraintTop_toBottomOf="#+id/image_view_product"/>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/image_view_product"
android:layout_centerHorizontal="true"
android:background="#drawable/circle"
android:src="#drawable/ic_add_circle_green_24dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Use layout_marginTop = -20dp ( Half of your image size ). It will go up.
android:layout_marginTop="-20dp"
put both the image in Relative layout
first define the image you want to put behind the green circle
than define the green circle as
android:layout_alignBottom="#+id/Image1"
Than adjust the position by giving margin to the green circle image.
I recommend you to use a framelayout with these two images.
with the refresh imageview at the bottom and the table fan at the top.
Note : As the framelayout behaves like a stack, the item at the bottom will appear at the top.
And do the set the gravity of the refresh icon to be bottom|center to make it look this way.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/ic_fan"
android:scaleType="centerCrop"
android:layout_height="wrap_content"
android:layout_width="match_parent"/>
<ImageView
android:src="#drawable/ic_refresh"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:gravity="center|bottom"/>
</FrameLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="32sp" >
<ImageView
android:id="#+id/ivBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/ic_person_black"
android:adjustViewBounds="true"
android:id="#+id/image_view_product" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="40dp"
android:layout_marginTop="-20dp"
android:layout_below="#+id/ivBackground"
android:layout_centerHorizontal="true"
android:background="#drawable/image_view_circle"
android:src="#drawable/ic_circle" />
I think this should help you i have edited your code and made changes as below
- I change circle imageview height to 40dp and then i give margin top -20 dp so that image will overlay half as you need on background image.
I did not run this code so if you face any issues just let me know i hope this works well for you..
Screenshot:
activity_main.xml:
<RelativeLayout
android:id="#+id/rl_image"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/selectableItemBackgroundBorderless"
android:clickable="true"
android:contentDescription="null"
android:scaleType="fitXY"
android:src="#drawable/album9" />
<ImageView
android:id="#+id/imageView_round"
android:layout_width="70dp"
android:layout_height="70dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:src="#drawable/user_profile" />
</RelativeLayout>
Related
I have this layout
<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">
<ImageView
android:id="#+id/imgDisplay"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="centerCrop" />
<LinearLayout
android:id="#+id/MainLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#drawable/bg"
android:keepScreenOn="true"
tools:context=".MainActivity">
<TextView
style="#style/MyTextStyle"
android:id="#+id/MessageTextView"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:layout_marginTop="20dp"
android:layout_marginBottom="20dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_centerHorizontal="true"
android:visibility="gone"/>
<ImageButton
android:src="#drawable/ic_angry"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/AngryImageButton"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:adjustViewBounds="true"
android:layout_gravity="center_horizontal"
android:background="#null"
android:scaleType="fitCenter" />
<LinearLayout
android:id="#+id/BottomLinearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:gravity="bottom"
android:layout_below="#+id/FacesHolderFrameLayout"
android:orientation="horizontal"
android:foregroundGravity="bottom">
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
<ImageButton
android:layout_weight="1"
android:src="#drawable/ic_insert_chart_white_48dp"
android:layout_width="wrap_content"
android:layout_height="54dp"
android:id="#+id/StatisticsImageButton"
android:background="#null"
android:layout_marginTop="20dp"
android:scaleType="fitCenter" />
<Space
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
Which in general is an imageview that takes the whole screen and acts as a background image, the above it i have a linearlayout (MainLinearLayout) that hold vertically a textview, an imagebutton (AngryImageButton) and another linearlayout (BottomLinearLayout) that is just display a small image (like the logo) horizontally centered.
I want to be able to change programatically the size of the AngryImageButton and the BottomLinearLayout to be displayed in the bottom of the screen and to be always visible. I mean to be on top of the other views.
Right now the BottomLinearLayout appears in the center and below the MainLinearLayout and if i make the AngryImageButton very large, it pushes below the BottomLinearLayout until its not visible in the screen at all, i don't want that. I want it to be at the bottom, and always visible.
How i can accomplish that? Also i want the layout to work in both orientations
To bring View to front, you can use
myView.bringToFront()
or You can make use of ViewCompat and set its translation Z like below.
ViewCompat.setTranslationZ(view, 1)
here's the doc for bringToFront() bringToFront()
Let me explain i have a xml like this
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imgCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/img_circle" />
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView1"
android:textColor="#color/lblTextColor"
android:textSize="#dimen/lblTextLarge"
android:textStyle="normal" >
</TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="TextView2"
android:textColor="#color/lblHintColor2"
android:textSize="#dimen/lblTextMedium"
android:textStyle="normal" >
</TextView>
</LinearLayout>
</RelativeLayout>
And this gives me Image and TextViews next to it
But i want to accomplish something like this
that TextView Background is extended (padding maybe) at the half of the Rounded Image (behind it) so that it looks like its "part" of the image. Or I was thinking of Making a view with background white that goes behind TextView so that it looks that way. But wanted to ask here maybe if there is a better way to do this.
I hope i was clear in explaining this (That is why I added pictures).
I have tried to use demo with your xml file and you can check below code. I had to give static height and width of the ImageView to achieve result.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/imgCarCircle"
android:layout_alignTop="#id/imgCarCircle"
android:layout_marginLeft="30dp"
android:background="#color/colorAccent"
android:orientation="vertical"
android:paddingLeft="40dp">
<TextView
android:id="#+id/mapCurrentLocation"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text1"
android:textStyle="normal"></TextView>
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="text2"
android:textStyle="normal"></TextView>
</LinearLayout>
<ImageView
android:id="#+id/imgCarCircle"
android:layout_width="60dp"
android:layout_height="60dp"
android:src="#mipmap/ic_launcher_round" />
</RelativeLayout>
try these:
first solution: change this
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/imgCircle"
android:layout_toEndOf="#id/imgCircle"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
to this:
<LinearLayout
android:id="#+id/llFirstScreen"
android:layout_alignTop="#id/imgCircle"
android:layout_alignBottom="#id/imgCircle"
android:layout_width="match_parent"
android:layout_marginLeft="20dp" // or just figure your image width and set this programatically
android:layout_height="wrap_content"
android:background="#drawable/layout_view_round_corner"
android:orientation="vertical">
second solution: it to use AbsoluteLayout which is a bit hard to handle.
Hi I wanna implement following picture
When I go to XML-design of android studio it's exactly what I want but when I run app the straight line under the circle not shown Can any body give me some hint to solve this issue ? ( I also use FrameLayout instead of RelativeLayout but not worked )
Edit : In fact my problem is RelativeLayout which contains straight line not as height as other RelativeLayout. Does anyone knows how to solve this ?!
Edit 2: I change relativeLayout of parent to LinearLayout and it's worked ! I dont know why but it's work !
Here is my row of list after some changes :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="#dimen/circle_area_radius"
android:layout_height="match_parent">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/half_circle_area_radius"
android:background="#color/orange" />
<ImageView
android:id="#+id/circle"
android:layout_width="#dimen/circle_area_radius"
android:layout_height="#dimen/circle_area_radius"
android:src="#drawable/circle" />
<com.mycompany.ui.customui.PersianTextView
android:id="#+id/araNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_gravity="center"
android:layout_marginTop="22dp"
android:text="1299"
android:textColor="#color/abc_secondary_text_material_dark"
android:textSize="12sp" />
</RelativeLayout>
<!-- our content -->
<LinearLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginRight="#dimen/pager_margin"
android:layout_marginTop="#dimen/global_padding_large"
android:background="#drawable/balloon_incoming_normal"
android:orientation="vertical">
<com.mycompany.ui.customui.PersianTextView
android:id="#+id/itemText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginLeft="#dimen/global_padding_large"
android:layout_marginRight="#dimen/global_padding"
android:layout_marginTop="#dimen/global_padding"
android:ellipsize="end"
android:gravity="right"
android:textColor="#color/dark_gray"
android:textSize="#dimen/textsize_medium" />
<ImageView
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginLeft="#dimen/global_padding_large"
android:layout_marginRight="#dimen/global_padding_large"
android:layout_marginTop="#dimen/global_padding"
android:background="#color/gray_20" />
<com.mycompany.ui.customui.IconTextView
android:id="#+id/favoriteButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:padding="#dimen/global_padding"
android:layout_marginRight="#dimen/global_padding"
android:text="#string/icon_star_empty"
android:textColor="#color/black_light"
android:textSize="#dimen/textsize_smaller" />
</LinearLayout>
</LinearLayout>
The thing is line might actually form, but you are not able to see it, because it's behind the circle. If I'm right, test it by adding this to the circle android:alpha="20". The line could be seen behind the circle. If that works the solution below should work.
Change the fill_parent to match_parent, fill_parent is deprecated.
Since you use match_parent in the first layout.
The solution could be this
Better Implementation would be using this:
| Circle(V1) | TextView with information(V2) |
Align V1 to left and top (with circle and line as center of the layout).
Align V2 to the right of V1.
EDIT
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<!-- this is my straight line -->
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginLeft="31dp"
android:src="#f6802e" />
Your line's height matches parent's height, change
android:layout_height="fill_parent">
to
android:layout_height="match_parent">
EDIT #2
<?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" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:background="#00aaaaaa"
android:paddingLeft="65sp"
android:src="#drawable/ic_launcher" />
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="3sp"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:background="#aa00aa"
android:paddingLeft="65sp"
android:src="#drawable/ic_launcher" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="65sp"
android:layout_height="65sp"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="#aaaaaa"
android:paddingLeft="65sp"
android:layout_marginTop="65sp"
android:src="#drawable/ic_launcher" />
</RelativeLayout>
</RelativeLayout>
The above code runs and gives you the desired output as well, just replace the imageViews(Also the first RelativeLayout is unnecessary, inflating them takes memory). Here's the screenshot.
Try This.
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent">
<ImageView
android:layout_width="3dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginLeft="31dp"
android:src="#f6802e" />
<ImageView
android:id="#+id/circle"
android:layout_width="65dp"
android:layout_height="match_parent"
android:layout_marginEnd="-65dp"
android:layout_marginRight="-65dp"
android:src="#drawable/circle" />
I am drawing a Linear layout in Android to display 2 images with half image in left side and half image.
I draw like this :
but I want to draw like below, can you please help me to draw the image like below.
My layout file is here:
<?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" >
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1.5" >
<ImageView
android:id="#+id/sideLeft"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1.5"
android:layout_marginBottom="10dp"
android:background="#drawable/user"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/sideRight"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="1dp"
android:layout_weight="1.5"
android:layout_marginBottom="10dp"
android:background="#drawable/user"
android:scaleType="centerCrop" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
That will look like a 1 image.
Thanks In Advance!
You need to work on java for such output,
Set both image fit center,
And from Java set first imageview's right padding as -width/2, and second imageview's left padding as -width/2.
Here width is imageview's width.
It may help you.
Try this
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="0dp"
android:gravity="center"
android:layout_weight="1.5" >
<ImageView
android:id="#+id/sideLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:background="#drawable/user"
android:scaleType="centerCrop" />
<ImageView
android:id="#+id/sideRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:layout_marginBottom="10dp"
android:background="#drawable/user"
android:scaleType="centerCrop" />
</LinearLayout>
I have the following code:
grid_view_item.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:gravity="center_horizontal"
android:layout_height="wrap_content">
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_squareImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:visibility="invisible"/>
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_selectedColor"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:background="#e85349"
android:alpha="0.45"
android:visibility="invisible"/>
<com.entu.artapp.utils.SquareImageView
android:id="#+id/gridItem_constantGrey"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:background="#000000"
android:alpha="0.45"
android:visibility="visible"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:textColor="#FFFFFF"
android:id="#+id/gridItem_textView"
android:layout_centerInParent="true"
android:hint="AAAAAAAAA"/>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerHorizontal="true"
android:src="#drawable/checkmark"
android:id="#+id/gridItem_selectedCheckMark"
/>
<ProgressBar
android:id="#+id/gridItem_progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_centerInParent="true"
android:visibility="visible"/>
</RelativeLayout>
Which yields this view:
I want my item to look like this:
So, I added this line in my CheckMark imageView code:
android:layout_above="#+id/"gridItem_progressBar"
And the checkMark imageview just dissapears. Same for layout_below, as shown here:
Can anyone help me in solving this problem?
Cheers!
It may help you if you use padding instead of above or below, why do you want linear layout as your parent and relative view as child it will be more easier if you have relative layout as parent. Hope this may help you.