Develop Reference

How to make a second color border with MaterialCardView?

I cannot find any questions online that have asked for this specifically
Screenshot of Square Border
How would I implement a red "second" border like in the image but on one side? I am using MaterialCardView for the main outside border. Would I just make a custom shape with red border on the left and use that as the background for the MaterialCardView?

This can be achieved easily with three nested MaterialCardViews by changing only the app:cardBackgroundColor, the app:cardCornerRadius and the android:layout_margin attributes for each card.
Below is the Xml Layout sample:
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.card.MaterialCardView
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="200dp"
android:layout_margin="10dp"
app:cardBackgroundColor="#81afdc"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="4dp"
app:cardBackgroundColor="#a70e09"
app:cardCornerRadius="10dp">
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginStart="6dp"
app:cardBackgroundColor="#ffffff"
app:cardCornerRadius="6dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Sample Text"/>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
</com.google.android.material.card.MaterialCardView>
Result:

First, create two drawable resource file like below:
bg_cardView_inner_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/holo_red_dark"/>
<corners android:radius="7dp"/>
</shape>
bg_cardView_outline_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#color/white" />
<stroke android:color="#android:color/holo_blue_light"
android:width="5dp"/>
<corners android:radius="10dp"/>
</shape>
Then, in your XML file, Add those files as below:
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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=".DemoActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:background="#drawable/bg_cardview_outline_color"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="200dp"
app:cardCornerRadius="5dp"
app:cardElevation="2dp"
app:cardUseCompatPadding="true"
android:paddingBottom="5dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#drawable/bg_cardview_inner_color">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:gravity="center_vertical|center"
android:layout_marginStart="10dp">
<ImageView
android:layout_width="50dp"
android:layout_height="50dp"
android:src="#drawable/your_image"
app:tint="#color/black"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="your text"
android:textSize="30sp"
android:gravity="center"
android:textStyle="bold"
/>
</LinearLayout>
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to create corner radius in top left and bottom right in android?

How to create a corner radius in the top left and bottom right in android?
Like this
My code is
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/bg_layout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_margin="#dimen/twenty_sp"
android:text="#string/sign_in"
android:textColor="#color/colorWhite"
android:textSize="#dimen/thirty_sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_layout_white"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten_sp"
android:orientation="vertical"
android:padding="#dimen/ten_sp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/phone_number"
android:textColor="#color/colorBlack" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/five_sp"
android:orientation="horizontal">
<Spinner
android:id="#+id/main_spinner_coutry"
android:layout_width="wrap_content"
android:layout_height="#dimen/fifty_sp"
android:entries="#array/country_code"
android:prompt="#array/country_code"
android:spinnerMode="dropdown" />
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="#dimen/fifty_sp"
android:background="#drawable/bg_edt"
android:digits="0123456789"
android:ems="10"
android:hint="#string/_9876543210"
android:imeOptions="actionGo"
android:inputType="phone"
android:maxLength="10" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten_sp"
android:orientation="vertical"
android:padding="#dimen/ten_sp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/password"
android:textColor="#color/colorBlack" />
<EditText
android:layout_width="match_parent"
android:layout_height="#dimen/fifty_sp"
android:layout_margin="#dimen/five_sp"
android:background="#drawable/bg_edt"
android:hint="#string/_9876543210"
android:inputType="textPassword" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten_sp"
android:orientation="vertical"
android:padding="#dimen/ten_sp">
<Button
android:id="#+id/main_btn_signin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_btn"
android:padding="#dimen/ten_sp"
android:text="#string/sign_in"
android:textAllCaps="false"
android:textColor="#color/colorWhite"
android:layout_margin="#dimen/ten_sp"/>
<TextView
android:layout_margin="#dimen/ten_sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="#dimen/ten_sp"
android:text="#string/forgot_password"
android:textColor="#color/colorAccent" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
Background drawable is
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#color/colorWhite" />
<corners
android:topRightRadius="30dp"
/>
</shape>
Show as the picture I want to top left corner and bottom right corner above code work but it show only one corner with background color, I try to create the above picture like but It can't work...

