I need help. I've been trying to manipulate this but seems like I can't get this done. I'm trying to fit the image on drawer layout.
I'm invoking the header image layout (header.xml) as :
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/containerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"/>
<android.support.design.widget.NavigationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
....
app:headerLayout="#layout/header" <!--THIS IS THE HEADER-->
...
</android.support.v4.widget.DrawerLayout>
For this (header.xml) configuration :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/background"
android:layout_marginBottom="0dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Twitter : #Someone important"
android:drawableLeft="#drawable/twitter"
android:layout_marginBottom="0dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" e-mail : someoneimportant#earth"
android:drawableLeft="#drawable/email"
/>
</LinearLayout>
I got
and tried to reduce the image layout height :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="140dp"
android:src="#drawable/background"
android:layout_marginBottom="0dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" Twitter : #Someone important"
android:drawableLeft="#drawable/twitter"
android:layout_marginBottom="0dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" e-mail : someoneimportant#earth"
android:drawableLeft="#drawable/email"
/>
</LinearLayout>
I got the image cut off.
your image is not able to fit the screen because of the image size so you can set the scale type as fitxy in this way it will fill the left space and strech the image
<ImageView
android:layout_width="match_parent"
android:layout_height="140dp"
android:src="#drawable/background"
android:scaleType="fitXY"
android:layout_marginBottom="0dp"/>
Related
I Have the following layout and I need the favorite image to placed on the upper right corner of the itemImage using FrameLayout
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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=".ItemDetails"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
tools:srcCompat="#mipmap/ic_launcher"
/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
tools:srcCompat="#mipmap/ic_launcher_round"
android:elevation="10dp"/>
</FrameLayout>
But the favorite image is never show ?? what is wrong with my layout
Any help will be much appreciated
Maybe this layout will work. I changed tools:srcCompat to android:src. tools: attributes are only visible in AndroidStudio, they are removed from the build.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingBottom="20dp">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/itemdimage"
android:layout_width="match_parent"
android:layout_height="300dp"
android:scaleType="fitEnd"
android:src="#mipmap/ic_launcher"/>
<ImageView
android:id="#+id/favorite"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="end"
android:layout_margin="10dp"
android:elevation="10dp"
android:src="#mipmap/ic_launcher_round" />
</FrameLayout>
</LinearLayout>
</ScrollView>
The result is this :
I am designing a registration screen.Here I need to place the button on circular image bottom corner,this is my output and I am using 3rd party library from github de.hdodenhof:circleimageview:2.0.0
Now I want to place camera bottom on bottom- right corner of image view
Need Output
<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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="com.example.this_pc.framelayout.MainActivity"
android:background="#color/white">
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:id="#+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FFFFFF"
android:contentDescription="Image Border"
android:padding="0dp"/>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="300dp"
android:layout_height="300dp"
android:src="#drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"
android:layout_gravity="center_horizontal"
android:background="#drawable/round_border"/>
<Button
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="bottom|right"
android:background="#drawable/camera"/>
</FrameLayout>
</RelativeLayout>
</ScrollView>
Do like this...
<Button
android:id="#+id/uploadImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginLeft="//define according to your layout"
android:layout_marginTop="//define according to your layout"
android:layout_toRightOf="#+id/profile_Image"
android:background="#drawable/camera" />
I'm attempting to make the content of a menu (header picture) go edge to edge as per the material design guidelines
I am unable to remove a margin around the menu layout.
Things I have tried
setting relative layout background as mipmap image
removing padding set in the dimensions resource
Adding an image directly below the relative layout in an imageview
Created a bitmap resource and used the scale property
Tried different images
Encased the image in a frame layout
Non of which are working . I am providing a screen shot for a better understanding
code the the layouts
here is activity_menu
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="7dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar">
</include>
<FrameLayout
android:id="#+id/activity_frame_menu"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
header_menu
<?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="178dp"
android:layout_gravity="left"
android:background="#mipmap/ic_launcher"
android:orientation="vertical"
android:weightSum="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:textColor="#ffffff"
android:text="Akash Bangad"
android:textSize="14sp"
android:textStyle="bold"
/>
<TextView
android:id="#+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:layout_marginLeft="16dp"
android:layout_marginTop="5dp"
android:text="akash.bangad93#gmail.com"
android:textSize="14sp"
android:textStyle="normal"
/>
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#mipmap/ic_profil"
android:layout_marginLeft="16dp"
android:layout_marginTop="38dp"
android:id="#+id/circleView"
/>
</RelativeLayout>
row_item_menu
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/rowIcon"
android:paddingLeft="16dp"
android:src="#drawable/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="12dp"
android:paddingTop="4dp"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Medium Text"
android:id="#+id/rowText" />
</LinearLayout>
Seems I've got this.
You added an image via Asset Studio, right? I don't know the reason, but it really adds blank space around the image.
The solution worked for me in this case was to place image into /drawable folder (in explorer).
Not it looks good.
Update. Found the reason - following documentation:
Image Asset Studio generates the following asset types:
Launcher icons. Action bar and tab icons. Notification
icons.
So it would not help you to make mipmap from your image in order to use it as background.
Have you tried to wrap the header_menu's linear layout with relative layout? Something like this:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="178dp"
android:layout_gravity="left"
android:background="#mipmap/ic_launcher"
android:orientation="vertical"
android:weightSum="1">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="56dp"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
...
<!-- another views -->
</RelativeLayout>
</RelativeLayout>
Just update your activity_menu's DrawerLayout elevation
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="2dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="#+id/tool_bar"
layout="#layout/tool_bar">
</include>
<FrameLayout
android:id="#+id/activity_frame_menu"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/RecyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical">
</android.support.v7.widget.RecyclerView>
Im trying to create the following Layout:
The border of the RelativeLayout is realized with a rectangle shape as background, but I cannot get the ImageView overlap the RelativeLayout with half of it in and half of it out of the border. Is this even possible with RelativeLayout (And if not: What alternative do I have)?
layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/imageView"
android:src="#drawable/imageresource"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"/>
<RelativeLayout
android:padding="#dimen/item_inner_margin"
android:background="#drawable/item_border"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="#+id/relativeLayout"
android:layout_below="#+id/imageView">
<!-- Stuff in the layout -->
</RelativeLayout>
</RelativeLayout>
Thanks in advance
danijoo
This might be what you're looking for:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/darker_gray"
android:orientation="vertical"
android:scrollbarAlwaysDrawVerticalTrack="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="70dp"
android:background="#fff"
android:elevation="4dp"
android:orientation="vertical"
android:padding="20dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
android:paddingTop="30dp">
<!-- add content here -->
</LinearLayout>
</RelativeLayout>
<ImageView
android:id="#+id/imageview1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="16dp"
android:background="#android:color/holo_blue_bright"
android:elevation="4dp"
/>
</RelativeLayout>
I want imageView wrap in FrameLayout. And ImageView show fullscreen.
1 variant:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffff00" >
<FrameLayout
android:id="#+id/fl_draw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#00ff00">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
</FrameLayout>
</RelativeLayout>
(source: cs412821.vk.me)
2 variant:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffff00" >
<FrameLayout
android:id="#+id/fl_draw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:background="#00ff00">
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
</FrameLayout>
</RelativeLayout>
(source: cs412821.vk.me)
AdjustViewBounds not working.
What I'm trying to achieve:
(source: cs412821.vk.me)
How do I handle this? Thank you very much. Sorry for my english.
Change your imageview attributes from :
<ImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
To:
<ImageView
android:id="#+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/vertical_test"
android:adjustViewBounds="true" />
It also depends on how tall your image is.. If you know the width and height, you can adjust it accordingly.
Also, you can use gravity attribute if you want the want the image to be in the center position.