CODEWITHSUNDEEP
androidbackgroundconstraints
Cooper
Cooper

Reputation: 29

Android background to fill in half of screen

How do I get my Constraint Layout to display my Shape drawable like this:

This is my designed.

And this is what i got.

<android.support.constraint.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"
tools:layout_editor_absoluteY="81dp">

<ScrollView
    android:id="@+id/scrollViewDashBoard"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradientbackground">

        <ImageView
            android:id="@+id/iconProfile"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:layout_marginStart="24dp"
            android:layout_marginTop="16dp"
            android:src="@drawable/baseline_face_white_18dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="8dp"
            android:layout_marginTop="16dp"
            android:layout_marginEnd="8dp"
            android:onClick="intentLogin"
            android:text="@string/label_dashboard_login"
            android:textColor="@color/colorFontWhite"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.082"
            app:layout_constraintStart_toEndOf="@+id/iconProfile"
            app:layout_constraintTop_toTopOf="parent" />

        <android.support.constraint.ConstraintLayout
            android:id="@+id/constraintMenus"
            android:layout_width="340dp"
            android:layout_height="180dp"
            android:layout_marginStart="8dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="8dp"
            android:background="@drawable/main_menu_radius"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.520"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/iconProfile">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <!--Row 1-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <!--Column 1-->
                    <android.support.v7.widget.CardView
                        android:layout_width="70dp"
                        android:layout_height="60dp"
                        android:layout_margin="16dp"
                        android:layout_weight="1"
                        android:elevation="8dp"
                        android:onClick="intentLocalExperience"
                        app:cardCornerRadius="8dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">

                            <ImageView
                                android:layout_width="45dp"
                                android:layout_height="45dp"
                                android:layout_gravity="center"
                                android:background="@drawable/cerclebackgroundyellow"
                                android:padding="5dp"
                                android:src="@drawable/ic_motorcycle_black_24dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="@string/label_local_experience"
                                android:textAlignment="center"
                                android:textSize="10dp" />

                        </LinearLayout>
                    </android.support.v7.widget.CardView>

                    <!--Column 2-->
                    <android.support.v7.widget.CardView
                        android:layout_width="70dp"
                        android:layout_height="60dp"
                        android:layout_margin="16dp"
                        android:layout_weight="1"
                        android:elevation="8dp"
                        android:onClick="intentFavoriteFood"
                        app:cardCornerRadius="8dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">

                            <ImageView
                                android:layout_width="45dp"
                                android:layout_height="45dp"
                                android:layout_gravity="center"
                                android:background="@drawable/cerclebackgroundpurple"
                                android:padding="5dp"
                                android:src="@drawable/ic_restaurant_black_24dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="@string/label_favorite_food"
                                android:textAlignment="center"
                                android:textSize="10dp" />

                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                    <!--Column 3-->
                    <android.support.v7.widget.CardView
                        android:layout_width="70dp"
                        android:layout_height="60dp"
                        android:layout_margin="16dp"
                        android:layout_weight="1"
                        android:elevation="8dp"
                        app:cardCornerRadius="8dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:onClick="intentRecreation"
                            android:orientation="vertical">

                            <ImageView
                                android:layout_width="45dp"
                                android:layout_height="45dp"
                                android:layout_gravity="center"
                                android:background="@drawable/cerclebackgroundred"
                                android:padding="5dp"
                                android:src="@drawable/ic_landscape_black_24dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="@string/label_recreation"
                                android:textAlignment="center"
                                android:textSize="10dp" />

                        </LinearLayout>
                    </android.support.v7.widget.CardView>

                </LinearLayout>
                <!--Row 2-->
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <!--Column 1-->
                    <android.support.v7.widget.CardView
                        android:layout_width="70dp"
                        android:layout_height="60dp"
                        android:layout_margin="16dp"
                        android:layout_weight="1"
                        android:elevation="8dp"
                        app:cardCornerRadius="8dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">

                            <ImageView
                                android:layout_width="45dp"
                                android:layout_height="45dp"
                                android:layout_gravity="center"
                                android:src="@mipmap/ic_launcher_round" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="@string/label_travel_agency"
                                android:textAlignment="center"
                                android:textSize="10dp" />

                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                    <!--Column 2-->
                    <android.support.v7.widget.CardView
                        android:layout_width="70dp"
                        android:layout_height="60dp"
                        android:layout_margin="16dp"
                        android:layout_weight="1"
                        android:elevation="8dp"
                        app:cardCornerRadius="8dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">

                            <ImageView
                                android:layout_width="45dp"
                                android:layout_height="45dp"
                                android:layout_gravity="center"
                                android:background="@drawable/cerclebackgroundgreen"
                                android:padding="5dp"
                                android:src="@drawable/ic_card_giftcard_black_24dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="@string/label_local_souvenir"
                                android:textAlignment="center"
                                android:textSize="10dp" />

                        </LinearLayout>
                    </android.support.v7.widget.CardView>
                    <!--Column 3-->
                    <android.support.v7.widget.CardView
                        android:layout_width="70dp"
                        android:layout_height="60dp"
                        android:layout_margin="16dp"
                        android:layout_weight="1"
                        android:elevation="8dp"
                        app:cardCornerRadius="8dp">

                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:orientation="vertical">

                            <ImageView
                                android:layout_width="45dp"
                                android:layout_height="45dp"
                                android:layout_gravity="center"
                                android:background="@drawable/cercle_background_bluegrey"
                                android:padding="5dp"
                                android:src="@drawable/ic_hotel_black_24dp" />

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="@string/label_guest_house"
                                android:textAlignment="center"
                                android:textSize="10dp" />

                        </LinearLayout>
                    </android.support.v7.widget.CardView>

                </LinearLayout>

            </LinearLayout>


        </android.support.constraint.ConstraintLayout>

    </android.support.constraint.ConstraintLayout>

</ScrollView>

I want the blue color to display in the position as shown in my designe. I was trying to create shape in @drawable/gradientbackground.xml file and set it as ConstraintLayout background, but the result that I received is shown in image 2. What should I do?

Upvotes: 2

Views: 5431

Answers (1)

King of Masses
King of Masses

Reputation: 18765

You can use GradientDrawable to do this. To use multi colors for Background. ( Instead of keeping an view and apply background color differently)

custom_background_gradient

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="120dp">
        <shape android:shape="rectangle" >
            <corners
                android:topRightRadius="8dip"
                android:topLeftRadius="8dip" />

            <gradient
                android:startColor="#47C8F8"
                android:endColor="#47C8F8"
                android:angle="270" />
        </shape>
    </item>
    <item android:top="120dp" >
        <shape android:shape="rectangle" >
            <corners
                android:bottomLeftRadius="8dip"
                android:bottomRightRadius="8dip" />

            <gradient
                android:startColor="#FFFFFF"
                android:endColor="#FFFFFF"
                android:angle="270" />
            <size android:height="30dp" />
        </shape>
    </item>
</layer-list>

apply this custom background to the ConstraintLayoutlayout

 <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/custom_background_gradient">

Now it will shows top sky blue color (#47C8F8) and below part white color. you can modify the codes according to your needs

Hope it Helps !!

Upvotes: 4

Related Questions