I want the circular image to be in the centre.
How to have it in the centre of the device?
I don't want to use a relative layout. I have all ready tried that, but it needs a hard coded value for the circle; hence. it won't work on all the devices.
I am trying to achieve it by LinearLayout (using android:layout_weight property)
I have tried android:layout_gravity="center",android:gravity="center"
but the circle still won't make it to the centre.
I have attached the screen for reference
I want the circle to be in parent center
My xml is:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.example.dd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/Button04"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="left1" >
</Button>
<com.example.dd.CircularImageView
android:id="#+id/round"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/buttonarea"
app:border="true"
app:border_color="#323232"
app:border_width="55dp"
app:shadow="true" />
<Button
android:id="#+id/Button08"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="right" >
</Button>
</LinearLayout>
</LinearLayout>
My circular class is:
public class CircularImageView extends ImageView {
private int borderWidth;
private int canvasSize;
private Bitmap image;
private Paint paint;
private Paint paintBorder;
public CircularImageView(final Context context) {
this(context, null);
}
public CircularImageView(Context context, AttributeSet attrs) {
this(context, attrs, R.attr.circularImageViewStyle);
}
public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// init paint
paint = new Paint();
paint.setAntiAlias(true);
paintBorder = new Paint();
paintBorder.setAntiAlias(true);
// load the styled attributes and set their properties
TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0);
if(attributes.getBoolean(R.styleable.CircularImageView_border, true)) {
int defaultBorderSize = (int) (4 * getContext().getResources().getDisplayMetrics().density + 0.5f);
setBorderWidth(attributes.getDimensionPixelOffset(R.styleable.CircularImageView_border_width, defaultBorderSize));
setBorderColor(attributes.getColor(R.styleable.CircularImageView_border_color, Color.WHITE));
}
if(attributes.getBoolean(R.styleable.CircularImageView_shadow, false))
addShadow();
}
public void setBorderWidth(int borderWidth) {
Log.d("TAG","::::::::::::borderWidth"+borderWidth);
this.borderWidth = borderWidth;
this.requestLayout();
this.invalidate();
}
public void setBorderColor(int borderColor) {
if (paintBorder != null)
paintBorder.setColor(borderColor);
this.invalidate();
}
public void addShadow() {
setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
}
#Override
public void onDraw(Canvas canvas) {
// load the bitmap
image = drawableToBitmap(getDrawable());
// init shader
if (image != null) {
canvasSize = canvas.getWidth();
Log.d("TAG","::::::::::::canvasSize"+canvasSize);
if(canvas.getHeight()<canvasSize)
canvasSize = canvas.getHeight();
BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvasSize, canvasSize, false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
paint.setShader(shader);
// circleCenter is the x or y of the view's center
// radius is the radius in pixels of the cirle to be drawn
// paint contains the shader that will texture the shape
int circleCenter = (canvasSize - (borderWidth * 2)) / 2;
canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) + borderWidth - 4.0f, paintBorder);
canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) - 4.0f, paint);
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = measureWidth(widthMeasureSpec);
int height = measureHeight(heightMeasureSpec);
setMeasuredDimension(width, height);
}
private int measureWidth(int measureSpec) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
// The parent has determined an exact size for the child.
result = specSize;
} else if (specMode == MeasureSpec.AT_MOST) {
// The child can be as large as it wants up to the specified size.
result = specSize;
} else {
// The parent has not imposed any constraint on the child.
result = canvasSize;
}
return result;
}
private int measureHeight(int measureSpecHeight) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpecHeight);
int specSize = MeasureSpec.getSize(measureSpecHeight);
if (specMode == MeasureSpec.EXACTLY) {
// We were told how big to be
result = specSize;
} else if (specMode == MeasureSpec.AT_MOST) {
// The child can be as large as it wants up to the specified size.
result = specSize;
} else {
// Measure the text (beware: ascent is a negative number)
result = canvasSize;
}
return (result + 2);
}
public Bitmap drawableToBitmap(Drawable drawable) {
if (drawable == null) {
return null;
} else if (drawable instanceof BitmapDrawable) {
return ((BitmapDrawable) drawable).getBitmap();
}
Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
drawable.draw(canvas);
return bitmap;
}
my attrs.xml goes in values:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircularImageView">
<attr name="border" format="boolean"></attr>
<attr name="border_width" format="dimension"></attr>
<attr name="border_color" format="color"></attr>
<attr name="shadow" format="boolean"></attr>
</declare-styleable>
<declare-styleable name="Theme">
<attr name="circularImageViewStyle" format="reference"></attr>
</declare-styleable>
</resources>
Use some fake layouts and set the visibility to invisible. This should do the trick.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.example.dd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/Button04"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="left1" >
</Button>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical" >
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:text="dummy"
android:visibility="invisible" >
</Button>
<Button
android:id="#+id/round"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#android:drawable/star_on"
app:shadow="true" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:orientation="vertical"
android:text="dummy"
android:visibility="invisible" >
</Button>
</LinearLayout>
<Button
android:id="#+id/Button08"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="right" >
</Button>
</LinearLayout>
</LinearLayout>
try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.example.dd"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_gravity="center"
android:orientation="horizontal" >
<Button
android:id="#+id/Button04"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="left1" >
</Button>
<com.example.dd.CircularImageView
android:id="#+id/round"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#drawable/buttonarea"
android:layout_gravity="center"
app:border="true"
app:border_color="#323232"
app:border_width="55dp"
app:shadow="true" />
<Button
android:id="#+id/Button08"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="right" >
</Button>
</LinearLayout>
Try this:
<com.example.dd.CircularImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/myCircularImageView"
android:src="#drawable/buttonarea"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"/>
One way to do it would be to set your LinearLayout height to match_parent, then set the layout_gravity on the circle to center_vertical.
EDIT: Just tested, this works for me:
<?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="match_parent"
android:layout_gravity="center"
android:orientation="vertical">
<LinearLayout
android:id="#+id/LinearLayout02"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:orientation="horizontal">
<Button
android:id="#+id/Button04"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="left1">
</Button>
<com.example.dd.CircularImageView
android:id="#+id/round"
android:layout_width="fill_parent"
android:layout_gravity="center_vertical"
android:layout_height="wrap_content"
android:background="#android:color/black"
android:layout_weight="1"/>
<Button
android:id="#+id/Button08"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="right">
</Button>
</LinearLayout>
</LinearLayout>
Ignore the background color and missing app: attributes, the general idea stays the same.
Related
I have been looking SO how to make an Image button circular and inside the circle, an image will be shown. But I could not find any helpful sources. I have only 24 hours and my client will check it.
My aim is to create Image Button(black colored circle, see the picture below and an image can be displayed inside it). See image below:
Here is my XML part...the ImageButton is between two comment lines
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backg"
android:orientation="vertical"
android:weightSum="10"
tools:context="sudhirpradhan.example.com.clientpptapp.mainIconFragment">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="5" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="4.5">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!--here is my imageButton need to be look like a circle and within that circle ,a picture will be shown .............. -->
<ImageButton
android:id="#+id/imageButton"
android:layout_width="0dp"
android:padding="10dp"
android:scaleType="fitCenter"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
android:layout_weight="3"
android:background="#drawable/roundbutton"
android:src="#drawable/frontbutton" />
<!-- ..........................................................-->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="0.5" />
</LinearLayout>
here is #drawable/roundbutton xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#50d050"
android:endColor="#008000"
android:angle="270"/>
<stroke android:width="5px"
android:color="#000000"/>
</shape>
How can I implement that..any suggestion and thank you.
NEW EDITION
As per your comments I got a better idea of what you needed so I'll provide here (re-edited) the solution I have for you.
First I extended an ImageView like this:
public class CircleImageView extends AppCompatImageView {
private int borderColor;
private float borderWidth;
public CircleImageView(Context context) {
super(context);
}
public CircleImageView(Context context, AttributeSet attrs) {
super(context, attrs);
parseAttributes(attrs);
}
public CircleImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
parseAttributes(attrs);
}
#Override
protected void onDraw(Canvas canvas) {
Drawable drawable = getDrawable();
if (drawable == null) {
return;
}
if (getWidth() == 0 || getHeight() == 0) {
return;
}
Bitmap b = ((BitmapDrawable) drawable).getBitmap();
if(b == null || b.isRecycled())
return;
Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);
int w = getWidth(), h = getHeight();
int imgRadius = w - 2 * (int)this.borderWidth;
final Paint paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(this.borderColor);
canvas.drawCircle(this.getWidth() / 2,
this.getHeight() / 2,
this.getWidth() / 2, paint);
Bitmap roundBitmap = getRoundedCroppedBitmap(bitmap, imgRadius);
canvas.drawBitmap(roundBitmap, this.borderWidth, this.borderWidth, null);
}
public static Bitmap getRoundedCroppedBitmap(Bitmap bitmap, int radius) {
Bitmap finalBitmap;
if (bitmap.getWidth() != radius || bitmap.getHeight() != radius)
finalBitmap = Bitmap.createScaledBitmap(bitmap, radius, radius,
false);
else
finalBitmap = bitmap;
Bitmap output = Bitmap.createBitmap(finalBitmap.getWidth(),
finalBitmap.getHeight(), Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(output);
final Paint paint = new Paint();
final Rect rect = new Rect(0, 0, finalBitmap.getWidth(),
finalBitmap.getHeight());
paint.setAntiAlias(true);
paint.setFilterBitmap(true);
paint.setDither(true);
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#BAB399"));
canvas.drawCircle(
finalBitmap.getWidth() / 2,
finalBitmap.getHeight() / 2,
finalBitmap.getWidth() / 2,
paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(finalBitmap, rect, rect, paint);
return output;
}
private void parseAttributes(AttributeSet attrs){
TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.CircleImageView);
this.borderColor = ta.getColor(R.styleable.CircleImageView_border_color, 0xffffff); // default color white
this.borderWidth = ta.getDimension(R.styleable.CircleImageView_border_width, 1.0f);
}
}
Then we need to set some styleable attributes for borderColor and borderWidth, place it in res/values/attrs.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CircleImageView">
<attr name="border_color" format="color" />
<attr name="border_width" format="dimension" />
</declare-styleable>
</resources>
Then you can just include it in your layout - it will be like:
<LinearLayout 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="5" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:orientation="horizontal"
android:layout_weight="4.5">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
<!--here is my imageButton need to be look like a circle and within that circle ,a picture will be shown .............. -->
<com.mucodes.roundbuttonexample.CircleImageView
android:layout_width="200dp"
android:layout_height="200dp"
app:border_color="#ffff0000"
app:border_width="7dp"
android:src="#drawable/random"/>
<!-- ..........................................................-->
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="0dp"
android:layout_weight="0.5" />
</LinearLayout>
You can then use the method setOnClickListener to make the CircleImageView act like a button when clicked.
Here is a video of the result: example of using
Hope now this is what you need.
Sorry, can not comment due to a reputation.
Try to take a look at fancy buttons library.
Here you can set a radius to your button, background color, image and so on.
If you can not use third-party libraries - check library's source code, its pretty simple.
I want use ImageView in my project, but it shows additional space in the layout. How can I remove the additional space?
This image shows the problem:
XML code:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="com.tellfa.smsbox.activities.Dialog_image_show">
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/cover_menu_bg" />
</RelativeLayout>
</RelativeLayout>
I don't want use android:scaleType="centerCrop".
Use the imageview like these
<ImageView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/icon"
android:id="#+id/imv"
android:scaleType="fitCenter" />
Try this custom ImageView class
public class ResizableImageView extends ImageView {
public ResizableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){
Drawable d = getDrawable();
if(d!=null){
// ceil not round - avoid thin vertical gaps along the left/right edges
int width = View.MeasureSpec.getSize(widthMeasureSpec);
int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
setMeasuredDimension(width, height);
}else{
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
And use this class as below
<your_package.ResizableImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:src="#drawable/cover_menu_bg" />
For anyone looking for solution for both orientations. Here is my approach with samples:
First, my xml:
<?xml version="1.0" encoding="utf-8"?>
<com.example.michal.fillimageview.CustomLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#f0f000"
android:orientation="vertical">
<com.example.michal.fillimageview.ResizableImageView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:adjustViewBounds="true"
android:src="#drawable/p600_900" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_dark"
android:text="Hello World!"
android:textColor="#android:color/holo_red_dark"
android:textSize="30sp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/background_dark"
android:text="Hello World!"
android:textColor="#android:color/holo_red_dark"
android:textSize="30sp" />
</com.example.michal.fillimageview.CustomLinearLayout>
Class:
public class ResizableImageView extends ImageView {
public ResizableImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
Drawable d = getDrawable();
if (d != null) {
// ceil not round - avoid thin vertical gaps along the left/right edges
int width = View.MeasureSpec.getSize(widthMeasureSpec);
int height = View.MeasureSpec.getSize(heightMeasureSpec);
if (height > width) {//portrait
if (d.getIntrinsicWidth() > d.getIntrinsicHeight()) {
height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
setMeasuredDimension(width, height);
} else {
width = (int) Math.ceil((float) height * (float) d.getIntrinsicWidth() / (float) d.getIntrinsicHeight());
setMeasuredDimension(width, height);
}
} else {//landscape
width = (int) Math.ceil((float) height * (float) d.getIntrinsicWidth() / (float) d.getIntrinsicHeight());
setMeasuredDimension(width, height);
}
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
}
Samples for specific images:
600x900 portrait
600x900 landscape
800x600 portrait
800x600 landscape
I want to create a Photo Gallery with two columns, like shown in the image here
The image must be subsampled and also keep her aspect ratio.
This is the custom transformation that subsamples the image:
public ImageCustomTransformation(Context context, int maxWidth, int maxHeight) {
super(context);
this.maxWidth = maxWidth;
this.maxHeight = maxHeight;
}
#Override
protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
int targetWidth, targetHeight;
double aspectRatio;
if (toTransform.getWidth() > toTransform.getHeight()) {
targetWidth = maxWidth;
aspectRatio = (double) toTransform.getHeight() / (double) toTransform.getWidth();
targetHeight = (int) (targetWidth * aspectRatio);
} else {
targetHeight = maxHeight;
aspectRatio = (double) toTransform.getWidth() / (double) toTransform.getHeight();
targetWidth = (int) (targetHeight * aspectRatio);
}
Bitmap result = Bitmap.createScaledBitmap(toTransform, targetWidth, targetHeight, false);
if (result != toTransform) {
toTransform.recycle();
}
return result;
}
Here is the code for the GridView:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gallery"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#android:color/darker_gray">
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/grid_view_photos"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/set_photo_button"
android:layout_below="#+id/relativeLayout2"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:numColumns="2"
android:horizontalSpacing="10dp"
android:verticalSpacing="10dp" />
<Button
android:id="#+id/set_photo_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:text="Upload Photo" />
</RelativeLayout>
And here is the item for the GridView:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/and`enter code here`roid"
xmlns:cardview="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:layout_marginTop="10dp"
android:background="#android:color/white"
cardview:cardCornerRadius="5dp">
<ImageView
android:id="#+id/image_view_gallery"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:layout_marginTop="5dp"></ImageView>
</android.support.v7.widget.CardView>
To load the images I am using Glide Library, and I pass it the Context and the dimensions to subsample(transform) the images. The result is not the one I imagined.
Can anyone help me figure out how to accomplish the layout from the example image above?
Thanks!
Look for AsymmetricGridView or QuiltViewLibrary, these examples might be useful.
I need to implement a view that looks like this
The hard part is that the sizes and the font sizes of the textviews need to be adaptable to the width and height of the parent view. Here is what I have tried and the result is
The xml file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_width="200dp"
tools:layout_height="100dp"
android:orientation="vertical">
<BuySellView
android:id="#+id/tradeNow_layoutSell"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:background="#color/gray_light_light">
<LinearLayout
android:id="#+id/smallPart1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top|right"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center_vertical">
<ImageView
android:id="#+id/greenArrowSellImg"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/green_arrow"
android:visibility="invisible"
tools:visibility="visible" />
<ImageView
android:id="#+id/redArrowSellImg"
android:layout_width="10dp"
android:layout_height="10dp"
android:src="#drawable/red_arrow"
android:visibility="invisible"
tools:visibility="visible" />
</RelativeLayout>
<TextView
android:id="#+id/smallPart1Txt"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:gravity="top|right"
android:layout_gravity="center_vertical"
android:maxLines="1"
android:text="#string/misc_blank"
android:textColor="#android:color/black"
tools:text="10,015." />
</LinearLayout>
<TextView
android:id="#+id/largePart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:maxLines="1"
android:text="#string/misc_blank"
android:textColor="#android:color/black"
tools:text="46"
android:gravity="center"
tools:textColor="#color/red_sell" />
<TextView
android:id="#+id/smallPart2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:maxLines="1"
android:text="#string/misc_blank"
android:textColor="#android:color/black"
android:gravity="left|center_vertical"
tools:text="8"
tools:textColor="#color/red_sell" />
<TextView
android:id="#+id/trdLbl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:background="#drawable/rounded_corner_sell"
android:text="#string/CommonCapitalSell"
android:textColor="#color/white" />
</BuySellView>
</LinearLayout>
The custom view:
public class BuySellView extends ViewGroup {
private final Rect mTmpChildRect = new Rect();
public BuySellView(Context context) {
super(context);
}
public BuySellView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public BuySellView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
int width = getMeasuredWidth();
int height = getMeasuredHeight();
int t = 10;
int b = 10 + height / 3 * 2;
LinearLayout smallPart1 = (LinearLayout) findViewById(R.id.smallPart1);
smallPart1.layout(0, height / 3, width / 2, b);
smallPart1.setGravity(Gravity.RIGHT);
TextView smallPart1Txt = (TextView) smallPart1.findViewById(R.id.smallPart1Txt);
smallPart1Txt.setTextSize(height / 4 / 2);
TextView largePart = (TextView) findViewById(R.id.largePart);
largePart.setTextSize(height / 3);
largePart.layout(width / 2, 10, b - t + width / 2, b);
TextView smallPart2 = (TextView) findViewById(R.id.smallPart2);
smallPart2.layout(b - t + width / 2, t, width, height / 2);
smallPart2.setTextSize(height / 4 / 2);
TextView tradeLbl = (TextView) findViewById(R.id.trdLbl);
tradeLbl.layout(width / 2 - width / 3 / 2, height / 4 * 3 + 10, width / 2 + width / 3 / 2, height / 4 * 4 + 10);
tradeLbl.setGravity(Gravity.CENTER);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
LinearLayout smallPart1 = (LinearLayout) findViewById(R.id.smallPart1);
TextView largePart = (TextView) findViewById(R.id.largePart);
TextView smallPart2 = (TextView) findViewById(R.id.smallPart2);
TextView tradeLbl = (TextView) findViewById(R.id.trdLbl);
smallPart1.measure(Math.max(smallPart1.getMeasuredWidth(), widthMeasureSpec / 8 * 3), heightMeasureSpec / 4);
largePart.measure(heightMeasureSpec / 4 * 2, heightMeasureSpec / 4 * 2);
smallPart2.measure(Math.max(smallPart2.getMeasuredWidth(), widthMeasureSpec / 8), smallPart2.getMeasuredHeight());
tradeLbl.measure(widthMeasureSpec / 3, heightMeasureSpec / 4);
setMeasuredDimension(widthMeasureSpec, heightMeasureSpec);
}
#Override
public boolean shouldDelayChildPressedState() {
return false;
}
}
try this XML:
<RelativeLayout
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="#+id/small"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0.87"
android:textSize="25sp"
android:layout_alignBottom="#+id/large"
android:paddingBottom="8dp"
android:fontFamily="sans-serif-light"
/>
<TextView
android:id="#+id/large"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/small"
android:text="46"
android:textSize="58sp"
android:textColor="#00DC00"
android:fontFamily="sans-serif-light"
/>
<TextView
android:id="#+id/up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="9"
android:textSize="24sp"
android:layout_alignTop="#+id/large"
android:layout_toRightOf="#+id/large"
android:textColor="#00DC00"
android:fontFamily="sans-serif-light"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="30dp"
android:background="#FF4848"
android:layout_below="#+id/large"
android:layout_alignRight="#+id/large"
android:text="Sell USD"
android:padding="5dp"
android:textColor="#fff"
android:textSize="12sp"
/>
</RelativeLayout>
You can change the textSize based on number of character or width of text via java code.
My XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1" >
<LinearLayout
android:id="#+id/leftLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:id="#+id/firstProblem"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:weightSum="1" >
<com.student.spelling.SpellViewFirst
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#android:color/black" />
<LinearLayout
android:id="#+id/secondProblem"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:weightSum="1" >
<com.student.spelling.SpellViewFirst
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="3dp"
android:layout_height="fill_parent"
android:background="#android:color/black" />
<LinearLayout
android:id="#+id/rightLayout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight=".5"
android:orientation="vertical"
android:weightSum="1" >
<LinearLayout
android:id="#+id/thirdProblem"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:weightSum="1" >
<com.student.spelling.SpellViewFirst
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="3dp"
android:background="#android:color/black" />
<LinearLayout
android:id="#+id/fourthProblem"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight=".5"
android:weightSum="1" >
<com.student.spelling.SpellViewFirst
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
My View Class :
public class SpellViewFirst extends View {
private StartActivity studentActivity;
private int screenWidth;
private int screenHeight;
private Bitmap imageBitmap;
private ArrayList<Character> charList;
List<SpellObjects> spellObjectsList;
private String word;
int placeHolderHeight;
private ArrayList<Integer> dragable_id_object_list;
private Bitmap placeHolderBitmap;
Point placeHolderPoints;
Point alphabetPoints;
private int indexOfCurrentObject;
private int offsetX;
private int offsetY;
public SpellViewFirst(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
studentActivity = (StartActivity)context;
}
#Override
protected void onSizeChanged(int width, int height, int oldwidth, int oldheight) {
// TODO Auto-generated method stub
super.onSizeChanged(width, height, oldwidth, oldheight);
screenWidth = width;
screenHeight = height;
assignCoordinatesToImages();
}
private void assignCoordinatesToImages() {
// TODO Auto-generated method stub
Bitmap bm=BitmapFactory.decodeFile("/mnt/sdcard/resources/images/spelling/ques.png");
dragable_id_object_list=new ArrayList<Integer>() ;
spellObjectsList=new ArrayList<SpellObjects>();
SpellObjects curentObjects;
placeHolderHeight=bm.getHeight();
word=studentActivity.correctWordsArray[0];
imageBitmap=BitmapFactory.decodeFile("/mnt/sdcard/resources/images/spelling/"+word+".png");
placeHolderBitmap=Bitmap.createScaledBitmap(bm, screenWidth/word.length(), screenWidth/word.length(),true);
charList=new ArrayList<Character>();
placeHolderPoints=new Point();
for (int i = 0; i < word.length(); i++) {
charList.add(word.charAt(i));
}
for (int i = 0; i < charList.size(); i++) {
placeHolderPoints.y=screenHeight/2;
curentObjects=new SpellObjects(placeHolderPoints, placeHolderBitmap, -1,charList.get(i), null, placeHolderBitmap.getHeight(), screenWidth/word.length(), true);
placeHolderPoints.x=placeHolderPoints.x+screenWidth/word.length();
spellObjectsList.add(curentObjects);
}
Collections.shuffle(charList);
alphabetPoints=new Point();
alphabetPoints.x=imageBitmap.getWidth();
for (int i = 0; i < charList.size(); i++) {
Bitmap bitmap= BitmapFactory.decodeFile("/mnt/sdcard/resources/images/spelling/"+charList.get(i)+".png");
curentObjects=new SpellObjects(alphabetPoints,bitmap, i,charList.get(i), null, placeHolderBitmap.getHeight(), screenWidth/word.length(), true);
alphabetPoints.x=alphabetPoints.x+bitmap.getWidth();
spellObjectsList.add(curentObjects);
dragable_id_object_list.add(i, i);
}
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawBitmap(imageBitmap, 0, 0, null);
for(SpellObjects currentObjects :spellObjectsList ){
if(currentObjects.getIsCorrectlyPlaced())
canvas.drawBitmap(currentObjects.getobjectBitmap(), currentObjects.getCurrentPoint().x,currentObjects.getCurrentPoint().y, null);
}
}
}
I want to render like cake,duck and good in other three quadrants.Actually this is spelling app for kids where they can drag and drop alphabets to respective positions.Please help me out I am stuck.
I want to render like cake,duck and good in other three quadrants.
To set different images for your custom View you'll need to add a custom attribute for your custom layout to signal the desired image(or an id, or something to uniquely identify the view). Something like this(in attr.xml):
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CustomAttr">
<attr name="pictureName" format="string" />
</declare-styleable>
</resources>
This attribute will be used in the layout like this:
<com.student.spelling.SpellViewFirst
android:layout_width="match_parent"
android:layout_height="match_parent"
newtag:pictureName="one_of_your_picture_names_here"/>
Don't forget to set the newtag namespace in the root of your xml layout:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:newtag="http://schemas.android.com/apk/res/your.package.here"
// ...
Then you'll use that attribute to make the SpellViewFirst use the targeted image:
public SpellViewFirst(Context context, AttributeSet attrs) {
super(context, attrs);
studentActivity = (StartActivity)context;
if (attrs != null) {
TypedArray ta = context.obtainStyledAttributes(attrs,
R.styleable.CustomAttr, 0, 0);
word = ta.getString();// this is what you use to get the picture name, right?
ta.recycle();
}
}
Then you could use the word variable to get the desired Bitmap in assignCoordinatesToImages(). Don't forget to test word for null(meaning a picture name wasn't set in the layout) and show a default image instead.