Android ImageView doesn't fit with larger screens

Android ImageView doesn't fit with larger screens - android

I'm new to the Android development. I tested my android programme from the (eclipse)android emulator but when I run the same program in the SAMSUNG phone that has large screen and from the tablet my ImageView doesnt fit with their screen.
<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=".CompareActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/topbar" />
<TabHost
android:id="#android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TabWidget
android:id="#android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#160203" >
</TabWidget>
<FrameLayout
android:id="#android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</TabHost>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp" >
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/crdt" />
<ImageButton
android:id="#+id/registerbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="38dp"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:src="#drawable/green" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:adjustViewBounds="true"
android:src="#drawable/savings" />
<ImageButton
android:id="#+id/blubutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/registerbutton"
android:layout_alignTop="#+id/imageView3"
android:layout_marginTop="18dp"
android:background="#android:color/transparent"
android:src="#drawable/blue" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView3"
android:adjustViewBounds="true"
android:src="#drawable/pl" />
<ImageButton
android:id="#+id/redbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/blubutton"
android:layout_alignTop="#+id/imageView4"
android:layout_marginTop="17dp"
android:background="#android:color/transparent"
android:src="#drawable/red" />
<ImageView
android:id="#+id/imageView5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView4"
android:adjustViewBounds="true"
android:src="#drawable/homlons" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView5"
android:adjustViewBounds="true"
android:src="#drawable/fd" />
<ImageButton
android:id="#+id/orbutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/redbutton"
android:layout_alignTop="#+id/imageView5"
android:layout_marginTop="26dp"
android:background="#android:color/transparent"
android:src="#drawable/orange" />
<ImageButton
android:id="#+id/pubutton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/orbutton"
android:layout_alignTop="#+id/imageView6"
android:layout_marginTop="18dp"
android:background="#android:color/transparent"
android:src="#drawable/purple" />
</RelativeLayout>
</LinearLayout>
</FrameLayout>

The Layout is set to wrap content which will leave empty space in the larger screen. Notify the layout such that it takes all the space.
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/crdt" />
<ImageButton
android:id="#+id/greenbutton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_marginRight="38dp"
android:layout_marginTop="15dp"
android:background="#android:color/transparent"
android:src="#drawable/green" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_below="#+id/imageView2"
android:adjustViewBounds="true"
android:alignParentBottom="true"
android:src="#drawable/savings" />
</RelativeLayout>

use android:background="#drawable/savings"

You can change your imageView XML as the below:
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitXY"
android:src="#drawable/crdt" />
or change it by code:
imageView.setScaleType(ScaleType.FIT_XY);

Related

Android: Imageview getting resized while the height of the object above is altered

Here is my layout XML
<?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-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.homerevise.studyapp.activity.HomeScreenActivity"
tools:showIn= "#layout/app_bar_main">
<RelativeLayout
android:id="#+id/rel_colour"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#drawable/path_background">
<ImageView
android:id="#+id/image_more"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="25dp"
android:background="#drawable/more"/>
<TextView
android:id="#id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="90dp"
android:textColor="#000"
android:textSize="24sp"
android:visibility="invisible" />
<ImageView
android:id="#+id/image_page_title"
android:layout_width="240dp"
android:layout_height="120dp"
android:layout_below="#id/txtName"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:background="#drawable/page_title" />
<ImageView
android:id="#+id/image_happy_student"
android:layout_width="120dp"
android:layout_height="165dp"
android:layout_alignEnd="#id/image_page_title"
android:layout_alignRight="#id/image_page_title"
android:layout_alignParentRight="true"
android:layout_marginTop="75dp"
android:layout_marginRight="20dp"
android:background="#drawable/happy_student" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="#+id/image_subject_title"
android:layout_width="80dp"
android:layout_height="30dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:background="#drawable/subject_title" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_below="#id/image_subject_title"
android:orientation="horizontal" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:visibility="gone" />
<TextView
android:id="#+id/txtRecentlyLearned"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:layout_below="#id/recyclerView"
android:text="Recently Learned"
android:textColor="#2A3E61"
android:textSize="24sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/image_Recently_Learned"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtRecentlyLearned"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
android:src="#drawable/recently_learned"
android:layout_marginBottom="90dp"/>
</RelativeLayout>
</LinearLayout>
If the layout height of the recycler view changes the imageview txtRecentlyLearned gets reseized. It becomes too small. Like even if the height of the recycler view is changed to 250dp the image size drops considerably. The Imageview should not get resized at all ever.
How do I fix this?
Thank you.

