I have a voice to text dictation application that acts as a microphone utility for a web hosted EMR platform.
We have multiple screens on this app, and one of the screens we have reserved to display only the spoken text.
In the interest of space for the text, I've decided to implement Floating Action Button and use that as a clickable microphone that will start our voice to text engine.
My question is, has anyone else had issues with a default greenish border being placed around a drawable used as the FAB src and how did you manage to modify it or get rid of it completely?
You will see my fab at the top center of the image, with the tiny little microphone being squished by that teal border.
My apologies, not enough reputation to post images, here's a link:
Screenshot on Imgur
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
xmlns:android.support.design="http://schemas.android.com/apk/res-auto"
android:background="#000000"
android:gravity="bottom"
android:id="#+id/lyt_main">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="0dp"
android:layout_margin="0dp"
android:src="#drawable/btn_recording_0"
app:borderWidth="0dp"
android:adjustViewBounds="true"
android.support.design:fabSize="normal"
app:rippleColor="#android:color/black"
app:pressedTranslationZ="55dp"
app:elevation="36dp"
/>
<com.applicadiamobile.dictation.adapter.CustomViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:clickable="false" >
<android.support.v4.view.PagerTitleStrip
android:id="#+id/pager_title_strip"
android:layout_width="wrap_content"
android:layout_height="55dp"
android:layout_gravity="top"
android:background="#drawable/drag_bar_gradient"
android:clickable="true"
android:paddingBottom="9dp"
android:paddingTop="9dp"
android:textColor="#FFF" >
</android.support.v4.view.PagerTitleStrip>
</com.applicadiamobile.dictation.adapter.CustomViewPager>
<LinearLayout
android:id="#+id/button_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:baselineAligned="false"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="55dp"
android:gravity="top"
android:orientation="horizontal" >
<LinearLayout
android:id="#+id/left_button_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/undo"
style="#style/btnStyleUndo"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/undo" />
<Button
android:id="#+id/new_doc"
style="#style/btnStyleNewDoc"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/text" />
</LinearLayout>
<LinearLayout
android:id="#+id/right_button_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btn_send"
style="#style/btnStyleSend"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/btn_send" />
<Button
android:id="#+id/settings_button"
style="#style/btnStyleSettings"
android:layout_width="#dimen/button_width"
android:layout_height="#dimen/button_small_height"
android:layout_marginTop="#dimen/button_margin_top"
android:layout_weight="1"
android:text="#string/settings" />
</LinearLayout>
</LinearLayout>
Related
I'm updating an old existing app to be 4+ only and am trying to introduce a flavour of Material Design for < Lollipop. To that end, I am using MaterialDesignLibrary to add a few elements - in particular, the floating button.
The floating button displays OK, along with its animation, but I cannot get its bottom position displaying correctly.
Despite the recommendation that the component should be put in the right-bottom of the screen, I am trying to put the component in the right-bottom of my container wrapper... The right positioning works ok, but the bottom positioning seems to take from the wrong element.
Here is my xml for the section in the screen:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_marginTop="10dip" >
<RelativeLayout
android:id="#+id/llFeelingContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/light_background"
android:baselineAligned="true"
android:orientation="vertical" >
<TextView
android:id="#+id/tvFeelingTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dip"
android:paddingLeft="5dip"
android:textSize="16sp" />
<View
android:id="#+id/vSeparatorTop"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_below="#id/tvFeelingTitle"
android:background="#color/material_lightgreen_100" />
<LinearLayout
android:id="#+id/llCircleContentHolder"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#id/vSeparatorTop"
android:baselineAligned="false"
android:orientation="horizontal"
android:paddingBottom="5dip"
android:paddingTop="3dip" >
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="pain"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circlePain"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_marginRight="5dp"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="energy"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circleMood"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
<LinearLayout
android:layout_width="0dip"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="4dp"
android:gravity="center"
android:text="mood"
android:textSize="14sp"
android:textStyle="bold" />
<com.app.prohealth.extras.CircleDisplay
android:id="#+id/circleEnergy"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/circle_0"
android:gravity="center" />
</LinearLayout>
</LinearLayout>
<View
android:id="#+id/vSeparatorBottom"
android:layout_width="match_parent"
android:layout_height="1dip"
android:layout_below="#id/llCircleContentHolder"
android:background="#color/material_lightgreen_100" />
<TextView
android:id="#+id/tvFeelingSubTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/vSeparatorBottom"
android:paddingBottom="3dip"
android:paddingLeft="5dip"
android:text="How are you feeling now?"
android:textSize="16sp" />
</RelativeLayout>
<com.gc.materialdesign.views.ButtonFloat
android:id="#+id/buttonFloat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginTop="20dp"
android:background="#1E88E5"
materialdesign:animate="true"
materialdesign:iconDrawable="#drawable/fab_ic_add" />
</FrameLayout>
Here is a shot of where the Floating Button appears, and where it should appear:
You'll see in the code that I have tried negative margins and padding, but nothing I've tried has had any effect.
The Floating Button should appear aligned with the bottom of tvFeelingSubTitle; what has gone wrong?
UPDATE
The suggestion from mistwalker did work, in as much as the button now aligns itself to the bottom. However, it expands the height of the bottom container to match the height of the button:
I tried a number of different variations on the suggestion, which either squashed the button to fit a fixed height container, or overwrote the content completely.
The layout I am wanting to create is more like this:
Maybe this isn't possible and I'm wasting my time and yours...
What do you think?
Try putting
android:layout_below="#id/vSeparatorBottom"
android:align_baseline=#id/tvFeelingSubTitle
android:alignParentRight="true"
and remove the margin attributes plus the alignParentBottom one.
That should do it.
ADD:
About your second question - You are seeing that because your floating action button(FAB) is INSIDE your RelativeLayout.
Instead have FrameLayout as the outermost parent and the RelativeLayout (minus the FAB) and FAB as siblings.
Then adjust the style on the FAB to sit in the bottom right corner of your FrameLayout with layout_gravity=bottom|right and any margins you may want to add.
I am working on an application for Android in Eclipse, but I have some problems with the look of the menu. I have several buttons that people can click and play sounds with them. The problem is that I don't know how to start a new line and go on with more buttons.
I'll post two images. I think the image title will tell you everything.
1st:
2nd:
The 2nd image is made with PhotoShop.
XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="665dp"
android:orientation="horizontal" >
<ImageButton
android:id="#+id/aatrox_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/aatrox" />
<ImageButton
android:id="#+id/ahri_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ahri" />
<ImageButton
android:id="#+id/akali_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/akali" />
<ImageButton
android:id="#+id/alistar_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/alistar" />
<ImageButton
android:id="#+id/amumu_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/amumu" />
<ImageButton
android:id="#+id/anivia_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/anivia" />
<ImageButton
android:id="#+id/annie_imgbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/annie" />
</LinearLayout>
</ScrollView>
<Button
android:id="#+id/back_champions"
style="?android:attr/buttonStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="50dp"
android:text="#string/back" />
</LinearLayout>
I tried moving the image buttons with the mouse but no success.
you need grid view. check out sample
grid view sample
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lyt_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/plain_bg"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/lyt_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<include
android:layout_width="match_parent"
android:layout_height="wrap_content"
layout="#layout/header" />
</LinearLayout>
<LinearLayout
android:id="#+id/lyt_body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<RelativeLayout
android:id="#+id/lyt_Buttons"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imgfrontlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/imgcenterlogo"
android:layout_alignParentTop="true"
android:layout_marginTop="61dp"
android:background="#drawable/front_logo"
/>
<ImageView
android:id="#+id/imgcenterlogo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnPersonaltrainer"
android:layout_centerHorizontal="true"
android:layout_marginBottom="29dp"
android:background="#drawable/center_logo" />
<Button
android:id="#+id/btnMyProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_marginBottom="21dp"
android:layout_marginLeft="32dp"
android:background="#drawable/myprofile" />
<Button
android:id="#+id/btnTaracker"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/imgcenterlogo"
android:layout_alignParentRight="true"
android:layout_marginBottom="49dp"
android:background="#drawable/track" />
<Button
android:id="#+id/btnPersonaltrainer"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/btnMyProfile"
android:layout_alignLeft="#+id/btnAllExercises"
android:background="#drawable/personaltrainer" />
<Button
android:id="#+id/btnRandomworkouts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnPersonaltrainer"
android:layout_alignParentLeft="true"
android:background="#drawable/randomworkout" />
<Button
android:id="#+id/btnAllworkouts"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/btnAllExercises"
android:layout_alignBottom="#+id/btnAllExercises"
android:layout_alignLeft="#+id/btnMyProfile"
android:background="#drawable/allworkouts" />
<Button
android:id="#+id/btnAllExercises"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/btnTaracker"
android:layout_alignParentRight="true"
android:layout_marginRight="40dp"
android:background="#drawable/allexercises" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>`
I need to create layout compatible for all screen sizes,created separte layout for xlarge sizes(800x1280,720x1280 etc). Here I cant upload image due to reputation,need to place one main button on center of the layout ,place 3 buttons on curvely on left and right side of middle button.please can anyone help me to create the layout compatible for all screen sizes without using dp or fixed points.
you can use android:layout_weight attribute. It will allow you to use percentages to define your buttons.
For EX:
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:weightSum="1.0" >
<Button
android:text="left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50" />
<Button
android:text="right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".50" />
</LinearLayout>
Now you have given percentages values to buttons so they will be displayed on any size of screen to their percent value of the whole screen.
This can be done in LinearLayout for RelativeLayout check second answer on this link
As mentioned in the question you want the buttons to be placed curvely at left and right of a center button, you can have a look at the link to get some idea to how to accomplish this: https://github.com/daCapricorn/ArcMenu
This is an open source project which I referred to create a Path like menu.
I'm customizing an alert dialog, with a different UI. Here is an example.
As you can see there are two black bands (highlighted with red rectangulars) I would like to remove.
It weird because the main layout show match the parent one, as you can see from the xml below.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/lytDialog_takeNowDialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/default_side_space"
android:layout_marginRight="#dimen/default_side_space"
android:background="#color/yellow"
android:orientation="vertical" >
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top|center_horizontal"
android:gravity="center"
android:padding="#dimen/default_side_space"
android:text="Are you sure?"
android:textColor="#color/dialog_text_color"
android:textSize="#dimen/dialog_text_size" />
<LinearLayout
android:id="#+id/lytShowAlert_takeNowDialog"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/black_gradient"
android:orientation="horizontal"
android:padding="#dimen/default_side_space" android:visibility="gone">
<CheckBox
android:id="#+id/chkShowAlert_takeNowDialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="5dp"
android:text="#string/dont_show_alert"
android:textColor="#android:color/white"
android:textSize="#dimen/dialog_yes_no_size" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="1" >
<Button
android:id="#+id/no_dialog"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/space_among_buttons"
android:layout_weight=".5"
android:background="#drawable/yellow_gradient"
android:padding="#dimen/default_side_space"
android:text="No"
android:textColor="#color/dialog_text_color"
android:textSize="#dimen/dialog_yes_no_size" />
<Button
android:id="#+id/yes_dialog"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="#dimen/space_among_buttons"
android:layout_weight=".5"
android:background="#drawable/yellow_gradient"
android:padding="#dimen/default_side_space"
android:text="Yes"
android:textColor="#color/dialog_text_color"
android:textSize="#dimen/dialog_yes_no_size" />
</LinearLayout>
Anyone knows the solution to remove them please?
If you want to remove black panel, change the appTheme(Actually dialog theme.).
Dialog with transparent background in Android
Having a lot of trouble getting an icon to huddle into the position I want it in. I looked at 3 different Stack Overflow questions and tried placing the image in a RelativeLayout, LinearLayout, and a TableRow. All with various XML options. Never managed to get the icon to go right and center itself between top and bottom of the allotted space. In the pic below, red is where it is now, blue is where I want it. Here's a pic (of how it looks now, which is incorrect) and the code (imageView1 is what I want to align):
And the code:
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:id="#+id/loginScrollView">
<TableLayout android:layout_width="fill_parent"
android:layout_height="wrap_content" android:orientation="vertical"
android:padding="5dp">
<ImageView android:id="#+id/logoImageView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:src="#drawable/logo" android:contentDescription="#string/app_name" />
<TextView android:id="#+id/demoTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/logDetails" android:gravity="center_horizontal|center" />
<EditText android:id="#+id/emailEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/loginHint" android:imeOptions="actionNext"
android:inputType="textEmailAddress" android:padding="20dp" />
<EditText android:id="#+id/passEditText"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:hint="#string/password" android:imeOptions="actionDone"
android:inputType="textPassword" android:padding="20dp" />
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:text="#string/rememberDetails" android:layout_gravity="center" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:padding="20dp" />
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_holo_dark" android:layout_weight="1" android:layout_gravity="center|right"/>
</TableRow>
<TableRow android:id="#+id/buttonTableRow"
android:layout_width="match_parent" android:layout_height="wrap_content">
<Button android:id="#+id/registerButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/register" />
<Button android:id="#+id/loginButton" android:layout_width="0dip"
android:layout_height="wrap_content" android:layout_gravity="bottom"
android:layout_weight="1" android:text="#string/login" />
</TableRow>
</TableLayout>
</ScrollView>
Here are the SO questions I've already looked at and tried to use as solutions:
Aligning ImageView to right of the layout android
Aligning with center in android with hierarchical Layouts
Android ImageButton not displaying on right side of the screen
There are multiple options, as far as I can tell. I'll give you two:
First option is to set a scaletype on the ImageView containing the overflow icon. You make it take up all remaining available space and set the scaletype to fitEnd. This will position the icon all the way at the right.
<ImageView android:id="#+id/imageView1"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:scaleType="fitEnd"
android:layout_weight="1" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
You can accomplish the same effect by setting a weight of 1 on the CheckBox, which will make it 'push' the ImageView with the overflow icon all the way to the right (thanks to a TableRow behaving similarly to a LinearLayout). You can then simply make the ImageView wrap its content. You may want to double check if there are no weird side effects to the clickable region in this case though.
<TableRow android:id="#+id/rememberTableRow"
android:layout_width="wrap_content" android:layout_height="wrap_content">
<TextView android:id="#+id/rememberTextView"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center" android:text="#string/rememberDetails" />
<CheckBox android:id="#+id/rememberCheckBox"
android:layout_width="0dp" android:layout_height="wrap_content"
android:layout_weight="1" android:padding="20dp" />
<ImageView android:id="#+id/imageView1"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="center_vertical" android:onClick="showPopup"
android:src="#drawable/abs__ic_menu_moreoverflow_normal_holo_dark" />
</TableRow>