..
As shown in the figure i have to create buttons with two functions. For example, in the bottom first row the "0" has another function called "Rnd" and "." has functions "Ran# RanInt".
I have taken this up as a project and I am stuck - I can't get the buttons, and the name above the button as shown in figure to be in a correct alignment.
Also, I am not sure this is the correct method, I have used GridLayout as shown in code, I used a LinearLayout inside of GridLayout for the buttons and they seem to fit - but I can't make the text to be placed above the buttons as shown in figure.
The font file can be downloaded from here ... download casio fx-es plus series. I have renamed the file ES-03 as casiofont.ttf in my program.
screen shot
<TextView
android:layout_width="wrap_content"
android:layout_height="10dp"
android:textAppearance="?android:attr/textAppearanceSmall"
android:text="space to show enabled functions"
android:id="#+id/textView"
android:layout_alignParentTop="true"
android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/webView2" />
<WebView
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/webView2"
android:layout_below="#+id/textView"
android:layout_alignParentStart="true"></WebView>
<GridLayout
android:id="#+id/gridlayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentStart="true"
android:rowCount="9"
android:columnCount="6"
android:layout_below="#+id/webView2">
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:layout_row="0"
android:layout_column="0"
android:weightSum="5"
android:id="#+id/linearLayout"
android:layout_below="#+id/webView2"
android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/gridlayout">
<TextView
android:id="#+id/rnd"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:text="#string/rnd"
android:layout_weight="1"
android:layout_column="0"
android:layout_columnSpan="1"
android:layout_row="0" />
<TextView
android:id="#+id/ran_ranint"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textStyle="bold"
android:gravity="center"
android:text="#string/ran_ranint"
android:layout_column="1"
android:layout_columnSpan="1"
android:layout_row="0" />
<com.example.girikarnal.engineringcalc.CalculatorButtonTextView
android:id="#+id/pi_e1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/pi_e"
android:layout_column="2"
android:layout_row="0" />
<TextView
android:id="#+id/pi_e2"
android:layout_height="wrap_content"
android:gravity="center"
android:text="#string/e"
android:layout_weight="0.78"
android:layout_column="2"
android:layout_width="wrap_content"
android:layout_row="0" />
<com.example.girikarnal.engineringcalc.CalculatorButtonTextView
android:layout_width="41dp"
android:layout_height="wrap_content"
android:id="#+id/drg_ans"
android:text="#string/dgr_ans"
android:gravity="center"
android:layout_weight="0.80" />
</LinearLayout>
<LinearLayout
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:id="#+id/linearlayout1"
android:layout_row="1"
android:layout_column="0">
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/zero"
android:text="#string/zero_Rnd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="1"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/dot"
android:text="#string/dot_or_ran"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="2"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/multiple_of_ten"
android:text="#string/multiple_of_ten_or_pi_e"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="3"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/ans"
android:text="#string/ans_or_DRG"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="4"
android:layout_row="1" />
<com.example.girikarnal.engineringcalc.CalculatorButtonButton
android:id="#+id/equals"
android:text="#string/equals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center_horizontal"
android:layout_column="5"
android:layout_row="1" />
</LinearLayout>
</GridLayout>
</RelativeLayout>
CalculatorButton
public class CalculatorButtonButton extends Button {
public CalculatorButtonButton(Context context) {
super(context);
init();
}
public CalculatorButtonButton(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CalculatorButtonButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init();
}
private void init() {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/casiofont.ttf");
// String s="tf";
// SpannableString spanString = new SpannableString(s);
// spanString.setSpan(new StyleSpan(Typeface.BOLD), 0, spanString.length(), 0);
setTypeface(tf);
}
}
CalculatorTextView
public class CalculatorButtonTextView extends TextView {
// Constructors
public CalculatorButtonTextView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public CalculatorButtonTextView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public CalculatorButtonTextView(Context context) {
super(context);
init();
}
// This class requires casiofont.ttf to be in the assets/fonts folder
private void init() {
Typeface tf = Typeface.createFromAsset(getContext().getAssets(),
"fonts/casiofont.ttf");
setTypeface(tf);
}
}
Just create a custom view.
Something like this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:gravity="center"
android:text="text"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:text="btn"
android:layout_width="match_parent"
android:layout_height="fill_parent" />
</LinearLayout>
CalcBtn class
public class CalcBtn extends LinearLayout {
public CalcBtn(Context context) {
super(context);
init(context);
}
public CalcBtn(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public CalcBtn(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
View.inflate(context, R.layout.calc_btn, this);
}
}
And then use it in your layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent" android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin" tools:context=".MainActivity">
<com.example.example.CalcBtn
android:layout_width="100dp"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="60dp"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<com.example.example.CalcBtn
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
Well it's not clear how exactly you want to lay out your buttons, but firstly you got several things wrong in your usage of GridLayout:
the row and column counts seem wrong (don't you have 2 rows and 5 columns ?)
there's no need for a LinearLayout within the GridLayout ; each child of GridLayout will be assigned a cell in the grid, so you can lay text and button views directly under the grid layout (cf. example below)
Additionally:
most likely the GridLayout height should be wrap_content given the rest of the layout
no need to specify a column span of 1, that's the default (that's not even a span actually...)
no need to specify children layout widths and heights (they're not taken into account in GridLayout)
no need to specify children column and row indexes, they'll be added to the grid in the order they are declared
no need to specify the row numbers either, it can be inferred from the columns number and the number of children
So, you could declare your grid with something like this:
<GridLayout
android:id="#+id/gridlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:columnCount="5">
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"/>
<!-- ... etc add you remaining 3 labels here -->
<Button
android:id="#+id/button1"
android:text="#string/textButton1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"/>
<!-- ... etc add you remaining 3 buttons here -->
</GridLayout>
But if I understand correctly you want to create equally sized columns and rows (and maybe stretch or shrink them ?), and GridLayout (from my experience) can be very tricky to adapt to these use cases (if you want to go down that road, try using Spaces rather than fiddling with row / column and elements attributes). TableLayout works way better for this though. You'd write something like this instead:
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="*"
android:shrinkColumns="*">
<TableRow>
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"/>
<!-- ... etc add you remaining 3 labels here -->
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:text="#string/textButton1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"/>
<!-- ... etc add you remaining 3 buttons here -->
</TableRow>
</TableLayout>
Or, if you want your columns to be equally sized and take up all the width available to the TableLayout, using weights:
<TableLayout
android:id="#+id/table_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TableRow>
<TextView
android:id="#+id/textView1"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text1"
android:layout_width="0dp"
android:layout_weight="1"/>
<TextView
android:id="#+id/textView2"
android:textStyle="bold"
android:gravity="center"
android:text="#string/text2"
android:layout_width="0dp"
android:layout_weight="1"/>
<!-- ... etc add you remaining 3 labels here -->
</TableRow>
<TableRow>
<Button
android:id="#+id/button1"
android:text="#string/textButton1"
android:layout_width="0dp"
android:layout_weight="1"/>
<Button
android:id="#+id/button2"
android:text="#string/textButton2"
android:layout_width="0dp"
android:layout_weight="1"/>
<!-- ... etc add you remaining 3 buttons here -->
</TableRow>
</TableLayout>
You could also use nested LinearLayouts (a horizontal one with 5 nested vertical ones or vice-versa), this is basically what TableLayout does (TableLayout and TableRow are LinearLayouts).
By the way these examples are with "plain" text views and buttons, but you can of course use your Casio-font-enabled custom ones in place it won't make any difference.
So although GridLayout is usable and should consume less system resources than TableLayout, the latter may be easier to configure to match your desired layout.
For details I recommend checking the GridLayout guide and the TableLayout one.
Related
As part of one of the views in my app, I have a place where users can choose to navigate to one of many other pages depending on which icon is tapped. To render these icons, we are using a combination of custom-designed icons and the FontAwesome icon library.
However, on some devices, such as the Samsung Galaxy S7, some of the icons do not always render as expected. In particular one of them renders in an overlapping fashion with a Chinese character. So far we have been unable to figure out why this is happening, so any help would be greatly appreciated.
We are using Xamarin Android and MvvmCross to create our app.
Some of the view code for the main layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
style="#style/RelativeLayoutPageStyle"
android:background="#color/white">
<RelativeLayout
style="#style/RelativeHeader"
android:id="#+id/linearLayout1">
<FontAwesomeIcon
android:id="#+id/flag"
android:layout_alignParentLeft="true"
style="#style/MenuButton" />
<ImageView
android:id="#+id/Header"
style="#style/HeaderLogo"
android:layout_centerInParent="true"
android:src="#drawable/TitleWithIcon" />
<FontAwesomeIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ViewFailedRecordButton"
android:layout_toLeftOf="#+id/ViewAssignmentsButton"
android:layout_toRightOf="#id/Header"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:textColor="#b8860b"
android:text="\uf06a"
android:textSize="16dp"
local:MvxBind="Click ViewFailedRecordsCommand;Visibility BooleanVisibility(FailedRecordsDetected)" />
<FontAwesomeIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/ViewAssignmentsButton"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:layout_centerHorizontal="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="\uf022"
android:textSize="16dp"
local:MvxBind="Click ViewAssignmentCommand;Visibility BooleanVisibility(HaveAssignmentsForUser);TextColor AssignmentButtonColor, Converter=NativeColor" />
</RelativeLayout>
<LinearLayout
style="#style/CollectionViewHeader"
android:id="#+id/collectionViewHeader"
android:layout_below="#id/linearLayout1"
local:MvxBind="BackgroundColor HeaderBackgroundColor, Converter=NativeColor">
<TextView
android:layout_centerInParent="true"
style="#style/TextViewHeaderResponsive"
local:MvxBind="Text HeaderText" />
</LinearLayout>
<GridView
android:id="#+id/gridView"
android:layout_below="#id/collectionViewHeader"
android:layout_above="#+id/collectionViewFooter"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:numColumns="2" />
<LinearLayout
style="#style/CollectionViewFooter"
android:id="#id/collectionViewFooter"
android:layout_alignParentBottom="true"
local:MvxBind="Visibility HideOnEmptyText(FooterText);BackgroundColor FooterBackgroundColor, Converter=NativeColor;Click FooterClickCommand">
<TextView
android:layout_centerInParent="true"
style="#style/StatusBarFooterTextView"
local:MvxBind="Text FooterText" />
</LinearLayout>
</RelativeLayout>
<MvxListView
android:id="#+id/left_drawer"
style="#style/Menu"
local:MvxItemTemplate="#layout/drawerlistitem"
local:MvxBind="ItemsSource NavigationCellModels" />
</android.support.v4.widget.DrawerLayout>
View for the Template used in the above GridView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
local:MvxBind="Click ClickCommand">
<RelativeLayout
android:layout_marginTop="10dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center">
<FontAwesomeIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="100dp"
android:layout_gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
local:MvxBind="Text RecordableDataTypeToIcon(RecordableDataType);Visibility IsRecordableDataTypeFontAwesome(RecordableDataType);TextColor Color, Converter=NativeColor" />
<CbtGlyphIcon
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="100dp"
android:layout_gravity="center"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
local:MvxBind="Text RecordableDataTypeToIcon(RecordableDataType);Visibility IsRecordableDataTypeCbtGlyphValueConverter(RecordableDataType);TextColor Color, Converter=NativeColor" />
</RelativeLayout>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:gravity="center_horizontal"
android:textSize="20sp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginBottom="10dp"
android:maxLines="2"
android:ellipsize="end"
local:MvxBind="Text Title;TextColor Color, Converter=NativeColor" />
</LinearLayout>
Code for the FontAwesomeIcon Class:
public class FontAwesomeIcon : TextView
{
private Context _context;
protected FontAwesomeIcon(IntPtr javaReference, JniHandleOwnership transfer)
: base(javaReference, transfer)
{
Initialise(null, null);
}
public FontAwesomeIcon(Context context)
: base(context)
{
Initialise(context, null);
}
public FontAwesomeIcon(Context context, IAttributeSet attrs)
: base(context, attrs)
{
Initialise(context, attrs);
}
public FontAwesomeIcon(Context context, IAttributeSet attrs, int defStyle)
: base(context, attrs, defStyle)
{
Initialise(context, attrs);
}
private void Initialise(Context context, IAttributeSet attrs)
{
_context = context ?? Application.Context;
Typeface = Android.Graphics.Typeface.CreateFromAsset(context.Assets, "FontAwesome.otf");
}
}
Finally here's a screenshot of what I'm seeing:
This is my layout file:
<?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="56dp"
android:gravity="center_vertical">
<TextView
android:id="#+id/form_widget_switch_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toEndOf="#+id/form_widget_switch"
android:gravity="center"
android:text="text" />
<com.example.daffodil.formvalidation.widgets.typefaced.SwitchButtonTF
android:id="#+id/form_widget_switch"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:switchMinWidth="40dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp" />
</RelativeLayout>
This is the output I'm getting:
Problem : I want text to be center vertically aligned but as you can see its top edge is aligned with top edge of the switch.
Edit: based on comments
Why am I using TextView : I want text view to move dynamically left or right side of the switch.so I use both TextView and Switch and changing their params dynamically to move text left or right.
I want output similar to setting Switch's button text attribute.
SwitchButtonTF class which presently I'm using:
/**
* Switch with typeface attribute added.
*/
public class SwitchButtonTF extends Switch {
/**
* {#inheritDoc}
*/
public SwitchButtonTF(Context context) {
super(context);
init(context, null);
}
/**
* Initialise view.
*
* #param context context
* #param attrs layout attributes
*/
private void init(Context context, AttributeSet attrs) {
if (!isInEditMode()) {
Fonts.getInstance(context).applyTypeFace(this, context, attrs);
}
}
/**
* {#inheritDoc}
*/
public SwitchButtonTF(Context context, AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
/**
* {#inheritDoc}
*/
public SwitchButtonTF(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context, attrs);
}
}
Any help?
Just add android:layout_centerVertical="true" in your textview as it is inside the relativelayout.Also set the height of the textview to wrap_content.
So your textview xml should be
<TextView
android:id="#+id/form_widget_switch_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/form_widget_switch"
android:gravity="center"
android:layout_centerVertical="true"
android:text="text" />
Try this:
<?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="wrap_content">
<TextView
android:id="#+id/form_widget_switch_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#+id/form_widget_switch"
android:layout_centerVertical="true"
android:gravity="center"
android:text="text" />
<com.example.daffodil.formvalidation.widgets.typefaced.SwitchButtonTF
android:id="#+id/form_widget_switch"
android:layout_width="wrap_content"
android:layout_height="56dp"
android:gravity="center"
android:switchMinWidth="40dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp" />
</RelativeLayout>
If you don't have any problem using LinearLayout in place of RelativeLayout then can you try this?
<?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="56dp"
android:orientation="horizontal">
<com.example.daffodil.formvalidation.widgets.typefaced.SwitchButtonTF
android:id="#+id/form_widget_switch"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:switchMinWidth="40dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp" />
<TextView
android:id="#+id/form_widget_switch_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center|center_vertical"
android:text="text" />
</LinearLayout>
Edit - try this with RelativeLayout
<?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="56dp"
android:gravity="center_vertical">
<TextView
android:id="#+id/form_widget_switch_text"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_toRightOf="#+id/form_widget_switch"
android:gravity="center"
android:text="text" />
<com.example.daffodil.formvalidation.widgets.typefaced.SwitchButtonTF
android:id="#+id/form_widget_switch"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="center"
android:switchMinWidth="40dp"
android:textOff=""
android:textOn=""
android:thumbTextPadding="5dp" />
</RelativeLayout>
I succeed to create a SquareRelativeLayout. Then I use this CustomLayout as one grid item of a GridLayout. I have 5 items for now (but it can be variable). For the first row, everything is fine. My item has a size of 400*400 but for the second row I have something like 400*429. I think my issue come from above, indeed I use a LinearLayout and my GridLayout has a height of layout:weight 0.50. Here is my current layout :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="MainActivity">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#66000000">
<TextView
android:id="#+id/textView4"
android:layout_width="match_parent"
android:layout_height="0dp" ... />
<android.support.v7.widget.GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:grid="http://schemas.android.com/apk/res-auto"
android:id="#+id/droparea"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.50"
grid:columnCount="3"
grid:orientation="horizontal">
<SquareRelativeLayout
android:id="#+id/relativelayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout2"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout3"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout4"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
....
</SquareRelativeLayout>
<SquareRelativeLayout
android:id="#+id/relativelayout5"
android:layout_width="0dp"
android:layout_height="wrap_content"
grid:layout_columnWeight="1"
grid:layout_gravity="fill"
android:background="#drawable/round_layout"
android:gravity="center_vertical|center_horizontal">
...
</SquareRelativeLayout>
</android.support.v7.widget.GridLayout>
<include layout="#layout/draggable_linearlayout"/>
</LinearLayout>
</RelativeLayout>
And here is the code of my SquareRelativeLayout :
import android.content.Context;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
public class SquareRelativeLayout extends RelativeLayout {
public SquareRelativeLayout(Context context) {
super(context);
}
public SquareRelativeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
}
So I want to be able to set a variable height for my GridLayout but to keep squared items. Is it possible to let GridLayout fill the 29dp ? Did I miss an attribute ? If you can help me, don't hesitate :)
It was simple, but yesterday I didn't think about it. You just need to use a ParentLayout for the GridLayout and then set to the layout_height of the GridLayout the attribute wrap_content and that's it :)
I am trying to achieve the result as shown in Pic1. Tried setting gravity, paddingleft etc but the drawable image comes in the right end and not next to Text(SHown in Pic 2). Can anyone suggest how to align the image next to TextView? Also how to set the size of drawable?
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:background="#drawable/separator"
android:padding="10dp">
<TextView
android:id="#+id/sms"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:layout_weight="1"
android:drawableEnd="#drawable/message"
android:drawableRight="#drawable/message"
android:gravity="center"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:text="SMS" />
<TextView
android:id="#+id/call"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:drawableEnd="#drawable/call"
android:drawableRight="#drawable/call"
android:gravity="center"
android:text="CALL" />
<TextView
android:id="#+id/email"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:drawableEnd="#drawable/mail"
android:drawablePadding="3dp"
android:drawableRight="#drawable/mail"
android:text="MAIL" />
Try to build around this.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:orientation="horizontal"
android:padding="10dp">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/sms"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="2dp"
android:layout_marginRight="2dp"
android:gravity="center"
android:drawableRight="#drawable/message"
android:text="SMS" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/call"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/call"
android:gravity="center"
android:text="CALL" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1">
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableRight="#drawable/mail"
android:gravity="center"
android:text="MAIL" />
</LinearLayout>
</LinearLayout>
The main problem is that, you are setting the layoutWidth=0dp and weight 1. This makes every TextView take maximum width according to the weight. The drawableRight/drawableEnd sets the drawable resource to be drawn at the rightmost edge of the view. If you want to keep this layout just wrap it in another viewGroup like #Dhinakaran has shown. Better approach would be to use a tab layout.
Instead of using multiple Linear Layouts, you can use a Relative Layout.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView"
android:layout_toRightOf="#+id/textView"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView2"
android:layout_toRightOf="#+id/textView2"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight=".33"
android:gravity="center_horizontal|center_vertical">
<TextView
android:id="#+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Small Text"
android:textAppearance="?android:attr/textAppearanceSmall"/>
<ImageView
android:id="#+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_toEndOf="#+id/textView3"
android:layout_toRightOf="#+id/textView3"
android:src="#android:drawable/btn_star"/>
</RelativeLayout>
</LinearLayout>
Result
Created a custom button which doesnt require layout nestings and can align drawable images as required.
Layout file button.xml:
<Button xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/custom_button"
style="#style/custom_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:drawablePadding="5dp"
android:gravity="center" />
Custom Button Class:
public class DrawableAlignedButton extends RelativeLayout {
private View view;
private Button button;
/**
* #param context
* used to inflate the View.
* #param attrs
* XML defined attributes.
*/
public DrawableAlignedButton(final Context context, final AttributeSet attrs) {
super(context, attrs);
init(context, attrs);
}
/**
* #param context
* used to inflate the View.
*/
public DrawableAlignedButton(final Context context) {
super(context);
init(context, null);
}
/**
* #param context
* used to inflate the View.
* #param attrs
* XML defined attributes.
* #param style
* the style for the View.
*/
public DrawableAlignedButton(final Context context, final AttributeSet attrs, final int style) {
super(context, attrs, style);
init(context, attrs);
}
private void init(final Context context, final AttributeSet attributeSet) {
view = ((Activity) getContext()).getLayoutInflater().inflate(R.layout.button, this, true);
button = (Button) view.findViewById(R.id.custom_button);
String buttonText = null;
int drawableStart = 0;
int drawableEnd = 0;
if (attributeSet != null) {
final TypedArray a = context.getTheme().obtainStyledAttributes(attributeSet, R.styleable.CustomButtonStyle, 0, 0);
buttonText = a.getString(R.styleable.CustomButtonStyle_buttonText);
drawableStart = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableStart, 0);
drawableEnd = a.getResourceId(R.styleable.CustomButtonStyle_buttonDrawableEnd, 0);
a.recycle();
}
FontUtil.getInstance(context).useNormalRegularFont(button);
if (buttonText != null) {
button.setText(buttonText);
}
button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
}
/**
* Sets the button text.
*
* #param text
* the text to be set.
*/
public void setButtonText(final String text) {
if (button != null) {
button.setText(text);
}
}
/**
* Sets the drawable to the button.
*
* #param drawableStart
* the drawable to set at the beginning of the text.
* #param drawableEnd
* the drawable to set at the end of the text.
*/
public void setDrawableStart(final int drawableStart, final int drawableEnd) {
if (button != null) {
button.setCompoundDrawablesRelativeWithIntrinsicBounds(drawableStart, 0, drawableEnd, 0);
}
}
}
How to use it in the XML :
<com.package.view.DrawableAlignedButton
xmlns:drawableAlignedButton="http://schemas.android.com/apk/res-auto"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="#drawable/transparent_button_selector"
drawableAlignedButton:buttonDrawableStart="#drawable/small_active"
drawableAlignedButton:buttonText="Button Text" />
I need help for get my layout of a image and text to work.
I want the image to scale to be the same height my TextView take in use.
I want also the image to be left to the text.
For in example # is my image
# "My Text"
or
## "My long text
## is this here"
The witdh of the image will be so the image keep the aspects.
My code is now this, the basic layout work but the image is to big.
<LinearLayout
android:id="#+id/packet_list_view_layout_subvehicle" android:layout_width="fill_parent"
android:layout_weight="1" android:orientation="horizontal"
android:gravity="left" android:layout_height="wrap_content">
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_image"
android:src="#drawable/packet"
android:scaleType="fitCenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:textAppearance="?android:attr/textAppearanceSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="==================="
/>
EDIT 1
A other try that give me the same result.
<LinearLayout
android:id="#+id/packet_list_view_layout_subvehicle"
android:layout_width="fill_parent"
android:layout_weight="1"
android:orientation="horizontal"
android:gravity="left"
android:layout_height="wrap_content"
>
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_image"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:scaleType="fitCenter"
android:src="#drawable/packet" />
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
EDIT 2
I has now found a half working code, the problem here is the width of the image is the origin width and not the new scale witdh.
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/packet_list_view_layout_subvehicle"
>
<ImageView
android:id="#+id/packet_list_view_layout_subvehicle_imageAA"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/packet"
/>
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|left"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
I has finally found a working way, not very good but work for me.
My code is now
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="#+id/packet_list_view_layout_subvehicle"
>
<mypacket.MyImageView
android:id="#+id/packet_list_view_layout_subvehicle_imageAA"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:src="#drawable/packet"
/>
<TextView
android:id="#+id/packet_list_view_layout_subvehicle_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center|left"
android:text="TV's (20) to London"
android:textAppearance="?android:attr/textAppearanceSmall" />
</LinearLayout>
And the mypacket.MyImageView is this code.
public class MyImageView extends ImageView {
public MyImageView(Context context) {
super(context);
}
public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public MyImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, heightMeasureSpec);
}
}
EDIT: In true, I don't use this, base one some error with how the system calc the size, that do the image will be bigger then need, and this will do the text to warp to two lines. In final I use a normal ImageView and set fix hegth and withd.