Move textView and imageView outside the RelativeLayout to the parent LinearLayout and add android:layout_weight="1" to the RelativeLayout
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="0dp">
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
<TextView
android:id="#+id/txtRecentlyLearned"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ImageView
android:id="#+id/image_Recently_Learned"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="#drawable/recently_learned" />
</LinearLayout>

I Played around a little with the layout weight and relative views for now it seems to work.
<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"
android:orientation="vertical"
tools:context="com.homerevise.studyapp.activity.HomeScreenActivity"
tools:showIn= "#layout/app_bar_main">
<RelativeLayout
android:id="#+id/rel_colour"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="4"
android:background="#drawable/path_background">
<ImageView
android:id="#+id/image_more"
android:layout_width="25dp"
android:layout_height="25dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="25dp"
android:background="#drawable/more"/>
<TextView
android:id="#id/txtName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="90dp"
android:textColor="#000"
android:textSize="24sp"
android:visibility="invisible" />
<ImageView
android:id="#+id/image_page_title"
android:layout_width="240dp"
android:layout_height="120dp"
android:layout_below="#id/txtName"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:background="#drawable/page_title" />
<ImageView
android:id="#+id/image_happy_student"
android:layout_width="120dp"
android:layout_height="165dp"
android:layout_alignEnd="#id/image_page_title"
android:layout_alignRight="#id/image_page_title"
android:layout_alignParentRight="true"
android:layout_marginTop="75dp"
android:layout_marginRight="20dp"
android:background="#drawable/happy_student" />
<ImageView
android:id="#+id/image_subject_title"
android:layout_width="80dp"
android:layout_height="30dp"
android:layout_marginLeft="20dp"
android:layout_marginTop="300dp"
android:background="#drawable/subject_title" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_below="#id/image_subject_title"
android:orientation="horizontal" />
<ProgressBar
android:id="#+id/progressBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:visibility="gone" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1">
<TextView
android:id="#+id/txtRecentlyLearned"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="10dp"
android:layout_marginRight="20dp"
android:text="Recently Learned"
android:textColor="#2A3E61"
android:textSize="24sp"
android:textStyle="bold" />
<ImageView
android:id="#+id/image_Recently_Learned"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/txtRecentlyLearned"
android:src="#drawable/recently_learned"
/>
</RelativeLayout>
</LinearLayout>

How do i make my buttons fixed at the top with scroll view?

How do i make my buttons fixed to the top of my screen and my navigation bar to the bottom of my screen? I have already done the android:layout_alignParentTop="true" and android:layout_alignParentBottom="true">
which doesn't help as they still don't follow along when i scroll up or down.
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#393939"
tools:context=".Main2Activity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/back"
android:layout_width="match_parent"
android:layout_height="1000dp">
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:gravity="center"
android:layout_gravity="center">
<Button
android:id="#+id/up_coming"
android:layout_width="140dp"
android:layout_height="44dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#333333"
android:text="Upcoming" />
<Button
android:id="#+id/trending_button"
android:layout_width="140dp"
android:layout_height="44dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="0dp"
android:background="#333333"
android:text="Trending" />
<Button
android:id="#+id/now_showing"
android:layout_width="140dp"
android:layout_height="44dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#6E6E6E"
android:text="Now Showing" />
</RelativeLayout>
<ImageView
android:id="#+id/imageView5"
android:layout_width="184dp"
android:layout_height="200dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="20dp"
android:layout_marginTop="69dp"
app:srcCompat="#drawable/fpp3k01riyq01" />
<TextView
android:id="#+id/textView4"
android:layout_width="142dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/imageView5"
android:layout_marginEnd="39dp"
android:text="Incredibles 2"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/textView2"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="194dp"
android:layout_marginStart="29dp"
android:text="Avengers: Infinity War"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="184dp"
android:layout_height="200dp"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/imageView5"
app:srcCompat="#drawable/deadpool2" />
<TextView
android:id="#+id/textView5"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="449dp"
android:layout_toStartOf="#+id/imageView5"
android:text="Deadpool 2"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/textView3"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/imageView5"
android:layout_marginBottom="452dp"
android:text="Rampage"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="184dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/imageView5"
android:layout_marginTop="321dp"
app:srcCompat="#drawable/rampage_thumbnail" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/main_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_marginBottom="135dp"
app:itemBackground="#drawable/nav_bar_gradient"
app:itemIconTint="#color/nav_item_colors"
app:itemTextColor="#color/nav_item_colors"
app:menu="#menu/nav_items"></android.support.design.widget.BottomNavigationView>
<FrameLayout
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/main_nav">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.design.widget.BottomNavigationView>
</FrameLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>