With the Material Components Library you can define custom CornerTreatment.
For example you can use a CardView and apply to it a ShapeAppearanceModel.
<LinearLayout
android:background="#color/colorPrimaryLight"
android:clipChildren="false"
android:clipToPadding="false"
..>
<com.google.android.material.card.MaterialCardView
android:id="#+id/card"
app:cardCornerRadius="32dp"
app:cardBackgroundColor="#color/colorPrimaryDark"
../>
</LinearLayout>
Then:
MaterialCardView cardView = findViewById(R.id.card);
cardView.setShapeAppearanceModel(cardView.getShapeAppearanceModel().toBuilder()
.setTopLeftCorner(new CrazyCornerTreatment())
.setBottomLeftCorner(CornerFamily.ROUNDED,0f)
.setBottomRightCorner(CornerFamily.ROUNDED,0f)
.build());
The top left corner can be defined with:
class CrazyCornerTreatment : CornerTreatment() {
override fun getCornerPath(
shapePath: ShapePath,
angle: Float,
interpolation: Float,
radius: Float
) {
val interpolatedRadius = radius * interpolation
shapePath.reset(0f, -radius * interpolation, 270f,270 -angle)
shapePath.addArc(
0f,
-2*interpolatedRadius,
2*interpolatedRadius,
0f,
180f,
- angle)
}
}

You would need to create a drawable shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#5089fa" />
<size
android:width="82dp"
android:height="82dp" />
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="8dp"
android:topLeftRadius="8dp"
android:topRightRadius="0dp" />
Set that drawable shape as your background and it would result in something like:
Odd Rounded Corners

A drawable shape is a very good solution for this.
You could also slightly reframe it and use the bottom left corner of your top widget and the upper right of your 2nd widget.
If the background is white in the top and purple below that, you will get the desired result while using only the "normal" corner radius properties.

creating a background drawable with two colors i.e, white and purple
layout_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:bottom="300dp">
<shape android:shape="rectangle" >
<size android:height="300dp" />
<solid android:color="#ffffff" />
</shape>
</item>
<item android:top="300dp">
<shape android:shape="rectangle" >
<size android:height="50dp" />
<solid android:color="##2d39a1" />
</shape>
</item>
set this drawable as background for your layout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/layout_background"
android:orientation="vertical"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#drawable/purple_background">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_margin="#dimen/twenty_sp"
android:text="#string/sign_in"
android:textColor="#color/colorWhite"
android:textSize="#dimen/thirty_sp" />
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/white_background"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten_sp"
android:orientation="vertical"
android:padding="#dimen/ten_sp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/phone_number"
android:textColor="#color/colorBlack" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/five_sp"
android:orientation="horizontal">
<Spinner
android:id="#+id/main_spinner_coutry"
android:layout_width="wrap_content"
android:layout_height="#dimen/fifty_sp"
android:entries="#array/country_code"
android:prompt="#array/country_code"
android:spinnerMode="dropdown" />
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="#dimen/fifty_sp"
android:background="#drawable/bg_edt"
android:digits="0123456789"
android:ems="10"
android:hint="#string/_9876543210"
android:imeOptions="actionGo"
android:inputType="phone"
android:maxLength="10" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten_sp"
android:orientation="vertical"
android:padding="#dimen/ten_sp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:text="#string/password"
android:textColor="#color/colorBlack" />
<EditText
android:layout_width="match_parent"
android:layout_height="#dimen/fifty_sp"
android:layout_margin="#dimen/five_sp"
android:background="#drawable/bg_edt"
android:hint="#string/_9876543210"
android:inputType="textPassword" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/ten_sp"
android:orientation="vertical"
android:padding="#dimen/ten_sp">
<Button
android:id="#+id/main_btn_signin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_btn"
android:padding="#dimen/ten_sp"
android:text="#string/sign_in"
android:textAllCaps="false"
android:textColor="#color/colorWhite"
android:layout_margin="#dimen/ten_sp"/>
<TextView
android:layout_margin="#dimen/ten_sp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="#dimen/ten_sp"
android:text="#string/forgot_password"
android:textColor="#color/colorAccent" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
</ScrollView>
purple_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#color/colorPurple" />
<corners
android:bottomLeftRadius="30dp"
/>
</shape>
white_background.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="#color/colorWhite" />
<corners
android:topRightRadius="30dp"
/>
</shape>
adjust the height in the layout_background.xml file if the background doesn't fit. I hope you got it..

