Android Studio Layout Editor: How do I center these views in the middle of this Layout - android-relativelayout

In the screenshot, you can see I've drawn in red arrows indicating that I want to shift the widgets to the right a bit. In other words, I want to center things, and yet I'm having difficulty.
Below is the XML:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/linearLayout1"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:orientation="vertical">
<DatePicker
android:id="#+id/datePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:calendarViewShown="false"
android:layout_alignParentTop="true" android:layout_alignParentStart="true"
>
</DatePicker>
<TimePicker
android:id="#+id/timePicker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/datePicker" android:layout_alignParentStart="true">
</TimePicker>
<Button
android:id="#+id/btnSave"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="25sp"
android:text="#string/ok"
android:layout_below="#+id/timePicker" android:layout_alignParentStart="true"
android:layout_alignEnd="#+id/timePicker"/>
</RelativeLayout>

You can add android:layout_centerHorizontal="true" to all he widgets you want to center horizontally.
Also I suggest you change the linearLayout1's width and height to match_parent. fill_parent, which is value of layout_height is deprecated long time ago, and in order to center your widgets horizontally on the screen, you need your layout to match the screen bounds.

Related

AS3 Flex Scroller - Hide when not scrolling

I'm trying to figure out how to make a Flex Scroller not be offset and to be hidden when the user is not scrolling. Basically, I'd like for the Scrollbar to appear and be overlapping the content when the user is scrolling and to then disappear or fade out when the user has stopped scrolling.
However, I've been unable to find any information online or any similar implementation on how to actually go about doing this. I'd appreciate it if someone could point me in the right direction.
Create a custom skinclass, inside that skin you add the following states:
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="inactive" />
</s:states>
Once that is done, you have two buttons: TRACK and THUMB. Add this:
<!--- The default skin class is VScrollBarTrackSkin.
#copy spark.components.supportClasses.TrackBase#track
#see spark.skins.spark.VScrollBarTrackSkin -->
<s:Button id="track" top="0" bottom="0" height="54"
focusEnabled="false"
skinClass="com.happymetrix.client.mobile.components.uiLegacy.scroller.dark.DarkVScrollerTrackSkin"/>
<!--- The default skin class is VScrollBarThumbSkin.
#copy spark.components.supportClasses.TrackBase#thumb
#see spark.skins.spark.VScrollBarThumbSkin -->
<s:Button id="thumb"
focusEnabled="false" visible.inactive="false"
skinClass="com.happymetrix.client.mobile.components.uiLegacy.scroller.dark.DarkVScrollerThumbSkin" />
visible.inactive = "false"; Just try to play a bit with the custom skinclasses.

Flex id contentGroup query

iam learning Flex and practising skins. So, i just had one doubt:
I have written one custom skin named : ApplicationContainerSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<fx:Metadata>
[HostComponent("spark.components.Application")]
</fx:Metadata>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Group horizontalCenter="0" verticalCenter="0">
<s:Rect left="0" right="0" top="0" bottom="0"
radiusX="10" radiusY="10">
<s:fill>
<s:SolidColor color="#CCCCCC" />
</s:fill>
</s:Rect>
<s:Group id="contentGroup"
left="30" right="30" top="30" bottom="30">
</s:Group>
</s:Group>
</s:SparkSkin>
My Doubt:
When I removed s:Group id="contentGroup" , iam unable to see any content inside my application, so why is this 'contentGroup' id necessary?
where this id predefinedly specified.? sorry if its a noob query, but iam eager to knew it.I even tried to check the source code, but I didnt found it, Could anyone tell me where it specified and how does my content render only after using this contentGroup id...? ( I mean, how it internally works? )
Awaiting your responses!
Skinnable Spark components specify "skin parts," identified by the id.
The Application component, which you are skinning, defines 2 skin parts - contentGroup and controlBarGroup, as you can see in the documentation here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html#SkinPartSummary
The Application class uses the contentGroup skin part (if it has been added in the skin) to lay out the content. Skin parts can either be required or not. The contentGroup part is not required, and therefore when you left it out, the content just did not display.

Rotating animation wobbles