Following my comment:
Modify you layout so the components are outisde of ScrollView, inside scrollview add only scrollable content that you wish
The usual is like inside root LinearLayout (VERTICAL)
Then add HeaderView with WRAP on height
Then add ScrollView with weight=1 (so it takes all rest of space on layout)
Then add BottomView with WRAP on height
Inside the ScrollView you add a larger componenet to be scrollable.
This way Heder and Bottom are fixed and you can scroll the content inside the scroll.

Have you tried to remove your button outside from scroll view?
<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#393939"
tools:context=".Main2Activity">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:id="#+id/back"
android:layout_width="match_parent"
android:layout_height="1000dp">
<Button
android:id="#+id/up_coming"
android:layout_width="140dp"
android:layout_height="44dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#333333"
android:text="Upcoming" />
<RelativeLayout
android:id="#+id/buttons"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:gravity="center"
android:layout_gravity="center">
<Button
android:id="#+id/trending_button"
android:layout_width="140dp"
android:layout_height="44dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="0dp"
android:background="#333333"
android:text="Trending" />
<Button
android:id="#+id/now_showing"
android:layout_width="140dp"
android:layout_height="44dp"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:background="#6E6E6E"
android:text="Now Showing" />
</RelativeLayout>
<ImageView
android:id="#+id/imageView5"
android:layout_width="184dp"
android:layout_height="200dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:layout_marginEnd="20dp"
android:layout_marginTop="69dp"
app:srcCompat="#drawable/fpp3k01riyq01" />
<TextView
android:id="#+id/textView4"
android:layout_width="142dp"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_below="#+id/imageView5"
android:layout_marginEnd="39dp"
android:text="Incredibles 2"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/textView2"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_marginBottom="194dp"
android:layout_marginStart="29dp"
android:text="Avengers: Infinity War"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/imageView6"
android:layout_width="184dp"
android:layout_height="200dp"
android:layout_alignParentStart="true"
android:layout_alignTop="#+id/imageView5"
app:srcCompat="#drawable/deadpool2" />
<TextView
android:id="#+id/textView5"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="449dp"
android:layout_toStartOf="#+id/imageView5"
android:text="Deadpool 2"
android:textColor="#FFFFFF" />
<TextView
android:id="#+id/textView3"
android:layout_width="140dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignStart="#+id/imageView5"
android:layout_marginBottom="452dp"
android:text="Rampage"
android:textColor="#FFFFFF" />
<ImageView
android:id="#+id/imageView3"
android:layout_width="184dp"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:layout_alignStart="#+id/imageView5"
android:layout_marginTop="321dp"
app:srcCompat="#drawable/rampage_thumbnail" />
<android.support.design.widget.BottomNavigationView
android:id="#+id/main_nav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentStart="true"
android:layout_gravity="bottom"
android:layout_marginBottom="135dp"
app:itemBackground="#drawable/nav_bar_gradient"
app:itemIconTint="#color/nav_item_colors"
app:itemTextColor="#color/nav_item_colors"
app:menu="#menu/nav_items"></android.support.design.widget.BottomNavigationView>
<FrameLayout
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_alignBottom="#id/main_nav">
<android.support.design.widget.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.design.widget.BottomNavigationView>
</FrameLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
I suggest to use ContraintLayout for future use instead of Relative Layout

How can use wrap-content for Relative Layout Without fill Parent

