I'm new to Android development. I am trying to create a layout based on this image. How do I manage to align the image with a border and padding to the edge and positioned to the right? Thank you very much

CodePudding user response：

It is based on the parent view you use. Using ConstraintLayout makes it easier to align images w.r.t sibling or parent views.

When the parent view is ConstraintLayout, then you can use the properties:

1. app:layout_constraintBottom_toBottomOf="viewId"

2. app:layout_constraintEnd_toEndOf="viewId"

3. app:layout_constraintStart_toStartOf="viewId"

4. app:layout_constraintTop_toTopOf="viewId"

you can align your view with the another view with it's id or you align relative to your parent view.

This code might help you.

<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"
    tools:context=".MainActivity">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="your_image_reference"
    app:layout_constraintEnd_toEndOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

CodePudding user response：

First: To align a view to right side of a constraint parent layout, add this attribute to your customized view:

app:layout_constraintRight_toRightOf="parent"

& It's better to assign an ID to the container layout and to use that ID to relate the view to the parent layout. for example, my layout ID is:

android:id="@ id/parent_layout"

& aligning attribute code:

app:layout_constraintRight_toRightOf="@id/parent_layout"

Second: Paddings could be modified in the layout XML file directly to elements. There are many options to set padding, if I've understood your exact aim one of these 2 properties might be useful:

android:padding="planned_pad-dp"

or to specify different padding in height & width:

android:paddingHorizontal="Hor_planned_pad-dp"
android:paddingVertical="Ver_planned_pad-dp"

Third: To set a customized shape to the image view including the border.

a- From this path create a drawable XML file: res->drawable->right_click->new->drawable resource file

*In the displayed window change the root property to: "shape & set other settings.

b- Use these attributes to customize your XML file:

<!--Defines the shape of XML file e.g.: rectangle, oval, etc.-->
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="your_design">

<!--Applies required edge-->
<corners android:radius="your_edge-dp" />

<!--Applies required border-->
<stroke
    android:width="your_boarder-dp"

</shape>

c- Declare a relative layout in the image holder activity's or fragment's res.xml file. set its background attr. the designed XML file:

android:background="@drawable/your_design_drawable"

d- Insert your image view in the relative layout & set alignments.