I am building an qr scanner in Android Studio and using cameraX Api and for preview using TextureView.
In layout i want shadow over textureview like in most qr scanner Apps.
my current screen is
my screen
and i want something like
phonepe qr
so how do i add overlay around the focus area.is it possible in layout or i have to use CustomView.
my current layout is
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorGrey">
<TextureView
android:id="#+id/texture_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constraintTop_toTopOf="#+id/included"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>
<include
android:id="#+id/included"
layout="#layout/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<View
android:id="#+id/texture_view_border"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/scanner_border"
app:layout_constraintBottom_toTopOf="#id/guideline_horizontal_mid"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#id/guideline_vertcal_right"
app:layout_constraintStart_toEndOf="#id/guideline_vertcal_left"
app:layout_constraintTop_toBottomOf="#id/guideline_horizontal_up" />
<TextView
android:id="#+id/qr_code_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Scan QR code"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/colorWhite"
app:layout_constraintStart_toStartOf="#id/guideline_vertcal_left"
app:layout_constraintEnd_toEndOf="#id/guideline_vertcal_right"
app:layout_constraintTop_toBottomOf="#id/texture_view_border"
/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.90" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.20" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_mid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.80" />
<View
android:id="#+id/scanner_bar"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/colorLoginPrimary"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintEnd_toEndOf="#id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#+id/texture_view_border" />
<View
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintEnd_toEndOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintEnd_toEndOf="#+id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
<View
android:id="#+id/view"
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimaryDark"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border" />
<View
android:layout_width="30dp"
android:layout_height="5dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintEnd_toEndOf="#+id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintBottom_toBottomOf="#+id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border" />
<View
android:layout_width="5dp"
android:layout_height="30dp"
android:background="#color/colorLoginPrimary"
app:layout_constraintBottom_toBottomOf="#+id/texture_view_border"
app:layout_constraintEnd_toEndOf="#id/texture_view_border" />
</androidx.constraintlayout.widget.ConstraintLayout>
So i came up with this soution:
i added a custom layout class as follows
public class CircleOverlayView extends LinearLayout{
private Bitmap bitmap;
public CircleOverlayView(Context context) {
super(context);
}
public CircleOverlayView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CircleOverlayView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CircleOverlayView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
#Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
if (bitmap == null) {
createWindowFrame();
}
canvas.drawBitmap(bitmap, 0, 0, null);
}
protected void createWindowFrame() {
bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
Canvas osCanvas = new Canvas(bitmap);
RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());
RectF innerRectangle = new RectF(getWidth() * .10f, getHeight() * .20f, getWidth() * .90f, getHeight() * .70f);
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(getResources().getColor(R.color.colorBlack));
paint.setAlpha(150);
osCanvas.drawRect(outerRectangle, paint);
paint.setColor(Color.TRANSPARENT);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
//osCanvas.drawRect(innerRectangle,paint);
osCanvas.drawRoundRect(innerRectangle, 45, 45, paint);
/* paint.setColor(Color.TRANSPARENT);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
float centerX = getWidth() / 2;
float centerY = getHeight() / 2;
float radius = getResources().getDimensionPixelSize(R.dimen.fab_margin);
osCanvas.drawCircle(centerX, centerY, radius, paint);*/
}
#Override
public boolean isInEditMode() {
return true;
}
#Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
bitmap = null;
}}
then in my layout added it over textureView
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<include
android:id="#+id/included"
layout="#layout/custom_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextureView
android:id="#+id/texture_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/included" />
<com.example.studentapp.utils.CircleOverlayView
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#id/texture_view" />
<View
android:id="#+id/texture_view_border"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#drawable/scanner_border"
app:layout_constraintBottom_toTopOf="#id/guideline_horizontal_mid"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintEnd_toStartOf="#id/guideline_vertcal_right"
app:layout_constraintStart_toEndOf="#id/guideline_vertcal_left"
app:layout_constraintTop_toBottomOf="#id/guideline_horizontal_up" />
<TextView
android:id="#+id/qr_code_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="Scan QR code"
android:textAppearance="#style/TextAppearance.AppCompat.Medium"
android:textColor="#color/colorWhite"
app:layout_constraintBottom_toTopOf="#id/guideline_horizontal_mid"
app:layout_constraintEnd_toEndOf="#id/guideline_vertcal_right"
app:layout_constraintStart_toStartOf="#id/guideline_vertcal_left" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.1" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_vertcal_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.90" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.20" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline_horizontal_mid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.80" />
<View
android:id="#+id/scanner_bar"
android:layout_width="0dp"
android:layout_height="2dp"
android:background="#color/colorLoginPrimary"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#id/texture_view_border"
app:layout_constraintEnd_toEndOf="#id/texture_view_border"
app:layout_constraintStart_toStartOf="#id/texture_view_border"
app:layout_constraintTop_toTopOf="#id/texture_view_border" />
</androidx.constraintlayout.widget.ConstraintLayout>
so by above i was able to get phonepe like qr scanner by adding custom overlay over textureview.
Related
I did a custom button class for making square buttons. Buttons works fine in Nougat, but not showing in Lollipop and marshmallow. What is wrong with my code?
Java class:
public class SquareButton extends ToggleButton {
public SquareButton(Context context) {
super(context);
}
public SquareButton(Context context, AttributeSet attrs) {
super(context, attrs);
}
public SquareButton(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
int size = width > height ? height : width;
setMeasuredDimension(size, size);
}
}
XML:
<android.support.constraint.ConstraintLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="ru.energyhouse.energyhouse.presenter.Light.MainMenuLightFragment"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:id="#+id/main_menu_light_icon_IV"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:scaleType="fitCenter"
app:layout_constraintBottom_toTopOf="#+id/guideline11"
app:layout_constraintHorizontal_bias="0.503"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline9"
app:srcCompat="#drawable/light_lightoff_big_ic" />
<TextView
android:id="#+id/main_menu_light_icon_TV"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="8dp"
android:gravity="center"
android:textAppearance="#style/TextAppearance.AppCompat.Large"
android:textColor="#color/colorPrimary"
app:layout_constraintLeft_toLeftOf="#+id/main_menu_light_icon_IV"
app:layout_constraintRight_toRightOf="#+id/main_menu_light_icon_IV"
app:layout_constraintTop_toTopOf="#+id/guideline11"
app:layout_constraintHorizontal_bias="0.5" />
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/guideline9"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.1" />
<android.support.constraint.Guideline
android:id="#+id/guideline11"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.25" />
<HorizontalScrollView
android:id="#+id/main_menu_light_scroll"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="16dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginTop="16dp"
android:overScrollMode="never"
android:scrollbars="none"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/main_menu_light_icon_TV"
app:layout_constraintVertical_bias="0.0">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="2">
<LinearLayout
android:id="#+id/main_menu_light_firstRow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal">
<ru.energyhouse.energyhouse.model.SquareButton
android:id="#+id/main_menu_light_bright_Btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/scenes_click"
android:paddingTop="45dp"
android:textOff="#null"
android:textOn="#null" />
<ru.energyhouse.energyhouse.model.SquareButton
android:id="#+id/main_menu_light_soft_Btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/scenes_click"
android:paddingTop="45dp"
android:textOff="#null"
android:textOn="#null" />
<ru.energyhouse.energyhouse.model.SquareButton
android:id="#+id/main_menu_light_manual_Btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/scenes_click"
android:paddingTop="45dp"
android:textOff="#null"
android:textOn="#null" />
<ru.energyhouse.energyhouse.model.SquareButton
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="24dp"
android:layout_weight="1"
android:background="#drawable/scenes_click"
android:paddingTop="45dp"
android:textOff="#null"
android:textOn="#null" />
</LinearLayout>
<LinearLayout
android:id="#+id/main_menu_light_secondRow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="horizontal">
<ru.energyhouse.energyhouse.model.SquareButton
android:id="#+id/main_menu_light_allOff_Btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/scenes_click"
android:layout_weight="1"
android:text="#null"
android:textOff="#null"
android:textOn="#null" />
<ru.energyhouse.energyhouse.model.SquareButton
android:id="#+id/main_menu_light_backLight_Btn"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="#drawable/scenes_click"
android:layout_weight="1"
android:text="#null"
android:textOff="#null"
android:textOn="#null" />
</LinearLayout>
</LinearLayout>
</HorizontalScrollView>
</android.support.constraint.ConstraintLayout>
Nougat: enter image description here
Lollipop: enter image description here
UPD.
if set width 200dp - it works. I need width like height and height - match_parent.
Try to change onMeasure method to following:
#Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int size = widthMeasureSpec > heightMeasureSpec ? heightMeasureSpec : widthMeasureSpec;
super.onMeasure(size, size);
}
You could use simple button with buttonshape.xml as background of Button
<Button
android:text="Button"
android:textColor="#FFFFFF"
android:textSize="30sp"
android:layout_width="200dp"
android:layout_height="200dp"
android:background="#drawable/buttonshape"
/>
paste this code in drawables as buttonshape.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="20dp"
/>
<solid
android:color="#FFFFF"
/>
<size
android:width="200dp"
android:height="200dp"
/>
</shape>
Hi i was trying to make something like this through xml code in android studio but can't figure out how although i partially reached there but feels i am not using correct approach can someone please tell me how exactly i can make this layout through xml or java.
<?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:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="2dp"
tools:context="com.stocks.android.gridview.MainActivity">
<LinearLayout
android:id="#+id/linear_one"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="280dp"
android:layout_height="200dp"
android:layout_marginRight="5dp"
android:layout_weight="40"
app:cardBackgroundColor="#BCE36E"
app:cardCornerRadius="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img1" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="60"
app:cardBackgroundColor="#8BD3FB"
app:cardCornerRadius="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img2" />
</android.support.v7.widget.CardView>
</LinearLayout>
<LinearLayout
android:id="#+id/linear_two"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linear_one"
android:layout_margin="5dp"
android:orientation="horizontal">
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="60"
app:cardBackgroundColor="#FFB637"
app:cardCornerRadius="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img2" />
</android.support.v7.widget.CardView>
<LinearLayout
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_marginLeft="5dp"
android:orientation="vertical">
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="100dp"
app:cardBackgroundColor="#FB7649"
app:cardCornerRadius="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img3" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="95dp"
android:layout_marginTop="5dp"
app:cardBackgroundColor="#F1F1F1"
app:cardCornerRadius="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img7" />
</android.support.v7.widget.CardView>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/linear_two">
<android.support.v7.widget.CardView
android:layout_width="280dp"
android:layout_height="200dp"
android:layout_marginRight="5dp"
android:layout_weight="60"
app:cardBackgroundColor="#F34F45"
app:cardCornerRadius="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img6" />
</android.support.v7.widget.CardView>
<android.support.v7.widget.CardView
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_weight="40"
app:cardBackgroundColor="#55C6FF"
app:cardCornerRadius="4dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="#drawable/img4" />
</android.support.v7.widget.CardView>
</LinearLayout>
</RelativeLayout>
Make a class for the dynamic height images.
public class DynamicHeightNetworkImageView extends ImageView {
private float mAspectRatio = 1.5f;
public DynamicHeightNetworkImageView(Context context) {
super(context);
}
public DynamicHeightNetworkImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public DynamicHeightNetworkImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measuredWidth = getMeasuredWidth();
setMeasuredDimension(measuredWidth, (int) (measuredWidth / mAspectRatio));
}
public void setAspectRatio(float aspectRatio) {
mAspectRatio = aspectRatio;
requestLayout();
}
}
and use it in your xml file
<com.dmitrymalkovich.android.xyzreader.ui.DynamicHeightNetworkImageView
android:id="#+id/thumbnail"
android:layout_width="match_parent"
android:background="#color/material_grey_300"
android:layout_height="wrap_content" />
See this github rep:https://github.com/DmitryMalkovich/make-your-app-material
I have two view as the picture shows, the first I drew a circle and lines, the second I have plenty of buttons, I want to superimpose the two view so that each line points to a buttons
enter image description here "Canvas"
[enter image description here]2
public class MainActivity extends AppCompatActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public class MyView extends View {
public MyView (Context context) {
super (context) ;
}
#Override
protected void onDraw (Canvas canvas){
super.onDraw(canvas);
int x = getWidth();
int y = getHeight();
int radius ;
radius = 50 ;
Paint paint = new Paint () ;
Paint paint1 = new Paint () ;
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.WHITE);
canvas.drawPaint(paint);
paint.setColor(Color.BLACK);
canvas.drawCircle(x / 2, y / 2, radius, paint);
int margin = 500;
int margin1 = 300;
int top = 0 + margin;
int bottom = canvas.getHeight() - margin;
int left = 0 + margin1;
int right = canvas.getWidth() - margin1;
int centerX = x / 2;
int centerY = y / 2;
canvas.drawLine(centerX, top, centerX, bottom,paint1);
canvas.drawLine(left, centerY, right, centerY,paint1);
}}}
RelativeLayout xml
<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="match_parent">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/button1" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentStart="true"
android:id="#+id/button2" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button2"
android:layout_alignParentEnd="true"
android:id="#+id/button3" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/button1"
android:id="#+id/button4" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/button1"
android:layout_alignParentStart="true"
android:layout_marginTop="49dp"
android:id="#+id/button5" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/button5"
android:layout_alignStart="#+id/button3"
android:id="#+id/button6" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="#+id/button4"
android:layout_alignParentStart="true"
android:layout_marginBottom="58dp"
android:id="#+id/button7" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/button7"
android:layout_alignParentEnd="true"
android:id="#+id/button8" />
</RelativeLayout>
Won't this work? It'll add 4 buttons at the centers horizontally and vertically at the ends of the lines that you've drawn.
<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="match_parent">
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:id="#+id/button1" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentStart="true"
android:id="#+id/button2" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_alignParentEnd="true"
android:id="#+id/button3" />
<Button
android:text="Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:id="#+id/button4" />
</RelativeLayout>
I would like to know how to do this horizontal line with text in the middle, look this screenshot :
Someone have an idea to do that on Android ? I found how to do a horizontal line, but never with text.
Thanks !
Just change the colors to match the ones on your image. I also suggest you use a gradient as the background for those dummy views, it looks a whole lot better then the screenshot if you put a little time into it.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true">
<TextView
android:id="#+id/tvText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:text="lala"
android:textColor="#FFFFFF"/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginLeft="16dp"
android:layout_toLeftOf="#id/tvText"
android:background="#FF0000"
/>
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_centerVertical="true"
android:layout_marginRight="16dp"
android:layout_toRightOf="#id/tvText"
android:background="#FF0000"
/>
</RelativeLayout>
public class CenterLineTextView extends android.support.v7.widget.AppCompatTextView {
private final Rect mBounds = new Rect();
private final Paint mPaint = new Paint();
private int mPadding;
private int mStroke;
public CenterLineTextView(Context context) {
super(context);
init();
}
public CenterLineTextView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public CenterLineTextView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
if (isInEditMode()) {
return;
}
setGravity(Gravity.CENTER);
mStroke = getContext().getResources().getDimensionPixelSize(R.dimen.divider);
mPadding = getContext().getResources().getDimensionPixelSize(R.dimen.login_or_padding);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mPaint.setStrokeWidth(mStroke);
mPaint.setColor(getPaint().getColor());
getPaint().getTextBounds(getText().toString(), 0, getText().length(), mBounds);
canvas.drawLine(0, getHeight() / 2, (getWidth() - mBounds.right) / 2 - mPadding, getHeight() / 2, mPaint);
canvas.drawLine(mPadding + (getWidth() + mBounds.right) / 2, getHeight() / 2, getWidth(), getHeight() / 2, mPaint);
}
}
You can do it with only one View for line and one TextView for text. Just add android:layout_centerHorizontal="true" in XML of TextView.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_margin="12dp"
android:background="#android:color/black" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="2dp"
android:background="#android:color/white"
android:layout_centerHorizontal="true"
android:text="or" />
</RelativeLayout>
seperator line with text in middle
Try this
set the width of the view accordingly
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp">
<View
android:id="#+id/topDivider"
android:layout_width="50dp"
android:layout_height="1dp"
android:layout_below="#id/internal"
android:background="#color/bright_blue"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Middle text here"
android:layout_gravity="center_horizontal"
android:id="#+id/lv_shopName" />
<View
android:id="#+id/topDivider"
android:layout_width="50dp"
android:layout_height="1dp"
android:layout_below="#id/internal"
android:background="#color/bright_blue"/>
</LinearLayout>
<LinearLayout
android:id="#+id/linerlayout"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<View
android:layout_marginRight="2dp"
android:id="#+id/divider"
android:layout_width="wrap conent"
android:layout_height="1dp"
android:background="#00000000" />
<TextView
android:id="#+id/ll"
android:layout_width="match_parent"
android:layout_height="wrap_content"
Text="abc"/>
<View
android:layout_marginLeft="2dp"
android:id="#+id/divider"
android:layout_width="wrap conent"
android:layout_height="1dp"
android:background="#00000000" />
I am using a gridview in my application in which I want to make my view centered if there only one element in my adapter and maximum of three elements in one row.But for some reason one element is not being centered.
Please help me in this.
this is my parent layout
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal"
>
<RelativeLayout
android:id="#+id/cplist_title_layout"
android:layout_width="wrap_content"
android:layout_height="74dp"
android:gravity="center_vertical" >
<TextView
android:id="#+id/cplist_title"
android:layout_width="match_parent"
android:layout_height="74dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:gravity="left|center_vertical"
android:textColor="#color/RGB_0_176_241"
android:textSize="19dp" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/cplist_grid_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/cplist_title_layout"
android:paddingTop="8dp" >
<GridView
android:id="#+id/cp_gridView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="21dp"
android:layout_marginLeft="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:numColumns="auto_fit"
android:verticalSpacing="0dp"
android:horizontalSpacing="0dp"
>
</GridView>
</RelativeLayout>
</RelativeLayout>
this is my grid view item layout
<RelativeLayout
android:id="#+id/detail_cplist_item_logo"
android:layout_width="match_parent"
android:layout_height="108dp"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" >
<ImageView
android:id="#+id/detail_cplist_item_cplogo_bg"
android:layout_width="225dp"
android:layout_height="104dp"
android:layout_centerVertical="true"
android:background="#color/RGB_23_27_33"
android:gravity="center" />
</RelativeLayout>
<RelativeLayout
android:id="#+id/detail_cplist_item_details"
android:layout_width="match_parent"
android:layout_height="59dp"
android:layout_below="#id/detail_cplist_item_logo"
android:gravity="center_vertical"
android:layout_marginLeft="10dp" >
<LinearLayout
android:id="#+id/detail_cplist_item_price"
android:layout_width="match_parent"
android:layout_height="31dp"
>
<TextView
android:id="#+id/detail_cp_price_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="6dp"
android:layout_marginTop="4dp"
android:gravity="left"
android:text="Free"
android:textColor="#color/RGB_100_217_217_217"
android:textSize="18dp" />
</LinearLayout>
<RelativeLayout
android:id="#+id/detail_cplist_item_quality_section"
android:layout_width="37dp"
android:layout_height="19dp"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginBottom="9dp"
>
<ImageView
android:id="#+id/detail_cplist_item_quality"
android:layout_width="37dp"
android:layout_height="19dp"
android:gravity="center"
android:src="#drawable/common_selector_icon_hd" />
</RelativeLayout>
<ImageView
android:id="#+id/detail_cplist_item_tag_tv"
android:layout_width="21dp"
android:layout_height="wrap_content"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="9dp"
android:layout_toRightOf="#id/detail_cplist_item_quality_section"
android:src="#drawable/tag_tv"
android:visibility="invisible" />
<ImageView
android:id="#+id/detail_cplist_item_tag_mobile"
android:layout_width="21dp"
android:layout_height="wrap_content"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="3dp"
android:layout_toRightOf="#id/detail_cplist_item_tag_tv"
android:src="#drawable/tag_mobile" />
<ImageView
android:id="#+id/detail_cplist_item_live_icon"
android:layout_width="37dp"
android:layout_height="19dp"
android:layout_below="#id/detail_cplist_item_price"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="#id/detail_cplist_item_quality_section"
android:src="#drawable/tag_live"
android:visibility="invisible" />
</RelativeLayout>
Instead of gravity, set this:
android:layout_centerInParent="true"
Had the same problem... I solved it with overridden onMeasure()
public class GridViewEx extends GridView {
private int mRequestedNumColumns = 0;
public GridViewEx(Context context) {
super(context);
}
public GridViewEx(Context context, AttributeSet attrs) {
super(context, attrs);
}
public GridViewEx(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
#Override
public void setNumColumns(int numColumns) {
super.setNumColumns(numColumns);
if (numColumns != mRequestedNumColumns) {
mRequestedNumColumns = numColumns;
}
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mRequestedNumColumns > 0) {
int width = (mRequestedNumColumns * getColumnWidth())
+ ((mRequestedNumColumns-1) * getHorizontalSpacing())
+ getListPaddingLeft() + getListPaddingRight();
setMeasuredDimension(width, getMeasuredHeight());
}
}
}
I was using
android:layout_below="#+id/msg"
works fine after i removed it and used
android:layout_centerInParent="true"