CODEWITHSUNDEEP
androidxmlandroid-constraintlayout
Long Ranger
Long Ranger

Reputation: 6008

How to split two background color using Constraint Layout?

I want to split two backgrounds using the blue one in the above and the bottom remains white. Using Constraint Layout, it is easy to make a horizontal guideline. However, I get stuck when I tried to split two background color.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.pccw.newmobileclient.ui.work_list.WorkListActivity">

    <android.support.constraint.Guideline
        android:id="@+id/guideline10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

</android.support.constraint.ConstraintLayout>

Appreciate any comment or advice. Thank you.

Task view

Upvotes: 1

Views: 4022

Answers (2)

Ashokkumar Adichill
Ashokkumar Adichill

Reputation: 238

For background color like top blue and bottom white use gradient drawable.

<?xml version="1.0" encoding="utf-8"?>


<gradient
    android:angle="270"
    android:startColor="@color/colorPrimary"
    android:endColor="@android:color/white"/>

and set this file as background for constraint layout..

<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"
    android:background="@drawable/background_gradient"
    tools:context="com.mycamera.Sample">

    <android.support.constraint.Guideline
        android:id="@+id/guideline10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

</android.support.constraint.ConstraintLayout>

Upvotes: 0

Yamini Balakrishnan
Yamini Balakrishnan

Reputation: 2411

You can declare two views with different background colors based on Guideline to achieve that.

<?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">

    <android.support.constraint.Guideline
        android:id="@+id/guideline10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorPrimary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/guideline10"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/guideline10"/>

</android.support.constraint.ConstraintLayout>

Upvotes: 3

Related Questions