I'm trying to accomplish the following:
enter image description here
The gray part is the background of the activity and the white part is a horizontal LinearLayout. I want to create the spinner overlapping the top border of the LinearLayout but everything I can do is put it inside the layout or on top of it. Is there a way to accomplish this? or a workaround?
We can use ConstraintLayout for this. We need to use combinations of two properties
layout_constraintTop_toBottomOf
layout_constraintBottom_toBottomOf
This will center the Button or any other View
Example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/topView"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_orange_dark"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:orientation="horizontal" />
<View
android:id="#+id/bottomView"
android:layout_width="match_parent"
android:layout_height="100dp"
app:layout_constraintTop_toBottomOf="#id/topView"
android:background="#android:color/holo_green_light"
android:orientation="horizontal" />
<com.google.android.material.button.MaterialButton
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/topView" // this
app:layout_constraintBottom_toBottomOf="#id/topView" // and this is important, it aligns the view to the top view
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>
Result:
Related
I have dialog fragment and i set my custom view to it. I want to make it with round corners and im using CardView for it, but the shape of dialog is still rectangle. Here is my view:
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:cardCornerRadius="40dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/card_cl"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="36dp">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/id_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:textSize="36sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="12" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
the result :
Try putting your cardview in a linerlayout or a relative layout if it doesn't work try adding some padding to linerlayout or relativelayout.
This is Bcoz The Card color is similar to the background color. You just need to set elevation.
I want to create view where one element's vertical center (ImageView - black circle) is exactly on top/start of another element (LinearLayout - red box). In other words - half of black circle should be above red layout and half of it should be inside. What is the easiest way to do that? Is it possible to achieve in xml?
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/red"
android:layout_alignParentBottom="true"
android:layout_above="#+id/red_block">
SOME OTHER VIEWS INSIDE
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/some_circle"
android: CENTER_ON_TOP_OF_RED_BLOCK??? />
</RelativeLayout>
It's time to use ConstraintLayout.
You can let the vertical center of black circle align the top of red block by this two attribute
app:layout_constraintTop_toTopOf="#id/red_block"
app:layout_constraintBottom_toTopOf="#id/red_block"
xml:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/parent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="#+id/red_block"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="#android:color/red"
android:orientation="vertical"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent">
<!--SOME OTHER VIEWS INSIDE-->
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/some_circle"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="#id/red_block"
app:layout_constraintBottom_toTopOf="#id/red_block" />
</androidx.constraintlayout.widget.ConstraintLayout>
preview:
i looking to align to the top of screen a simple image with ConstraintLayout. I just tried:
<ImageView
android:id="#+id/imagecookie"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/before_cookie"
app:layout_constraintTop_toBottomOf="parent" />
The pict is positionning in the middle of screen.
Any help?
Thanks
You're setting the top of your ImageView to the bottom of the parent (ConstraintLayout), you need to set it to the top
EDIT Sample with the whole layout
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorPrimary"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Result
Thank for you time and help but it still not positioned at the top of screen.
i put my picture at the top of the screen (and middle horizontal) with:
<ImageView
android:id="#+id/imagecookie"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/suzuki"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
What I want to achieve is that I want to place a View "above" the center of its parent layout. consider the image below:
The blue rectangle it where I want my View to be. as you can see it is exactly above the (vertical)center of the screen.
The challenge is that we don't know the height of the view (so I can't use a bottom margin for it) and I want to do it in layout xml file (so I can't use code to determine the height of the view and set it a margin programmatically)
with these restrictions, is there any way to do this?
You can follow the following layout to place your view at the desired location-
<?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">
<View android:id="#+id/dummy_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_centerInParent="true"
/>
<View
android:id="#+id/your_view"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_above="#+id/dummy_view"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
I recommend you to use ConstraintLayout, it can be done using guidelines easily (instead of using a View as the anchor point):
XML example:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.constraint.Guideline
android:id="#+id/mid_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.5"
/>
<View
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#F00"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintBottom_toTopOf="#+id/mid_guideline"
/>
</android.support.constraint.ConstraintLayout>
A picture tells more than a lengthy speech :
I want to align vertically the center of the red part with the middle of the black part. I have no constraint of container (RelativeLayout, FrameLayout, LinearLayout oO ).
I tried a View with height of 0dp aligned to the bottom of the black view and alignBaseline of red view to it, but it doesn't work...
Thanks for your help !
This is also possible using the ConstraintLayout. Similar to how aligning the start/end of a view to the parent centers it within the parent, we can use that concept to center along the edge of a View.
The key to this layout is two constraints on our bottom view:
app:layout_constraintTop_toBottomOf="#id/top_view"
app:layout_constraintBottom_toBottomOf="#id/top_view"
By constraining both the top/bottom of the lower view to the bottom of the upper view, the layout will adjust to center it along that bottom. Here is the full code and screenshot of the blueprint:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<View
android:id="#+id/top_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#color/green"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<View
android:id="#+id/bottom_view"
android:layout_width="58dp"
android:layout_height="58dp"
android:background="#color/red"
app:layout_constraintBottom_toBottomOf="#id/top_view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/top_view" />
</android.support.constraint.ConstraintLayout>
Android now supports layout anchors with the CoordinatorLayout:
<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">
<View android:id="#+id/black_view"
android:layout_width="match_parent" android:layout_height="#dimen/black_height"/>
<View android:id="#+id/red_view"
android:layout_width="#dimen/red_width" android:layout_height="#dimen/red_height"
app:layout_anchor="#id/black_view" app:layout_anchorGravity="bottom|center"/>
</android.support.design.widget.CoordinatorLayout>
If you change the size of the views in your Java code, the anchor will persist as well.
Finally, I use a more programmatic way to solve this problem, because the size of Views are not fixed.
Here the solution :
The layout :
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<View
android:id="#+id/black"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"/>
<View
android:id="#+id/red"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true">
</RelativeLayout>
The code :
red.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
red.getViewTreeObserver().removeOnGlobalLayoutListener(this);
LayoutParams params = new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT
);
params.setMargins(0, 0, 0, red.getHeight()/2);
black.setLayoutParams(params);
}
});
Thanks for your help ! It helps me found this !
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="25dp"
android:background="#EEFFFFFF"
android:orientation="vertical">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true" />
try 2 views in a relative laytout. put 1 below other (using below property).
also make them both layout_centerHorizontal=true.
u can make a negative padding to the bottom one to lift it over the upper one.
good luck :)
Here I am using two different View as black and red.
<?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">
<View
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#android:color/black"
android:id="#+id/blackContainer" />
<View
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#android:color/holo_red_light"
android:layout_below="#+id/blackContainer"
android:layout_marginTop="-50dp"/>
</RelativeLayout>
The trick is I have put the red container below the black container and set its marginTop to negative half of its height. So the center of red container is at the bottom of black container.
Try doing the opposite. Anchor the smaller view first and place the other view accordingly. Something like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<View
android:layout_width="100dp"
android:layout_height="200dp"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/anchor"
android:background="#color/black" />
<View
android:layout_width="80dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:background="#color/light_grey"/>
<View
android:id="#+id/anchor"
android:layout_centerInParent="true"
android:layout_width="0dp"
android:layout_height="0dp"/>
</RelativeLayout>