Android Center Location in FrameLayout not working

Question

I have a FrameLayout in which I have 2 controls: - a custom view that draws an image and some text on it - a text image with text

I want to center both in FrameLayout, but I cannot do this. Texview is concentrated very well, my cusom gaze remains on the left side when I make it visible.

<FrameLayout android:id="@+id/CompassMap" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="center"> <view class="com.MyView" android:id="@+id/myView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal" android:visibility="gone"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal" android:text="CENTERED" /> </FrameLayout> 

In Mathias I do nothing in the constructor, it's just simple

  public class MyMapView extends View { private int xPos = 0; private int yPos = 0; private Bitmap trackMap; private Matrix backgroundMatrix; private Paint backgroundPaint; private Bitmap position; private Matrix positionMatrix; private Paint positionPaint; public MyMapView(Context context) { super(context); init(context, null); } public MyMapView(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs); } public MyMapView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context, attrs); } private void init(final Context context, AttributeSet attrs) { backgroundMatrix = new Matrix(); backgroundPaint = new Paint(); backgroundPaint.setFilterBitmap(true); position = BitmapFactory.decodeResource(getContext().getResources(), R.drawable.position); positionMatrix = new Matrix(); positionPaint = new Paint(); positionPaint.setFilterBitmap(true); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec)); } @Override protected void onDraw(Canvas canvas) { int width = getMeasuredWidth(); int height = getMeasuredHeight(); if (trackMap!=null) { Bitmap resizedBitmap = Bitmap.createScaledBitmap(trackMap, height, height, true); canvas.drawBitmap(resizedBitmap, backgroundMatrix, backgroundPaint); } canvas.save(Canvas.MATRIX_SAVE_FLAG); canvas.translate(xPos-position.getWidth()/2, yPos-position.getHeight()/2); canvas.drawBitmap(position, positionMatrix, positionPaint); canvas.restore(); } public void updatePosition(int xpos, int ypos, Bitmap trackImage) { xPos=xpos; yPos=ypos; trackMap = trackImage; invalidate(); } } 

Answer 1

I would suggest RelativeLayout instead of FrameLayout.

Assuming you want TextView to always be under ImageView, I used the following layout.

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerInParent="true" android:src="@drawable/icon" android:visibility="visible"/> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_below="@id/imageview" android:gravity="center" android:text="@string/hello"/> </RelativeLayout> 

Note that if you set the visibility element to gone , then the space that will be consumed by this element will disappear, while using invisible instead, the space that it will consume will be saved.

If you want to have a TextView on top of the ImageView, just leave android:layout_alignParentTop or set it to false , and you will not specify the android:layout_below="@id/imageview" attribute in the TextView. Like this.

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/imageview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="false" android:layout_centerInParent="true" android:src="@drawable/icon" android:visibility="visible"/> <TextView android:id="@+id/textview" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:gravity="center" android:text="@string/hello"/> </RelativeLayout> 

Hope this is what you were looking for.

Answer 2

We can align the view in the center of FrameLayout by setting the layout_gravity child view.

In XML:

 android:layout_gravity="center" 

In Java code:

 FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); params.gravity = Gravity.CENTER; 

Note: use FrameLayout.LayoutParams not other existing LayoutParams

Answer 3

Set the "center_horizontal" and "center_vertical" or just the "center" of the widget's layout_gravity attribute

  <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MovieActivity" android:id="@+id/mainContainerMovie" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#3a3f51b5" /> <ProgressBar android:id="@+id/movieprogressbar" style="?android:attr/progressBarStyle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical|center_horizontal" /> </FrameLayout> 

Answer 4

Just follow this order

You can FrameLayout any number of children in FrameLayout .

 <FrameLayout > <child1 .... android:layout_gravity="center" ..... /> <Child2 .... android:layout_gravity="center" /> </FrameLayout> 

So the key

adding android:layout_gravity="center" in child views.

For example:

I focused CustomView and TextView on FrameLayout like this

The code:

 <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <com.airbnb.lottie.LottieAnimationView android:layout_width="180dp" android:layout_height="180dp" android:layout_gravity="center" app:lottie_fileName="red_scan.json" app:lottie_autoPlay="true" app:lottie_loop="true" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textColor="#ffffff" android:textSize="10dp" android:textStyle="bold" android:padding="10dp" android:text="Networks Available: 1\n click to see all" android:gravity="center" /> </FrameLayout> 

Result:

Answer 5

To center the view in Framelayout, there are some tricks available. The simplest one I used for my Webview and Progressbar (very similar to your object layout), I just added android:layout_gravity="center"

Here is the complete XML in case someone else needs to do the same

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout 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:context=".WebviewPDFActivity" android:layout_gravity="center" > <WebView android:id="@+id/webView1" android:layout_width="match_parent" android:layout_height="match_parent" /> <ProgressBar android:id="@+id/progress_circular" android:layout_width="250dp" android:layout_height="250dp" android:visibility="visible" android:layout_gravity="center" /> </FrameLayout> 

Here is my conclusion