Sorry for my bad English,
I set RelativeLayout width wrap_content, but it fill_parent.
here is my code:
<RelativeLayout
android:id="#+id/btnAddToBasket"
android:layout_width="wrap_content"
android:layout_height="#dimen/productDetailsAddToBasketHeight"
android:layout_alignParentRight="true"
android:layout_gravity="center_horizontal"
android:background="#drawable/green_add_to_basket_button"
android:clickable="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgBasketIcon"
android:layout_width="#dimen/productDetailsAddToBasketHeight"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:background="#drawable/green_add_to_basket_icon"
android:padding="5dip"
android:layout_alignParentRight="tr"
android:scaleType="fitCenter"
android:src="#drawable/basket_reverse_icon" />
<ImageView
android:id="#+id/imgHalfCircle"
android:layout_width="10dip"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginBottom="2dip"
android:layout_toLeftOf="#id/imgBasketIcon"
android:scaleType="fitXY"
android:src="#drawable/add_to_basket_half_black" />
<TextView
android:id="#+id/lblAddToBasket"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dip"
android:layout_marginRight="4dip"
android:layout_toLeftOf="#id/imgHalfCircle"
android:gravity="center"
android:text="Add to Basket"
android:textColor="#color/white"
android:textSize="#dimen/SmallTextSize"
android:textStyle="bold" />
</RelativeLayout>
Can I use LinearLayout for this? I want my RelativeLayout children fill right to left. please help!..

Try this
<RelativeLayout android:id="#+id/btnAddToBasket"
android:layout_width="wrap_content"
android:layout_height="#dimen/productDetailsAddToBasketHeight"
android:layout_alignParentRight="true"
android:layout_gravity="center_horizontal"
android:background="#drawable/green_add_to_basket_button"
android:clickable="true"
android:orientation="horizontal" >
<ImageView
android:id="#+id/imgBasketIcon"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:background="#drawable/green_add_to_basket_icon"
android:padding="5dip"
android:layout_alignParentRight="tr"
android:scaleType="fitCenter"
android:src="#drawable/basket_reverse_icon" />
<ImageView
android:id="#+id/imgHalfCircle"
android:layout_width="10dip"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginBottom="2dip"
android:layout_toLeftOf="#id/imgBasketIcon"
android:scaleType="fitXY"
android:src="#drawable/add_to_basket_half_black" />
<TextView
android:id="#+id/lblAddToBasket"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginLeft="5dip"
android:layout_marginRight="4dip"
android:layout_toLeftOf="#id/imgHalfCircle"
android:gravity="center"
android:text="Add to Basket"
android:textColor="#color/white"
android:textSize="#dimen/SmallTextSize"
android:textStyle="bold" />
</RelativeLayout>

Use LinearLayout instead of RelativeLayout as below :-
<LinearLayout
android:id="#+id/btnAddToBasket"
android:layout_width="wrap_content"
android:layout_height="#dimen/productDetailsAddToBasketHeight"
android:layout_alignParentRight="true"
android:layout_gravity="center_horizontal"
android:background="#drawable/green_add_to_basket_button"
android:clickable="true"
android:orientation="horizontal">
<TextView
android:id="#+id/lblAddToBasket"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="5dip"
android:layout_marginRight="4dip"
android:gravity="center"
android:text="Add to Basket"
android:textColor="#android:color/white"
android:textSize="#dimen/SmallTextSize"
android:textStyle="bold" />
<ImageView
android:id="#+id/imgHalfCircle"
android:layout_width="10dip"
android:layout_height="match_parent"
android:layout_marginBottom="2dip"
android:scaleType="fitXY"
android:src="#drawable/add_to_basket_half_black" />
<ImageView
android:id="#+id/imgBasketIcon"
android:layout_width="#dimen/productDetailsAddToBasketHeight"
android:layout_height="match_parent"
android:background="#drawable/green_add_to_basket_icon"
android:padding="5dip"
android:scaleType="fitCenter"
android:src="#drawable/basket_reverse_icon" />
</LinearLayout>
or if you want to use Relative Layout refer below XML
<RelativeLayout
android:id="#+id/btnAddToBasket"
android:layout_width="wrap_content"
android:layout_height="#dimen/productDetailsAddToBasketHeight"
android:layout_alignParentRight="true"
android:layout_gravity="center_horizontal"
android:background="#drawable/green_add_to_basket_button"
android:clickable="true"
android:orientation="horizontal">
<ImageView
android:id="#+id/imgBasketIcon"
android:layout_width="#dimen/productDetailsAddToBasketHeight"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:background="#drawable/green_add_to_basket_icon"
android:padding="5dip"
android:scaleType="fitCenter"
android:layout_toRightOf="#+id/imgHalfCircle"
android:src="#drawable/basket_reverse_icon" />
<ImageView
android:id="#+id/imgHalfCircle"
android:layout_width="10dip"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_marginBottom="2dip"
android:layout_toRightOf="#+id/lblAddToBasket"
android:scaleType="fitXY"
android:src="#drawable/add_to_basket_half_black" />
<TextView
android:id="#+id/lblAddToBasket"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_marginLeft="5dip"
android:layout_marginRight="4dip"
android:gravity="center"
android:text="Add to Basket"
android:textColor="#android:color/white"
android:textSize="#dimen/SmallTextSize"
android:textStyle="bold" />
</RelativeLayout>

