auto adjust button size to screensize?

3
votes

I am new to android development and im trying to create and app with a grid menu, Menu.

I am trying to make them auto adjust according to screensize, i tried to use layout_weight but that didnt do anything. Any suggestions?

<?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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="nl.drieo.soundwave.test.cms.MainComponents"
android:background="@drawable/background2" >

<SearchView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/searchView"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:background="#f0f0f0"
    android:layout_marginBottom="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/content"
    android:id="@+id/btContent"
    android:drawableTop="@drawable/ic_menu"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:textStyle="bold"
    android:layout_below="@+id/searchView"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btBanner"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Overzichten"
    android:id="@+id/btCollection"
    android:drawableTop="@drawable/ic_collection"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:textStyle="bold"
    android:layout_below="@+id/btContent"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btGroup"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Nieuws"
    android:id="@+id/btNewsItem"
    android:drawableTop="@drawable/ic_news"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:layout_alignParentStart="true"
    android:textStyle="bold"
    android:layout_below="@+id/btGroup"
    android:layout_marginBottom="10dp"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btNewsLetter"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Agenda"
    android:id="@+id/btAgendaItem"
    android:drawableTop="@drawable/ic_agenda"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:layout_below="@+id/btNewsItem"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:textStyle="bold"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btlabel"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/FotoAlbums"
    android:id="@+id/btPhotoAlbum"
    android:drawableTop="@drawable/ic_photoalbum"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:layout_below="@+id/btAgendaItem"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:textStyle="bold"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btMenuItem"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Banner"
    android:id="@+id/btBanner"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_banner"
    android:padding="10dp"
    android:textColor="#000000"
    android:textStyle="bold"
    android:layout_alignTop="@+id/btContent"
    android:layout_alignStart="@+id/btGroup"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Groepen"
    android:id="@+id/btGroup"
    android:drawableTop="@drawable/ic_group"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:textStyle="bold"
    android:layout_alignTop="@+id/btCollection"
    android:layout_alignStart="@+id/btNewsLetter"
    android:layout_marginBottom="10dp"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/NieuwsBrieven"
    android:id="@+id/btNewsLetter"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_newsletter"
    android:padding="10dp"
    android:textColor="#000000"
    android:layout_alignTop="@+id/btNewsItem"
    android:layout_alignParentEnd="true"
    android:textStyle="bold"
    android:layout_marginBottom="10dp"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Label"
    android:id="@+id/btlabel"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_label"
    android:padding="10dp"
    android:textColor="#000000"
    android:layout_alignTop="@+id/btAgendaItem"
    android:layout_alignParentEnd="true"
    android:textStyle="bold"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Menu"
    android:id="@+id/btMenuItem"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_content"
    android:padding="10dp"
    android:textColor="#000000"
    android:layout_alignTop="@+id/btPhotoAlbum"
    android:layout_alignParentEnd="true"
    android:textStyle="bold"
    android:alpha="0.65" />

How i thought i had to use PercentRelativeLayout.

<?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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="nl.drieo.soundwave.test.cms.MainComponents"
android:background="@drawable/background2"
android:orientation="vertical">

<SearchView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/searchView"
    android:layout_alignParentTop="true"
    android:layout_alignParentStart="true"
    android:background="#f0f0f0"
    android:layout_marginBottom="10dp"/>
<android.support.percent.PercentRelativeLayout
    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">

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/content"
    android:id="@+id/btContent"
    android:drawableTop="@drawable/ic_menu"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:textStyle="bold"
    android:layout_below="@+id/searchView"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btBanner"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Overzichten"
    android:id="@+id/btCollection"
    android:drawableTop="@drawable/ic_collection"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:textStyle="bold"
    android:layout_below="@+id/btContent"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btGroup"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Nieuws"
    android:id="@+id/btNewsItem"
    android:drawableTop="@drawable/ic_news"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:layout_alignParentStart="true"
    android:textStyle="bold"
    android:layout_below="@+id/btGroup"
    android:layout_marginBottom="10dp"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btNewsLetter"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Agenda"
    android:id="@+id/btAgendaItem"
    android:drawableTop="@drawable/ic_agenda"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:layout_below="@+id/btNewsItem"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:textStyle="bold"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btlabel"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/FotoAlbums"
    android:id="@+id/btPhotoAlbum"
    android:drawableTop="@drawable/ic_photoalbum"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:layout_below="@+id/btAgendaItem"
    android:layout_alignParentStart="true"
    android:layout_marginBottom="10dp"
    android:textStyle="bold"
    android:alpha="0.65"
    android:layout_toStartOf="@+id/btMenuItem"
    android:layout_marginRight="10dp"/>

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Banner"
    android:id="@+id/btBanner"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_banner"
    android:padding="10dp"
    android:textColor="#000000"
    android:textStyle="bold"
    android:layout_alignTop="@+id/btContent"
    android:layout_alignStart="@+id/btGroup"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Groepen"
    android:id="@+id/btGroup"
    android:drawableTop="@drawable/ic_group"
    android:padding="10dp"
    android:textColor="#000000"
    android:background="#f0f0f0"
    android:textStyle="bold"
    android:layout_alignTop="@+id/btCollection"
    android:layout_alignStart="@+id/btNewsLetter"
    android:layout_marginBottom="10dp"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/NieuwsBrieven"
    android:id="@+id/btNewsLetter"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_newsletter"
    android:padding="10dp"
    android:textColor="#000000"
    android:layout_alignTop="@+id/btNewsItem"
    android:layout_alignParentEnd="true"
    android:textStyle="bold"
    android:layout_marginBottom="10dp"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Label"
    android:id="@+id/btlabel"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_label"
    android:padding="10dp"
    android:textColor="#000000"
    android:layout_alignTop="@+id/btAgendaItem"
    android:layout_alignParentEnd="true"
    android:textStyle="bold"
    android:alpha="0.65" />