Android RelativeLayout Ripple effect

In my view, I would like a ripple effect to appear whenever a user touches an ImageView in the layout. I've tried wrapping the ImageView inside a RelativeLayout, but it hasn't worked. Here is the layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.sample.me.TapActivity" >
<RelativeLayout
android:id="#+id/tap_view_frame"
android:layout_width="#dimen/activity_tap_image_width"
android:layout_height="#dimen/activity_tap_image_height"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignParentEnd="true"
android:clickable="true"
android:background="#drawable/ripple_view" >
<ImageView
android:id="#+id/tap_view"
android:src="#drawable/ram"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:clickable="true" />
</RelativeLayout>
<TextView
android:id="#+id/tap_name_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/white"
android:layout_marginLeft="#dimen/textview_horizontal_margin"
android:layout_alignParentLeft="true"
android:layout_above="#+id/tap_number_textView"/>
<TextView
android:id="#+id/tap_number_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:textColor="#color/white"
android:layout_marginBottom="#dimen/textview_vertical_margin"
android:layout_alignLeft="#+id/tap_name_textView"
android:layout_alignBottom="#+id/tap_view_frame" />
<android.support.v7.widget.CardView
android:id="#+id/tap_card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/cardview_horizontal_margin"
android:layout_marginRight="#dimen/cardview_horizontal_margin"
android:layout_marginTop="#dimen/cardview_vertical_margin"
android:layout_below="#+id/tap_view_frame">
<android.support.v7.widget.RecyclerView
android:id="#+id/tap_options_recyclerview"
android:layout_width="match_parent"
android:layout_height="#dimen/cardview_tap_height" />
</android.support.v7.widget.CardView>
And here is the "ripple_view" drawable:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#ffa0a0a0">
<item android:id="#android:id/mask">
<shape android:shape="rectangle">
<solid android:color="#ffa0a0a0"/>
</shape>
</item>
</ripple>
I have also tried adding in the android:background="?android:attr/selectableItemBackground" tag, but that didn't seem to help. Can anyone explain why the ripple is not showing up? I used the same method to enable the effect in my custom buttons and RecyclerView rows, but it is not working for the RelativeLayout. Ideally, I would like to avoid using a third party library for something as simple as this.

Navigation drawer onClick in items ripple effect lost

