0

I have a portrait display and I want to translate it to landscape mode.

In landscape mode, first child of encompassing LinearLayout, which is also a LinearLayout, should contain CardView with ImageView (rounded, I'm not sure how is that gonna turn out). In second LinearLayout, I would like to have Username and Password EditText next to each other horizontally. And finally, the last LinearLayout should contain Login and Sign Up buttons also horizontally.

I don't know how to center CardView inside first child LinearLayout and how to make ImageView rounded.

This what I have: enter image description here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient"
    android:gravity="center"
    tools:context=".LoginActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="1">


        <androidx.cardview.widget.CardView
            android:id="@+id/imageView"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            app:cardBackgroundColor="#090909"
            app:cardCornerRadius="250dp">


            <!--<androidx.cardview.widget.CardView
                android:layout_width="150dp"
                android:layout_height="145dp"
                android:gravity="center"
                app:cardCornerRadius="250dp">

            </androidx.cardview.widget.CardView>-->

        </androidx.cardview.widget.CardView>

        <!--<ImageView
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:scaleType="centerCrop"
            android:src="@drawable/login_logo" />-->

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">

        <!--HERE WILL BE Username and Password-->

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">
    <!--HERE WILL BE Login and Sign up-->

    </LinearLayout>


</LinearLayout>
7
  • Your life will be very easy with ConstraintLayout check it out and give it a try
    – Rafsanjani
    Apr 5, 2020 at 11:29
  • if LinearLayout is vertical you can set CardView in the center by android:gravity="center" . Apr 5, 2020 at 11:34
  • @noureldienmohamed Tried that, still stays in same position..
    – Wrapper
    Apr 5, 2020 at 11:39
  • @Rafsanjani Probably, but this is assignment.
    – Wrapper
    Apr 5, 2020 at 11:39
  • 1
    @Rafsanjani that's wrong. Questions about homework are allowed, but they are still bound by the same criteria as other questions
    – Zoe is on strike
    Apr 5, 2020 at 11:45

2 Answers 2

2

android:gravity handles the alignment of its children,

android:layout_gravity handles the alignment of itself.

If you want to more rounded card view then fix heigh of cardView.

Give weight to other Linear layout "2", and Layout with card view weight "1" for small size.

Thanks You! Happy Coding

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#abcdef"
    android:layout_gravity="center"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="horizontal">


        <androidx.cardview.widget.CardView
            android:id="@+id/imageView"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            app:cardBackgroundColor="#090909"
            app:cardCornerRadius="150dp">


            <!--<androidx.cardview.widget.CardView
                android:layout_width="150dp"
                android:layout_height="145dp"
                android:gravity="center"
                app:cardCornerRadius="250dp">

            </androidx.cardview.widget.CardView>-->

        </androidx.cardview.widget.CardView>

        <!--<ImageView
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:layout_gravity="center_horizontal"
            android:scaleType="centerCrop"
            android:src="@drawable/login_logo" />-->

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="horizontal">

        <!--HERE WILL BE Username and Password-->

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
        android:orientation="horizontal">
        <!--HERE WILL BE Login and Sign up-->

    </LinearLayout>
</LinearLayout>

[This is your project(image) => https://i.stack.imgur.com/68ARf.png ]

1
  • Yeap, that fix the issue. I even read the Head First Android Development. And there, as you point out, says:"android:gravity lets you say where you want the view’s contents to appear inside the view." Thanks, I somehow missed this...
    – Wrapper
    Apr 5, 2020 at 12:48
1

your problem is simple. just change your orientation your linear layout like this:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" <!--change this-->
    android:layout_weight="1">


    <androidx.cardview.widget.CardView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_gravity="center"   <!-- and this-->
        android:layout_height="match_parent"
        app:cardBackgroundColor="#090909"
        app:cardCornerRadius="250dp">

    </androidx.cardview.widget.CardView>

    <!--<ImageView
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"
        android:scaleType="centerCrop"
        android:src="@drawable/login_logo" />-->

</LinearLayout>

after this manipulation your cardview image will be in the center

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.