I have an image with a resolution of 1024x1024 pixels.
But, when I try to use this image in my Android app (background activity) it is squashed.
Can anyone tell me how to avoid this?
Now this issue has been fixed by using following 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="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/image" />
</RelativeLayout>
But this solution can not use for following code:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:background="#drawable/frontscreenbg"/>
<ScrollView android:id="#+id/scrollviewParentLoginContainer"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:wheel="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:id="#+id/linearLayoutLoginContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="24dp"
android:paddingRight="24dp">
Please help me.
Don't set the image as the background of your root layout. Try this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/relativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/your_background_image"
android:scaleType="centerCrop"/>
...
/* Your other UI elements */
...
</RelativeLayout>
You can't set scale type in a RelativeLayout
You have to set the Scale Type option of your ImageView to CENTER_CROP (see here: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html)
you can do it programmatically using the setScaleType() method of ImageView or adding it to your xml layout using android:scaleType="centerCrop"
EDIT:
If you want to add the background directly to your layout, you have to create a custom drawable object inside the /res/drawable directory. Try to use something like this:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/background_image"
android:tileMode="repeat" />
Just use following 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="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:scaleType="centerCrop"
android:src="#drawable/image" />
</RelativeLayout>
This should resolve your issue.
Related
I want to add Linear Layout on top of my background image as shown in below image(that horizontal bars).
But that is not working.I have checked by adding background color but it didn't shown in the preview.
Below is the way that I had added the Linear Layout.
<LinearLayout 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=".MainActivity"
android:background="#drawable/back">
<ImageView
android:layout_width="200dp"
android:layout_height="150dp"
android:src="#drawable/logo_big"
android:layout_marginLeft="200dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
</LinearLayout>
Try using a <RelativeLayout> around your <LinearLayout>.
Like this:
<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="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="#drawable/back">
<ImageView
android:layout_width="200dp"
android:layout_height="150dp"
android:src="#drawable/logo_big"
android:layout_marginLeft="200dp"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
Solution 1:
Set orientation = vertical in your parent LinearLayout.
Solution 2:
Use RelativeLayout for better UI experience.
I would like to have an imageview that should be half outside of the view. I have tried with the negative margin. But couldn't get the desired output. The image is getting cut off by the parent layout. Not sure what is the proper way to achieve the desired output. Any guidance would be appreciated.
My Code
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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="#android:color/white"
tools:context=".Activities.ProfileActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="#dimen/margin_padding_size_medium"
android:padding="#dimen/margin_padding_size_medium"
android:background="#android:color/holo_blue_bright"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="80dp"
android:background="#android:color/darker_gray"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="-50dp"
android:src="#drawable/drawer_background"
android:scaleType="fitXY"
/>
</RelativeLayout>
</FrameLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
This is target output
This is my output
You should use the layout_anchor for the CoordinatorLayout children
your xml file need be something like this
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/materialup.appbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/materialup.profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:elevation="8dp"
android:src="#color/black"
app:layout_anchor="#id/materialup.appbar"
app:layout_anchorGravity="bottom|center"
app:layout_scrollFlags="scroll"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
the result
check this link on github for more reading
https://github.com/saulmm/CoordinatorExamples
I have built a camera app for android.The problem I am facing is making the camera frame to round instead of square or fullscreen.I tried to make the layout change its shape to circle but it didn't work.
The layout is->
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent" android:layout_width="match_parent"
android:orientation="vertical"
android:gravity="center"
android:background="#541358">
<FrameLayout android:layout_width="350dp"
android:layout_height="350dp"
android:layout_gravity="center"
android:background="#drawable/backshape"
android:id="#+id/container">
</FrameLayout>
</LinearLayout>
Any help is very much appreciated.
your framelayout can be like this
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<SurfaceView
android:layout_width="match_parent"
android:layout_height="match_parent" />
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/backShape"></View>
</FrameLayout>
Here you can see that there is a background and above it there is a white layer on which contain are given. screenshot is of a website but i want to give that effect on my app. any help will be of great use.
You can do it like this:
<?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"
android:orientation="vertical"
tools:context=".activity.MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/yourBackgroudImage"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:bacground="#color/white"
android:layout_margin="20dp">
<!--your code inside white backgroud layout goes here-->
</LinearLayout>
</LinearLayout>
Just use a RelativeLayout which helps you to stack your views above each other,then provide a margin to the top layout
<?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="wrap_content">
<ImageView
android:src="#drawable/backgroundimage"
android:scaleType="centerCrop"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<LinearLayout
android:layout_margin="20dp"
android:background="#ffffff"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--Add Data here as required-->
</LinearLayout>
</RelativeLayout>
How do I make the background image fill the screen? I have tried several different suggestions and nothing seems to work.
Below is the code for my activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="com.andrewvanpeter.upandaway.MainActivity">
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/background_flat_720x1280" />
</android.support.constraint.ConstraintLayout>
First solution :
You can put the layout_width and the layout_height of your ImageView to match_parent :
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="#drawable/background_flat_720x1280" />
Second solution :
You can set the background directly in the ConstraintLayout (and don't forget to delete the ImageView) :
<android.support.constraint.ConstraintLayout 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"
android:background="#drawable/background_flat_720x1280"
tools:context="com.andrewvanpeter.upandaway.MainActivity">
You can also to set the scaletype of imageview to fitXY like this :
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitXY"
app:srcCompat="#drawable/background_flat_720x1280" />