Elevate an Image in Pre-lollipop devices (<21) - android-layout

Issue :Give elevation for an image in my layout.
Layout Structure: Constraint Layout-> Card View
The image to be elevated in half on constraint layout and half on card view.
I could not use the shadow approach since my image is not completely on a single view.
Is there a way this is possible on pre-lollipop devices?
Layout file:
<?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"
android:background="#246389"
android:orientation="vertical">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/imageView3"
android:layout_width="264dp"
android:layout_height="152dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:elevation="12dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:srcCompat="#drawable/login_car" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="270dp"
android:layout_height="450dp"
android:layout_margin="20dp"
app:cardBackgroundColor="#00AFEF"
app:cardUseCompatPadding="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintLeft_toRightOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintVertical_bias="0.5">
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>

I imitated a CardView with general android layouts and custom background. Then in parent FrameLayout it is easy to add one element above another
dialog_layout
<layout
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">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/base_transparent">
<FrameLayout
android:layout_width="300dp"
android:layout_height="210dp"
android:background="#drawable/bg_dialog">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="#drawable/bg_dialog_upper_radius"
android:orientation="vertical">
<TextView
style="#style/AppTheme.PaymentContentTextAppearanceName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="16dp"
android:text="#string/payment_view_main_account" />
<TextView
android:id="#+id/tv_total_payment"
style="#style/AppTheme.PaymentView.Summ"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="16dp"
tools:text="80000" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="10dp"
android:orientation="horizontal">
<com.bifit.mobile.lite.std.ui.customview.CompatTextView
android:id="#+id/send_payment_email"
style="#style/AppTheme.BottomButton"
android:text="#string/payment_view_send_email"
android:textColor="#color/base_blue"
app:drawableTopCompat="#drawable/ic_message_send" />
<com.bifit.mobile.lite.std.ui.customview.CompatTextView
android:id="#+id/save_pdf_payment"
style="#style/AppTheme.BottomButton"
android:text="#string/payment_view_save_pdf"
android:textColor="#color/base_blue"
app:drawableTopCompat="#drawable/ic_save_pdf" />
</LinearLayout>
</FrameLayout>
<ImageButton
android:id="#+id/ib_okay"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="170dp"
android:background="#drawable/bg_blue_circle"
android:clickable="true"
android:focusable="true"
app:srcCompat="#drawable/ic_check" />
</FrameLayout>
</layout>
bg_dialog_upper_radius
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#color/base_gray_light_second"/>
<corners
android:topLeftRadius="10dp"
android:topRightRadius="10dp"
/>
</shape>
</item>
</layer-list>
And the result

Related

Why doesn't the Guideline work when I use CardView within ConstraintLayout?

I hope to design a UI to dsiplay two columns with latest ConstraintLayout layout, so I use Guideline, it can work when I use Code B (Please see Image B),
But Code A can't display two columns (Would you please see the Image A) after I add CardView control to the layout, what's wrong with my code?
Image A
Image B
Code A
<?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="wrap_content">
<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.constraint.Guideline
android:id="#+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />
<RadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideLine"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guideLine"
app:layout_constraintTop_toTopOf="parent"
>
<TextView
android:id="#+id/textViewUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Hello" />
<TextView
android:id="#+id/textViewAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Jack" />
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.constraint.ConstraintLayout>
Code B
<?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="wrap_content">
<android.support.constraint.Guideline
android:id="#+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp" />
<RadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideLine"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toRightOf="#+id/guideLine"
app:layout_constraintTop_toTopOf="parent"
>
<TextView
android:id="#+id/textViewUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Hello" />
<TextView
android:id="#+id/textViewAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Jack" />
</LinearLayout>
For the Guideline to work, it needs to be the child of a ConstraintLayout and a sibling of the view that is going to use it as a constraint.
In your case, setting the CardView as the root view and the ConstraintLayout inside it would solve the issue.
See this XML as an example:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
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="wrap_content"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
>
<android.support.constraint.Guideline
android:id="#+id/guideLine"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="100dp"
/>
<RadioButton
android:id="#+id/radioButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#id/guideLine"
app:layout_constraintTop_toTopOf="parent"
/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintLeft_toRightOf="#id/guideLine"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
>
<TextView
android:id="#+id/textViewUsername"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Hello"
/>
<TextView
android:id="#+id/textViewAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="Jack"
/>
</LinearLayout>
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.CardView>

