I am trying to place an icon to my tablayout. My tablayout have fixed 6 tabs. And my icon should place next to second tab icon. I tried following code and it worked well on simulator but not on real device.
My code:
Tablayout.xml and icon
<android.support.design.widget.TabLayout
android:id="#+id/tabs2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#40436F"
android:layout_marginRight="10dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="60dp"
android:layout_marginBottom="15dp"
android:background="#drawable/tab_bar_bg"
android:visibility="visible"
app:tabPaddingEnd="0dp"
app:tabPaddingStart="0dp"
app:tabIndicatorHeight="2dp"
app:tabMode="fixed"
app:tabMinWidth="58dp"
app:tabGravity="center"/>
<RelativeLayout
android:id="#+id/notification_bg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:layout_marginTop="63dp"
android:visibility="gone">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/notification_bg"
/>
<TextView
android:id="#+id/textView32"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0"
android:textSize="12sp"
android:textColor="#fff"
android:textStyle="bold"
android:layout_centerInParent="true"/>
</RelativeLayout>
And code:
#Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
int marginDp=(pxToDp(tabLayout.getWidth()))/6*2;
RelativeLayout.LayoutParams relativeParams = (RelativeLayout.LayoutParams)badgeView.getLayoutParams();
relativeParams.setMargins(Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, marginDp, getResources().getDisplayMetrics())), Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 63, getResources().getDisplayMetrics())), 0, 0); // left, top, right, bottom
badgeView.setLayoutParams(relativeParams);
}
On simulator (This is what i want):
And this is on device (it is placing wrong)
How can i fix this?
Also i don't know if this way is best to achive this thing. You can suggest me another way to do this thing. :)
I would suggest using a custom view for your tabs, where you could specify a RelativeLayout containing your tab image, the red notification indicator, and a textview that you could use to set the number inside the notification indicator. Here's one example of a way to use custom layouts for tabs: https://mobikul.com/make-custom-tabs-icons-android/
You can have a horizontal linear layout with tab images acting as tab layout. You can handle each clicks of the added imageviews on their own by getting the viewpager's position or vice versa.
That way .. you get to design any tab layout you want.
Hope that helps
Related
i have problem with FloatingActionButton in RelatieLayout. I use DP for margin top and left. When i change device button is not on it's place. You can see on screens. First one is from editor, second from device.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="3dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:paddingTop="3dp">
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerViewFloor5"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="430dp"
android:layout_marginLeft="300dp"
app:backgroundTint="#color/primaryColor"
android:src="#drawable/ic_action_calendar"
app:fabSize="normal"
android:id="#+id/floorActionButton"/>
</RelativeLayout>
[
I also tried android:gravity="center|bottom" but nothing happens.
I also tried android:gravity="center|bottom" but nothing happens.
Since you are using RelativeLayout - gravity won't work. Instead use android:layout_alignParentBottom along with the margins
<RelativeLayout
....
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_margin="16dp"
app:backgroundTint="#color/primaryColor"
android:src="#drawable/ic_action_calendar"
app:fabSize="normal"
android:id="#+id/floorActionButton"/>
</RelativeLayout>
Try this...Don't use margin to set FloatingActionButton position always use gravity.
Follow this tutorial from androidhive.
https://www.androidhive.info/2015/12/android-material-design-floating-action-button/
I have set layoutgravity but use appropriately according to the parentlayout properties for gravity.
If you follow the tutorial above it will be easy for in my case i placed the fab in a </android.support.design.widget.CoordinatorLayout> and included the layout inside it like in the tutorial.
Just follow it it will be easy just don't use margin to set its position it will break in different screens like your above error .
<android.support.design.widget.FloatingActionButton
android:id="#+id/floorActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#color/primaryColor"
android:src="#drawable/ic_action_calendar"
app:fabSize="normal"/>
I want to align the icons accordingly in my android app in the top bar my top bar has side menu on the left image
It has some empty space after the side menu icon I want to fill that space by arranging the icons accordingly but I don't know how to do that
please help me to avoid that empty space and put the icon in that place
I have also attached image for better view
Thanks
please try to create a custom layout for action bar & inflate it.
You can use setlogo method in toolbar to fill the your desired space
toolbar.setLogo(R.drawable.yourlogo);
or simply set all icon inside your toolbar according to your requirement.
like this
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">
<LinearLayout
android:layout_width="wrap_content"
android:orientation="horizontal"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:layout_width="wrap_content"
android:background="#mipmap/ic_launcher"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
Hope this help!
I create a layout with button, this button have logic and i dont want to integrate it.
So i think like:
When i have button, i need to add a char $, so i create a frameLayout and add here a TextView, i do this, but my TextView is under button, so i didnt see this TextView,
Here is my code:
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true">
<Button
android:id="#+id/button_cash"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:background="#drawable/button_radius"
android:paddingRight="12dp"
android:text="#string/_5000"
android:textColor="#color/white"
android:textSize="14sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:layout_marginRight="14dp"
android:layout_marginTop="15dp"
android:text="#string/dollar_$"
android:textColor="#color/white"
android:textSize="14sp" />
</FrameLayout>
And my question is, how to move item under other item in FrameLayout?
Thanks for advice
This is probably due to the elevation parameter. By default a Button has a non-zero value of elevation while TextView's elevation is 0dp.
Try manipulating elevation (either increase elevation for TextView or decrease elevation for Button) to match your exact case.
I suggest you apply both:
app:elevation="<your_value_in_dp>"
android:elevation="<your_value_in_dp>"
I have 2 layouts in my xml, a CircularImageView and a ImageView, and the ImageView must appear on top of the CircularImageView.
I've tried:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/fragment_kids_register_ll_kid"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/md_white_1000"
android:orientation="horizontal">
<RelativeLayout
android:padding="16dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_toRightOf="#+id/fragment_kids_row_img_kids"
android:layout_marginLeft="-26dp"
android:layout_marginTop="-22dp"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"/>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/fragment_kids_row_tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:textColor="#color/md_black_1000"
android:textSize="24sp" />
<TextView
android:id="#+id/fragment_kids_row_tv_age"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="1 ano e 4 meses"
android:textColor="#808080"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
And it is getting cut off:
I need the image to be shown exactly at that position in the picture, but not "cropped", what I am missing here ?
BTW, this component is part of a RecyclerView row.
EDIT ---
I forgot to mention, the image is just a placeholder to show the Avatar, but the image is dinamically populated !
Thanks !
The padding (16dp) that you are applying to the first relativeLayout makes you think that there is more place and that you can move up the imageView. Actually the margin is like a gap, it doesn't extend your layout.
This is the solution I suggest , using a FrameLayout
<FrameLayout
android:layout_width="100dp"
android:layout_height="100dp">
<com.mikhaellopez.circularimageview.CircularImageView
android:id="#+id/fragment_kids_row_img_kids"
android:layout_gravity = "center"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_boy"
/>
<ImageView
android:id="#+id/fragment_kids_row_iv_crown"
android:layout_width="48dp"
android:layout_height="48dp"
android:src="#drawable/ic_crown"
android:layout_gravity="right|top" />
</FrameLayout>
EDIT : You don't have to use a frameLayout, you can use a relativeLayout if you want to set different margins. The point here is really to make your containing layout bigger so you can place the imageview easily.
If you want one image to be on top of another, why you use android:layout_toRightOf?
Remove it and second image should cover first one.
Also you can try to remove margins at second image and use centerInParent, centerVertically or centerHorizontally.
Or maybe I didn't got all the problem ) then pls provide more details. Thanks.
Have you tried Using an image editor like Paint/Photoshop and merging the two images? Then you can just display one image in your view.
try using a linear layout with the orientation set to vertical.
I am trying to put the zoom controls of the map on the bottom right corner of screen. I could do it with RelativeLayout using both alignParentBottom="true" and alignParentRight="true", but with Framelayout I did not find any such attributes. How do I align it to the bottom-right of screen?
Actually it's possible, despite what's being said in other answers. If you have a FrameLayout, and want to position a child item to the bottom, you can use android:layout_gravity="bottom" and that is going to align that child to the bottom of the FrameLayout.
I know it works because I'm using it. I know is late, but it might come handy to others since this ranks in the top positions on google
I also ran into this situation and figured out how to do it using FrameLayout.
The following output is produced by the code given below.
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/contactbook_icon"
android:layout_gravity="center" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="140"
android:textSize="12dp"
android:textColor="#FFFFFF"
android:layout_gravity="bottom|right"
android:layout_margin="15dp" />
</FrameLayout>
Change the margin value to adjust the text position over the image. Removing margin might make the text to go out of the view sometimes.
It can be achieved using RelativeLayout
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<ImageView
android:src="#drawable/icon"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
Setting android:layout_gravity="bottom|right" worked for me
Two ways to do this:
1) Using a Frame Layout
android:layout_gravity="bottom|right"
2) Using a Relative Layout
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
If you want to try with java code. Here you go -
final LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
LayoutParams.WRAP_CONTENT);
yourView.setLayoutParams(params);
params.gravity = Gravity.BOTTOM; // set gravity
Use bottom|right as the layout_gravity value of the element which you wish to align in the bottom right position of the parent layout.
android:layout_gravity="bottom|right"
you can add an invisible TextView to the FrameLayout.
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:visibility="invisible"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal">
<Button
android:id="#+id/daily_delete_btn"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="DELETE"
android:layout_gravity="center"/>
<Button
android:id="#+id/daily_save_btn"
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_weight="1"
android:text="SAVE"
android:layout_gravity="center"/>
</LinearLayout>
There are many methods to do this using constraint widget of the activity.xml page of android studio.
Two most common methods are:
Select your button view and adjust it's margins.
Go to "All attributes",then to "layout_constraints",then select
layout_constraintBottom_toBottomOf_parent
layout_constraintRight_toRightOf_parent
You can't do it with FrameLayout.
From spec:
http://developer.android.com/reference/android/widget/FrameLayout.html
"FrameLayout is designed to block out an area on the screen to display a single item. You can add multiple children to a FrameLayout, but all children are pegged to the top left of the screen."
Why not to use RelativeLayout?