user6044834
Reputation:
auto adjust button size to screensize?
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'
Upvotes: 3
Views: 112
Answers (2)
Kristiyan Varbanov
Reputation: 2509
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'
}
Upvotes: 0
Keshav
Reputation: 577
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
Upvotes: 0
Related Questions
- Xamarin Android: Change the background color of a GridView item when clicked
- Auto Scale TextView Text to Fit within Bounds
- Android changing Floating Action Button color
- Standard Android Button with a different color
- Adjust icon size of Floating action button (fab)
- How To Auto-Format / Indent XML/HTML in Notepad++
- Error when starting a new activity Android