Dressing a mannequin with different items in android

I am trying to implement similar screen. Unable to add different items at proper place. I want to add shoes at the proper place.
Layout
<?xml version="1.0" encoding="utf-8"?><RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="0.5"
android:padding="0dp">
<ImageView
android:id="#+id/imgBody"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:src="#drawable/dress" />
<ImageView
android:id="#+id/imgFeet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgBody"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="0dp"
android:src="#drawable/ic_shoe1"
android:visibility="gone" />
<ImageView
android:id="#+id/imgFace"
android:layout_width="50dp"
android:layout_height="wrap_content"
android:layout_marginLeft="55dp"
android:layout_marginTop="0dp"
android:src="#drawable/ic_head"
android:visibility="gone" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:color/white"/>
Try to user Table layout for split a screen in two part. like below :
Here i have use android:layout_weight="0.5" for screen size.
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#EBEBEB"
android:stretchColumns="2"
android:weightSum="2">
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="2">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF"
android:orientation="vertical">
<!--Write your xml Right side xml code here-->
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:layout_weight="0.5"
android:background="#FFFFFF">
<!--Write your xml Left side xml code here-->
</RelativeLayout>
</TableRow>
</TableLayout>
Use Constraint Layout it will be easy for you to Design your Requirement
Add this dependency in your Project
compile 'com.android.support.constraint:constraint-layout:1.0.2'
Here I have added a code for your design
<?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">
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/guideline4"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
app:srcCompat="#drawable/splash" />
<android.support.constraint.Guideline
android:id="#+id/guideline4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="0dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:minHeight="55dip"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent">
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Left" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Center" />
<android.support.design.widget.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Right" />
</android.support.design.widget.TabLayout>
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Review"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
tools:layout_editor_absoluteX="265dp"
tools:layout_editor_absoluteY="463dp" />
<android.support.v7.widget.RecyclerView
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toTopOf="#+id/button"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toLeftOf="#+id/guideline4"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tabLayout"
app:layout_constraintVertical_bias="0.0" />
</android.support.constraint.ConstraintLayout>
I think instead of layout you should try to use canvas in left preview screen. On selecting any item should update left canvas by adding item in canvas and rendering elements.
Please have a look over canvas and drawing images over canvas.

Image won't center with android:layout_centerHorizontal

my image wont center using the code "android:layout_centerHorizontal" even using gravity wont solve it. Is there any other way or are there wrong inputs in my relativelayout and scroll view.
scale layout bounds
landscape view of with scale layout bounds
screen size 768x1280 nexus api23
I am not having problems with android version 4 maybe this is api related? since my minimum sdk is android version 2?
Here is the code:
<?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="fill_parent"
android:fillViewport="true"
android:layout_height="fill_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context="com.capstone.jmilibraryapp.Login">
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#+id/etUsername"
android:hint="Enter Sr-Code"
android:layout_below="#+id/imageView3"
android:layout_centerHorizontal="true" />
<ImageView
android:layout_centerHorizontal="true"
android:layout_width="500dp"
android:layout_height="200dp"
android:src="#drawable/jmilogo"
android:id="#+id/imageView3"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<EditText
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#+id/etPassword"
android:inputType="textPassword"
android:hint="Password"
android:layout_below="#+id/etUsername"
android:layout_centerHorizontal="true" />
<Button
android:layout_width="300dp"
android:layout_height="wrap_content"
android:id="#+id/bLogin"
android:text="Log In"
android:layout_below="#+id/etPassword"
android:layout_alignLeft="#+id/etPassword"
android:layout_alignStart="#+id/etPassword" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Log In as Guest"
android:id="#+id/guest"
android:layout_marginTop="20dp"
android:layout_below="#+id/bLogin"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="Log In as Guest"
android:id="#+id/testinguser"
android:layout_marginTop="20dp"
android:layout_below="#+id/guest"
android:layout_centerHorizontal="true"
/>
</RelativeLayout>
</ScrollView>
Probably your image donĀ“t have the same ratio of your ImageView, you can check it enabling showLayoutBounds in the developer tools in the device. You will see the real size of the imageView.
To solve that you can make you ImageView to be proportionally to your ImageView or ad a scaleType="fitCenter" to your ImageView.
Try below xml this is work with me..
<?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:layout_centerHorizontal="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"
android:orientation="vertical">
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="200dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="#drawable/school" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="20dp"
android:layout_weight="1">
<EditText
android:id="#+id/etUsername"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:hint="Enter Sr-Code" />
<EditText
android:id="#+id/etPassword"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_below="#+id/etUsername"
android:layout_centerHorizontal="true"
android:hint="Password"
android:inputType="textPassword" />
<Button
android:id="#+id/bLogin"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/etPassword"
android:layout_alignStart="#+id/etPassword"
android:layout_below="#+id/etPassword"
android:text="Log In" />
<TextView
android:id="#+id/guest"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/bLogin"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Log In as Guest"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<TextView
android:id="#+id/testinguser"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/guest"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:text="Log In as Guest"
android:textAppearance="?android:attr/textAppearanceSmall"/>
</RelativeLayout>
</LinearLayout>
</ScrollView>