please try this. share to improvement.
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout android:id="#+id/btnAddToBasket"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="right"
android:orientation="horizontal"
android:layout_alignParentRight="true"
android:layoutDirection="rtl"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView
android:id="#+id/imgBasketIcon"
android:layout_width="30dp"
android:layout_height="match_parent"
android:background="#drawable/email_line"
android:padding="5dip"
android:layout_gravity="right"
android:scaleType="fitCenter"
/>
<ImageView
android:id="#+id/imgHalfCircle"
android:layout_width="30dp"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:scaleType="fitXY"
android:layout_gravity="end"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/imgHalfCircl"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/email_line" />
<ImageView
android:id="#+id/imgHalfCirl"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/imgHalfCrcl"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/email_line" />
<ImageView
android:id="#+id/imgHafCirl"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/logo" />
<ImageView
android:id="#+id/imgHafCrl"
android:layout_width="30dp"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="#drawable/logo" />
</LinearLayout>
</RelativeLayout>

Android XML resize / fit ImageButton different screens

I made ImageButton menu design in the hopes that its size can adjust the screen:
but after I test using with smartphone 3-inch 320x480
, 4-inch 480x800, 5-inch 720x1280, view ImageButton is mess.
I've tried using TableLayout, LinearLayout, GridLayout,
and FrameLayout, but the result is the same.
Thank you in advance.This picture my trial results
This my 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="match_parent"
android:background="#drawable/bg"
android:orientation="vertical"
tools:context=".MainActivity" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:id="#+id/linear1">
<ImageView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:src="#drawable/title"
android:contentDescription="title"/>
</LinearLayout>
<ImageButton
android:id="#+id/imagebutton0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/linear1"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="0"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_toLeftOf="#+id/imagebutton4"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="2"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="4"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton0"
android:layout_toRightOf="#+id/imagebutton4"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="3"
tools:ignore="contentDescription" />
<ImageButton
android:id="#+id/imagebutton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imagebutton4"
android:layout_centerHorizontal="true"
android:scaleType="fitXY"
android:background="#drawable/image"
android:tag="1"
tools:ignore="contentDescription" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal|center_vertical"
android:orientation="horizontal"
android:layout_alignParentBottom="true"
android:id="#+id/linear2"
android:layout_below="#+id/imagebutton1">
<TextView
android:id="#+id/ib1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib1"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib2"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib3"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
<TextView
android:id="#+id/ib4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_weight="1"
android:drawableTop="#drawable/ib4"
android:gravity="center"
android:text=""
android:scaleType="fitXY"/>
</LinearLayout>
</RelativeLayout>

I created a scratch which will define layout with linear and weight
I hope it will help you out
Also attached code with screen shots
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.4"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitCenter"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.5"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.1"
android:gravity="center"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="#mipmap/ic_launcher" />
</LinearLayout>
</LinearLayout>

How to fully fill the image button with images?

