Md Khairul Islam
Md Khairul Islam

Reputation: 627

Button placed below the linear_layout but output is above the linear_layout

I am developing an android app in which I placed some buttons in linear layout. After Linear layout I placed a "next" button at the right bottom. But it's going to the top left corner after running the app. The linear layout is in the constraint layout and the "next" button below the linear layout and is in the constraint layout.

<LinearLayout
    android:id="@+id/toolbar"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="-11dp"
    android:orientation="vertical"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent">


    <mehdi.sakout.fancybuttons.FancyButton
        android:id="@+id/btn_spotify"
        android:layout_width="300dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:layout_marginTop="20dp"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        fancy:fb_borderColor="#f4d282"
        fancy:fb_borderWidth="3dp"
        fancy:fb_defaultColor="#bfc9d1"
        fancy:fb_focusColor="#97f7ec"
        fancy:fb_iconPosition="left"
        fancy:fb_iconResource="@drawable/ic_image_black_24dp"

        fancy:fb_radius="20dp"
        fancy:fb_text="LOAD PICTURE"
        fancy:fb_textColor="#121111"
        fancy:fb_textSize="20dp" />

    <mehdi.sakout.fancybuttons.FancyButton
        android:id="@+id/btn_spotify2"
        android:layout_width="300dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        fancy:fb_borderColor="#f4d282"
        fancy:fb_borderWidth="3dp"
        fancy:fb_defaultColor="#bfc9d1"
        fancy:fb_focusColor="#97f7ec"
        fancy:fb_iconPosition="left"
        fancy:fb_iconResource="@drawable/ic_edit_black_24dp"

        fancy:fb_radius="20dp"
        fancy:fb_text="MANAGE SCHEDULE"
        fancy:fb_textColor="#121111"
        fancy:fb_textSize="20dp" />

    <mehdi.sakout.fancybuttons.FancyButton
        android:id="@+id/btn_spotify3"
        android:layout_width="300dp"
        android:layout_height="55dp"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:paddingBottom="10dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="10dp"
        fancy:fb_borderColor="#f4d282"
        fancy:fb_borderWidth="3dp"
        fancy:fb_defaultColor="#bfc9d1"
        fancy:fb_focusColor="#97f7ec"
        fancy:fb_iconPosition="left"
        fancy:fb_iconResource="@drawable/ic_access_alarm_black_24dp"

        fancy:fb_radius="20dp"
        fancy:fb_text="SET MENUALLY"
        fancy:fb_textColor="#121111"
        fancy:fb_textSize="20dp" />

    <Button
        android:id="@+id/btn_process"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/buttonLoadPicture"
        android:foregroundGravity="center_horizontal"
        android:scaleType="centerInside"
        android:text="PROCESS" />

    <Button
        android:id="@+id/btn_next"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_process"
        android:foregroundGravity="center_horizontal"
        android:scaleType="centerInside"
        android:text="Next Page" />

    <ImageView
        android:id="@+id/imgView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerInside" />

    <TextView
        android:id="@+id/textview_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_process"
        android:foregroundGravity="center_horizontal"
        android:scaleType="centerInside"
        android:text="NO TEXT"
        android:textSize="18sp" />




</LinearLayout>

<mehdi.sakout.fancybuttons.FancyButton
    android:id="@+id/btn_spotify4"
    android:layout_width="150dp"
    android:layout_height="55dp"
    android:layout_gravity="center"
    android:paddingBottom="10dp"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:paddingTop="10dp"
    fancy:fb_borderColor="#f4d282"
    fancy:fb_borderWidth="3dp"
    fancy:fb_defaultColor="#bfc9d1"
    fancy:fb_focusColor="#97f7ec"
    fancy:fb_iconPosition="right"
    fancy:fb_iconResource="@drawable/ic_arrow_forward_black_24dp"

    fancy:fb_radius="20dp"
    fancy:fb_text="Next"
    fancy:fb_textColor="#121111"
    fancy:fb_textSize="20dp"
    tools:layout_editor_absoluteX="208dp"
    tools:layout_editor_absoluteY="420dp" />

enter image description here

Upvotes: 0

Views: 78

Answers (2)

Pranay Soni
Pranay Soni

Reputation: 403

If you want to keep the Next button below the NO TEXT textview then you can simply place the button Next inside the Linear layout (id : toolbar), and keep it the end of layout. After keeping the button inside this layout the NEXT button will appear at the bottom.

Upvotes: 0

Akshar Patel
Akshar Patel

Reputation: 9388

Create bottom constraint for Next button. Define this constraint in next button:

 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintRight_toRightOf="parent"
 app:layout_constraintEnd_toEndOf="parent"

Every view must have at least one constraint.

From official docs:

To define a view's position in ConstraintLayout, you must add at least one horizontal and one vertical constraint for the view. Each constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline. Each constraint defines the view's position along either the vertical or horizontal axis; so each view must have a minimum of one constraint for each axis, but often more are necessary.

Learn More here: https://developer.android.com/training/constraint-layout/index.html

Upvotes: 1

Related Questions