<Button
    android:layout_width="160dp"
    android:layout_height="80dp"
    android:text="@string/Menu"
    android:id="@+id/btMenuItem"
    android:background="#f0f0f0"
    android:drawableTop="@drawable/ic_content"
    android:padding="10dp"
    android:textColor="#000000"
    android:layout_alignTop="@+id/btPhotoAlbum"
    android:layout_alignParentEnd="true"
    android:textStyle="bold"
    android:alpha="0.65" />
</android.support.percent.PercentRelativeLayout>

Dependencies currently: compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile group: 'org.apache.httpcomponents', name: 'httpclient-android', version: '4.3.5.1' compile group: 'cz.msebera.android' , name: 'httpclient', version: '4.4.1.1' compile 'com.android.support:appcompat-v7:23.2.0' compile 'com.android.support:design:23.2.0' compile 'com.android.support:support-v4:23.2.0' compile 'com.android.support:percent:23.2.0'

2
javaandroidxmlmenu
i tried to use layout_weight but that didnt do anything. Well, you are using a RelativeLayout, while weights only work in a LinearLayout (and derived containers) - Phantômaxx
Do you want the buttons to autoadujst? If you do so,from your XML it seems like you have to do it programmatically by getting the width and height of the screen than adjust the buttons to it. Or you could use LinearLayout with weightSum ? You could look into this here :developer.android.com/intl/ru/reference/android/widget/… - Victor
Yes i am trying to auto adjust, i want to try to make it with XML cause its a pretty big application and having to code it in is gonna be hard work. When converting to LinearLayout all the buttons are under each other, and i cant move them next to each other. - user6044834

2 Answers

0
votes

You can use LinearLayout with weightSUm. Or you can use google library PercentRelativeLayout with this library you can set weight and heigh of your views by percentage which is great because in all screen they look the same and of course it is not hard to code it. Here example:

<android.support.percent.PercentRelativeLayout
         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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

and official documentation by Google https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

UPDATE

Try some like this 

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
    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">

    <SearchView
        android:id="@+id/searchView"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="10dp"
        android:background="#f0f0f0"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="100%"/>

    <Button
        android:id="@+id/btContent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/searchView"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_toStartOf="@+id/btBanner"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="content"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btCollection"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btContent"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_toStartOf="@+id/btGroup"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="Overzichten"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btNewsItem"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btGroup"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_toStartOf="@+id/btNewsLetter"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="Nieuws"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btAgendaItem"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btNewsItem"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_toStartOf="@+id/btlabel"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="Agenda"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btPhotoAlbum"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignParentStart="true"
        android:layout_below="@+id/btAgendaItem"
        android:layout_marginBottom="10dp"
        android:layout_marginRight="10dp"
        android:layout_toStartOf="@+id/btMenuItem"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="FotoAlbums"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btBanner"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignStart="@+id/btGroup"
        android:layout_alignTop="@+id/btContent"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="Banner"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btGroup"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignStart="@+id/btNewsLetter"
        android:layout_alignTop="@+id/btCollection"
        android:layout_marginBottom="10dp"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="Groepen"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btNewsLetter"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignParentEnd="true"
        android:layout_alignTop="@+id/btNewsItem"
        android:layout_marginBottom="10dp"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="NieuwsBrieven"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btlabel"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignParentEnd="true"
        android:layout_alignTop="@+id/btAgendaItem"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="Label"
        android:textColor="#000000"
        android:textStyle="bold"/>

    <Button
        android:id="@+id/btMenuItem"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        android:layout_alignParentEnd="true"
        android:layout_alignTop="@+id/btPhotoAlbum"
        android:alpha="0.65"
        android:background="#f0f0f0"
        android:drawableTop="@drawable/ic_launcher"
        android:padding="10dp"
        android:text="Menu"
        android:textColor="#000000"
        android:textStyle="bold"/>

</android.support.percent.PercentRelativeLayout>

and add this line in your build.gradle

dependencies {
    compile 'com.android.support:percent:23.2.0'
}
0
votes

Why don't you try RecyclerView. Here is a nice tutorial to get you going for autofit. http://blog.sqisland.com/2014/12/recyclerview-autofit-grid.html?m=1