I have these image buttons, the image for the image button are store in the
drawable file. However, i just cannot fill the image button with the image.
There will still be some empty space left which make it not that beautiful.
Is there any way to make the image button fully fill with image? Here shows
my image button xml code.
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/ScrollView01"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<RelativeLayout
android:id="#+id/RelativeLayout01"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
android:paddingBottom="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<LinearLayout
android:id="#+id/LinearLayout01"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="60dp"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/homepage"
android:layout_marginLeft="80dp"/>
<Button
style="?android:attr/buttonStyleSmall"
android:layout_width="85dp"
android:layout_height="wrap_content"
android:text="Login"
android:id="#+id/buttonSignUP"
android:layout_gravity="right"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<SearchView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/searchView"
android:layout_below="#+id/viewFlipper"
android:layout_alignParentStart="true"
android:text="Search a product"
android:layout_alignParentEnd="true"
android:layout_marginTop="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Featured promotion"
android:id="#+id/textView"
android:layout_below="#+id/searchView"
android:layout_alignParentStart="true"
android:layout_marginTop="20dp" />
<ViewFlipper
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/view_flipper"
android:layout_alignEnd="#+id/imageButton2"
android:layout_marginTop="20dp">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner5" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner6" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner7" />
</RelativeLayout>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:adjustViewBounds="true"
android:src="#drawable/banner8" />
</RelativeLayout>
</ViewFlipper>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Categories"
android:id="#+id/textView2"
android:layout_below="#+id/textView"
android:layout_marginTop="40dp" />
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton"
android:layout_below="#+id/textView2"
android:src="#drawable/fashion"
android:layout_toStartOf="#+id/imageButton3" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton2"
android:layout_alignParentEnd="true"
android:layout_below="#+id/textView2"
android:src="#drawable/book"
android:layout_above="#+id/imageButton5"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton3"
android:src="#drawable/sport"
android:layout_alignTop="#+id/imageButton2"
android:layout_centerHorizontal="true"
android:layout_alignBottom="#+id/imageButton2"
android:layout_gravity="center_vertical" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton4"
android:layout_below="#+id/imageButton"
android:layout_alignParentStart="true"
android:src="#drawable/healthcare"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton5"
android:layout_alignTop="#+id/imageButton4"
android:layout_alignEnd="#+id/imageButton2"
android:src="#drawable/computer"
android:layout_alignBottom="#+id/imageButton4"
android:layout_alignStart="#+id/imageButton2" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton6"
android:layout_alignBottom="#+id/imageButton4"
android:src="#drawable/phone"
android:layout_alignTop="#+id/imageButton4"
android:layout_alignEnd="#+id/imageButton3"
android:layout_toEndOf="#+id/imageButton4"
android:layout_marginLeft="40dp"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20dp"
android:layout_marginLeft="20dp">
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton7"
android:src="#drawable/stationary"
android:layout_below="#+id/imageButton4"
android:layout_alignParentStart="true" />
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton8"
android:src="#drawable/others"
android:layout_below="#+id/imageButton5"
android:layout_alignStart="#+id/imageButton6"
android:layout_alignEnd="#+id/imageButton6"
android:layout_marginLeft="40dp"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</ScrollView>

Yes you can use android:scaleType="fitXY"
OR
android:scaleType="fitCenter"
For eg.
<ImageButton
android:id="#+id/imageButton"
android:layout_width="120dp"
android:layout_height="100dp"
android:layout_below="#+id/textView2"
android:adjustViewBounds="true"
android:background="#null"
android:src="#drawable/fashion"
android:scaleType="fitCenter" />

Well you can use the android:scaleType attribute to fill the ImageButton. I generally use fitXY or fitCenter to cover the ImageButton with the image. To remove gray background, use android:background="#null". For example -
<ImageButton
android:layout_width="120dp"
android:layout_height="100dp"
android:id="#+id/imageButton2"
android:layout_alignParentEnd="true"
android:layout_below="#+id/textView2"
android:src="#drawable/book"
android:layout_above="#+id/imageButton5"
android:layout_gravity="center_vertical"
android:layout_marginLeft="40dp"
android:scaleType="fitXY"
android:background="#null" />

Add ScaleType
android:scaleType="fitXY"
and Background as null to remove grey background
android:background="#null"

you can use android:scaleType="fitXY"

Develop Reference

The Android operating system is a mobile operating system that was developed by Google (GOOGL?) to be primarily used for touchscreen devices, cell phones, and tablets.

Android ImageView doesn't fit with larger screens - android

use android:background="#drawable/savings"

Related

Android: Imageview getting resized while the height of the object above is altered

How do i make my buttons fixed at the top with scroll view?

How can use wrap-content for Relative Layout Without fill Parent

Android XML resize / fit ImageButton different screens

How to fully fill the image button with images?

Categories

Resources