I'm trying to create a simple "AJAX loader" type animation, just a circle that rotates around it's center. My problem is that the rotation isn't smooth, it wobbles slightly back and forth.
Demo SWF: http://swfup.com/view/1mn0
Code for the swf:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="160" height="160"
backgroundColor="0xCCCCCC"
initialize="loadingAnim.play()">
<fx:Declarations>
<s:Rotate angleFrom="0" angleTo="360" autoCenterTransform="true" id="loadingAnim" target="{loader}"
repeatCount="0" duration="2000" easer="{null}" />
</fx:Declarations>
<s:Image id="loader" source="#Embed('loader.png')" smooth="true" smoothingQuality="high"
horizontalCenter="0" verticalCenter="0" />
</s:Application>
I've made sure that the image is an exact circle, if you want to check for yourself then here is the image file:
The center of the image (73, 73) doesn't match up to the visual center of the graphic.
Here's your graphic with the center marked:
So, it's spinning off-center (visually) which causes it wobble.

Change the Selected TEXT Color on Spark DataGrid cell

Does anyone know a way to apply style on selected text in a Spark DataGrid?
I think that the best way is to have an itemrenderer with textarea but after, I don't know how to do.
My goal isn't to change color label if cell is selected.
Indeed, in my dream, item is editable, and you can selected only some words inside cell and apply a specific style to the selected part of text (by click on a button, one for bold, one for italic...). Than, text may be store in database like html text.
I'd like use cell itemrenderer like a RichTextEditor but without ControlBar. In my case, I'd like to have only one control bar outside the datadgrid.
I'll happy, if you can help me.
Thanks
Best approach with Spark is generally a skin.
There's rudimentary control via properties, such as changing the selected color:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:DataGrid selectionColor="0xff0000">
<s:dataProvider>
<s:ArrayList>
<fx:String>a</fx:String>
<fx:String>b</fx:String>
<fx:String>c</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:DataGrid>
</s:Application>
To implement an item renderer for a GridColumn, use States to define how the selected state will appear
GridColumnItemRenderer
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
clipAndEnableScrolling="true">
<s:states>
<s:State name="normal" />
<s:State name="selected" />
</s:states>
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void
{
lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<s:Label id="lblData"
color.selected="0x00ff00"
top="9"
left="7" />
</s:GridItemRenderer>
DataGrid
Item renderer above is specified from a Spark GridColumn, as in:
<s:DataGrid>
<s:columns>
<s:ArrayList>
<s:GridColumn itemRenderer="GridColumnItemRenderer" />
</s:ArrayList>
</s:columns>
</s:DataGrid>

Adobe Flex/Actionscript: editable label

I am working on a project where it would be really nice if we had editbale labels or an area for TextInput that looks like a Label if it isnt hovered with the mouse.
I'm pretty new at Flex, and dont know how to develop a skin. I dont even know if it possible to do this just by skinning.
Anyhow, I found this question from a few months ago but i cant get it working, it just displays a empty white page.
Here the code I used to create a editable Label mentioned in the link above:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:component="com.npacemo.component.*"
xmlns:skins="skins.*">
<fx:Declarations>
<!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
</fx:Declarations>
<s:BorderContainer>
<component:EditableLabel text="Text 132" skinClass="skins.EditableLabel" />
</s:BorderContainer>
</s:Application>
Any idea why the displayed page is empty? Or a different approach?
Thanks in advance,
markus
In a project we were working on we did editable labels by using a textbox and remove background and borders (it will look just like a label and will be editable). In your case you can do this and then on mouseIn you can show the border and background again (making it look like a text box) and then MouseOut with removing til style again.
I encountered the same problem about this editable label.
I think the root cause was from SkinPart:labelComponent. Inside the skin, the label was like this:
<s:Label id="labelComponent" text="{hostComponent.text}"
alpha.normal="1" alpha.selected="0"
visible.normal="true" visible.selected="false"
verticalCenter="0" width="{this.width+20}" maxDisplayedLines="1"
textDecoration="underline" buttonMode="true"/>
Since the width setting was causing a self-reference loop, label would throw the exception. The solution here is just clear the width setting:
<s:Label id="labelComponent" text="{hostComponent.text}"
alpha.normal="1" alpha.selected="0"
visible.normal="true" visible.selected="false"
verticalCenter="0" maxDisplayedLines="1"
textDecoration="underline" buttonMode="true"/>
And the component can be displayed now.
I found there's a difference between displaying components in Application and View. In Application, some exceptions are caught automatically, making the process of debugging become more difficult.
Hope this would help!