I've been having some problems with this particular layout for the better part of an hour, and I can't seem to get it to layout as expected. I've done the usual googling around this sort of format for the tab, and nothing seems to be exactly what I'm after.
I have a TabLayout where the tabs are laid out vertically, with an ImageView and a TextView using the default View of the tab.
It looks like this:
Ideally all I want to be able to do is to mimic this layout and anchor a TextView as a badge counter to the top right of the icon.
Like this:
So with that in mind I found a decent approximation of how the default tab layouts actually appear and it used the default ID's so I don't have to assign them programmatically which I thought was pretty nifty:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp">
<ImageView
android:id="#android:id/icon"
android:layout_gravity="center"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside" />
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2" />
</LinearLayout>
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:minWidth="20dp"
android:textAlignment="center"
android:background="#drawable/count_background"
android:textSize="15sp" />
</RelativeLayout>
After a lot of tinkering and trying different things, I got to this:
<?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:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/iconFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="2dp"
android:layout_centerHorizontal="true"
android:layout_above="#android:id/text1">
<ImageView
android:id="#android:id/icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside"
android:src="#drawable/tab_home" />
</FrameLayout>
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2"
android:text="Home"
android:layout_marginBottom="7dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:minWidth="20dp"
android:layout_toRightOf="#+id/iconFrame"
android:textColor="#color/FeatureFontColour"
android:textAlignment="center"
android:background="#drawable/count_background"
android:textSize="15sp"
android:layout_alignTop="#+id/iconFrame" />
</RelativeLayout>
No matter what I try, I can't get the badge TextView to appear in the right place, I've tried removing the linear layout so that I can set it to Layout_RightOf the #android:id/icon, I've tried wrapping the icon in a frame and setting Layout_RightOf that instead just incase the icon was not positioned before the badge TextView was created etc.
This is as close as I can get (Spoiler, not that close):
Any help would be appreciated, I'm not sure what exactly I'm missing, but odds are it's something really obvious.
Try this:
<?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:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp"
android:clipChildren="false"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/iconFrame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp"
android:clipToPadding="false"
android:layout_marginBottom="2dp"
android:layout_centerHorizontal="true"
android:clipChildren="false"
android:layout_above="#android:id/text1">
<ImageView
android:id="#android:id/icon"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside"
android:src="#drawable/tab_home" />
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:minWidth="20dp"
android:textColor="#color/FeatureFontColour"
android:textAlignment="center"
android:background="#drawable/count_background"
android:layout_gravity="right"
android:layout_marginRight="-10dp"
android:layout_marginTop="-10dp"
android:textSize="15sp"/>
</FrameLayout>
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2"
android:text="Home"
android:layout_marginBottom="7dp"
android:layout_centerHorizontal="true"
android:layout_alignParentBottom="true" />
</RelativeLayout>
You can play with the margin right/top values to fine tune it.
Creating a layer drawable to display menu item on layer one and badge on top of it
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="#drawable/ic_cart"
android:gravity="center" />
<item
android:id="#+id/ic_badge"
android:drawable="#drawable/ic_cart" />
</layer-list>
Creating menu for our activity to display the count on the menu items.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.example.mobikul.MainActivity" >
<item
android:id="#+id/action_cart"
android:icon="#drawable/ic_menu_cart"
android:title="#string/action_cart"
app:showAsAction="always" />
Creating a flexible and efficient custom BagdeDrawable class to draw a view that looks like a count
public class BadgeDrawable extends Drawable {
private Paint mBadgePaint;
private Paint mBadgePaint1;
private Paint mTextPaint;
private Rect mTxtRect = new Rect();
private String mCount = "";
private boolean mWillDraw;
public BadgeDrawable(Context context) {
float mTextSize = context.getResources().getDimension(R.dimen.badge_text_size);
mBadgePaint = new Paint();
mBadgePaint.setColor(Color.RED);
mBadgePaint.setAntiAlias(true);
mBadgePaint.setStyle(Paint.Style.FILL);
mBadgePaint1 = new Paint();
mBadgePaint1.setColor(ContextCompat.getColor(context.getApplicationContext(), R.color.grey_ivory5));
mBadgePaint1.setAntiAlias(true);
mBadgePaint1.setStyle(Paint.Style.FILL);
mTextPaint = new Paint();
mTextPaint.setColor(Color.WHITE);
mTextPaint.setTypeface(Typeface.DEFAULT);
mTextPaint.setTextSize(mTextSize);
mTextPaint.setAntiAlias(true);
mTextPaint.setTextAlign(Paint.Align.CENTER);
}
#Override
public void draw(Canvas canvas) {
if (!mWillDraw) {
return;
}
Rect bounds = getBounds();
float width = bounds.right - bounds.left;
float height = bounds.bottom - bounds.top;
// Position the badge in the top-right quadrant of the icon.
/*Using Math.max rather than Math.min */
float radius = ((Math.max(width, height) / 2)) / 2;
float centerX = (width - radius - 1) +5;
float centerY = radius -5;
if(mCount.length() <= 2){
// Draw badge circle.
canvas.drawCircle(centerX, centerY, (int)(radius+7.5), mBadgePaint1);
canvas.drawCircle(centerX, centerY, (int)(radius+5.5), mBadgePaint);
}
else{
canvas.drawCircle(centerX, centerY, (int)(radius+8.5), mBadgePaint1);
canvas.drawCircle(centerX, centerY, (int)(radius+6.5), mBadgePaint);
}
mTextPaint.getTextBounds(mCount, 0, mCount.length(), mTxtRect);
float textHeight = mTxtRect.bottom - mTxtRect.top;
float textY = centerY + (textHeight / 2f);
if(mCount.length() > 2)
canvas.drawText("99+", centerX, textY, mTextPaint);
else
canvas.drawText(mCount, centerX, textY, mTextPaint);
}
/*
Sets the count (i.e notifications) to display.
*/
public void setCount(String count) {
mCount = count;
// Only draw a badge if there are notifications.
mWillDraw = !count.equalsIgnoreCase("0");
invalidateSelf();
}
#Override
public void setAlpha(int alpha) {
// do nothing
}
#Override
public void setColorFilter(ColorFilter cf) {
// do nothing
}
#Override
public int getOpacity() {
return PixelFormat.UNKNOWN;
}
}
for more referance visit this websitevisit here
The thing you missed here is as follows,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:id="#+id/lnrButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_marginBottom="4dp"
android:layout_marginTop="4dp">
<ImageView
android:id="#android:id/icon"
android:layout_gravity="center"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="centerInside" />
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#drawable/tab_selector"
android:ellipsize="end"
android:textAllCaps="true"
android:gravity="center"
android:maxLines="2" />
</LinearLayout>
<TextView
android:id="#+id/badgeCounter"
android:layout_width="wrap_content"
android:layout_height="20dp"
android:alignRight = "#+id/lnrButton"
android:alignTop = "#+id/lnrButton"
android:minWidth="20dp"
android:textAlignment="center"
android:background="#drawable/count_background"
android:textSize="15sp" />
</RelativeLayout>
Following is you missed
android:alignRight = "#+id/lnrButton"
android:alignTop = "#+id/lnrButton"
or if you want to come the badge on the image means, remove all LinearLayout and make it Relativelaout and instead of lnrButton use imageview id
Related
I'm trying to implement and expandable CardView, but I'm having proplems
heres my xml file for the cardview:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:layout_marginTop="8dp"
android:clickable="true"
android:elevation="5dp"
android:foreground="?android:attr/selectableItemBackground"
android:orientation="vertical"
android:stateListAnimator="#drawable/cardview_lift_on_touch">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/product_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#drawable/default_network_image"/>
<TextView
android:id="#+id/product_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingTop="24dp"
android:text="Product Name"
android:textColor="#000000"
android:textSize="24dp"
android:textStyle="bold" />
<TextView
android:id="#+id/product_description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="16dp"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:text="A buyer persona is an imaginary customer. It is the person for whom you've developed your product and to whom you'd love to sell it (of course!). He or she represents your target audience, but is much more real than a vague description of some demographics."
android:textColor="#000000"
android:textSize="14dp"
android:visibility="visible" />
<TextView
android:id="#+id/product_url"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="24dp"
android:paddingLeft="16dp"
android:text="example.syriatel.sy/akrab_eleik"
android:textColor="#0048ff"
android:textSize="14dp" />
</LinearLayout>
</android.support.v7.widget.CardView>
I'm trying to expand the "product description" TextView when the CardView is clicked by passing it to the following method:
public static void expand(final View v) {
final int initialHeight = v.getHeight();
v.measure(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
final int targetHeight = v.getMeasuredHeight();
v.getLayoutParams().height = 1;
v.setVisibility(View.VISIBLE);
Animation a = new Animation() {
#Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
v.getLayoutParams().height = interpolatedTime == 1
? LinearLayout.LayoutParams.WRAP_CONTENT
: (int) (targetHeight * interpolatedTime);
v.requestLayout();
}
#Override
public boolean willChangeBounds() {
return true;
}
};
// 1dp/ms
a.setDuration((int) ((initialHeight / v.getContext().getResources().getDisplayMetrics().density))/10);
v.startAnimation(a);
}
The resulting animation is initially smooth but suddenly expands the view to full hight at the end
I got the code I'm using from this answer:
https://stackoverflow.com/a/13381228/5716823
Reading the comments didn't help.
I have few TextViews with drawable icons on left side.
layout:
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/card_margin">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/detail_padding">
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_location"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_location" />
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_status"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_status"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_description"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_description"/>
</LinearLayout>
</android.support.v7.widget.CardView>
Screenshot:
If the text is too big, icon stand in the center of textview. I want to set icon aligned top of textview. Is it possible?
You must keep the layout as RelativeLayout
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/card_margin">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/detail_padding">
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_location"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_location" />
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_status"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_status"/>
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_description"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_description"/>
</RelativeLayout>
</android.support.v7.widget.CardView>
You can set
android:layout_toRightOf="#+id/imageId"
on the textview, and
android:layout_alignParentLeft="true"
on the image.
hope this helps.
Just use ImageView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="#dimen/detail_padding">
<TextView
android:id="#+id/location"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_location"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_location" />
<TextView
android:id="#+id/status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin"
android:drawableLeft="#drawable/ic_status"
android:drawablePadding="#dimen/drawable_padding"
android:drawableStart="#drawable/ic_status" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="#dimen/drawable_padding"
android:src="#drawable/ic_description" />
<TextView
android:id="#+id/description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/title_margin" />
</LinearLayout>
</LinearLayout>
For doing this you will have to create a custom Drawable that wraps your Drawable, and then manipulate the drawing of your custom Drawable by overriding the method onDraw(Canvas).
There is a sample below. This aligns the image to the top, but you can also make it align to the bottom, left or right of the TextView by implementing the required logic in the onDraw(Canvas)-method. You might also want to build in a margin in the onDraw(Canvas), to make your design implementation pixel perfect.
Sample usage:
GravityTopDrawable gravityDrawable = new GravityTopDrawable(innerDrawable);
// NOTE: next 2 lines are important!
innerDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
gravityDrawable.setBounds(0, 0, innerDrawable.getIntrinsicWidth(), innerDrawable.getIntrinsicHeight());
mTextView.setCompoundDrawables(gravityDrawable, null, null, null);
Sample code:
public class GravityTopDrawable extends Drawable {
// inner Drawable
private final Drawable mDrawable;
public GravityTopDrawable(Drawable drawable) {
mDrawable = drawable;
}
#Override
public int getIntrinsicWidth() {
return mDrawable.getIntrinsicWidth();
}
#Override
public int getIntrinsicHeight() {
return mDrawable.getIntrinsicHeight();
}
#Override
public void draw(Canvas canvas) {
int halfCanvas= canvas.getHeight() / 2;
int halfDrawable = mDrawable.getIntrinsicHeight() / 2;
// align to top
canvas.save();
canvas.translate(0, -halfCanvas + halfDrawable);
mDrawable.draw(canvas);
canvas.restore();
}
}
I have a fragment with an card view and when I try to add a FloatingActionButton thats cause the animation to fail.. The view just appear without an animation.. The Width and Height and radius is all correct but the animation dosen't run. This just occur the first time that the animation runs.. I use a regular Close button for this release..
CODE
public static void ToogleView(View myView, bool show, Func<int> param = null) {
// get the center for the clipping circle
int cx = myView.Width / 2;
int cy = myView.Height / 2;
// get the final radius for the clipping circle
float finalRadius = (float) Math.Sqrt(cx * cx + cy * cy);
// create the animator for this view (the start radius is zero)
Animator anim;
if (show) {
anim = ViewAnimationUtils.CreateCircularReveal (myView, cx, cy, 0, finalRadius);
} else {
anim = ViewAnimationUtils.CreateCircularReveal (myView, cx, cy, finalRadius, 0);
}
anim.SetDuration (500);
anim.AnimationEnd += (object sender, EventArgs e) => {
if(param != null) {
param();
}
if(!show) {
myView.Visibility = ViewStates.Invisible;
}
};
// make the view visible and start the animation
myView.Visibility = ViewStates.Visible;
anim.Start();
}
XML
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:id="#+id/mapFragmentRoot"
android:visibility="invisible"
android:layout_height="match_parent">
<android.support.v7.widget.CardView
card_view:cardElevation="4dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="35dp"
android:id="#+id/header"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="30dp"
card_view:cardBackgroundColor="#android:color/white"
card_view:cardCornerRadius="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_weight="0.5"
android:background="#android:color/darker_gray"
android:layout_height="0dp">
<RelativeLayout
android:id="#+id/mapFragmentMapCointatiner"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
style="#style/Widget.AppCompat.ProgressBar"
android:layout_width="wrap_content"
android:layout_centerInParent="true"
android:layout_height="wrap_content" />
<TextView
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:textColor="#android:color/white"
android:text="Hämtar närmaste hållplatser"
android:layout_centerInParent="true"
android:paddingTop="60dp"
android:background="#android:color/transparent" />
</RelativeLayout>
</LinearLayout>
<LinearLayout
android:layout_weight="0.5"
android:layout_width="match_parent"
android:layout_height="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:layout_centerInParent="true"
style="#style/Widget.AppCompat.ProgressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>
<!--android.support.design.widget.FloatingActionButton
android:id="#+id/MapFragmentfabClose"
android:elevation="12dp"
card_view:backgroundTint="#android:color/holo_red_dark"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|right"
android:layout_marginTop="5dp"
android:layout_marginRight="5dp"
android:src="#drawable/ic_close_white_48dp"
card_view:layout_anchor="#id/header"
card_view:layout_anchorGravity="top|right|end" /-->
</FrameLayout>
I want to create a custom view like this.
I tried the following
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical" >
<ImageView
android:id="#+id/customView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/sample_image" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|top"
android:text="Button" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|bottom"
android:text="Button" />
</FrameLayout>
How can i create a view like this? How can i place buttons over imageview like this?
Thanks in Advance
you can try to use relative layout to do this,
for btn1;
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
for btn1;
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
[EDIT 1]
to give space for button use margin, android:layout_margin="20dp"
Example layout
<RelativeLayout android:layout_width="300dp"
android:layout_height="300dp">
<ImageView
android:id="#+id/img"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#ffaadd"
android:layout_margin="20dp" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="btn1" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:text="btn2" />
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_weight="1"
android:padding="60dp"
android:src="#drawable/abs__ab_stacked_solid_dark_holo" />
<Button
android:id="#+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/button1"
android:layout_alignBottom="#+id/button1"
android:layout_alignParentLeft="true"
android:layout_marginLeft="30dp"
android:background="#drawable/ic_launcher" />
<Button
android:id="#+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="32dp"
android:layout_marginTop="102dp"
android:background="#drawable/ic_launcher" />
</RelativeLayout>
Use a RelativeLayout. This will allow you to have different Views overlap on the screen.
Here is a tutorial I always use http://www.learn-android.com/2010/01/05/android-layout-tutorial/
You should find what you need. It is good explained, so you shouldn't have any problems.
This solved for me
<?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/RelativeLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="horizontal" >
<ImageView
android:id="#+id/img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src = "#drawable/basic"
android:layout_alignParentTop="true"
android:layout_alignRight="#+id/button1"
android:layout_alignEnd="#+id/button1" />
<ImageButton
android:id="#+id/button1"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:text="btn1"
android:background="#drawable/ic_cancel_black"/>
</RelativeLayout>
This is my solution programatically, for diferent size of devices.
I have three buttons that i have to positioning in the right place of an image 1080x1920
on positions (157,927), 387,927), (617,927)
final ImageView iv = (ImageView)findViewById( R.id.imageView );
iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
public void onGlobalLayout() {
// Once data has been obtained, this listener is no longer needed, so remove it...
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
} else {
iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
}
RectF bounds = new RectF();
Drawable drawable = iv.getDrawable();
if (drawable != null) {
iv.getImageMatrix().mapRect(bounds, new RectF(drawable.getBounds()));
}
float x = bounds.left;
float y = bounds.top;
float new_width = bounds.right - x;
float new_height = bounds.bottom - y;
int original_width = 1080;
int original_height = 1920;
int x1 = (int) (x + (new_width*157/original_width));
int x2 = (int) (x + (new_width*387/original_width));
int x3 = (int) (x + (new_width*617/original_width));
int newY = (int) (y + (new_height*927/original_height));
enroll.setX(x1);
ccfront.setX(x2);
verify.setX(x3);
enroll.setY(newY);
ccfront.setY(newY);
verify.setY(newY);
}
});
I want to create a notepad. I am referring to sample notepad that provided by android sdk. My problem is I failed to draw multiple lines on editText. I am successfully run the program but there is nothing shows on the editText and even worse I couldn't input a word onto it. Here is my code. Thank you for helping.
On view, I have double confirm with my class path.So, I don't think there is any problem with my class path.
<?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">
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/layouteditbottom"
android:layout_alignParentBottom="true"
android:paddingBottom="18dp"
/>
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:layout_above="#+id/layouteditbottom">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/title"
android:id="#+id/title_text1" />
<EditText android:id="#+id/title"
android:layout_toRightOf="#+id/title_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:imeOptions="actionNext"
android:textSize="18sp"/>
<View xmlns:android="http://schemas.android.com/apk/res/android"
class="com.example.apps2.MainActivity$LineEditText"
android:id="#+id/body"
android:layout_below="#+id/title"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:padding="5dp"
android:scrollbars="vertical"
android:fadingEdge="vertical"
android:gravity="top"
android:textSize="22sp"
android:capitalize="sentences"/>
</RelativeLayout>
</RelativeLayout>
Code below is java.
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public static class LineEditText extends EditText{
// we need this constructor for LayoutInflater
public LineEditText(Context context, AttributeSet attrs) {
super(context, attrs);
mRect = new Rect();
mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
mPaint.setColor(Color.BLUE);
}
private Rect mRect;
private Paint mPaint;
#Override
protected void onDraw(Canvas canvas) {
//int count = getLineCount();
int height = getHeight();
int line_height = getLineHeight();
int count = height / line_height;
if (getLineCount() > count)
count = getLineCount();//for long text with scrolling
Rect r = mRect;
Paint paint = mPaint;
int baseline = getLineBounds(0, r);//first line
for (int i = 0; i < count; i++) {
canvas.drawLine(r.left, baseline + 1, r.right, baseline + 1, paint);
baseline += getLineHeight();//next line
}
super.onDraw(canvas);
}
}
}
Just add a background image to your editText having the lines on it.
Edit
Create yourself a bitmap drawable with tileMode set to repeat, like so:
<?xml version="1.0" encoding="utf-8"?>
<bitmap
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#[package:]drawable/drawable_resource"
android:tileMode="repeat" />
For android:src specify an image with a line and some space that matches the height of one line of text (depending on your font-size).
Thank you for everyone who answered. I solved it by replacing the view from the outermost relativeLayout to the inner relativeLayout. Following code is the answer.
<?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">
<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:id="#+id/layouteditbottom"
android:layout_alignParentBottom="true"
android:paddingBottom="18dp"
/>
<RelativeLayout
android:id="#+id/toplayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="5dp"
android:paddingTop="5dp"
android:layout_alignParentTop="true">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="#string/title"
android:id="#+id/title_text1" />
<EditText android:id="#+id/title"
android:layout_toRightOf="#+id/title_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:imeOptions="actionNext"
android:textSize="18sp"/>
<TextView
android:id="#+id/notelist_date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:paddingRight="10sp"
android:textSize="18sp" />
</RelativeLayout>
<view
xmlns:android="http://schemas.android.com/apk/res/android"
class="com.example.note1.NoteEdit$LineEditText"
android:id="#+id/body"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/layouteditbottom"
android:layout_below="#+id/toplayout"
android:background="#android:color/transparent"
android:capitalize="sentences"
android:fadingEdge="vertical"
android:gravity="top"
android:padding="5dp"
android:scrollbars="vertical"
android:textSize="22sp" />
</RelativeLayout>
Use android:lines="2" for fixing multilines and for fixing single line use android:singleLine="true" In your XML you have used single line remove that and use as shown in example.
Change your edittext as shown below
<EditText android:id="#+id/title"
android:layout_toRightOf="#+id/title_text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
//android:singleLine="true"
android:lines="2"// fix the multiline limit 2,3,4,5,6,7.....
android:imeOptions="actionNext"
android:textSize="18sp"/>