How to create a layout which is rounded on all sides?

I have created a layout which is supposed to have rounded corners on all the four sides. However, the layout shows rounded corners only in the left and right top corners. How to create a layout which has rounded corners on all the four sides (including the left and right top corners)? Here is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="center"
android:background="#FFF">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="center"
android:gravity="center"
android:background="#drawable/rounded_linearlayout"
android:orientation="vertical"
android:layout_margin="#dimen/welcome_margin">
<TextView
android:text="#string/fitToWork"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:padding="#dimen/margintop_value"
android:layout_marginLeft="#dimen/margin_left_value"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center">
<TextView
android:id="#+id/tv_yes"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/yes"
android:textColor="#FFF"
android:textSize="#dimen/yes_text_size"
android:background="#B5D625"/>
<TextView
android:id="#+id/tv_no"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="#string/no"
android:textColor="#FFF"
android:textSize="#dimen/yes_text_size"
android:background="#2E2E2E"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
Here is the rounded_linearlayout.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FFF"/>
<corners android:bottomRightRadius="8dip"
android:bottomLeftRadius="8dip"
android:topRightRadius="8dip"
android:topLeftRadius="8dip"/>
<stroke android:width="1dip" android:color="#AFAFAF"/>
</shape>
Thanks in advance!
If you want rounded corners on all the four sides then my suggestion is use a cardView instead. In cardView you can do it easily using card_view:cardCornerRadius="4dp" this attribute change the value according to your requirement.
Import CardView as a library from support library and add it in your project
Little code snippet
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:background="#android:color/darker_gray"
card_view:cardCornerRadius="8dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/abc_action_bar_default_height_material"
android:layout_alignParentBottom="true">
<Button
android:id="#+id/button1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:layout_weight="1"
android:textColor="#android:color/black"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="#android:color/black"
android:layout_weight="1"
android:textColor="#android:color/white"
android:text="Button" />
</LinearLayout>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#color/abc_background_cache_hint_selector_material_dark" />
</RelativeLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
First of all, if you need all the corners to be rounded, you don't need to mention all the corners one by one, add this:
<corners android:radius="8dp"/>
I pulled your code and compiled it, it looks like it is working. The only thing is that your buttons are aligned with bottom of your parent LinearLayout and doesn't let you to see the bottom corners. I added a bit of padding to the parent LinearLayout and now all the rounded corners are visible.
EDIT:
I changed your code to this and it worked:
Here is the layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#FFF"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_gravity="center"
android:layout_margin="10dp"
android:background="#drawable/rounded"
android:gravity="center"
android:orientation="vertical"
android:padding="10dp" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:padding="10dp"
android:text="fitToWork" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center" >
<TextView
android:id="#+id/tv_yes"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#B5D625"
android:gravity="center"
android:text="yes"
android:textColor="#FFF"
android:textSize="25sp" />
<TextView
android:id="#+id/tv_no"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="1"
android:background="#2E2E2E"
android:gravity="center"
android:text="no"
android:textColor="#FFF"
android:textSize="35sp" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
and here the drawable:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#FFF" />
<corners
android:bottomLeftRadius="8dip"
android:bottomRightRadius="8dip"
android:topLeftRadius="8dip"
android:topRightRadius="8dip" />
<stroke
android:width="1dip"
android:color="#AFAFAF" />
</shape>
Let me know if it work for you.
Cheers
A.

Is there a way to align three columns in a grid layout proportional to a row?