Using the new appcompat-v21 I try to build a navigation drawer.. The first time I didn't write any background color or drawable and the navigation drawer started with a transparent background!! So strange! But, when I clicked in the items of it I could see the ripple effect of Android lollipop. (Amazing). So I tried to put a white background like this:
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".HomeActivity"
android:id="#+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/toolbar"
layout="#layout/toolbar"/>
</RelativeLayout>
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:fitsSystemWindows="true"
android:clipToPadding="false"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffff"/>
</android.support.v4.widget.DrawerLayout>
The navigation drawer now is white and so it's correct. But with this background I lost the ripple effect in the item click. My item XML is this one:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:background="?android:selectableItemBackground"
android:layout_height="fill_parent" >
<LinearLayout
android:id="#+id/spinnerLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="13dp"
android:orientation="vertical" >
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<ImageView
android:id="#+id/sfondomappa"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_weight="0"
android:adjustViewBounds="true"
android:scaleType="center"
android:src="#drawable/banner_nav" />
<TextView
android:id="#+id/drawerWelcome"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/sfondomappa"
android:layout_centerHorizontal="true"
android:background="#40000000"
android:fontFamily="sans-serif-medium"
android:gravity="center_horizontal"
android:padding="10dp"
android:text="Hola"
android:textColor="#color/ldrawer_color"
android:textSize="14sp" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:id="#+id/headerLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical" >
<TextView
android:id="#+id/drawerTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="center_horizontal"
android:layout_margin="12dp"
android:fontFamily="sans-serif-regular"
android:gravity="center_horizontal"
android:textColor="#color/main_orange"
android:textSize="15sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/itemLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:background="?android:attr/activatedBackgroundIndicator"
android:orientation="vertical" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true" >
<ImageView
android:id="#+id/drawer_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:gravity="center_vertical"
android:padding="3dp" />
<TextView
android:id="#+id/drawer_itemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="32dp"
android:fontFamily="sans-serif-medium"
android:gravity="center_vertical"
android:textColor="#E4000000"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
I even wrote this android:background="?android:selectableItemBackground" in my root layout but nothing change.. How can I solve?
EDIT:
I wrote again the listview of my drawer in this way
<ListView
android:id="#+id/navdrawer"
android:layout_width="315dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:layout_marginRight="72dp"
android:background="#android:color/white"
android:choiceMode="singleChoice"
android:divider="#00000000"
android:dividerHeight="1.00dp"
android:elevation="2dp"
android:longClickable="false"
android:orientation="vertical"
android:overScrollMode="never"
android:scrollbars="none" />
and the ripple works. But now i lost the current position i clicked.

I've faced the same problem ... the solution is not documented good enough, but here it is.
Create a selector drawable in your drawable-v21 folder:
v21/activated_background.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/primary_dark" android:state_activated="true" />
<item android:drawable="#color/primary" android:state_checked="true" />
<item android:state_pressed="true">
<ripple android:color="#color/primary" />
</item>
<item android:drawable="#color/background_light" />
</selector>
As you can see in the code above, the magic is done by adding the <ripple ... /> element above. It's available in v21+ only, so that's why you have to declare separate selectors for -v21 and normal.
Lastly, just put this selector drawable as background of the desired element, in your case the ListView item.

Unable to make all UI components appear in RelativeLayout

I want a RelativeLayout based android UI that looks like the below mock graphic:
Below is my layout xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- surface view that contains camera preview , and seats above #+id/linearLayoutToolbar -->
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- LinearLayout that contains toolbar that is divided into 3 sections horizontally -->
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/surfaceViewBarcodeScanner"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</RelativeLayout>
I used Eclipse GUI palette and my own editing , however the output was not what I expected, the SurfaceView seems to covering all the screen, the LinearLayout at the bottom does not appear.
Snapshot of my current result on Galaxy S3 device:
Any help will be appreciated, Thanks.

Could you please try out to modify your layout as the follows:
Define your SurfaceView and set it's layout_above value to the ID of the linear layout made in the previous step. Set the layout_alignParentTop to true.
Define your bottom linear layout and set the layout_alignParentBottom to true.
Smart code snippet with only the important parts:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_above="#+id/linearLayoutToolbar" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
</RelativeLayout>
I hope this will solve your problem.

you can use Linearlayout instead of Realtive Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
<!-- inside elements -->
</LinearLayout>
</LinearLayout>
else you should use android:layout_above="#+id/linearLayoutToolbar" to your surfaceview
and remove android:layout_below attribute and add android:layout_alignParentBottom="true" to your toolbar view.

// try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayoutForPreview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
android:orientation="vertical">
<LinearLayout
android:layout_height="0dp"
android:layout_weight="1"
android:layout_width="match_parent">
<SurfaceView
android:id="#+id/surfaceViewBarcodeScanner"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<LinearLayout
android:id="#+id/linearLayoutToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_left" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="2">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_center_toolbar" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="0dp"
android:gravity="center"
android:layout_weight="1">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/scanner_bottom_right_landscape_button" />
</LinearLayout>
</LinearLayout>
</LinearLayout>