I added circular floating action menu to my app but I can't find anywhere option to add label to elements. Can some has any idea how to add text?
I used this tutorial:
http://androidlift.info/2015/10/12/create-floating-action-button-fab-android/
Circular floating menu can be created easily in ConstraintLayout. layout_constraintCircle, layout_constraintCircleAngle, layout_constraintCircleRadius this property of ConstraintLayout will help you to create circular positioning of views.
Check this official documentation.
layout_constraintCircle is for the id of the center view
layout_constraintCircleAngle is for the angle of the circular positioning view
layout_constraintCircleRadius is for the radius of the circle.
This is a sample xml code for Arc menu:
<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"
tools:context=".CircularPositioningActivity">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabMenu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:clickable="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_menu_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAttachFile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_constraintCircle="#id/fabMenu"
app:layout_constraintCircleAngle="270"
app:layout_constraintCircleRadius="100dp"
app:srcCompat="#drawable/ic_attach_file_white_24dp"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabAudio"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_constraintCircle="#id/fabMenu"
app:layout_constraintCircleAngle="315"
app:layout_constraintCircleRadius="100dp"
app:srcCompat="#drawable/ic_audiotrack_white_24dp" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fabCamera"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
app:layout_constraintCircle="#id/fabMenu"
app:layout_constraintCircleAngle="0"
app:layout_constraintCircleRadius="100dp"
app:srcCompat="#drawable/ic_camera_alt_white_24dp" />
<android.support.constraint.Group
android:id="#+id/group"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:constraint_referenced_ids="fabAttachFile,fabCamera,fabAudio"
/>
</android.support.constraint.ConstraintLayout>
This is how it look like
can't find anywhere option to add label to elements
You can replace each circular positioning views with viewgroup or different layout for adding multiple view. This is the easiest way to do with out any library.
Related
I have a Linear Layout with a list of six horizontal button in column. Each Button is defined as a AppCompactTextView since I need to place two images on it, as you can see in the following image:
What I need to do is separate the drawableStartCompat image (the one on the left) from the AppCompactTextView, without changing its position. I would like to keep it separated from the button. How can do it? I was thinking to wrap it with the button in a View but I do not know how to manage it. This is the code of one of the six element of the list:
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/view_top_up_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:text="#string/placeholder"
android:textColor="#color/black"
app:drawableEndCompat="#drawable/ic_arrow_right_small_black"
app:drawableStartCompat="#drawable/ic_menu_charge" />
You can wrap the Imageview & TextView into any viewgroup you like & create one view like this, which gives you flexibility to maintain margin postion etc for your view:
<?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="wrap_content"
android:gravity="center"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="#+id/leftImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:src="#drawable/ic_android" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_weight="1"
android:padding="8dp"
android:text="Boost"
android:textSize="16sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/rightImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:src="#drawable/ic_arrow_right" />
</LinearLayout>
</LinearLayout>
Output:
You can even go ahead & create a custom/compound view out of your layout.
Create custom button out of horizontal LinearLayout, which contains ImageView, Button and perhaps another ImageView for the image on the right.
This is my layout I am using for a activity.
<?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"
tools:context="com.example.phocast.AboutMeActivity">
<android.support.v7.widget.CardView
android:id="#+id/cv_abtme"
android:layout_width="369dp"
android:layout_height="260dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="101dp"
android:background="#color/colorPrimaryLight"
app:cardBackgroundColor="#color/bgcol_abtme"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.883">
<ImageView
android:id="#+id/imageView2"
android:layout_width="120sp"
android:layout_height="120sp"
app:srcCompat="#drawable/ic_face_black_24dp" />
<ImageView
android:id="#+id/iv1_abtme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/tv_abtme"
app:srcCompat="#drawable/about_icon_facebook" />
<TextView
android:id="#+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:fontFamily="serif-monospace"
android:lineSpacingExtra="12sp"
android:text="#string/facebook_id"
android:textSize="18sp" />
<TextView
android:id="#+id/tv_abtme"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:fontFamily="cursive"
android:text="#string/user_name"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textSize="36sp" />
</android.support.v7.widget.CardView>
....
</android.support.constraint.ConstraintLayout>
The output looks like:
The problem is I can't move the items inside the cardview either programatically or using drag in design view of android studio.
Like, for say, I want to have
Imageview iv1_abtme(the facebook icon) below the tv_abtme
textview4 horizentally aligned to iv1_abtme
etc.
Can anyone kindly help me on what is going wrong here(why I cant simply drag items)
CardView is based on a FrameLayout and the documentation there clearly says:
Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
So, to solve your problem, your CardView needs to have a single child that is a view group for your views, such as LinearLayout, RelativeLayout, or ConstraintLayout.
I'm designing my constraint layout using XML.
I have an OpenSansBTextView and I need my text to be centered in it. It's centered horizontally, and not centered vertically. I don't know why. Here is my xml file. Can you see my mistake?
<android.support.constraint.ConstraintLayout
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:background="#color/colorAccent"
android:id="#+id/dashboard">
<com.doyousonder.android.utils.RochesterTextView
android:id="#+id/YourActivity"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginStart="25dp"
app:layout_constraintVertical_bias="0.34"
android:text="#string/YourActivity"
android:textColor="#color/colorPrimaryMoreDark"
android:textSize="23sp" />
<com.doyousonder.android.utils.OpenSansRTextView
android:id="#+id/YouVoted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/YourActivity"
android:layout_marginTop="15dp"
android:layout_marginStart="20dp"
android:text="#string/YouVoted"
android:textColor="#color/colorPrimaryMoreDark"
android:textSize="15sp" />
<com.doyousonder.android.utils.OpenSansSBTextView
android:id="#+id/VoteCount"
android:layout_width="29dp"
android:layout_height="35dp"
app:layout_constraintStart_toEndOf="#+id/YouVoted"
app:layout_constraintTop_toTopOf="#+id/YouVoted"
app:layout_constraintBottom_toBottomOf="#+id/YouVoted"
android:layout_marginStart="5dp"
android:background="#drawable/more_curved_edge_button_button_primarycolor_background"
android:gravity="center"
android:text="1"
android:textAlignment="center"
android:textSize="25sp" />
You haven't provided much code to work with, i.e what is the youVoted variable. I'm assuming youvoted is your parent layout
I think you're issue comes with how you set up your constraints. Try these instead
...other layout info
app:layout_constraintBottom_toBottomOf="#+id/YouVoted"
app:layout_constraintStart_toStartOf="#+id/YouVoted"
app:layout_constraintTop_toTopOf="#+id/YouVoted"
app:layout_constraintEnd_toEndOf="#+id/YouVoted"/>
Explanation
I believe the mistake is you made is stating your textview should start at the end of your youvoted layout instead of saying it should start at the start of the youvoted layout.
change app:layout_constraintStart_toEndOf="#+id/YouVoted" to app:layout_constraintStart_toStartOf="#+id/YouVoted"
also add an end constraint.
app:layout_constraintEnd_toEndOf="#+id/YouVoted"
I am doing some operation on floating action button . I have a list view and showing google ad at bottom of my screen, The floating action button is showing at same place (bottom|end). so action button is hiding the ad.
I want shift the Floating action button little above the ad linear layout.
Please have a look the image:
My code is look like:
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:layout_gravity="bottom|end"
android:src="#drawable/fav"
android:adjustViewBounds="false" />
adLayoutId is ad layout id
Please help.
Thanks in advance.
You should use RelativeLayout, and as we know, later children in a RelativeLayout tend to float over earlier children in a RelativeLayout.
So, to have a FAB float over of any layout, make sure that the FAB is defined after all views (at the end of the XML layout).
If you use android:layout_margin="#dimen/fab_margin" the best way to manipulate FAB is set dependencies between views, for example:
<?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">
<ListView
android:id="#+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#id/adLayoutId"/>
<LinearLayout
android:id="#+id/adLayoutId"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="#android:color/black"/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#id/adLayoutId"
android:layout_alignParentRight="true"
android:layout_margin="#dimen/fab_margin"
android:src="#drawable/fav"/>
</RelativeLayout>
Floating action button always will be above the ad linear layout, and independent from ad layout size.
Hope it helps.
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginBottom="100dp"
android:layout_marginRight="30dp"
/>
These two lines inside the fab button helped me solved this problem:
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
Here's the entire code I used for the button alone:
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="#+id/fab_newStudent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
android:contentDescription="#string/todo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="#drawable/ic_baseline_add_24" />
THESE TWO LINES ARE IMPORTANT.
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
Add a bottom Margin of 55dp which is the size of Admob Banners
This line in either the floating button or enclosing layout.
android:layout_marginBottom="55dp
I'm using this library which is pretty awesome for implementing floating action button with customized menu and many other stuffs.
But while using this library I'm facing trouble with changing the color of the FloatingActionButton inside a FloatingActionMenu. I tried putting fab:manu_colorNormal as a property of the FloatingActionButton, but it seems it has no effect and showing the default colour.
Here's the layout I'm using. Note that, I've used xmlns:fab="http://schemas.android.com/apk/res-auto". It was suggested somewhere to check if the xmlns:fab is pointed to apk/res-auto. I set that properly, but yet no luck.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#color/background">
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/fab_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
fab:menu_colorNormal="#color/fab_close_background"
fab:menu_colorPressed="#color/fab_close_background_pressed"
fab:menu_colorRipple="#color/fab_close_background_ripple">
<com.github.clans.fab.FloatingActionButton
android:id="#+id/menu_delete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_delete_white_24dp"
fab:fab_size="mini"
fab:menu_colorNormal="#color/fab_delete_background"
fab:menu_colorPressed="#color/fab_delete_background_pressed"
fab:menu_colorRipple="#color/fab_delete_background_ripple" />
</com.github.clans.fab.FloatingActionMenu>
</RelativeLayout>
Note: I could change the colour of the FloatingActionMenu button successfully. menu_colorNormal works perfectly for the close button in my layout.
Here's how it looks like in my application. Red is the default colour which I'm trying to change. The issue is reported here in Github.
Replace fab:menu_colorNormal to fab:fab_colorNormal in FloatingActionButton
fab:menu_colorNormal is used to set the color of menu icon and
fab:fab_colorNormal is used to set the color of floating action
button.
See the doc here.
Use following code:
<com.github.clans.fab.FloatingActionMenu
android:id="#+id/menu_green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginRight="150dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
fab:menu_icon="#drawable/ic_star"
fab:menu_animationDelayPerItem="0"
fab:menu_colorNormal="#43A047"
fab:menu_colorPressed="#2E7D32"
fab:menu_colorRipple="#1B5E20"
fab:menu_labels_maxLines="2"
fab:menu_labels_ellipsize="end">
<com.github.clans.fab.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_edit"
fab:fab_label="Menu item 1"
fab:fab_colorNormal="#43A047"
fab:fab_colorPressed="#2E7D32"
fab:fab_colorRipple="#1B5E20" />
</com.github.clans.fab.FloatingActionMenu>