I have the following content for my recycler card element
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/cardview_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="4dp"
android:layout_marginHorizontal="4dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:cardCornerRadius="4dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingHorizontal="6dp"
>
<ImageView
android:id="#+id/imageview_category_icon"
android:layout_width="30dp"
android:layout_height="45dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
app:srcCompat="#drawable/ic_own_groceries" />
<TextView
android:id="#+id/textview_item_name"
android:layout_width="0dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginStart="10dp"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_plus"
android:layout_toEndOf="#+id/imageview_category_icon"
android:gravity="center_vertical"
android:text="Item Name"
android:textColor="#color/grayDark"
android:textSize="#dimen/small_text_size"
android:textStyle="normal" />
<Button
android:id="#+id/button_plus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_minus"
android:background="#color/greenDark"
android:text="+"
android:textColor="#color/white" />
<Button
android:id="#+id/button_minus"
android:layout_width="25dp"
android:layout_height="45dp"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_status"
android:layout_alignParentTop="true"
android:background="#color/redDark"
android:text="-"
android:textColor="#color/white" />
<Button
android:id="#+id/button_status"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_centerVertical="true"
android:layout_marginEnd="4dp"
android:layout_toStartOf="#id/button_edit"
android:background="#color/grayMedium"
android:gravity="center"
android:text="3"
android:textColor="#color/white"
android:textSize="#dimen/normal_text_size" />
<ImageView
android:id="#+id/button_edit"
android:layout_width="20dp"
android:layout_height="45dp"
android:layout_alignParentTop="true"
android:layout_alignParentEnd="true"
android:onClick="goToEditor"
app:srcCompat="#drawable/ic_baseline_edit_24" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
Unfortunately, android:layout_marginTop="4dp" in the root element does not seem to have an effect on the margin between consecutive cards in the app display. In fact, there is no margin at all, no matter to what value I change the "4dp". On the other hand, android:layout_marginHorizontal="4dp" works fine.
Also, app:cardCornerRadius="4dp" has no effect either, though when visualizing in Android Studio only this layout file, the rounded corners do appear.
As suggested by answers to a similar question, I did use "wrap_content" for height wherever possible. To no avail.
What's wrong?
This answer was posted by the author of the question.
The problem persists, but I found a hack by inserting above RelativeLayout an empty TextView with the same height as the desired top margin.
Related
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.
I have been reading similar posts but none has solved my problem.
My Activity consists of this RelativeLayout:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/initial_launch_text"
style="#style/initialLaunchTextStyle"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_margin="20dp"
android:gravity="center_horizontal|top"
android:text="Test" />
<Button
android:id="#+id/initial_launch_skip_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:textColor="#color/initial_launch_skip_button_text"
android:onClick="skipButtonClicked"
android:text="#string/activity_initial_launch_skip_button_skip" />
<ImageView
android:id="#+id/initial_launch_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_below="#+id/initial_launch_text"
android:layout_above="#+id/initial_launch_skip_button"
android:src="#drawable/flower"
android:adjustViewBounds="true"
android:background="#000000"
android:padding="1dp" />
</RelativeLayout>
All I want is a TextView on top, a Button at the bottom and an ImageView with 1dp black border in between. But what I get is an unwanted thick black border above and below the image:
How can I get rid of that??
Change this:
<ImageView
android:id="#+id/initial_launch_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_below="#+id/initial_launch_text"
android:layout_above="#+id/initial_launch_skip_button"
android:src="#drawable/flower"
android:adjustViewBounds="true"
android:background="#000000"
android:padding="1dp" />
to this:
<ImageView
android:id="#+id/initial_launch_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_below="#+id/initial_launch_text"
android:layout_above="#+id/initial_launch_skip_button"
android:src="#drawable/flower"
android:adjustViewBounds="true"
android:background="#000000"
android:layout_margin="1dp" />
I designed this layout for you but it has one issue with this type of issues why am saying this means you are going with PNG file you may get two types of layout i will show the layouts you should use JPEG then only you can get this type of layouts....
Layout code.....
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/initial_launch_text"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_alignParentTop="true"
android:layout_margin="20dp"
android:gravity="center_horizontal|top"
android:text="Test" />
<Button
android:id="#+id/initial_launch_skip_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="skipButtonClicked"
android:text="Skip"
android:textColor="#android:color/black" />
<ImageView
android:id="#+id/initial_launch_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/initial_launch_skip_button"
android:layout_below="#+id/initial_launch_text"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:adjustViewBounds="true"
android:background="#000000"
android:padding="5dp"
android:scaleType="fitXY"
android:src="#drawable/logo" />
</RelativeLayout>
Wrapping the ImageView with a LinearLayout using following parameters did the trick:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" >
<ImageView
android:id="#+id/initial_launch_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:layout_below="#+id/initial_launch_text"
android:layout_above="#+id/initial_launch_skip_button"
android:src="#drawable/flower"
android:background="#000000"
android:padding="1dp"
android:adjustViewBounds="true" />
</LinearLayout>
Im trying to make a layout for a survey question, it works fine on my device but the margin between the radio button text decreases on a better screen resolution device.
I have tried creating different DIMENS it works but I'm not sure how to scale the margin based on different sizes.
Kindly suggests what screen size values-swXXX folder I need to create and what should be the scaling factor of the DIMEN I have defined.
Thanks
enter code here
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tv_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:text="How often do you use it?"
android:textSize="15sp" />
<RadioGroup
android:id="#+id/rg_1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_1"
android:layout_below="#+id/tv_1" >
<RadioButton
android:id="#+id/rb_once"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="5dp"
android:layout_marginTop="15dp"
android:button="#drawable/radio_btn"
android:checked="true"
android:text="Once" />
<RadioButton
android:id="#+id/rb_daily"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_once"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Daily" />
<RadioButton
android:id="#+id/rb_weekly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_daily"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Weekly" />
<RadioButton
android:id="#+id/rb_monthly"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/rb_weekly"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp"
android:button="#drawable/radio_btn"
android:text="Monthly" />
</RadioGroup>
<ImageView
android:id="#+id/fb_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_margin="10dp"
android:src="#drawable/facebook_share" />
<ImageView
android:id="#+id/history"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignTop="#+id/fb_share"
android:layout_marginLeft="10dp"
android:src="#drawable/history" />
<ImageView
android:id="#+id/info"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/fb_share"
android:layout_marginRight="10dp"
android:src="#drawable/info" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="#+id/fb_share"
android:layout_below="#+id/rg_1"
android:layout_centerHorizontal="true" >
<Button
android:id="#+id/send"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:background="#drawable/red_btn"
android:fontFamily="Roboto-Italic"
android:text="SAVE"
android:textColor="#ffffff" />
</RelativeLayout>
</RelativeLayout>
You need to create values-swXXXX folders wrt devices you are targetting for. i.e If you are targetting for a tablet with minimum width of 600, then you need to create values-sw600 and so on.
In layout file, change declaration of RadioButton as below:
<RadioButton
android:id="#+id/rb_once"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/left_margin"
android:layout_marginTop="#dimen/top_margin"
android:button="#drawable/radio_btn"
android:checked="true"
android:text="Once" />
And maintain dimen.xml specific to each targeted dimension under values-swXXXX with dimension keys having same name but values corresponding to respective dimension. Ex:
values/
<dimen name="left_margin">5dp</dimen>
<dimen name="left_margin">10dp</dimen>
values-sw600/
<dimen name="left_margin">20dp</dimen>
<dimen name="left_margin">40dp</dimen>
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.
I am trying to mimic this sort of design on android using GridLayout:
I think I have most of it done using the below code:
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:columnCount="8"
android:rowCount="4"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:background="#drawable/rounded">
<TextView
android:layout_gravity="center_horizontal"
android:text="Some Text Here"
android:textStyle="bold"
android:textColor="#000000"
android:textSize="30dp"
android:textAlignment="center"
android:layout_columnSpan="8"
android:paddingBottom="10dp"
/>
<TextView
android:text="16"
android:textStyle="bold"
android:paddingRight="70dp"
android:textColor="#000000"
android:textSize="18dp"
android:paddingLeft="10dp"
android:paddingBottom="5dp"/>
<TextView
android:text="27"
android:textStyle="bold"
android:paddingRight="70dp"
android:textSize="18dp"
android:textColor="#000000"/>
<TextView
android:text="52"
android:textStyle="bold"
android:layout_columnSpan="6"
android:textSize="18dp"
android:paddingRight="10dp"
android:textColor="#000000"/>
<TextView
android:text="Text 1"
android:paddingRight="20dp"
android:paddingLeft="10dp"
android:textSize="18dp"
android:textColor="#ff565656"
android:paddingBottom="10dp"/>
<TextView
android:text="Text 2"
android:paddingRight="20dp"
android:textSize="18dp"
android:textColor="#ff565656"/>
<TextView
android:text="Text 3"
android:textColor="#ff565656"
android:textSize="18dp"
android:paddingRight="10dp"/>
</GridLayout>
However, when I run it in my emulator it looks like this:
Notice that it is leaving too much space on the right and the left.
Question
How can I configure the grid layout so it takes up most of the screen on right and left of it (just like in the sample above).
How can I change the screen background color - Right now it is black, I'd like to change it to another color.
For GridLayout, replace this...
android:layout_width="wrap_content"
with...
android:layout_width="fill_parent"
as follows...
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:columnCount="8"
android:rowCount="4"
android:layout_gravity="center_horizontal"
android:layout_marginTop="10dp"
android:orientation="horizontal"
android:background="#drawable/rounded">
#Anthony - You are not using the power and the essence of GridLayout in the code written. As you have manually allotted paddings to the views in order to make them appear in the first screen, which is very much possible with any other layout as well. Like below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center" >
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="2"
android:text="Some Text Here"
android:textAppearance="?android:attr/textAppearanceLarge" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="16"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="17"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="18"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Text1"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Text2"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="#+id/textView1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Text3"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>
And, GridLayout is about rows and columns. So if you want your Views to be placed such that and to use it to fuller, you can supply the row as well as column position where you view should be placed in which order and its other properties will add up to it. Here is a link.
Try this out and I am sure you will understand it much better. Happy coding. :)