I have a grid layout with 6 columns.
For the top row i've given it colspan of 6. and for second row I've given each textView a colspan of 2.
I hoped this would make everything proportional. However, it looks like this:
But I want it to look something like this:
How can I make my three columns in second row propotional to the screen space such that first is on left, second is in center, and third is on right?
What I have so far is this:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="6"
android:rowCount="4"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:background="#drawable/rounded">
<TextView
android:layout_gravity="center_horizontal"
android:text="Some Text"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="30dp"
android:textAlignment="center"
android:layout_columnSpan="6"
android:paddingTop="10dp"
android:paddingBottom="10dp"
/>
<TextView
android:text="96"
android:textStyle="bold"
android:paddingRight="70dp"
android:textColor="#000000"
android:textSize="18dp"
android:layout_columnSpan="2"
android:paddingLeft="10dp"
android:paddingBottom="5dp"/>
<TextView
android:text="107"
android:textStyle="bold"
android:paddingRight="70dp"
android:layout_columnSpan="2"
android:textSize="18dp"
android:textColor="#000000"/>
<TextView
android:text="62"
android:textStyle="bold"
android:layout_columnSpan="2"
android:textSize="18dp"
android:paddingRight="10dp"
android:textColor="#000000"/>
<TextView
android:text="Text 1"
android:paddingRight="20dp"
android:paddingLeft="10dp"
android:layout_columnSpan="2"
android:textSize="18dp"
android:textColor="#ff565656"
android:paddingBottom="10dp"/>
<TextView
android:text="Text 2"
android:paddingRight="70dp"
android:layout_columnSpan="2"
android:textSize="18dp"
android:textColor="#ff565656"/>
<TextView
android:text="Text 3"
android:textColor="#ff565656"
android:layout_columnSpan="2"
android:textSize="18dp"
android:paddingRight="10dp"/>
</GridLayout>
I've manage to get something similar to what you posted. I am using a View hack though to get that subtle divider.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/element_bg"
android:columnCount="3"
android:orientation="horizontal"
android:rowCount="4" >
<!-- Row 1 -->
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_columnSpan="3"
android:layout_gravity="center_horizontal"
android:gravity="center"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="Some Text"
android:textAlignment="center"
android:textColor="#000000"
android:textSize="30sp"
android:textStyle="bold" />
<!-- Row 2 -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_columnSpan="3"
android:background="#android:color/darker_gray" />
<!-- Row 3 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<!-- Column 1 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/row_padding" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="107"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tweets"
android:textColor="#ff565656"
android:textSize="18sp" />
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<!-- Column 2 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/row_padding" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="96"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Following"
android:textColor="#ff565656"
android:textSize="18sp" />
</LinearLayout>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#android:color/darker_gray" />
<!-- Column 3 -->
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_weight="1"
android:orientation="vertical"
android:padding="#dimen/row_padding" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="56"
android:textColor="#000000"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Followers"
android:textColor="#ff565656"
android:textSize="18sp" />
</LinearLayout>
</LinearLayout>
<!-- Row 4 -->
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_columnSpan="3"
android:background="#android:color/darker_gray" />
</GridLayout>
element_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:radius="4dp" />
</shape>
Alternatively, you can try normal borders (easier to handle):
border.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#ffffff" />
<corners android:radius="4dp"/>
<stroke android:width="1dip" android:color="#android:color/darker_gray"/>
</shape>
dimens.xml. You can adjust the padding value as you like.
<resources>
<!-- Default screen margins, per the Android Design guidelines. -->
<dimen name="activity_horizontal_margin">16dp</dimen>
<dimen name="activity_vertical_margin">16dp</dimen>
<dimen name="row_padding">15dp</dimen>
</resources>
For this last one, you might get elements to overlap their border, try some margin in those cases.
On a side note, you might want to use TableLayout as GridLayout can only be used from API 14+ and you cannot get this "space excess" to work with it unless you use a LinearLayout like I did to hack into weight property.
"In general, it is not therefore possible to configure a GridLayout to distribute excess space between multiple components. [...] For complete control over excess space distribution in a row or column; use a LinearLayout subview to hold the components in the associated cell group." -http://developer.android.com/reference/android/widget/GridLayout.html
Tables - http://developer.android.com/guide/topics/ui/layout/grid.html
One option that would certainly work would be to put each TextView inside a LinearLayout that has an attribute android:layout_weight="1" and that would automatically assign equal space to each LinearLayout (and hence each corresponding TextView).
Although, I cannot say for certain, the other option would be to directly add the attribute android:layout_weight="1" to each TextView - I think it should work but I haven't used this before. I'd be interested to see if this works as well.

Resources